react-ui-basics 0.0.175 → 0.0.176

package/src/DNDContainer.js

@@ -0,0 +1,263 @@
+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;

package/src/DNDContainer.scss

@@ -0,0 +1,33 @@
+.DNDContainer {
+  position: relative;
+
+  .Draggable {
+    &[draggable=true], [draggable=true] {
+      cursor: pointer;
+    }
+
+    &.placeholder {
+      opacity: 0.2;
+    }
+
+    &.copy {
+      position: absolute;
+      box-sizing: border-box;
+      will-change: transform;
+      opacity: 0;
+    }
+
+    &.dragged {
+      z-index: 10;
+    }
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+}

package/src/DNDDraggable.js

@@ -0,0 +1,55 @@
+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 from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import ReactCreateElement from './ReactCreateElement';
+import {classNames, orNoop, ref} from "./Tools";
+import {componentDidUpdate, props, state, render, children, className, componentDidMount, componentWillUnmount, PureComponent} from "./ReactConstants";
+
+const hover = 'hover',
+    dragged = 'dragged',
+    placeholder = 'placeholder',
+    initializer = 'initializer',
+    handle = 'handle'
+;
+
+const init = that => orNoop(props(that)[initializer])(that);
+
+class Draggable extends PureComponent {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+        that[ReactConstants[2]] = (prevProps) => {
+            if (prevProps[handle] !== props(that)[handle] || prevProps[initializer] !== props(that)[initializer])
+                init(that)
+        };
+        that[ReactConstants[0]] = () => {
+            init(that)
+        };
+        that[ReactConstants[1]] = () => {
+            orNoop(that.onUnmount)();
+        };
+        that[ReactConstants[3]] = () => {
+            const _state = state(that),
+                _props = props(that);
+            return <div className={classNames('Draggable', _props[ReactConstants[5]],
+                _state[dragged] && dragged,
+                _state[placeholder] && placeholder,
+                _state[hover] && hover,
+            )}
+                        onClick={_props[ReactConstants[6]]}
+                        ref={ref('element', that)}
+            >
+                {_props[handle]}
+                {_props[ReactConstants[4]]}
+            </div>;
+        }
+    }
+}
+
+
+export default Draggable;

package/src/DNDDroppable.js

@@ -0,0 +1,58 @@
+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 from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import ReactCreateElement from './ReactCreateElement';
+import {classNames, orNoop, ref, preventDefault, stopPropagation} from "./Tools";
+import {componentDidMount, componentDidUpdate, render, props, state, componentWillUnmount, children, className, PureComponent} from "./ReactConstants";
+
+const hover = 'hover',
+    allow = 'allow',
+    initializer = 'initializer'
+;
+
+const init = that => orNoop(props(that)[initializer])(that);
+
+class Droppable extends PureComponent {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+
+        that[ReactConstants[2]] = (prevProps) => {
+            if (prevProps[initializer] !== props(that)[initializer])
+                init(that)
+        };
+
+        that[ReactConstants[0]] = () => {
+            init(that)
+        };
+
+        that[ReactConstants[1]] = () => {
+            orNoop(that.onUnmount)();
+        };
+
+        that[ReactConstants[3]] = () => {
+            const _props = props(that),
+                _state = state(that);
+            return <div className={
+                classNames(
+                    'Droppable',
+                    _props[ReactConstants[5]],
+                    _state[hover] && hover,
+                    _state[allow] && allow,
+                )}
+                        onDragOver={e => {
+                            preventDefault(e);
+                            stopPropagation(e);
+                        }}
+                        ref={ref('element', that)}>
+                {_props[ReactConstants[4]]}
+            </div>;
+        };
+    }
+}
+
+export default Droppable;

package/src/Dialog.css

@@ -0,0 +1,36 @@
+.DialogModal {
+  overflow: hidden;
+}
+.DialogModal .content {
+  top: 20vh;
+}
+
+.Dialog {
+  background-color: white;
+  min-width: 460px;
+  max-width: 40vw;
+  padding: 15px;
+}
+.Dialog .title {
+  margin-bottom: 15px;
+  padding: 20px 50px 0px 30px;
+  font-size: 1.25rem;
+  line-height: 2rem;
+  font-weight: 400;
+  letter-spacing: 0.0125em;
+}
+.Dialog .description {
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 0.03125em;
+  margin-top: 20px;
+  padding: 0 24px 24px;
+}
+.Dialog > div.row {
+  margin-bottom: 15px;
+}
+.Dialog > div.row:last-child {
+  margin-bottom: 0;
+}

package/src/Dialog.js

