react-ui-basics 0.0.175 → 0.0.178

package/src/Modal.css

@@ -0,0 +1,61 @@
+.Modal {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  overflow-y: scroll;
+  transition: bottom 0ms linear;
+  transition-delay: 0.2s;
+}
+.Modal.show {
+  transition-delay: 0s;
+  bottom: 0;
+}
+.Modal > .overlay {
+  position: fixed;
+  top: 0;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0;
+  background-color: black;
+  pointer-events: none;
+}
+.Modal > .overlay.show {
+  opacity: 0.5;
+  bottom: 0;
+}
+.Modal > .content {
+  left: 50%;
+  top: 10vh;
+  margin-bottom: 10vh;
+  font-size: 16px;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  transform: scaleY(0) translateY(-200px) translateX(-50%);
+  transform-origin: top;
+  position: absolute;
+  border-radius: 2px;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
+}
+.Modal > .content.show {
+  opacity: 1;
+  transform: scaleY(1) translateY(0px) translateX(-50%);
+}
+.Modal > .content > .Scrollable {
+  overflow: visible;
+  max-height: 80vh;
+}
+.Modal > .content > .Scrollable > .viewport {
+  min-width: 10px;
+  min-height: 10px;
+}
+.Modal > .content > .Button.close {
+  top: 10px;
+  right: 10px;
+  position: absolute;
+}

package/src/Modal.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 from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import './Modal.css';
+import ReactDOM from 'react-dom';
+import ReactCreateElement from './ReactCreateElement';
+import './Modal.css'
+import Button from "./Button";
+import {classNames, orNoop, setTimeout, DOCUMENT, addEventListener, removeEventListener, createRef, UNDEFINED, stopPropagation} from "./Tools";
+import {PureComponent, componentDidMount, render, propsGetter, stateGSs, componentDidUpdate} from "./ReactConstants";
+import MaterialIcon from "./MaterialIcon";
+import PropTypes from "prop-types";
+
+let listenerRef;
+let zIndex = 100;
+
+const EVENT_TYPE = 'keydown';
+const pollListener = (modal) => {
+    removeEventListener(DOCUMENT, EVENT_TYPE, listenerRef);
+    const listener = modal._pl;
+    listener && addEventListener(DOCUMENT, EVENT_TYPE, listener);
+    listenerRef = listener;
+};
+
+const addListener = (modal, listener) => {
+    const prev = listenerRef;
+    prev && removeEventListener(DOCUMENT, EVENT_TYPE, prev);
+    modal._pl = prev;
+    addEventListener(DOCUMENT, EVENT_TYPE, listenerRef = listener);
+};
+
+class Modal extends PureComponent {
+
+    static defaultProps = {
+        closeIcon: <MaterialIcon icon="close"/>,
+    };
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+
+        const [
+            isShow,
+            getMenu,
+            getBeforeClose,
+        ] = stateGSs(that, 3);
+        const overlay = createRef();
+        const el = createRef();
+        const content = createRef();
+        const props = propsGetter(that);
+
+        const beforeClose = (e) => {
+            stopPropagation(e);
+            const bc = getBeforeClose() || props().beforeClose;
+            if (!bc || bc(that.close))
+                that.close(e);
+        };
+
+        const shouldClose = (e) => {
+            const isSameModal = __style(el()).zIndex == zIndex - 1;
+            !(e && content().contains(__target(e))) && isSameModal && beforeClose(e);
+        };
+
+        const addTransitionListener = () => {
+            const transitionend = "transitionend";
+            let listener = () => {
+                removeEventListener(overlay(), transitionend, listener);
+                orNoop(isShow() ? props().onOpen : orNoop(props().onClose))();
+                el() && (__style(el()).paddingBottom = isShow() ? '1px' : '0px'); // force invalidate scroll
+            };
+            addEventListener(overlay(), transitionend, listener);
+        };
+        that[ReactConstants[3]] = () => {
+            const {className, top, container = Modal.defaultContainer, children, closeIcon} = props();
+            const menu = getMenu();
+            const show = isShow();
+            const modal = <div className={classNames(`Modal`, className, show && 'show')} ref={el} onClick={shouldClose}>
+                <div ref={overlay} className={classNames(`overlay`, show && 'show')}>
+                </div>
+                <div className={classNames(`content`, show && 'show', top && 'top')}
+                     style={top && {top: top + 'px'}}
+                     ref={content}
+                >
+                    {React.Children.map(children, child => React.cloneElement(child, {
+                        modalMenuConsumer: getMenu,
+                        modalBeforeCloseConsumer: getBeforeClose
+                    }))}
+                    {menu}
+                    <Button className="close" flat={true} round={true} onClick={beforeClose}>
+                        {closeIcon}
+                    </Button>
+                </div>
+            </div>;
+
+            return container ? ReactDOM.createPortal(modal, container) : modal;
+        };
+
+        const close = that.close = () => {
+            if (!isShow())
+                return;
+
+            zIndex--;
+            addTransitionListener();
+            isShow(false);
+
+            pollListener(that);
+        };
+        const open = that.open = () => {
+            if (isShow())
+                return;
+
+            el() && (__style(el()).zIndex = zIndex++);
+            addTransitionListener();
+            isShow(true);
+
+            let listener = event => {
+                if (!event.defaultPrevented && event.keyCode === 27/*escape*/)
+                    beforeClose();
+                return true;
+            };
+
+            addListener(that, listener)
+        };
+
+        that[ReactConstants[0]] = () => {
+            const _props = props();
+            orNoop(_props.open)(() => {
+                setTimeout(open, 0);
+            });
+            orNoop(_props.close)(() => {
+                setTimeout(close, 0);
+            });
+            _props.show && setTimeout(open, 0)
+        };
+        that[ReactConstants[2]] = (prevProps) => {
+            const show = props().show;
+            if (show !== prevProps.show) {
+                show ? open() : close();
+            }
+        };
+    }
+}
+
+Modal.defaultContainer = UNDEFINED;
+Modal.pollListener = pollListener;
+Modal.addListener = addListener;
+
+export default Modal;
+
+if (process.env.NODE_ENV !== 'production') {
+    Modal.propTypes = {
+        [ReactConstants[5]]: PropTypes.string,
+        top: PropTypes.number,
+        container: PropTypes.node,
+    };
+}

