react-ui-basics 0.0.180 → 0.0.181

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.180",
+  "version": "0.0.181",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/router/Route.js

@@ -6,7 +6,7 @@ import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { setOf, allPropsExcept, isDifferent, addEventListener, removeEventListener, WINDOW, orNoop } from '../Tools.js';
+import { setOf, allPropsExcept, isDifferent, addEventListener, WINDOW, removeEventListener, orNoop } from '../Tools.js';
 import { stateGSs, componentDidUpdate, render, componentDidMount, componentWillUnmount, propsGetter, setState, PureComponent } from '../ReactConstants.js';
 
 var historyEvents = ['popstate', 'pushState', 'replaceState'];

package/src/DNDContainer.tsx

@@ -0,0 +1,315 @@
+import React, {Component} from 'react';
+import ReactCreateElement from './ReactCreateElement';
+import './DNDContainer.css'
+import {
+    classNames,
+    NOOP,
+    orNoop,
+    preventDefault,
+    DOCUMENT,
+    WINDOW,
+    addEventListener,
+    removeEventListener,
+    setTimeout,
+    clearTimeout,
+    requestAnimationFrame,
+    stopPropagation,
+    createRef,
+    UNDEFINED
+} from "./Tools";
+import {propsGetter, render, componentDidMount} from "./ReactConstants";
+
+const clearSelection = () => {
+    const getSelection = WINDOW.getSelection;
+    if (getSelection) {
+        if (getSelection().empty) {  // Chrome
+            getSelection().empty();
+        } else if (getSelection().removeAllRanges) {  // Firefox
+            getSelection().removeAllRanges();
+        }
+    } else if (DOCUMENT.selection) {  // IE?
+        DOCUMENT.selection.empty();
+    }
+};
+
+export interface DNDContainerProps {
+    provideDraggableInitializer: (f) => void,
+    provideDroppableInitializer: (f) => void,
+    className?: string,
+    children?
+}
+
+interface DNDContainerState {
+    draggable: any
+}
+
+class DNDContainer extends Component<DNDContainerProps, DNDContainerState> {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {
+            draggable: null,
+        };
+
+        const props = propsGetter(that);
+        const containerRef = createRef()
+
+        let draggable;
+        let data;
+        let scrollOffsetX;
+        let scrollOffsetY;
+
+        const droppables = [];
+        let positionListener: (e: MouseEvent) => void;
+        positionListener = NOOP
+
+        that[render] = () => {
+            const {children, className} = props();
+            const {draggable} = that.state;
+            return <div className={classNames('DNDContainer', className)} ref={containerRef}>
+                {children}
+                <div className="overlay">{draggable}</div>
+            </div>;
+        };
+
+
+        const onDrag = (e) => {
+            if (!draggable)
+                return;
+
+            positionListener(e);
+            // that[droppables].forEach(it => it.isHover(e, draggable))
+        };
+        const onDragStart = (e) => {
+            e.stopPropagation && stopPropagation(e)
+            droppables.forEach(it => it.onDragStart(e, draggable))
+        };
+        const onDragEnd = () => {
+            const d = draggable;
+            if (!d) return
+
+            if (d.element) {
+                let style = d.element.style;
+                style.position = '';
+                style.pointerEvents = '';
+                style.width = ``;
+                style.height = ``;
+                style.opacity = '';
+            }
+            d.setState({dragged: false});
+
+            that.setState({draggable: null});
+
+            droppables.forEach(it => {
+                it.onDragEnd();
+                orNoop(it.props.onDragEnd)(d)
+            });
+            data = null;
+            draggable = null;
+        };
+
+        const draggableInitializer = (item) => {
+            const handle = item.props.handle;
+            const draggableElement = (handle && item.element.childNodes[0]) || item.element;
+            draggableElement.draggable = true;
+
+            const dragStartListener = (e) => {
+                clearSelection();
+                const container = containerRef();
+                data = item.props.data;
+                draggable = item;
+                scrollOffsetX = e.pageX - e.clientX;
+                scrollOffsetY = e.pageY - e.clientY;
+                const dataTransfer = e.dataTransfer;
+                const itemOffset = item.element.getBoundingClientRect();
+
+                item.width = itemOffset.width;
+                item.height = itemOffset.height;
+
+                let clone = orNoop(item.props.copy)((it) => {
+                    let style = it.element.style;
+
+                    const offsetLeft = totalOffsetLeft(container) + (e.clientX - itemOffset.left);
+                    const offsetTop = totalOffsetTop(container) + (e.clientY - itemOffset.top);
+                    positionListener = (orNoop(it.createPositionListener)(e, style, itemOffset, container) || ((e) => {
+                        if (e.pageX === 0)
+                            return;
+
+                        style.transform = 'translate(' + (e.pageX - offsetLeft) + 'px, ' + (e.pageY - offsetTop) + 'px)';
+                    })) as (e: MouseEvent) => void;
+
+
+                    requestAnimationFrame(() => {
+                        if (dataTransfer && !dataTransfer.setDragImage) {
+                            style.opacity = '0'; // hide dragged element in ie and edge
+                        }
+                        if (it.initDraggedStyles)
+                            it.initDraggedStyles(style, itemOffset);
+                        else {
+                            style.position = 'absolute';
+                            style.pointerEvents = 'none';
+                            style.opacity = '1';
+                            style.top = '0px';
+                            style.left = '0px';
+                            style.width = itemOffset.width + 'px';
+                            style.height = itemOffset.height + 'px';
+                        }
+
+                        onDrag(e);
+                        it.setState({dragged: true});
+                    });
+                    return it;
+                }, 'copy', item);
+
+                dataTransfer && dataTransfer.setData && dataTransfer.setData('text', ''); // required by firefox
+                dataTransfer && (dataTransfer.dropEffect = "move");
+                if (clone) {
+                    if (dataTransfer && dataTransfer.setDragImage) {
+                        clone !== item && that.setState({draggable: clone});
+                        const img = document.createElement('img');
+                        img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+                        dataTransfer.setDragImage(img, 0, 0);
+                    }
+                }
+                onDragStart(e);
+                setTimeout(() => item.setState({placeholder: true}), 1)
+            };
+            addListener(draggableElement, item, 'dragend', (e) => {
+                if (item.state.placeholder)
+                    item.setState({placeholder: false}, item.forceUpdate);
+                onDragEnd()
+            });
+            addListener(draggableElement, item, 'dragstart', dragStartListener);
+
+            let longTouch;
+            let dragStarted = false;
+            let dragged = false;
+            addListener(draggableElement, item, 'touchstart', e => {
+                if (e.touches.length > 1)
+                    return;
+
+                stopPropagation(e)
+                preventDefault(e)
+                dragged = dragStarted = false;
+                const touch = e.targetTouches[0];
+                longTouch = setTimeout(() => longTouch && (dragStarted = true) && (longTouch = dragStartListener(touch)), !handle ? 500 : 0)
+            });
+
+            addListener(draggableElement, item, 'touchmove', e => {
+                if (longTouch) {
+                    longTouch = clearTimeout(longTouch);
+                    return;
+                }
+                if (!dragStarted)
+                    return;
+
+                if (e.touches.length > 1)
+                    return;
+
+                preventDefault(e);
+                dragged = true;
+                const touch = e.targetTouches[0];
+                positionListener(touch);
+                droppables.forEach(it => it.isHover(touch, item))
+            });
+
+            addListener(draggableElement, item, 'touchend', e => {
+                longTouch = clearTimeout(longTouch);
+                if (!dragged)
+                    return;
+
+                item.setState({placeholder: false}, item.forceUpdate);
+                if (e.touches.length > 0)
+                    return;
+
+                droppables.forEach(it => it.dropIfHover());
+                onDragEnd();
+            });
+        }
+
+        const droppableInitializer = (item) => {
+            droppables.push(item);
+
+            addEventListener(item.element, 'drop', (e) => {
+                if (item.state.allow) {
+                    preventDefault(e);
+                    stopPropagation(e)
+                    data && orNoop(item.props.onDrop)(data);
+                }
+            }, false);
+            addEventListener(item.element, 'dragenter', (e) => {
+                if (item.state.allow) {
+                    preventDefault(e);
+                    item.isHover(e, draggable, true)
+                }
+            });
+            addEventListener(item.element, 'dragleave', (e) => {
+                if (item.state.allow) {
+                    preventDefault(e);
+                    item.isHover(e, draggable, false)
+                }
+            });
+
+            item.onDragStart = (e, draggable) => {
+                item.bounds = item.element.getBoundingClientRect();
+                let allow = (orNoop(item.props.onDragStart)(e, data));
+                if (allow === UNDEFINED)
+                    allow = true
+                item.setState({allow});
+            };
+            item.isHover = (e, draggable, hover) => {
+                const bounds = item.bounds;
+                if (!bounds)
+                    return;
+
+                if (hover === UNDEFINED) {
+                    let y = e.pageY - scrollOffsetY;
+                    let x = e.pageX - scrollOffsetX;
+                    hover = bounds.left <= x && bounds.right >= x && bounds.top <= y && bounds.bottom >= y;
+                }
+
+                hover && orNoop(item.props.onHover)(e, draggable);
+
+                if (hover)
+                    !item.state.hover && item.setState({hover}, item.forceUpdate);
+                else
+                    item.state.hover && item.setState({hover}, item.forceUpdate);
+            };
+            item.dropIfHover = () => {
+                data && item.state.hover && orNoop(item.props.onDrop)(data);
+            };
+            item.onDragEnd = () => {
+                orNoop(orNoop(draggable)['onDragEnd'])();
+                item.setState({allow: false, hover: false});
+            };
+            item.onUnmount = () => droppables.splice(droppables.indexOf(item), 1);
+        }
+
+        that[componentDidMount] = () => {
+            const {
+                provideDraggableInitializer,
+                provideDroppableInitializer,
+            } = props();
+
+            orNoop(provideDraggableInitializer)(draggableInitializer);
+            orNoop(provideDroppableInitializer)(droppableInitializer);
+            addEventListener(containerRef(), 'dragover', onDrag, {capture: true, passive: true})
+        }
+    }
+}
+
+export const removeListener = (el, item, type) => item[type] && removeEventListener(el, type, item[type]);
+export const addListener = (el, item, type, listener) => {
+    removeListener(el, item, type);
+    addEventListener(el, type, item[type] = listener);
+};
+
+const totalOffsetTop = (el) => {
+    return el.getBoundingClientRect().top + (WINDOW.pageYOffset || DOCUMENT.documentElement.scrollTop);
+};
+const totalOffsetLeft = (el) => {
+    return el.getBoundingClientRect().left + (WINDOW.pageXOffset || DOCUMENT.documentElement.scrollLeft);
+};
+
+export default DNDContainer;

