react-ui-basics 0.0.173 → 0.0.176

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;
+  }
+}

package/src/FilteredList.css

@@ -0,0 +1,68 @@
+.FilteredList {
+  max-height: 250px;
+  position: relative;
+}
+.FilteredList.popup {
+  padding: 0;
+  visibility: hidden;
+  position: absolute;
+  background: white;
+  z-index: 4;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  transition: all 0.2s ease-out;
+  top: calc(100% + 4px);
+  opacity: 0;
+  border-radius: 2px;
+}
+.FilteredList.popup.visible {
+  opacity: 1;
+  visibility: visible;
+}
+.FilteredList.inline {
+  max-height: 225px;
+  margin-top: 5px;
+}
+.FilteredList .child {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  white-space: nowrap;
+  font-size: 14px;
+  color: #222222;
+  height: 30px;
+  padding: 5px 10px;
+  padding-right: 15px;
+  cursor: pointer;
+  overflow: hidden;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border-left: 5px solid #4AC263;
+  padding-left: 15px;
+  margin-left: -5px;
+}
+.FilteredList .child.hidden {
+  height: 0 !important;
+  padding: 0 !important;
+}
+.FilteredList .child.selected {
+  background-color: #F0F0F0;
+  padding-left: 10px;
+  margin-left: 0px;
+}
+.FilteredList .child.active {
+  background-color: #eeeeee;
+}
+.FilteredList .child {
+  margin-top: 8px;
+}
+.FilteredList .child.hidden {
+  margin-top: 0;
+}
+.FilteredList .child:not(.hidden) ~ .child {
+  margin-top: 0;
+}
+.FilteredList .child:not(.hidden) ~ .child:last-child {
+  margin-bottom: 8px;
+}
+.FilteredList .child:not(.hidden):last-child {
+  margin-bottom: 8px;
+}

package/src/FilteredList.js