package/src/Modal.scss

@@ -0,0 +1,73 @@
+.Modal {
+  display: block;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  overflow-y: scroll;
+  transition: bottom 0ms linear;
+  transition-delay: 0.2s;
+
+  &.show {
+    transition-delay: 0s;
+    bottom: 0;
+  }
+
+  > .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
+    opacity: 0;
+    background-color: black;
+    pointer-events: none;
+
+    &.show {
+      opacity: 0.5;
+      bottom: 0;
+    }
+  }
+
+  > .content {
+    left: 50%;
+
+    //overflow: hidden;
+    top: 10vh;
+    margin-bottom: 10vh;
+
+    font-size: 16px;
+    padding: 0;
+    opacity: 0;
+    transition: opacity 0.25s ease, transform 0.25s ease;
+    transform: scaleY(0) translateY(-200px) translateX(-50%);
+    transform-origin: top;
+
+    position: absolute;
+    border-radius: 2px;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
+
+    &.show {
+      opacity: 1;
+      transform: scaleY(1) translateY(0px) translateX(-50%);
+    }
+
+    > .Scrollable {
+      overflow: visible;
+      max-height: 80vh;
+      > .viewport {
+        min-width: 10px;
+        min-height: 10px;
+      }
+    }
+
+    > .Button.close {
+      top: 10px;
+      right: 10px;
+      position: absolute;
+    }
+  }
+}

package/src/ModalMenu.css

@@ -0,0 +1,30 @@
+.ModalMenu {
+  position: absolute;
+  top: 10px;
+  right: 50px;
+}
+.ModalMenu .material-icons {
+  color: #818181;
+}
+.ModalMenu .Button.animated {
+  position: absolute;
+  transition: opacity 150ms ease-in, right 200ms ease-in;
+  opacity: 0;
+  right: 0;
+  top: 0;
+}
+.ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
+  opacity: 1;
+}
+.ModalMenu .Button.animated.unmounting {
+  transition: opacity 100ms ease-out, right 200ms ease-out;
+}
+.ModalMenu .Button.active {
+  background: #EBEBEB;
+}
+.ModalMenu .separator {
+  height: 24px;
+  width: 1px;
+  background-color: #D9D9D9;
+  margin-left: 4px;
+}

package/src/ModalMenu.js

