react-ui-basics 0.0.174 → 0.0.177

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

package/src/FormUploadProgress.js

@@ -0,0 +1,87 @@
+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 './FormUploadProgress.css';
+import ReactCreateElement from './ReactCreateElement';
+import './FormUploadProgress.css'
+import Button from "./Button";
+import Animated from "./Animated";
+import CircleProgress from "./CircleProgress";
+import SpinningProgress from "./SpinningProgress";
+import {formatAbbreviation, formatNumberWithMaxLength} from "./Size";
+import PropTypes from "prop-types";
+import {preventDefault} from "./Tools";
+
+
+const defaultValueFormat = (value, loaded, total) => {
+    if (total == null)
+        return Math.floor(Number.isFinite(value) ? value : 0) + '%';
+
+    const abbreviation = formatAbbreviation(total);
+    return <>
+        {formatNumberWithMaxLength(loaded, 1, abbreviation, 4)}
+        /
+        {formatNumberWithMaxLength(total, 1, abbreviation, 4)}
+        <br/>
+        {abbreviation}
+    </>
+};
+
+const FormUploadProgress = ({
+                                value,
+                                cancel,
+                                loaded,
+                                total,
+                                formatValue,
+                                processingLabel,
+                                cancelLabel,
+                            }) => {
+    return (
+        <Animated value={total > 0}>
+            <div className="FormUploadProgress">
+                <div className="wrapper">
+                    <div className="progress">
+                        {loaded === total && <SpinningProgress/>}
+                        {loaded !== total && <CircleProgress value={value}/>}
+                        <div className={'value'}>{formatValue(value, loaded, total)}</div>
+                    </div>
+                    {cancel && <Button className={"cancel"} disabled={loaded === total} onClick={e => {
+                        preventDefault(e);
+                        cancel();
+                    }}>
+                        {loaded === total && processingLabel}
+                        {loaded !== total && cancelLabel}
+                    </Button>}
+                </div>
+            </div>
+        </Animated>
+    );
+};
+
+FormUploadProgress.defaultProps = {
+    value: 0,
+    formatValue: defaultValueFormat,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+    FormUploadProgress.propTypes = {
+        value: PropTypes.number,
+        loaded: PropTypes.number,
+        total: PropTypes.number,
+        formatValue: PropTypes.func,
+        processingLabel: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        cancelLabel: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        cancel: PropTypes.func,
+    };
+}
+
+export default FormUploadProgress;

package/src/FormUploadProgress.scss

@@ -0,0 +1,78 @@
+@import "./global.scss";
+
+.FormUploadProgress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.6);
+  z-index: 2;
+
+  &.animated {
+    &.mounting, &.mounted {
+      transition-delay: 500ms;
+    }
+  }
+
+  .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;
+
+    .CircleProgress, .SpinningProgress {
+      position: absolute;
+      width: 107px;
+      height: 107px;
+      top: 0;
+      left: 0;
+
+      .line {
+        stroke: $colorBlue;
+      }
+    }
+
+    > .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;
+
+      > .value {
+        display: inline-block;
+        margin-top: 5px;
+
+        font-weight: bold;
+        line-height: 16px;
+        font-size: 13px;
+        text-align: center;
+
+        color: #818181;
+      }
+    }
+
+    .cancel {
+      min-width: 107px;
+      margin-top: 20px;
+      background-color: white;
+      color: #F96B5C;
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+}