@@ -0,0 +1,196 @@
+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 './FilteredList.css';
+import ReactCreateElement from './ReactCreateElement';
+import './FilteredList.css'
+import Scrollable from "./Scrollable";
+import {classNames, orNoop, ref, stopPropagation, isFunction, isObject} from "./Tools";
+import {PureComponent} from "./ReactConstants";
+
+export const getLabel = (labels, id) => isFunction(labels) ? labels(id) : labels[id]
+
+class FilteredList extends PureComponent {
+
+    static defaultProps = {
+        data: [],
+        labels: {},
+        selected: {},
+        inline: false,
+        selectSingle: true,
+        filter: () => true,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {selected: -1};
+        this.hidden = {};
+        this.elements = {};
+    }
+
+    componentDidMount() {
+        orNoop(__props(this).nextProvider)(this.next);
+        orNoop(__props(this).prevProvider)(this.prev);
+        orNoop(__props(this).selectedProvider)(this.selected);
+        orNoop(__props(this).resetProvider)(this.reset);
+
+        this.updateList(__props(this))
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (__props(this).data === __data(prevProps))
+            return;
+
+        this.updateList(__props(this))
+    }
+
+    updateList = (props) => {
+        const {data} = props;
+        const {selected} = __state(this);
+        this.list = data || [];
+
+        if (!this.list.includes(selected))
+            this.setState({selected: -1})
+    };
+
+    render() {
+        const {data, labels, filter, className, selected, inline, childComponent, childProps, style, scroll} = __props(this);
+        return (
+            <Scrollable className={classNames('FilteredList', className, inline ? 'inline' : 'popup')}
+                        ref={ref('el', this)} style={style} scrollBarMode={scroll}>
+                {(data || []).filter(id => id !== false && id != null).map(id => <ItemWrapper
+                    id={id}
+                    key={id}
+                    label={getLabel(labels, id)}
+                    childComponent={childComponent}
+                    childProps={childProps}
+                    element={el => this.elements[id] = el}
+                    onClick={e => {
+                        stopPropagation(e);
+                        this.onSelect(id);
+                    }}
+                    onMouseEnter={e => this.setState({selected: id})}
+                    onMouseLeave={e => id === __state(this).selected && this.setState({selected: -1})}
+                    className={classNames('child', __state(this).selected === id && 'active', selected === id || (isObject(selected) && selected[id]) && 'selected')}
+                    classProvider={it => (this.hidden[id] = !filter(it)) && 'hidden'}
+                />)}
+            </Scrollable>
+        )
+    }
+
+    onSelect = (id) => {
+        this.setState({selected: id});
+        __props(this).onSelect(id);
+    };
+
+    selected = () => {
+        const {selected: value} = __state(this);
+        const {selectSingle} = __props(this);
+
+
+        if (value === -1 || this.hidden[value]) {
+            let filtered = this.list.filter(id => !this.hidden[id]);
+            if (selectSingle && __length(filtered) === 1)
+                return filtered[0];
+
+            return null;
+        } else {
+            return value;
+        }
+    };
+
+    next = () => {
+        const list = this.list;
+        const selected = __state(this).selected;
+        let position = list.findIndex(id => selected === id);
+        if (this.hidden[list[position]])
+            position = -1;
+
+        while (++position < __length(list)) {
+            if (!this.hidden[list[position]])
+                break
+        }
+        if (position < __length(list)) {
+            let id = list[position];
+            this.setState({selected: id});
+            this.updateScroll(id)
+        }
+    };
+
+    prev = () => {
+        const list = this.list;
+        const selected = __state(this).selected;
+        let position = list.findIndex(id => selected === id);
+        if (this.hidden[list[position]])
+            position = __length(list);
+
+        while (--position >= 0) {
+            if (!this.hidden[list[position]])
+                break
+        }
+        if (position >= 0) {
+            let id = list[position];
+            this.setState({selected: id});
+            this.updateScroll(id)
+        }
+    };
+
+    updateScroll = (id) => {
+        let child = this.elements[id];
+        let container = this.el;
+        const scrollTop = container.getScroll();
+        const height = container.getHeight();
+        let isVisible = scrollTop <= child.offsetTop && scrollTop + height >= child.offsetTop + __clientHeight(child);
+        if (!isVisible) {
+            let scrollToBottom = child.offsetTop + __clientHeight(child) - height;
+            let scrollToTop = child.offsetTop;
+            if (Math.abs(scrollTop - scrollToTop) < Math.abs(scrollTop - scrollToBottom)) {
+                container.setScroll(scrollToTop)
+            } else {
+                container.setScroll(scrollToBottom)
+            }
+        }
+    };
+
+    reset = () => {
+        this.setState({selected: -1});
+        this.el.scrollTop = 0;
+    };
+
+    scrollTo = (id) => this.el.setScroll(this.elements[id] && this.elements[id].offsetTop);
+}
+
+export default FilteredList;
+
+class ItemWrapper extends React.Component {
+    render() {
+        const {id, label, onClick, onMouseDown, onMouseEnter, onMouseLeave, classProvider, className, childComponent, childProps} = __props(this);
+        const child = React.createElement(childComponent, {
+            ...childProps,
+            id,
+            label,
+            dataConsumer: (data) => this.data = data,
+        });
+
+        const cssClass = orNoop(classProvider)(__data(this));
+        return (
+            <div className={classNames('ItemWrapper', cssClass, className)}
+                 onMouseEnter={onMouseEnter}
+                 onMouseLeave={onMouseLeave}
+                 onMouseDown={onMouseDown}
+                 onClick={onClick}
+                 ref={ref('el', this)}
+            >
+                {child}
+            </div>
+        )
+    }
+
+    componentDidMount() {
+        orNoop(__props(this).element)(this.el);
+        this.forceUpdate();
+    }
+}

package/src/FilteredList.scss

