react-ui-basics 0.0.174 → 0.0.177

package/src/DroppableHorizontalList.js

@@ -0,0 +1,190 @@
+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 ReactCreateElement from './ReactCreateElement';
+import './DroppableList.css'
+import DNDDroppable from "./DNDDroppable";
+import {classNames, orNoop, setTimeout, NOOP} from "./Tools";
+import DNDDraggable from "./DNDDraggable";
+import {addListener} from "./DNDContainer";
+import {stateGS, setState, propsGetter, props as getProps, render, componentDidUpdate, componentDidMount, children} from "./ReactConstants";
+
+class DroppableHorizontalList extends Component {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+
+        const props = propsGetter(that);
+        const resetting = stateGS(that);
+        const draggables = {};
+        let list;
+
+        const init = () => {
+            list = [];
+            React.Children.forEach(props()[ReactConstants[4]], child => {
+                child && child.type === DNDDraggable && list.push(getProps(child).id);
+            })
+        };
+
+        init();
+
+        that[ReactConstants[2]] = (prevProps) => {
+            if (prevProps[ReactConstants[4]] !== props()[ReactConstants[4]]) {
+                init();
+            }
+        };
+
+        let dropped;
+        let dragging;
+        let oldIndex;
+        let newIndex;
+
+        that[ReactConstants[0]] = () => {
+            let inTransition = false;
+            orNoop(props().provideDraggableEnhancer)(initializer => it => {
+                orNoop(initializer)(it);
+                it.createPositionListener = (e, style) => {
+                    const offset = __pageX(e);
+                    return e => {
+                        __pageX(e) && (style.transform = 'translateX(' + (__pageX(e) - offset) + 'px)');
+                    };
+                };
+                it.initDraggedStyles = NOOP;
+                it.onDragEnd = () => {
+                    const style = it.element.style;
+                    inTransition = true;
+                    setTimeout(() => {
+                        const droppingDuration = props().droppingDuration || 100;
+                        style.transition = 'transform ' + droppingDuration + 'ms linear';
+                        style.transform = '';
+                        style.zIndex = '10';
+                        setTimeout(() => {
+                            style.transition = '';
+                            style.zIndex = '';
+                            setTimeout(() => {
+                                inTransition = false;
+                            }, 50) // ignore mouseenter on the old position
+                        }, droppingDuration)
+                    }, 1);
+                };
+                addListener(it.element, it, 'mouseenter', (e) => {
+                    !(dragging || inTransition) && setState(it, {hover: true});
+                });
+                addListener(it.element, it, 'mouseleave', (e) => {
+                    !dragging && setState(it, {hover: false});
+                });
+                it.onUnmount = () => {
+                    delete draggables[getProps(it).id];
+                };
+                draggables[getProps(it).id] = it;
+            })
+        };
+
+        const onHover = (e, draggable) => {
+            const offset = __pageX(e) - that.scrollOffsetX;
+            const transformLeft = 'translateX(' + __width(draggable) + 'px)';
+            const transformRight = 'translateX(-' + __width(draggable) + 'px)';
+            list.forEach((id, i) => {
+                if (i !== oldIndex) {
+                    const d = draggables[id];
+                    const bounds = d.bounds;
+                    const style = d.element.style;
+                    if (i > oldIndex) {
+                        if (offset >= __left(bounds))
+                            style.transform = transformRight;
+                        else
+                            style.transform = '';
+                    } else {
+                        if (offset <= bounds.right)
+                            style.transform = transformLeft;
+                        else
+                            style.transform = '';
+                    }
+                }
+            });
+
+            let i = list.findIndex(id => {
+                let bounds = draggables[id].bounds;
+                return offset >= __left(bounds) && offset <= bounds.right
+            });
+
+            newIndex = i !== -1 ? i : __length(list);
+        };
+
+        const onDragStart = (e, draggable) => {
+            dragging = true;
+            dropped = false;
+            oldIndex = list.indexOf(getProps(draggable).id);
+            that.scrollOffsetX = __pageX(e) - e.clientX;
+
+            list.forEach((id) => {
+                draggables[id].bounds = draggables[id].element.getBoundingClientRect();
+            });
+        };
+
+        const reset = (ignoredIndex, transition) => {
+            list.forEach((id, i) => {
+                if (i !== ignoredIndex) {
+                    const s = draggables[id].element.style;
+                    s.transform = '';
+                    s.transition = transition;
+                }
+            });
+        };
+
+        const onDragEnd = (draggable) => {
+            const index = list.indexOf(getProps(draggable).id);
+
+            if (dropped) {
+                reset(index, '');
+            } else {
+                resetting(true, () => {
+                    reset(index, '');
+                });
+                setTimeout(() => {
+                    resetting(false);
+                }, props().droppingDuration || 100);
+            }
+            dragging = false;
+        };
+        const onDrop = (data) => {
+            dropped = true;
+            const draggable = draggables[list[oldIndex]];
+            const style = draggable.element.style;
+
+            const diff = (newIndex - oldIndex) * draggable.bounds.width;
+            const transform = style.transform;
+            const position = transform.substring(11, __length(transform) - 3);
+            style.transform = 'translateX(' + (position - diff) + 'px)'; // set translateX against new position on the list to prevent long slide
+            orNoop(props().onDrop)(data, oldIndex, newIndex);
+
+            reset(newIndex, 'unset');
+        };
+
+        that[ReactConstants[3]] = () => {
+            const _props = props();
+            const {className, initializer} = _props;
+            return <DNDDroppable className={classNames(
+                'DroppableList',
+                className,
+                resetting() && 'resetting',
+            )}
+                                 initializer={initializer}
+                                 onHover={onHover}
+                                 onDragStart={onDragStart}
+                                 onDragEnd={onDragEnd}
+                                 onDrop={onDrop}
+            >
+                {_props[ReactConstants[4]]}
+            </DNDDroppable>;
+        };
+    }
+}
+
+
+export default DroppableHorizontalList;

