react-ui-basics 0.0.175 → 0.0.178

package/src/AutocompleteSelect.js

@@ -0,0 +1,473 @@
+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 './AutocompleteSelect.css';
+import ReactCreateElement from './ReactCreateElement';
+import PropTypes from 'prop-types';
+import './AutocompleteSelect.css'
+import TextField from "./TextField";
+import FilteredList, {getLabel} from "./FilteredList";
+import {
+    classNames,
+    continuousIncludes,
+    getRandomId,
+    ref,
+    orNoop,
+    preventDefault,
+    stopPropagation,
+    DOCUMENT,
+    addEventListener,
+    removeEventListener,
+    isObject,
+    isFunction,
+    isString, UNDEFINED, memo
+} from "./Tools";
+import Button from "./Button";
+import MaterialIcon from "./MaterialIcon";
+import {PureComponent} from "./ReactConstants";
+
+export const MODE_DEFAULT = 'default';
+export const MODE_INLINE = 'inline';
+export const MODE_INLINE_MULTIPLE = 'inline-multiple';
+export const MODE_MULTIPLE_AUTO = 'multiple-auto';
+export const MODE_MULTIPLE = 'multiple';
+export const MODE_MULTIPLE_MINI = 'multiple-mini';
+export const MODE_MINI = 'mini';
+export const MODE_MULTIPLE_MINI_INLINE = 'multiple-mini-inline';
+
+
+const DummyChild = ({id, label, dataConsumer, onClick}) => {
+    orNoop(dataConsumer)(label || id);
+    return <div className={`DummyChild`} onClick={onClick}>{label || id}</div>
+};
+
+const prepareSelected = (value) => {
+    let result;
+    if (value != null) {
+        if (Array.isArray(value))
+            result = value.reduce((map, obj) => {
+                map[obj] = obj;
+                return map;
+            }, {});
+        else if (isObject(value))
+            result = value;
+        else if (value)
+            result = {[value]: value};
+        else
+            result = {}
+    } else {
+        result = {};
+    }
+    return result;
+};
+
+const findParent = (el, tag) => {
+    if (el != null) {
+        const tagName = el.tagName;
+        if (tagName && tagName.toUpperCase() === tag.toUpperCase()) {
+            return el;
+        } else {
+            return findParent(el.parentNode, tag)
+        }
+    }
+    return null;
+}
+
+function isMultipleSelect(mode) {
+    return mode === MODE_MULTIPLE || mode === MODE_MULTIPLE_AUTO || mode === MODE_INLINE_MULTIPLE || mode === MODE_MULTIPLE_MINI || mode === MODE_MULTIPLE_MINI_INLINE;
+}
+
+class AutocompleteSelect extends PureComponent {
+
+    static propTypes = {
+        mode: PropTypes.oneOf([MODE_DEFAULT, MODE_INLINE, MODE_MULTIPLE, MODE_MULTIPLE_AUTO, MODE_MULTIPLE_MINI, MODE_MULTIPLE_MINI_INLINE, MODE_INLINE_MULTIPLE, MODE_MINI])
+    };
+
+    constructor(props) {
+        super(props);
+        const that = this;
+        that.state = {
+            selected: prepareSelected(__value(props)),
+            isActive: !!props.focused,
+
+        };
+        that.randomId = getRandomId('acs-');
+
+        const {data, getSelected} = props;
+        isFunction(data) && data(data => that.setState({data}));
+
+        getSelected && getSelected(() => Object.values(__state(that).selected));
+    }
+
+    componentDidMount() {
+        addEventListener(DOCUMENT, 'mousedown', this.listener = (e) => {
+            if (__state(this).isActive && this.el && !this.el.contains(__target(e))) {
+                this.onClickOutside()
+            }
+        })
+        if (__props(this).required) {
+            const form = findParent(this.el.parentNode, 'form')
+            if (form) {
+                addEventListener(this.submitButton = form.querySelector('button[type=submit]'), 'click', this.formSubmitListener = (e) => {
+                    const errored = Object.keys(__state(this).selected).length === 0;
+                    this.setState({errored: errored})
+                })
+            }
+        }
+        this.initSelected(__props(this), __state(this))
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (__props(this).value !== __value(prevProps))
+            this.initSelected(__props(this), __state(this))
+    }
+
+    initSelected = ({value, mode, allowCustom}, {filterValue = ''}) => {
+        this.setState({
+            selected: prepareSelected(value),
+            filterValue: allowCustom && isString(value) && !isMultipleSelect(mode) ? value : filterValue,
+        });
+    };
+
+    componentWillUnmount() {
+        removeEventListener(DOCUMENT, 'mousedown', this.listener)
+        removeEventListener(this.submitButton, 'click', this.formSubmitListener)
+    }
+
+    static defaultProps = {
+        childComponent: DummyChild,
+        withArrow: true,
+        withFilter: true,
+        withReset: false,
+        scrollToValue: false,
+        mode: MODE_DEFAULT,
+        selectedMode: 'full',
+        removeIcon: <MaterialIcon icon="close"/>,
+    };
+
+    createFilter = memo((prefilter, filterValue, filterValueTrimmed, filter) => it => {
+            if (!it) return false;
+            if (prefilter && !prefilter(it)) return false;
+            if (!filterValue) return true;
+
+            if (filter) return filter(it, filterValueTrimmed);
+
+            let value = (isString(it) ? it : (it.name || it.label || '')).toLowerCase().trim();
+            return continuousIncludes(value, filterValueTrimmed);
+        }
+    )
+
+    render() {
+        const {
+            childComponent,
+            childProps,
+            withArrow,
+            withFilter,
+            withReset,
+            filter,
+            label,
+            inputLabel,
+            mode,
+            selectedMode,
+            prefilter,
+            className,
+            scrollToValue,
+            scroll,
+            required,
+            allowCustom,
+            inlineSelected,
+            removeIcon,
+        } = __props(this);
+        const id = __props(this).id || this.randomId;
+        const selectedComponent = __props(this).selectedComponent || childComponent;
+        const {selected = {}, filterValue = '', errored} = __state(this);
+        let {isActive} = __state(this);
+        if (__props(this).isActive !== UNDEFINED) {
+            isActive = __props(this).isActive
+        }
+        let {data = [], labels = {}} = __props(this);
+        if (__state(this).data)
+            data = __state(this).data;
+
+        if (!Array.isArray(data))
+            data = [];
+
+        const selectedIds = Object.values(selected);
+        const hasSelected = __length(selectedIds) !== 0;
+        const setActive = (e) => {
+            stopPropagation(e);
+            this.setState({isActive: true}, () => (scrollToValue && __length(selectedIds) > 0) && this.list.scrollTo(selectedIds[0]));
+        };
+        const toggle = (e) => {
+            if (!__state(this).isActive) {
+                setActive(e);
+            } else {
+                stopPropagation(e);
+                this.setState({isActive: false});
+            }
+        };
+
+        const isInline = mode === MODE_INLINE || mode === MODE_INLINE_MULTIPLE || mode === MODE_MULTIPLE_MINI_INLINE;
+        const filterValueTrimmed = filterValue.trim();
+        const dataFiltered = allowCustom ? [filterValueTrimmed, ...data.filter(suggestion => suggestion !== filterValueTrimmed)] : data;
+
+        const filterFunction = this.createFilter(prefilter, filterValue, filterValueTrimmed.toLowerCase(), filter)
+        return (
+            <div id={id}
+                 className={classNames(
+                     'AutocompleteSelect',
+                     mode,
+                     isMultipleSelect(mode) && 'multi',
+                     className,
+                     withFilter ? 'withFilter' : 'withoutFilter',
+                     isActive && 'active',
+                     errored && 'errored',
+                     inlineSelected && 'inlineSelected',
+                     hasSelected && 'hasSelected',
+                 )}
+                 ref={ref('el', this)}>
+                {label && <label className={classNames(`label`, (hasSelected || filterValue) && 'active', hasSelected && 'hasSelected')}
+                                 htmlFor={'f-' + id}
+                                 onClick={() => {
+                                     if (mode === MODE_MULTIPLE_MINI_INLINE || !isActive) {
+                                         toggle();
+                                     }
+                                 }}
+                >
+                    {label}
+                    {required && ' *'}
+                    {withArrow && <span className="arrow"/>}
+                </label>}
+
+                {(!isActive || mode === MODE_MULTIPLE || mode === MODE_INLINE_MULTIPLE || mode === MODE_MULTIPLE_MINI_INLINE || mode === MODE_MULTIPLE_AUTO || !withFilter) && !inlineSelected && hasSelected && (
+                    <div
+                        className={classNames('selected',
+                            !label && 'nolabel',
+                            (mode === MODE_MULTIPLE_MINI || mode === MODE_MINI || mode === MODE_MULTIPLE_MINI_INLINE) && 'clickable',
+                            selectedMode)}
+                        onClick={toggle}>
+
+                        {selectedMode === 'full' && selectedIds.map(id =>
+                            <div className="value" key={id}>
+                                {React.createElement(selectedComponent, {...childProps, id, label: getLabel(labels, id), [ReactConstants[6]]: setActive})}
+                                <div className="button remove" onClick={e => {
+                                    stopPropagation(e);
+                                    this.remove(id);
+                                }}>
+                                    {removeIcon}
+                                </div>
+                            </div>
+                        )}
+                        {selectedMode === 'inline' && selectedIds.map(id =>
+                            <React.Fragment key={id}>
+                                {React.createElement(selectedComponent, {...childProps, id, label: getLabel(labels, id), [ReactConstants[6]]: setActive})}
+                                {id !== selectedIds[__length(selectedIds) - 1] && ', '}
+                            </React.Fragment>
+                        )}
+                        {!label && withArrow && <span className="arrow"/>}
+                        {withReset && <Button className="reset" raised={false} onClick={this.clean}>
+                            {removeIcon}
+                        </Button>}
+                    </div>
+                )}
+
+                {inlineSelected && hasSelected && <>
+                    {selectedMode === 'full' && selectedIds.map(id =>
+                        <div className="value" key={id}>
+                            {React.createElement(selectedComponent, {...childProps, id, label: getLabel(labels, id), [ReactConstants[6]]: setActive})}
+                            <div className="button remove" onClick={e => {
+                                stopPropagation(e);
+                                this.remove(id);
+                            }}>
+                                {removeIcon}
+                            </div>
+                        </div>
+                    )}
+                    {selectedMode === 'inline' && selectedIds.map(id =>
+                        <React.Fragment key={id}>
+                            {React.createElement(selectedComponent, {...childProps, id, label: getLabel(labels, id), [ReactConstants[6]]: setActive})}
+                            {id !== selectedIds[__length(selectedIds) - 1] && ', '}
+                        </React.Fragment>
+                    )}
+                </>}
+
+                {(isActive || (!hasSelected && mode !== MODE_MULTIPLE_MINI_INLINE) || mode === MODE_MULTIPLE || (mode === MODE_MULTIPLE_AUTO && __length(selectedIds) > 1) || mode === MODE_INLINE_MULTIPLE) && (
+                    <div className={`input`} data-value={filterValue}>
+                        {withFilter && <TextField autoComplete="new-password" id={'f-' + id}
+                                                  ref={ref('input', this)}
+                                                  focused={isActive}
+                                                  value={filterValue}
+                                                  label={inputLabel}
+                                                  onChange={this[ReactConstants[7]]}
+                                                  onFocus={e => this.setState({isActive: true})}
+                                                  check={__props(this).filterCheck}
+                                                  onKeyDown={e => {
+                                                      const keyCode = e.keyCode;
+                                                      if (keyCode === 38/*up*/) {
+                                                          preventDefault(e);
+                                                          this.prev();
+                                                      } else if (keyCode === 40/*down*/) {
+                                                          preventDefault(e);
+                                                          this.next();
+                                                      } else if (keyCode === 13/*enter*/) {
+                                                          preventDefault(e);
+                                                          this.onSelect(this.getSelected())
+                                                      } else if (keyCode === 9/*tab*/) {
+                                                          this.onSelect(this.getSelected())
+                                                      } else if (keyCode === 8/*backspace*/) {
+                                                          if (!filterValue && (__length(selectedIds) !== 0) && isMultipleSelect(mode)) {
+                                                              this.remove(selectedIds[__length(selectedIds) - 1]);
+                                                          }
+                                                          this.reset()
+                                                      } else if (keyCode === 46/*delete*/) {
+                                                          this.reset()
+                                                      } else if (keyCode === 27/*esc*/) {
+                                                          this.setState({
+                                                              isActive: false,
+                                                              filterValue: isMultipleSelect(mode) ? '' : (allowCustom ? filterValue : ''),
+                                                          });
+                                                          this.input.getInput().blur()
+                                                          this.onCancel();
+                                                      }
+                                                      // console.log('key pressed:', e.keyCode)
+                                                  }}
+                        />}
+                        {!withFilter && inputLabel && <label>{inputLabel}</label>}
+                    </div>
+                )}
+
+                <FilteredList className={classNames(isActive && 'visible')}
+                              ref={ref('list', this)}
+                              filter={filterFunction}
+                              selectSingle={!allowCustom}
+                              scroll={scroll}
+                              inline={isInline}
+                              nextProvider={ref('next', this)}
+                              prevProvider={ref('prev', this)}
+                              selectedProvider={ref('getSelected', this)}
+                              resetProvider={ref('reset', this)}
+                              onSelect={this.onSelect}
+                              selected={selected}
+                              childComponent={childComponent}
+                              childProps={childProps}
+                              data={dataFiltered}
+                              labels={labels}
+                />
+            </div>
+        )
+    }
+
+    onClickOutside = () => {
+        const {allowCustom, required} = __props(this);
+        const {filterValue} = __state(this);
+        if (allowCustom && (!!filterValue || !required)) {
+            this.onSelect()
+        }
+
+        this.setState({isActive: false});
+
+        this.onCancel();
+    };
+
+    onCancel = () => {
+        orNoop(__props(this).onCancel)()
+    };
+
+    onSelect = (selectedId) => {
+        const {mode, required, allowCustom, onSelect, onChange, default: defaultValue} = __props(this);
+        const {filterValue, selected: currentSelection} = __state(this);
+        const {labels = {}} = __props(this);
+
+        if (selectedId == null && (!!filterValue || !required) && allowCustom && (!this.input || !this.input.check()))
+            selectedId = filterValue.trim();
+
+        const isMultiSelect = isMultipleSelect(mode);
+
+        if (!selectedId && isMultiSelect) {
+            selectedId = null;
+        }
+
+        // debugger
+
+        const isSelected = selectedId != null;
+
+        let selected = {...currentSelection};
+        if (selected[selectedId] && (defaultValue || isMultiSelect)) {
+            delete selected[selectedId];
+            if (defaultValue && Object.keys(selected).length === 0)
+                selected[defaultValue] = defaultValue;
+        } else if (isSelected && (isMultiSelect)) {
+            selected[selectedId] = selectedId;
+        } else if (isSelected) {
+            selected = {[selectedId]: selectedId};
+        }
+
+        const errored = required && Object.keys(selected) === 0;
+
+        const isActive = mode === MODE_MULTIPLE_MINI_INLINE || (isMultiSelect && isSelected)
+
+        let customValue = '';
+        if (allowCustom && selectedId) {
+            let label
+            if (isFunction(labels))
+                label = labels(selectedId)
+            else
+                label = labels[selectedId]
+
+            if (label && isString(label))
+                customValue = label
+        }
+
+        let filterValueWithCustom = isMultiSelect ? '' : customValue;
+        this.setState({
+            isActive: isActive,
+            selected: selected,
+            filterValue: filterValueWithCustom,
+            errored,
+        });
+
+        if (isActive && this.input)
+            this.input.getInput().focus()
+
+        orNoop(onSelect)(selectedId);
+        orNoop(onChange)(Object.values(selected));
+    };
+
+    clean = (e) => {
+        preventDefault(e);
+        stopPropagation(e);
+
+        this.setState({
+            isActive: false,
+            selected: {},
+            filterValue: '',
+        });
+
+        orNoop(__props(this).onSelect)(null);
+        orNoop(__props(this)[ReactConstants[7]])([]);
+
+        this.initSelected(__props(this), __state(this));
+    };
+
+    remove = (id) => {
+        let result = {
+            ...__state(this),
+            selected: {...__state(this).selected},
+            filterValue: '',
+        };
+        delete result.selected[id];
+        this.setState(result);
+        orNoop(__props(this)[ReactConstants[7]])(Object.values(result.selected));
+    };
+
+    onChange = (event) => {
+        const value = __target(event).value;
+        this.setState({filterValue: value});
+        __props(this).onFilterInputChange?.(value);
+    }
+}
+
+export default AutocompleteSelect;