package/src/DNDDroppable.js

@@ -45,8 +45,10 @@ class Droppable extends PureComponent {
                     _state[allow] && allow,
                 )}
                         onDragOver={e => {
-                            preventDefault(e);
-                            stopPropagation(e);
+                            if (_state[allow]) {
+                                preventDefault(e);
+                                stopPropagation(e);
+                            }
                         }}
                         ref={ref('element', that)}>
                 {_props[ReactConstants[4]]}

package/src/DatePicker.tsx

@@ -35,7 +35,7 @@ export interface DatePickerProps {
     value: Date
     minDate?: Date
     formatter: (date: Date) => string
-    parser: (date: string) => Date
+    parser: (input: string) => Date
     onChange: (e) => void
     dayOfWeekToString: (day: number) => string | JSX.Element
     monthToString: (day: number) => string | JSX.Element
@@ -54,22 +54,24 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
 
     constructor(props: DatePickerProps) {
         super(props);
-        const date = props.value || new Date();
+        const value = props.value;
         this.state = {
             focused: false,
-            value: date,
-            text: props.formatter(date),
-            selectedMonth: DateTools.dateOf(date).resetTime().set(1, DateTools.TimeUnit.DAY),
+            value,
+            text: props.formatter(value),
+            selectedMonth: DateTools.dateOf(value || new Date()).resetTime().set(1, DateTools.TimeUnit.DAY),
         };
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        if (this.props.value !== prevProps.value)
+        if (this.props.value !== prevProps.value) {
+            const value = this.props.value
             this.setState({
-                value: this.props.value,
-                selectedMonth: DateTools.dateOf(this.props.value).resetTime().set(1, DateTools.TimeUnit.DAY),
-                text: this.props.formatter(this.props.value)
+                value,
+                selectedMonth: DateTools.dateOf(value || new Date()).resetTime().set(1, DateTools.TimeUnit.DAY),
+                text: this.props.formatter(value)
             })
+        }
     };
 
     componentDidMount() {
@@ -117,8 +119,8 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
                            const text = e.target.value;
                            try {
                                const date = parser(text);
-                               if (date instanceof Date && !Number.isNaN(date.getTime())) {
-                                   if (date && value.getTime() !== date.getTime())
+                               if (date && date instanceof Date && !Number.isNaN(date.getTime())) {
+                                   if (!value || !DateTools.equals(value, date))
                                        this.onChange(date);
                                }
                                this.setState({text})

package/src/DNDContainer.js

@@ -1,263 +0,0 @@
-import ReactConstants from "./../ReactConstants";
-import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields";
-import React, {Component} from 'react';
-import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
-import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
-import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
-import './DNDContainer.css';
-import ReactCreateElement from './ReactCreateElement';
-import './DNDContainer.css'
-import {classNames, NOOP, orNoop, preventDefault, ref, DOCUMENT, WINDOW, addEventListener, removeEventListener, setTimeout, clearTimeout, requestAnimationFrame} from "./Tools";
-
-const clearSelection = () => {
-    const getSelection = WINDOW.getSelection;
-    if (getSelection) {
-        if (getSelection().empty) {  // Chrome
-            getSelection().empty();
-        } else if (getSelection().removeAllRanges) {  // Firefox
-            getSelection().removeAllRanges();
-        }
-    } else if (DOCUMENT.selection) {  // IE?
-        DOCUMENT.selection.empty();
-    }
-};
-
-const droppables = 'ds';
-const positionListener = 'pl';
-
-class DNDContainer extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            draggable: null,
-        };
-
-        this[droppables] = [];
-        this[positionListener] = NOOP;
-    }
-
-    render() {
-        const {children, className} = __props(this);
-        const {draggable} = __state(this);
-        return <div className={classNames('DNDContainer', className)} ref={ref('container', this)}>
-            {children}
-            <div className="overlay">{draggable}</div>
-        </div>;
-    };
-
-    componentDidMount() {
-        const {
-            provideDraggableInitializer,
-            provideDroppableInitializer,
-        } = __props(this);
-
-        orNoop(provideDraggableInitializer)(this.draggableInitializer);
-        orNoop(provideDroppableInitializer)(this.droppableInitializer);
-        addEventListener(this.container, 'dragover', this.onDrag, {capture: true, passive: true})
-    };
-
-    draggableInitializer = (item) => {
-        const handle = __props(item).handle;
-        const draggableElement = (handle && item.element.childNodes[0]) || item.element;
-        draggableElement.draggable = true;
-
-        const dragStartListener = (e) => {
-            clearSelection();
-            const container = this.container;
-            this.data = __props(item).data;
-            this.draggable = item;
-            this.scrollOffsetX = __pageX(e) - e.clientX;
-            this.scrollOffsetY = __pageY(e) - e.clientY;
-            const dataTransfer = e.dataTransfer;
-            const itemOffset = item.element.getBoundingClientRect();
-
-            item.width = __width(itemOffset);
-            item.height = __height(itemOffset);
-
-            let clone = orNoop(__props(item).copy)((it) => {
-                let style = it.element.style;
-
-                const offsetLeft = totalOffsetLeft(container) + (e.clientX - __left(itemOffset));
-                const offsetTop = totalOffsetTop(container) + (e.clientY - __top(itemOffset));
-                this[positionListener] = orNoop(it.createPositionListener)(e, style, itemOffset, container) || ((e) => {
-                    if (__pageX(e) === 0)
-                        return;
-
-                    style.transform = 'translate(' + (__pageX(e) - offsetLeft) + 'px, ' + (__pageY(e) - offsetTop) + 'px)';
-                });
-
-
-                requestAnimationFrame(() => {
-                    if (dataTransfer && !dataTransfer.setDragImage) {
-                        style.opacity = '0'; // hide dragged element in ie and edge
-                    }
-                    if (it.initDraggedStyles)
-                        it.initDraggedStyles(style, itemOffset);
-                    else {
-                        style.position = 'absolute';
-                        style.pointerEvents = 'none';
-                        style.opacity = '1';
-                        style.top = '0px';
-                        style.left = '0px';
-                        style.width = __width(itemOffset) + 'px';
-                        style.height = __height(itemOffset) + 'px';
-                    }
-
-                    this.onDrag(e);
-                    it.setState({dragged: true});
-                });
-                return it;
-            }, 'copy', item);
-
-            dataTransfer && dataTransfer.setData && dataTransfer.setData('text', ''); // required by firefox
-            dataTransfer && (dataTransfer.dropEffect = "move");
-            if (clone) {
-                if (dataTransfer && dataTransfer.setDragImage) {
-                    clone !== item && this.setState({draggable: clone});
-                    const img = document.createElement('img');
-                    img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-                    dataTransfer.setDragImage(img, 0, 0);
-                }
-            }
-            this.onDragStart(e);
-            setTimeout(() => item.setState({placeholder: true}), 1)
-        };
-        addListener(draggableElement, item, 'dragend', (e) => {
-            item.setState({placeholder: false});
-            this.onDragEnd()
-        });
-        addListener(draggableElement, item, 'dragstart', dragStartListener);
-
-        let longTouch;
-        let dragStarted = false;
-        let dragged = false;
-        addListener(draggableElement, item, 'touchstart', e => {
-            if (e.touches.length > 1)
-                return;
-
-            dragged = dragStarted = false;
-            const touch = e.targetTouches[0];
-            longTouch = setTimeout(() => longTouch && (dragStarted = true) && (longTouch = dragStartListener(touch)), !handle ? 500 : 0)
-        });
-
-        addListener(draggableElement, item, 'touchmove', e => {
-            if (longTouch) {
-                longTouch = clearTimeout(longTouch);
-                return;
-            }
-            if (!dragStarted)
-                return;
-
-            if (e.touches.length > 1)
-                return;
-
-            preventDefault(e);
-            dragged = true;
-            const touch = e.targetTouches[0];
-            this[positionListener](touch);
-            this[droppables].forEach(it => it.isHover(touch, item))
-        });
-
-        addListener(draggableElement, item, 'touchend', e => {
-            longTouch = clearTimeout(longTouch);
-            if (!dragged)
-                return;
-
-            item.setState({placeholder: false});
-            if (e.touches.length > 0)
-                return;
-
-            this[droppables].forEach(it => it.dropIfHover());
-            this.onDragEnd();
-        });
-    };
-
-
-    droppableInitializer = (item) => {
-        this[droppables].push(item);
-
-        addEventListener(item.element, 'drop', (e) => {
-            preventDefault(e);
-            __data(this) && orNoop(__props(item).onDrop)(__data(this));
-        }, false);
-
-        item.onDragStart = (e, draggable) => {
-            item.bounds = item.element.getBoundingClientRect();
-            item.setState({allow: true});
-            orNoop(__props(item).onDragStart)(e, draggable);
-        };
-        item.isHover = (e, draggable) => {
-            const bounds = item.bounds;
-            if (!bounds)
-                return;
-
-            let y = __pageY(e) - this.scrollOffsetY;
-            let x = __pageX(e) - this.scrollOffsetX;
-            let hover = __left(bounds) <= x && bounds.right >= x && __top(bounds) <= y && bounds.bottom >= y;
-
-            hover && orNoop(__props(item).onHover)(e, draggable);
-
-            if (hover)
-                !__state(item).hover && item.setState({hover});
-            else
-                __state(item).hover && item.setState({hover});
-        };
-        item.dropIfHover = () => {
-            __data(this) && __state(item).hover && orNoop(__props(item).onDrop)(__data(this));
-        };
-        item.onDragEnd = () => {
-            orNoop(orNoop(this.draggable).onDragEnd)();
-            item.setState({allow: false, hover: false});
-        };
-        item.onUnmount = () => this[droppables].splice(this[droppables].indexOf(item), 1);
-    };
-
-    onDrag = (e) => {
-        if (!this.draggable)
-            return;
-
-        this[positionListener](e);
-        this[droppables].forEach(it => it.isHover(e, this.draggable))
-    };
-    onDragStart = (e) => {
-        this[droppables].forEach(it => it.onDragStart(e, this.draggable))
-    };
-    onDragEnd = () => {
-        const draggable = this.draggable;
-        if (draggable.element) {
-            let style = draggable.element.style;
-            style.position = '';
-            style.pointerEvents = '';
-            style.width = ``;
-            style.height = ``;
-            style.opacity = '';
-        }
-        draggable.setState({dragged: false});
-
-        this.setState({draggable: null});
-
-        this[droppables].forEach(it => {
-            it.onDragEnd();
-            orNoop(__props(it).onDragEnd)(this.draggable)
-        });
-        this.data = null;
-        this.draggable = null;
-    };
-}
-
-export const removeListener = (el, item, type) => item[type] && removeEventListener(el, type, item[type]);
-export const addListener = (el, item, type, listener) => {
-    removeListener(el, item, type);
-    addEventListener(el, type, item[type] = listener);
-};
-
-const totalOffsetTop = (el) => {
-    return el.getBoundingClientRect().top + (WINDOW.pageYOffset || DOCUMENT.documentElement.scrollTop);
-};
-const totalOffsetLeft = (el) => {
-    return el.getBoundingClientRect().left + (WINDOW.pageXOffset || DOCUMENT.documentElement.scrollLeft);
-};
-
-export default DNDContainer;