package/src/DroppableList.css

@@ -0,0 +1,14 @@
+.DNDContainer .DroppableList .Draggable {
+  transform: unset;
+  transition: unset;
+  opacity: 1;
+}
+.DNDContainer .DroppableList .Draggable.dragged {
+  transition: unset !important;
+}
+.DNDContainer .DroppableList.hover .Draggable {
+  transition: transform 0.2s ease-in;
+}
+.DNDContainer .DroppableList.resetting .Draggable {
+  transition: transform 0.1s ease-in;
+}

package/src/DroppableList.js

@@ -0,0 +1,201 @@
+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 './DroppableList.css';
+import ReactCreateElement from './ReactCreateElement';
+import './DroppableList.css'
+import DNDDroppable from "./DNDDroppable";
+import {classNames, orNoop, setTimeout, NOOP} from "./Tools";
+import DNDDraggable from "./DNDDraggable";
+import {addListener} from "./DNDContainer";
+import {stateGS, setState, propsGetter, props as getProps, render, componentDidUpdate, componentDidMount, children} from "./ReactConstants";
+
+class DroppableList extends Component {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+
+        const props = propsGetter(that);
+        const resetting = stateGS(that);
+        const draggables = {};
+        let list;
+
+        const init = () => {
+            list = [];
+            React.Children.forEach(props()[ReactConstants[4]], child => {
+                child && child.type === DNDDraggable && list.push(getProps(child).id);
+            })
+        };
+
+        init();
+
+        that[ReactConstants[2]] = (prevProps) => {
+            if (prevProps[ReactConstants[4]] !== props()[ReactConstants[4]]) {
+                init();
+            }
+        };
+
+        let dropped;
+        let dragging;
+        let oldIndex;
+        let newIndex;
+
+        that[ReactConstants[0]] = () => {
+            let inTransition = false;
+            orNoop(props().provideDraggableEnhancer)(initializer => it => {
+                orNoop(initializer)(it);
+                it.createPositionListener = (e, style) => {
+                    const offsetTop = __pageY(e);
+                    return e => {
+                        __pageY(e) && (style.transform = 'translateY(' + (__pageY(e) - offsetTop - that.scrollDiff) + 'px)');
+                    };
+                };
+                it.initDraggedStyles = NOOP;
+                it.onDragEnd = () => {
+                    const style = it.element.style;
+                    inTransition = true;
+                    setTimeout(() => {
+                        const droppingDuration = props().droppingDuration || 100;
+                        style.transition = 'transform ' + droppingDuration + 'ms linear';
+                        style.transform = '';
+                        style.zIndex = '10';
+                        setTimeout(() => {
+                            style.transition = '';
+                            style.zIndex = '';
+                            setTimeout(() => {
+                                inTransition = false;
+                            }, 50) // ignore mouseenter on the old position
+                        }, droppingDuration)
+                    }, 1);
+                };
+                addListener(it.element, it, 'mouseenter', (e) => {
+                    !(dragging || inTransition) && setState(it, {hover: true});
+                });
+                addListener(it.element, it, 'mouseleave', (e) => {
+                    !dragging && setState(it, {hover: false});
+                });
+                it.onUnmount = () => {
+                    delete draggables[getProps(it).id];
+                };
+                draggables[getProps(it).id] = it;
+            })
+
+            orNoop(props().provideScrollListener)(e => {
+                if (!dragging)
+                    return
+
+                that.scrollDiff = that.scroll - orNoop(props().getScrollPosition)() || 0;
+            })
+        };
+
+        const onHover = (e, draggable) => {
+            const y = __pageY(e) - that.scrollOffsetY - that.scrollDiff;
+            const transformUp = 'translateY(' + __height(draggable) + 'px)';
+            const transformDown = 'translateY(-' + __height(draggable) + 'px)';
+            list.forEach((id, i) => {
+                if (i !== oldIndex) {
+                    const d = draggables[id];
+                    const bounds = d.bounds;
+                    const style = d.element.style;
+                    if (i > oldIndex) {
+                        if (y >= __top(bounds))
+                            style.transform = transformDown;
+                        else
+                            style.transform = '';
+                    } else {
+                        if (y <= bounds.bottom)
+                            style.transform = transformUp;
+                        else
+                            style.transform = '';
+                    }
+                }
+            });
+
+            let i = list.findIndex(id => {
+                let bounds = draggables[id].bounds;
+                return y >= __top(bounds) && y <= bounds.bottom
+            });
+
+            newIndex = i !== -1 ? i : __length(list);
+        };
+
+        const onDragStart = (e, draggable) => {
+            dragging = true;
+            dropped = false;
+            oldIndex = list.indexOf(getProps(draggable).id);
+            that.scrollOffsetY = __pageY(e) - e.clientY;
+            that.scroll = orNoop(props().getScrollPosition)() || 0;
+            that.scrollDiff = 0;
+
+            list.forEach((id) => {
+                draggables[id].bounds = draggables[id].element.getBoundingClientRect();
+            });
+        };
+
+        const reset = (ignoredIndex, transition) => {
+            list.forEach((id, i) => {
+                if (i !== ignoredIndex) {
+                    const s = draggables[id].element.style;
+                    s.transform = '';
+                    s.transition = transition;
+                }
+            });
+        };
+
+        const onDragEnd = (draggable) => {
+            const index = list.indexOf(getProps(draggable).id);
+
+            if (dropped) {
+                reset(index, '');
+            } else {
+                resetting(true, () => {
+                    reset(index, '');
+                });
+                setTimeout(() => {
+                    resetting(false);
+                }, props().droppingDuration || 100);
+            }
+            dragging = false;
+        };
+        const onDrop = (data) => {
+            dropped = true;
+            const draggable = draggables[list[oldIndex]];
+            const style = draggable.element.style;
+
+            const diff = (newIndex - oldIndex) * draggable.bounds.height;
+            const transform = style.transform;
+            const position = transform.substring(11, __length(transform) - 3);
+            style.transform = 'translateY(' + (position - diff) + 'px)'; // set translateY against new position on the list to prevent long slide
+
+            orNoop(props().onDrop)(data, oldIndex, newIndex);
+
+            reset(newIndex, 'unset');
+        };
+
+        that[ReactConstants[3]] = () => {
+            const _props = props();
+            const {className, initializer} = _props;
+            return <DNDDroppable className={classNames(
+                'DroppableList',
+                className,
+                resetting() && 'resetting',
+            )}
+                                 initializer={initializer}
+                                 onHover={onHover}
+                                 onDragStart={onDragStart}
+                                 onDragEnd={onDragEnd}
+                                 onDrop={onDrop}
+            >
+                {_props[ReactConstants[4]]}
+            </DNDDroppable>;
+        };
+    }
+}
+
+
+export default DroppableList;