@@ -0,0 +1,59 @@
+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 './ModalMenu.css';
+import ReactCreateElement from './ReactCreateElement';
+import './ModalMenu.css'
+import {PureComponent, stateGS, render} from "./ReactConstants";
+import {classNames} from "./Tools";
+import Animated from "./Animated";
+import Button from "./Button";
+import MaterialIcon from "./MaterialIcon";
+
+class ModalMenu extends PureComponent {
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+        const isOpen = stateGS(this);
+
+        const toggle = () => {
+            isOpen(!isOpen());
+        };
+        this[ReactConstants[3]] = () => {
+            const {items} = __props(this);
+            const filtered = (items || []).filter(it => !!it);
+            if (__length(filtered) === 0) return null;
+
+            const open = isOpen();
+
+            return <div className={classNames("ModalMenu", 'row', open && 'open')}>
+                {filtered.map((it, i) => <Animated value={open}
+                                                   key={i}
+                                                   mounting={200}
+                                                   unmounting={200}
+                                                   mountingDelay={i * 50}
+                                                   unmountingDelay={(__length(filtered) - i - 1) * 50}
+                                                   styles={{
+                                                       mounting: {right: ((__length(filtered) - i) * 36 + 5 + (__length(filtered) - i) * 5) + `px`},
+                                                   }}
+                >
+                    <Button flat={true} round={true} onClick={it.action}>
+                        <MaterialIcon icon={it.icon}/>
+                    </Button>
+                </Animated>)}
+
+                <Button className={classNames("more", open && 'active')} flat={true} round={true} onClick={toggle}>
+                    <MaterialIcon icon="more_vert"/>
+                </Button>
+
+                <div className="separator"/>
+            </div>
+        }
+    }
+}
+
+export default ModalMenu;

package/src/ModalMenu.scss

@@ -0,0 +1,36 @@
+.ModalMenu {
+  position: absolute;
+  top: 10px;
+  right: 50px;
+
+  .material-icons {
+    color: #818181;
+  }
+
+  .Button.animated {
+    position: absolute;
+    transition: opacity 150ms ease-in, right 200ms ease-in;
+    opacity: 0;
+    right: 0;
+    top: 0;
+
+    &.mounting, &.mounted {
+      opacity: 1;
+    }
+
+    &.unmounting {
+      transition: opacity 100ms ease-out, right 200ms ease-out;
+    }
+  }
+
+  .Button.active {
+    background: #EBEBEB;
+  }
+
+  .separator {
+    height: 24px;
+    width: 1px;
+    background-color: #D9D9D9;
+    margin-left: 4px;
+  }
+}

package/src/ReactConstants.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const EMPTY = {};
+export const props: <P>(that: React.Component<P>) => P = that => that.props;
+export const propsGetter: <P>(that: React.Component<P>) => (() => P) = that => () => props(that);
+// @ts-ignore //ignore incompatible casting EMPTY to S
+export const state: <P, S>(that: React.Component<P, S>) => S = that => that.state || EMPTY;
+export const setState = (that, data, cb?) => {
+    that.setState(data, cb);
+};
+export const stateFieldSetter = (that, key, cb?) => (value, cb2?) => {
+    setState(that, {[key]: value}, cb2 || cb);
+};
+export const stateGS: ((that: React.Component) => (v?, cb?) => any) = (that) => {
+    !that['sfc'] && (that['sfc'] = 0);
+    const key = '_' + (that['sfc']++);
+    const setter = stateFieldSetter(that, key);
+    const result = function () {
+        return !arguments.length ? state(that)[key] : setter.apply(null, arguments);
+    };
+    result.toString = () => key;
+    return result;
+};
+export const stateGSs = (that, num) => {
+    const result = [];
+    for (let i = 0; i < num; i++) {
+        result.push(stateGS(that));
+    }
+    return result;
+};
+
+export const componentDidMount = 'componentDidMount';
+export const componentWillUnmount = 'componentWillUnmount';
+export const componentDidUpdate = 'componentDidUpdate';
+export const render = 'render';
+export const children = 'children';
+export const className = 'className';
+export const onClick = 'onClick';
+export const onChange = 'onChange';
+export const PureComponent = React.PureComponent;
+
+export default [componentDidMount, componentWillUnmount, componentDidUpdate, render, children, className, onClick, onChange]

package/src/ReactCreateElement.js

@@ -0,0 +1,5 @@
+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';
+
+export default React.createElement;

package/src/ReadyListener.js

