react-ui-basics 0.0.180 → 0.0.182

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.180",
+  "version": "0.0.182",
   "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

@@ -32,10 +32,13 @@ const DayRenderer = ({day, selected, minDate, onClick}: {
 export interface DatePickerProps {
     id?: number | string
     name?: string
+    open?: boolean
+    onClose?: () => void
+    renderInput?: () => JSX.Element
     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,28 +57,36 @@ 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),
+            focused: !!props.open,
+            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)
             })
+        }
+        if (this.props.open !== prevProps.open) {
+            const open = !!this.props.open
+            this.setState({
+                focused: open
+            }, !open ? this.props.onClose : null)
+        }
     };
 
     componentDidMount() {
         document.addEventListener('mousedown', this.listener = (e) => {
             if (this.state.focused && !this.el.contains(e.target))
-                this.setState({focused: false});
+                this.setState({focused: false}, this.props.onClose);
         })
     };
 
@@ -90,6 +101,9 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
         if (!DateTools.equals(this.state.value, nextState.value))
             return true;
 
+        if (this.props.open !== nextProps.open)
+            return true;
+
         if (this.state.text !== nextState.text)
             return true;
 
@@ -106,32 +120,33 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
     };
 
     render() {
-        const {minDate, formatter, parser, dayOfWeekToString, monthToString} = this.props;
+        const {minDate, formatter, parser, dayOfWeekToString, monthToString, renderInput} = this.props;
         const {value, text, focused, selectedMonth} = this.state;
 
         return <div className={`DatePicker`} ref={el => this.el = el}>
-            <TextField id={'value'} value={text}
-                       autoComplete="off"
-                       onFocus={() => this.setState({focused: true})}
-                       onChange={e => {
-                           const text = e.target.value;
-                           try {
-                               const date = parser(text);
-                               if (date instanceof Date && !Number.isNaN(date.getTime())) {
-                                   if (date && value.getTime() !== date.getTime())
-                                       this.onChange(date);
-                               }
-                               this.setState({text})
-                           } catch (ignored) {
-                           }
-                       }}
-                       onKeyDown={e => {
-                           if ((e.keyCode === 27/*esc*/ || e.keyCode === 13/*enter*/) && focused) {
-                               e.preventDefault();
-                               this.setState({text: formatter(value), focused: false});
-                           }
-                       }}
-            />
+            {!!renderInput && renderInput()}
+            {!renderInput && <TextField id={'value'} value={text}
+                                        autoComplete="off"
+                                        onFocus={() => this.setState({focused: true})}
+                                        onChange={e => {
+                                            const text = e.target.value;
+                                            try {
+                                                const date = parser(text);
+                                                if (date && date instanceof Date && !Number.isNaN(date.getTime())) {
+                                                    if (!value || !DateTools.equals(value, date))
+                                                        this.onChange(date);
+                                                }
+                                                this.setState({text})
+                                            } catch (ignored) {
+                                            }
+                                        }}
+                                        onKeyDown={e => {
+                                            if ((e.keyCode === 27/*esc*/ || e.keyCode === 13/*enter*/) && focused) {
+                                                e.preventDefault();
+                                                this.setState({text: formatter(value), focused: false});
+                                            }
+                                        }}
+            />}
             <div className={`calendar ${focused && 'focused'}`}>
                 <div className={'row monthSelect'}>
                     <span>