react-ui-basics 0.0.180 → 0.0.182

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;