@@ -0,0 +1,86 @@
+@import "./global.scss";
+
+.FilteredList {
+  max-height: 250px;
+  position: relative;
+
+  &.popup {
+    padding: 0;
+    visibility: hidden;
+    position: absolute;
+    background: white;
+    z-index: 4;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    transition: all 0.2s ease-out;
+    top: calc(100% + 4px);
+    opacity: 0;
+    border-radius: 2px;
+
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &.inline {
+    max-height: 225px;
+    margin-top: 5px;
+  }
+
+  .child {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    white-space: nowrap;
+
+    font-size: 14px;
+    color: rgb(34, 34, 34);
+    height: 30px;
+    padding: 5px 10px;
+    padding-right: 15px;
+    cursor: pointer;
+    overflow: hidden;
+    transition: 0.2s cubic-bezier(.4, 0, .2, 1);
+
+    border-left: 5px solid #4AC263;
+    padding-left: 15px;
+    margin-left: -5px;
+
+    &.hidden {
+      height: 0 !important;
+      padding: 0 !important;
+    }
+
+    &.selected {
+      background-color: #F0F0F0;
+      padding-left: 10px;
+      margin-left: 0px;
+    }
+
+    &.active {
+      background-color: rgb(238, 238, 238);
+    }
+  }
+
+  .child {
+    margin-top: 8px;
+
+    &.hidden {
+      margin-top: 0;
+    }
+
+    &:not(.hidden) {
+      ~ .child {
+        margin-top: 0;
+
+        &:last-child {
+          margin-bottom: 8px;
+        }
+      }
+
+      &:last-child {
+        margin-bottom: 8px;
+      }
+    }
+  }
+}

package/src/FloatingActionButton.css

@@ -0,0 +1,20 @@
+.Button.FloatingActionButton {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  width: 56px;
+  height: 56px;
+  padding: 16px;
+  transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.Button.FloatingActionButton.raised {
+  transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.Button.FloatingActionButton.mini {
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+}
+.Button.FloatingActionButton.hidden {
+  bottom: -100px;
+}

package/src/FloatingActionButton.js

@@ -0,0 +1,35 @@
+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 './FloatingActionButton.css';
+import ReactCreateElement from './ReactCreateElement';
+import PropTypes from 'prop-types';
+import './FloatingActionButton.css'
+import Button from "./Button";
+import {classNames} from "./Tools";
+import MaterialIcon from "./MaterialIcon";
+
+const FloatingActionButton = ({icon, onClick, mini, className, hidden}) => {
+    return <Button onClick={onClick} round={true} className={classNames("FloatingActionButton", className, mini && 'mini', hidden && 'hidden')}>
+        <MaterialIcon icon={icon}/>
+    </Button>;
+};
+
+if (process.env.NODE_ENV !== 'production') {
+    FloatingActionButton.propTypes = {
+        icon: MaterialIcon.propTypes.icon,
+        mini: PropTypes.bool,
+        hidden: PropTypes.bool,
+    };
+}
+
+FloatingActionButton.defaultProps = {
+    icon: 'add',
+    mini: false,
+    hidden: false,
+};
+
+export default FloatingActionButton;

package/src/FloatingActionButton.scss

@@ -0,0 +1,25 @@
+.Button.FloatingActionButton {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+
+  width: 56px;
+  height: 56px;
+  padding: 16px;
+
+  transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.raised {
+    transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)
+  }
+
+  &.mini {
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+  }
+
+  &.hidden {
+    bottom: -100px;
+  }
+}

package/src/FormUploadProgress.css

@@ -0,0 +1,61 @@
+.FormUploadProgress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.6);
+  z-index: 2;
+}
+.FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
+  transition-delay: 500ms;
+}
+.FormUploadProgress .wrapper {
+  position: sticky;
+  top: 40%;
+  margin-top: 40%;
+  margin-left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+.FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
+  position: absolute;
+  width: 107px;
+  height: 107px;
+  top: 0;
+  left: 0;
+}
+.FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
+  stroke: #2196F3;
+}
+.FormUploadProgress .wrapper > .progress {
+  width: 107px;
+  height: 107px;
+  min-height: 107px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  background: white;
+  position: relative;
+}
+.FormUploadProgress .wrapper > .progress > .value {
+  display: inline-block;
+  margin-top: 5px;
+  font-weight: bold;
+  line-height: 16px;
+  font-size: 13px;
+  text-align: center;
+  color: #818181;
+}
+.FormUploadProgress .wrapper .cancel {
+  min-width: 107px;
+  margin-top: 20px;
+  background-color: white;
+  color: #F96B5C;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+}