@@ -0,0 +1,160 @@
+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 './Dialog.css';
+import ReactCreateElement from './ReactCreateElement';
+import './Dialog.css'
+import Button from "./Button";
+import Modal from "./Modal";
+import {isUndefined, orNoop, preventDefault, ref, UNDEFINED, classNames, createRef} from "./Tools";
+import {PureComponent, render, componentDidMount, propsGetter, stateGSs} from "./ReactConstants";
+import PropTypes from "prop-types";
+
+class Dialog extends PureComponent {
+    constructor(properties) {
+        super(properties);
+
+        this[ReactConstants[3]] = () => {
+            const {title, description, accept, cancel, onAccept, onCancel, children} = __props(this);
+            return <div className="Dialog">
+                {title && <div className="title">{title}</div>}
+                {description && <div className="description">{description}</div>}
+                {children}
+                <div className="row right">
+                    {cancel && <Button flat={true} onClick={onCancel}>{cancel}</Button>}
+                    {accept && <Button flat={true} onClick={onAccept}>{accept}</Button>}
+                </div>
+            </div>
+        }
+    }
+}
+
+Dialog.defaultProps = {
+    accept: 'Accept',
+    cancel: 'Decline',
+};
+
+const throwIfPropExists = (key, props) => {
+    if (props[key]) throw Error(key + " was already set by props")
+};
+
+class DialogWrapper extends Component {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+
+        const props = propsGetter(that);
+        const openRef = createRef();
+        const closeRef = createRef();
+
+        const [titleState,
+            descriptionState,
+            onAcceptState,
+            onCancelState,
+            acceptState,
+            cancelState
+        ] = stateGSs(that, 6);
+
+        const onCancel = (e) => {
+            preventDefault(e);
+            orNoop(props().onCancel || onCancelState())();
+            closeRef()();
+        };
+
+        const onAccept = (e) => {
+            preventDefault(e);
+            orNoop(props().onAccept || onAcceptState())();
+            closeRef()();
+        };
+
+        that[ReactConstants[3]] = () => {
+            const {top, className, ...other} = props();
+            return (
+                <Modal
+                    top={top}
+                    className={classNames('DialogModal', className)}
+                    open={openRef}
+                    close={closeRef}
+                    onClose={onCancel}
+                >
+                    <Dialog title={titleState()} description={descriptionState()} accept={acceptState()} cancel={cancelState()} {...other} onAccept={onAccept} onCancel={onCancel}/>
+                </Modal>
+            );
+        };
+
+        that.open = (onAccept, onCancel, title, description, accept, cancel) => {
+            titleState(UNDEFINED);
+            descriptionState(UNDEFINED);
+            onAcceptState(UNDEFINED);
+            onCancelState(UNDEFINED);
+            acceptState(UNDEFINED);
+            cancelState(UNDEFINED);
+
+            const _props = props();
+            if (!isUndefined(onAccept)) {
+                throwIfPropExists("onAccept", _props);
+                onAcceptState(onAccept);
+            }
+            if (!isUndefined(onCancel)) {
+                throwIfPropExists("onCancel", _props);
+                onCancelState(onCancel);
+            }
+            if (!isUndefined(title)) {
+                throwIfPropExists("title", _props);
+                titleState(title);
+            }
+            if (!isUndefined(description)) {
+                throwIfPropExists("description", _props);
+                descriptionState(description);
+            }
+            if (!isUndefined(accept)) {
+                throwIfPropExists("accept", _props);
+                acceptState(accept);
+            }
+            if (!isUndefined(cancel)) {
+                throwIfPropExists("cancel", _props);
+                cancelState(cancel);
+            }
+            openRef()();
+        };
+
+        that[ReactConstants[0]] = () => {
+            const _props = props();
+            orNoop(_props.open)(that.open);
+            orNoop(_props.close)(closeRef());
+            _props.show && that.open();
+        }
+    }
+}
+
+export default DialogWrapper;
+
+if (process.env.NODE_ENV !== 'production') {
+    DialogWrapper.propTypes = {
+        title: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        description: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        accept: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        cancel: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        onAccept: PropTypes.func,
+        onCancel: PropTypes.func,
+        [ReactConstants[5]]: PropTypes.string,
+        top: PropTypes.number,
+    };
+}

package/src/Dialog.scss

@@ -0,0 +1,42 @@
+.DialogModal {
+  overflow: hidden;
+
+  .content {
+    top: 20vh;
+  }
+}
+
+.Dialog {
+  background-color: white;
+  min-width: 460px;
+  max-width: 40vw;
+  padding: 15px;
+
+  .title {
+    margin-bottom: 15px;
+    padding: 20px 50px 0px 30px;
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    letter-spacing: .0125em;
+  }
+
+  .description {
+    color: rgba(0, 0, 0, .54);
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 400;
+    letter-spacing: .03125em;
+    margin-top: 20px;
+    padding: 0 24px 24px;
+  }
+
+
+  > div.row {
+    margin-bottom: 15px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/src/DropFileInput.css

@@ -0,0 +1,24 @@
+.DropFileInput {
+  flex-grow: 1;
+}
+.DropFileInput .Dropzone {
+  border: 1px dashed #808080;
+  padding: 12px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  color: gray;
+  cursor: pointer;
+  border-radius: 3px;
+  font-weight: normal;
+  line-height: 22px;
+  font-size: 14px;
+  color: #7E7E7E;
+  max-width: 100%;
+  word-break: break-all;
+  word-break: break-word;
+}
+.DropFileInput .Dropzone .icon.withText {
+  margin-right: 10px;
+}