package/src/DroppableList.scss

@@ -0,0 +1,27 @@
+.DNDContainer {
+  .DroppableList {
+
+    .Draggable {
+      //transform: unset !important;
+      transform: unset;
+      transition: unset;
+      opacity: 1;
+
+      &.dragged {
+        transition: unset !important;
+      }
+    }
+
+    &.hover {
+      .Draggable {
+        transition: transform 0.2s ease-in;
+      }
+    }
+
+    &.resetting {
+      .Draggable {
+        transition: transform 0.1s ease-in;
+      }
+    }
+  }
+}

package/src/Dropzone.css

@@ -0,0 +1,54 @@
+.Dropzone {
+  position: relative;
+}
+.Dropzone > .overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #38ADC4;
+  z-index: 1;
+  opacity: 0;
+  transition: all 0.2s ease;
+  transition-delay: 100ms;
+  visibility: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.Dropzone > .overlay .drop {
+  border-radius: 4px;
+  border: 1px dashed #FFFFFF;
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  right: 18px;
+  bottom: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 500;
+  font-size: 18px;
+  color: #FFFFFF;
+}
+.Dropzone.dragging > .overlay {
+  opacity: 0.7;
+  visibility: visible;
+  transition-delay: 0s;
+}
+.Dropzone.dragging > * {
+  pointer-events: none;
+}
+.Dropzone > input.file {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}

package/src/Dropzone.js