@@ -0,0 +1,53 @@
+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 {componentDidMount, render, componentWillUnmount, setState, props, state, componentDidUpdate, children, PureComponent} from "./ReactConstants";
+import {orNoop} from "./Tools";
+
+export const createReadyListener = () => {
+    let indicator,
+        count = 0;
+
+    class NotReadyIndicator extends PureComponent {
+        constructor(properties) {
+            super(properties);
+            const that = this;
+            that.state = {r: true};
+            indicator = that;
+            that[ReactConstants[3]] = () => {
+                const _props = props(that),
+                    renderer = _props[ReactConstants[3]],
+                    ready = state(that).r;
+
+                if (renderer)
+                    return renderer(ready);
+                else
+                    return (!ready && _props[ReactConstants[4]]) || null;
+            };
+            that[ReactConstants[0]] = that[ReactConstants[2]] = () => {
+                orNoop(props(that)[ReactConstants[7]])(state(that).r);
+            }
+        }
+    }
+
+    class NotReady extends PureComponent {
+        constructor(props) {
+            super(props);
+            const that = this;
+            that[ReactConstants[0]] = () => {
+                count++;
+                setState(indicator, {r: false});
+            };
+            that[ReactConstants[1]] = () => {
+                setState(indicator, {r: --count === 0});
+            };
+            that[ReactConstants[3]] = () => null;
+        }
+    }
+
+    return [NotReadyIndicator, NotReady]
+};

package/src/ResizeObserver.ts

@@ -0,0 +1,50 @@
+import {requestAnimationFrame, WINDOW} from "./Tools";
+
+class ResizeObserver {
+
+    constructor(callback) {
+        let observables = [];
+
+        const check = () => {
+            if (observables.length !== 0) {
+                const changedEntries = observables.filter((it) => {
+                    const currentHeight = it.el.clientHeight;
+                    const currentWidth = it.el.clientWidth;
+                    if (it.size.height !== currentHeight || it.size.width !== currentWidth) {
+                        it.size.height = currentHeight;
+                        it.size.width = currentWidth;
+                        return true;
+                    }
+                }).map((obj) => obj.el);
+                if (changedEntries.length > 0) {
+                    callback(changedEntries, this);
+                }
+                requestAnimationFrame(check);
+            }
+        }
+
+        this['observe'] = (el) => {
+            if (!observables.some((it) => it.el === el)) {
+                const newObservable = {
+                    el: el,
+                    size: {
+                        height: el.clientHeight,
+                        width: el.clientWidth
+                    }
+                }
+                observables.push(newObservable);
+                requestAnimationFrame(check);
+            }
+        }
+
+        this['unobserve'] = (el) => {
+            observables = observables.filter((obj) => obj.el !== el);
+        }
+
+        this['disconnect'] = () => {
+            observables = [];
+        }
+    }
+}
+
+WINDOW.ResizeObserver = WINDOW.ResizeObserver || ResizeObserver;

package/src/Scrollable.css

@@ -0,0 +1,80 @@
+.Scrollable {
+  max-height: 250px;
+  max-width: 250px;
+  padding-right: 5px;
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  overflow: hidden;
+}
+.Scrollable:hover > .scrollbar.auto {
+  transition-delay: 0s;
+  opacity: 1;
+}
+.Scrollable .viewport {
+  overflow-y: scroll;
+  overflow-x: scroll;
+  max-height: 100%;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+.Scrollable .viewport::-webkit-scrollbar {
+  display: none;
+}
+.Scrollable.without-scroll-horizontal {
+  max-width: unset;
+}
+.Scrollable.without-scroll {
+  padding-right: 0;
+  max-height: unset;
+}
+.Scrollable.without-scroll > .viewport {
+  padding-right: 0;
+  margin-right: 0;
+}
+.Scrollable.without-scroll > .scrollbar {
+  visibility: hidden;
+}
+.Scrollable .scrollbar {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  width: 5px;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 0.5s;
+  z-index: 1;
+}
+.Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
+  opacity: 0;
+}
+.Scrollable .scrollbar .thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 5px;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  user-select: none;
+  will-change: top;
+  border-radius: 2px;
+}
+.Scrollable .scrollbar .thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.Scrollable .scrollbar .thumb:active {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.Scrollable .scrollbar.horizontal {
+  left: 0px;
+  right: 0px;
+  height: 5px;
+  bottom: 0;
+  width: unset;
+  top: unset;
+}
+.Scrollable .scrollbar.horizontal .thumb {
+  height: 5px;
+  left: 0px;
+  bottom: 0px;
+  will-change: left;
+}