react-ui-basics 0.0.174 → 0.0.177

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/DatePicker.css

@@ -0,0 +1,93 @@
+.DatePicker {
+  position: relative;
+}
+.DatePicker > .TextField {
+  width: 200px;
+  margin-bottom: 0px;
+}
+.DatePicker > .TextField input {
+  text-align: center;
+}
+.DatePicker .calendar {
+  user-select: none;
+  position: absolute;
+  top: 33px;
+  z-index: 10;
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  transition: 0.2s all ease;
+  opacity: 0;
+  visibility: hidden;
+}
+.DatePicker .calendar.focused {
+  opacity: 1;
+  visibility: visible;
+}
+.DatePicker .monthSelect {
+  margin-bottom: 0;
+  background: white;
+  font-size: 12px;
+  color: #aaaaaa;
+  padding-right: 16px;
+  padding-left: 16px;
+  height: 40px;
+}
+.DatePicker .monthSelect span {
+  margin-right: auto;
+}
+.DatePicker .monthSelect .Button {
+  min-width: 25px;
+  min-height: 25px;
+}
+.DatePicker .monthSelect .Button .material-icons {
+  font-size: 16px;
+}
+.DatePicker .monthSelect .Button.disabled {
+  background: transparent;
+}
+.DatePicker .CalendarMonthView {
+  background: white;
+}
+.DatePicker .CalendarMonthView .headers, .DatePicker .CalendarMonthView .days {
+  margin-bottom: 0;
+}
+.DatePicker .CalendarMonthView .header {
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  text-transform: uppercase;
+  margin: 5px;
+}
+.DatePicker .CalendarMonthView .day {
+  font-size: 10px;
+}
+.DatePicker .CalendarMonthView .day.notSelectedMonth {
+  color: #969696;
+}
+.DatePicker .CalendarMonthView .day span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  margin: 5px;
+  transition: 0.2s all ease;
+  cursor: pointer;
+}
+.DatePicker .CalendarMonthView .day span:hover {
+  background-color: #e6e6e6;
+}
+.DatePicker .CalendarMonthView .day span.inactive {
+  color: lightgray;
+  cursor: unset;
+}
+.DatePicker .CalendarMonthView .day span.inactive:hover {
+  background: unset;
+}
+.DatePicker .CalendarMonthView .day span.selected {
+  color: white;
+  background-color: #2196F3;
+}
+.DatePicker .CalendarMonthView .day span.selected:hover {
+  background-color: #51adf6;
+}

package/src/DatePicker.scss

@@ -0,0 +1,118 @@
+@import "./global.scss";
+
+.DatePicker {
+  position: relative;
+
+  > .TextField {
+    width: 200px;
+    margin-bottom: 0px;
+
+    input {
+      text-align: center;
+    }
+  }
+
+  .calendar {
+    user-select: none;
+    position: absolute;
+    top: 33px;
+    z-index: 10;
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+
+    transition: 0.2s all ease;
+    opacity: 0;
+    visibility: hidden;
+
+    &.focused {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+
+  .monthSelect {
+    margin-bottom: 0;
+    background: white;
+    font-size: 12px;
+    color: rgb(170, 170, 170);
+    padding-right: 16px;
+    padding-left: 16px;
+    height: 40px;
+
+    span {
+      margin-right: auto;
+    }
+
+    .Button {
+      min-width: 25px;
+      min-height: 25px;
+
+      .material-icons {
+        font-size: 16px;
+      }
+
+      &.disabled {
+        background: transparent;
+      }
+    }
+  }
+
+  .CalendarMonthView {
+    background: white;
+
+    .headers, .days {
+      margin-bottom: 0;
+    }
+
+    .header {
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      text-transform: uppercase;
+      margin: 5px;
+    }
+
+    .day {
+      font-size: 10px;
+
+      &.notSelectedMonth {
+        color: #969696;
+      }
+
+      span {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        margin: 5px;
+        transition: 0.2s all ease;
+
+        cursor: pointer;
+
+        &:hover {
+          background-color: #e6e6e6;
+        }
+
+        &.inactive {
+          color: lightgray;
+          cursor: unset;
+
+          &:hover {
+            background: unset;
+          }
+        }
+
+        &.selected {
+          color: white;
+          background-color: $colorBlue;
+
+          &:hover {
+            background-color: lighten($colorBlue, 10%);
+          }
+        }
+      }
+    }
+  }
+}