@@ -0,0 +1,140 @@
+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 './Dropzone.css';
+import PropTypes from "prop-types";
+import ReactCreateElement from './ReactCreateElement';
+import './Dropzone.css'
+import {classNames, setOf, preventDefault, stopPropagation, UNDEFINED, createRef} from "./Tools";
+import {propsGetter, PureComponent, render, stateGS} from "./ReactConstants";
+
+const toArray = (o) => {
+    if (o instanceof Array)
+        return o;
+
+    const l = [];
+    for (let i = 0; i < __length(o); i++) {
+        l.push(o[i])
+    }
+    return l;
+};
+
+const prevent = (e) => {
+    preventDefault(e);
+    stopPropagation(e);
+    return false;
+};
+
+const ignoredTypes = setOf([
+    'text',
+    'Text',
+    'text/plain',
+]);
+
+const ignore = dt => dt && (!dt.types[0] || ignoredTypes[dt.types[0]]);
+
+class Dropzone extends PureComponent {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+
+        let entries = [];
+
+        const props = propsGetter(that);
+        const isDragging = stateGS(that);
+
+        const onDrop = (e) => {
+            const dt = e.dataTransfer;
+            const files = toArray(dt && dt.files || __target(e).files);
+            props().onDrop(files);
+            isDragging(false);
+            entries = [];
+            prevent(e);
+        };
+        const onDragOver = (e) => {
+            const dt = e.dataTransfer;
+            if (ignore(dt)) return;
+
+            dt && (dt.dropEffect = 'copy');
+            !isDragging() && isDragging(true);
+            prevent(e);
+        };
+        const onDragEnter = (e) => {
+            const dt = e.dataTransfer;
+            if (ignore(dt)) return;
+            if (entries.indexOf(__target(e)) === -1) {
+                entries.push(__target(e))
+            }
+
+            dt && (dt.dropEffect = 'copy');
+            !isDragging() && isDragging(true);
+            prevent(e);
+        };
+        const onDragLeave = (e) => {
+            entries = entries.filter(el => el !== __target(e));
+
+            if (__length(entries) === 0)
+                isDragging(false);
+
+            prevent(e)
+        };
+
+        const inputRef = createRef()
+
+        that[ReactConstants[3]] = () => {
+            const {children, className, disabled, clickable, multiple, droppable, overlayLabel, accept} = props();
+
+            return <div className={classNames('Dropzone', className, isDragging() && 'dragging')}
+                        onDragLeave={!disabled && droppable && onDragLeave || UNDEFINED}
+                        onDragOver={!disabled && droppable && onDragOver || UNDEFINED}
+                        onDragEnter={!disabled && droppable && onDragEnter || UNDEFINED}
+                        onDrop={!disabled && droppable && onDrop || UNDEFINED}
+            >
+                {overlayLabel && <div className="overlay">
+                    <div className={'drop'}>
+                        {overlayLabel}
+                    </div>
+                </div>}
+                {!disabled && clickable && <input className={'file'}
+                                                  ref={inputRef}
+                                                  type="file"
+                                                  accept={accept}
+                                                  multiple={!!multiple}
+                                                  onClick={() => {
+                                                      inputRef().value = '';
+                                                  }}
+                                                  onChange={onDrop}/>}
+                {children}
+            </div>
+        }
+    }
+}
+
+Dropzone.defaultProps = {
+    clickable: true,
+    multiple: true,
+    droppable: true,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+    Dropzone.propTypes = {
+        [ReactConstants[5]]: PropTypes.string,
+        overlayLabel: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        clickable: PropTypes.bool,
+        droppable: PropTypes.bool,
+        multiple: PropTypes.bool,
+        disabled: PropTypes.bool,
+        onDrop: PropTypes.func.isRequired,
+        accept: PropTypes.string,
+    };
+}
+
+export default Dropzone;

package/src/Dropzone.scss

@@ -0,0 +1,66 @@
+.Dropzone {
+  position: relative;
+
+  > .overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: #38ADC4;
+    z-index: 1;
+    opacity: 0;
+    transition: all 0.2s ease;
+    transition-delay: 100ms;
+    visibility: hidden;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+
+    .drop {
+      border-radius: 4px;
+      border: 1px dashed #FFFFFF;
+      position: absolute;
+      top: 18px;
+      left: 18px;
+      right: 18px;
+      bottom: 18px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      font-weight: 500;
+      font-size: 18px;
+
+      color: #FFFFFF;
+    }
+  }
+
+  &.dragging {
+    > .overlay {
+      opacity: 0.7;
+      visibility: visible;
+      transition-delay: 0s;
+    }
+
+    > * {
+      pointer-events: none;
+    }
+  }
+
+  > input.file {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 1;
+  }
+}