@configuratorware/configurator-admingui 1.41.2 → 1.42.2

package/src/Components/FormFragments/AutocompleteEntity.js

@@ -1,206 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-
-import dynSourceInput from './DynSourceInput';
-import UIAutoComplete, { propTypes } from '../../UIComponents/AutoComplete';
-
-class AutocompleteEntity extends React.Component {
-    static propTypes = {
-        sourceConfig: propTypes.dataSourceConfig,
-        searchText: PropTypes.string,
-        value: PropTypes.string,
-        mounting: PropTypes.bool,
-        loading: PropTypes.bool,
-        loadEntity: PropTypes.func,
-        active: PropTypes.bool,
-        newEntity: PropTypes.bool,
-        onChange: PropTypes.func,
-        name: PropTypes.string,
-        autoLoad: PropTypes.bool,
-        locale: PropTypes.string,
-        loadSource: PropTypes.func,
-        source: PropTypes.object,
-        label: PropTypes.object,
-        error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-    };
-
-    state = {
-        searchText: '',
-    };
-
-    componentDidMount() {
-        this.setState({ searchText: this.props.value || '' });
-    }
-
-    UNSAFE_componentWillReceiveProps(props) {
-        const entityJustMounted = !props.mounting && this.props.mounting;
-        if (props.value !== this.props.value || entityJustMounted) {
-            this.setState({ searchText: props.value || '' });
-        }
-        if (this.props.loading && !props.loading) {
-            this.loaded = true;
-            if (this.onListLoaded) {
-                this.onListLoaded(props);
-                this.onListLoaded = undefined;
-            }
-        }
-    }
-
-    /**
-     * Trigger the loading of the selected entity
-     * @param chosenRequest
-     * @param index
-     */
-    onNewRequest = (chosenRequest, index) => {
-        if (chosenRequest !== null && index !== -1) {
-            this.props.loadEntity(chosenRequest);
-        }
-    };
-
-    /**
-     * Triggers the reloading of the source list if autocomplete is active,
-     * otherwise acts like a text field and triggers the onChange event
-     * @param searchText
-     */
-    onUpdateInput = searchText => {
-        this.loaded = false;
-        if (_.isString(searchText)) {
-            this.setState({ searchText });
-        }
-
-        const { active, newEntity, onChange, name } = this.props;
-
-        if (active) {
-            this.reloadSource(searchText);
-            return;
-        }
-        if (_.isString(searchText)) {
-            if (newEntity) {
-                this.reloadSource(searchText);
-            }
-            onChange(name, searchText);
-        }
-    };
-
-    reloadSource = _.debounce(query => {
-        if (!this.props.autoLoad) {
-            const params = { query };
-            if (this.props.locale) {
-                params._language = this.props.locale.replace('-', '_');
-            }
-            this.props.loadSource(params);
-        }
-    }, 300);
-
-    waitIfLoading = fn => {
-        if (this.props.loading) {
-            this.onListLoaded = fn;
-        } else {
-            fn(this.props);
-        }
-    };
-
-    /**
-     * Act like a text field, triggers the change event with the new value
-     * @param e
-     */
-    onBlur = () => {
-        this.waitIfLoading(props => {
-            this.handle(props);
-        });
-    };
-
-    onKeyDown = e => {
-        if (e.keyCode === 9 || e.keyCode === 13) {
-            this.waitIfLoading(props => {
-                this.handle(props);
-            });
-        }
-    };
-
-    onClose = () => {
-        this.waitIfLoading(props => {
-            this.handle(props);
-        });
-    };
-
-    handle(props) {
-        const { active, source, equalityCheckAttribute } = props;
-        const { searchText } = this.state;
-        const item = _.find(
-            source,
-            e => e[equalityCheckAttribute].toLowerCase() === searchText.toLowerCase()
-        );
-        if (active && item) {
-            this.props.loadEntity(item);
-        } else if (!active || searchText !== '') {
-            const { onChange, name } = this.props;
-            onChange(name, searchText);
-        }
-    }
-
-    render() {
-        const { sourceConfig, source, label, error, active } = this.props;
-        const { searchText } = this.state;
-
-        return (
-            <UIAutoComplete
-                ref={ref => (this.element = ref)}
-                floatingLabelText={label}
-                dataSource={active ? source : []}
-                searchText={searchText}
-                onInputValueChange={searchText => this.onUpdateInput(searchText)}
-                handleChange={this.onNewRequest}
-                dataSourceConfig={sourceConfig}
-                maxSearchResults={Infinity}
-                onBlur={this.onBlur}
-                filter={UIAutoComplete.fuzzyFilter}
-                onFocus={this.onKeyDown}
-                error={error}
-            />
-        );
-    }
-}
-
-const AutocompleteEntityWithSource = dynSourceInput(AutocompleteEntity);
-
-export default connect(
-    (state, { entityReducerName }) => {
-        // map state to props
-        const entityState = state[entityReducerName];
-        return {
-            active: entityState && !entityState.isModified,
-            newEntity: entityState && entityState.isNew,
-            mounting: entityState && entityState.isMounting,
-        };
-    },
-    (dispatch, { loadEntity }) => {
-        // map dispatch to props
-        return {
-            loadEntity: data => dispatch(loadEntity(data)),
-        };
-    }
-)(props => {
-    const dynSourceProps = {
-        /*
-        sourceConfig: {
-            value: {string} the id field (eg. 'id',)
-            text: {string} displayed label (eg. 'translated_title')
-        },
-        dynSource: {
-            listKey: {string} source list identifier key,
-            url: {string} source list url
-        }
-        */
-        ..._.merge({}, props, {
-            dynSource: {
-                autoLoad: false,
-                listKey: props.dynSource.listKey + '_autocomplete',
-            },
-        }),
-    };
-
-    return <AutocompleteEntityWithSource {...dynSourceProps} />;
-});

package/src/Components/FormFragments/Checkbox.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import Checkbox from '../../UIComponents/Checkbox';
-import FormControlLabel from '../../UIComponents/FormControlLabel';
-import ErrorWrapper from './ErrorWrapper';
-import Typography from '@material-ui/core/Typography';
-
-const checkbox = props => (
-    <>
-        <ErrorWrapper error={props.error}>
-            <FormControlLabel
-                control={
-                    <Checkbox
-                        checked={!!props.value}
-                        onChange={evt => props.onChange(props.name, evt.target.checked)}
-                        name={props.name}
-                    />
-                }
-                label={props.label}
-            />
-        </ErrorWrapper>
-        {props.helperText && <Typography variant={'caption'}>{props.helperText}</Typography>}
-    </>
-);
-
-export default checkbox;

package/src/Components/FormFragments/Chip.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-
-import UIChipInput, { propTypes } from '../../UIComponents/ChipInput';
-import { Filters } from '../../UIComponents/AutoComplete';
-import { withAddButton } from './InlineAddButton';
-import { t } from '../../App/i18n';
-
-class Chip extends React.Component {
-    static propTypes = {
-        sourceConfig: propTypes.dataSourceConfig,
-    };
-
-    state = {
-        placeholder: '',
-    };
-
-    loadInitialSource() {
-        const { initialSourceSize, loadSource } = this.props;
-        if (initialSourceSize) {
-            loadSource({ limit: initialSourceSize });
-        }
-    }
-
-    loadSource(query) {
-        const { autoLoad, loadSource } = this.props;
-        if (_.isString(query) && autoLoad === false) {
-            // IMPORTANT: the filter value should be passed in the "query" get param
-            loadSource({ query });
-        }
-    }
-
-    loadSourceDebounced = _.debounce(this.loadSource, 300);
-
-    onUpdateInput = query => {
-        this.loadSourceDebounced(query);
-    };
-
-    onRequestAdd = chip => {
-        const { name, source, onChange, sourceConfig, single, value } = this.props;
-        const items = _.cloneDeep(value);
-
-        // if it already in the values just return
-        if (_.find(items, { [sourceConfig.value]: chip[sourceConfig.value] })) {
-            return;
-        }
-
-        let item = _.find(source, { [sourceConfig.value]: chip[sourceConfig.value] });
-        if (!item) {
-            // if not found, use the first which is not in the list
-            const diff = _.differenceBy(source, items, sourceConfig.value);
-            if (diff.length !== 0) {
-                item = diff[0];
-            } else {
-                return;
-            }
-        }
-        if (single) {
-            items.splice(0, items.length);
-        }
-        items.push(item);
-        onChange(name, items);
-    };
-
-    onRequestDelete = (text, idx) => {
-        const { name, onChange, value } = this.props;
-        const items = _.cloneDeep(value);
-        if (idx > -1 && idx < items.length) {
-            items.splice(idx, 1);
-            onChange(name, items);
-        }
-    };
-
-    /**
-     * Called by the InlineAddButton, when the data is ready
-     * @param chip
-     */
-    triggerChange(chip) {
-        // no additional checks needed, just append the new value to the list
-        const { name, onChange, sourceConfig, value } = this.props;
-        const items = _.cloneDeep(value);
-        if (_.find(items, { [sourceConfig.value]: chip[sourceConfig.value] })) {
-            return;
-        }
-        items.push(chip);
-        onChange(name, items);
-    }
-
-    onFocus = evt => {
-        this.loadInitialSource();
-        const { onFocus, placeholderFocused } = this.props;
-        this.setState({ placeholder: t(placeholderFocused || 'start typing') });
-        onFocus && onFocus(evt);
-    };
-
-    onBlur = evt => {
-        const { placeholder, onBlur } = this.props;
-        this.setState({ placeholder: placeholder && t(placeholder) });
-        onBlur && onBlur(evt);
-    };
-
-    render() {
-        const { value, label, source, sourceConfig, openOnFocus, autoLoad } = this.props;
-        const { placeholder } = this.state;
-        const { onRequestAdd, onRequestDelete, onUpdateInput, onBlur, onFocus } = this;
-
-        return (
-            <UIChipInput
-                floatingLabelText={label}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                dataSource={source}
-                onInputValueChange={onUpdateInput}
-                dataSourceConfig={sourceConfig}
-                value={value}
-                handleChange={onRequestAdd}
-                onRequestDelete={onRequestDelete}
-                openOnFocus={openOnFocus}
-                placeholder={placeholder}
-                filter={autoLoad === false ? Filters.defaultFilter : Filters.fuzzyFilter}
-            />
-        );
-    }
-}
-
-export default withAddButton(Chip);

package/src/Components/FormFragments/DatePicker.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import DatePicker from '../../UIComponents/DatePicker';
-
-const datePicker = props => {
-    return (
-        <DatePicker
-            label={props.label}
-            value={props.value}
-            onChange={evt => props.onChange(props.name, evt.target.value)}
-            error={props.error}
-        />
-    );
-};
-
-export default datePicker;

package/src/Components/FormFragments/DateTimePicker.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import DateTimePicker from '../../UIComponents/DateTimePicker';
-
-const dateTimePicker = props => {
-    return (
-        <div>
-            <DateTimePicker
-                label={props.label}
-                value={props.value}
-                onChange={evt => {
-                    props.onChange(props.name, evt.target.value);
-                }}
-                format={props.ampm ? 'ampm' : '24hr'}
-                error={props.error}
-            />
-        </div>
-    );
-};
-
-export default dateTimePicker;

package/src/Components/FormFragments/DynSourceInput.js

@@ -1,128 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-
-import { dispatchFetchData } from '../../App/Reducers/Api/Helpers';
-import CircularProgress from '../../UIComponents/CircularProgress';
-
-import { T } from '../../App/i18n';
-import './Styles.scss';
-
-const dynSourceInput = InputComponent => {
-    class DynSourceInput extends React.Component {
-        static defaultProps = {
-            listKey: '',
-            url: '',
-            source: [],
-            loading: false,
-            locale: '',
-        };
-
-        loadSource = params => {
-            const { loadSource, locale, dynSource } = this.props;
-            const extParams = {};
-            if (dynSource && dynSource.maxSearchResults) {
-                extParams.offset = 0;
-                extParams.limit = dynSource.maxSearchResults;
-            }
-            Object.assign(extParams, params);
-            loadSource &&
-                loadSource({
-                    _language: locale.replace('-', '_'),
-                    ...extParams,
-                });
-        };
-
-        componentWillMount() {
-            const { dynSource } = this.props;
-            if (dynSource.autoLoad !== false) {
-                this.loadSource();
-            }
-        }
-
-        componentWillReceiveProps(props) {
-            if (props.didInvalidate && props.didInvalidate !== this.props.didInvalidate) {
-                // reload list if invalidated
-                this.loadSource();
-            }
-        }
-
-        render() {
-            const props = { ...this.props };
-            props.type = props.dynSource.type;
-            props.autoLoad = props.dynSource.autoLoad;
-            props.loadSource = this.loadSource;
-            if (props.dynSource.mapItems) {
-                if (_.isArray(props.value)) {
-                    props.value = _.map(props.value, (item, idx, collection) => {
-                        return props.dynSource.mapItems(item, idx, collection, this.props.locale);
-                    });
-                } else if (_.isPlainObject(props.value)) {
-                    props.value = props.dynSource.mapItems.call(0, props.value);
-                }
-            }
-
-            return props.autoLoad !== false && props.loading ? (
-                <div className="form-field-loading">
-                    <div>
-                        {T('Loading source data')}
-                        {'...'}
-                    </div>
-                    <CircularProgress size={20} />
-                </div>
-            ) : (
-                <div>
-                    <InputComponent {...props}></InputComponent>
-                </div>
-            );
-        }
-    }
-
-    const mapStateToProps = (state, { dynSource, locale: explicitLocale }) => {
-        const locale = explicitLocale || state.i18n.locale;
-        let result = {
-            locale,
-        };
-        if (dynSource.dataSource) {
-            const entityState = state[dynSource.reducerName];
-            let source = _.get(entityState, `dataSources.${dynSource.dataSource}.data`, []);
-            result = {
-                ...result,
-                source,
-                loading: !_.has(entityState, `dataSources.${dynSource.dataSource}.data`),
-            };
-        } else {
-            const { dataBySource } = state;
-            let source = _.get(dataBySource, `[${dynSource.listKey}].data.data`, []);
-            result = {
-                ...result,
-                source,
-                loading: _.get(dataBySource, `[${dynSource.listKey}].isFetching`, false),
-                didInvalidate: _.get(dataBySource, `[${dynSource.listKey}].didInvalidate`, false),
-            };
-        }
-        if (dynSource.mapItems) {
-            result.source = _.map(result.source, (item, idx, collection) => {
-                return dynSource.mapItems(item, idx, collection, locale);
-            });
-        }
-        return result;
-    };
-
-    const mapDispatchToProps = (dispatch, { dynSource }) => {
-        const { listKey, url } = dynSource;
-        if (url) {
-            return {
-                loadSource: params => dispatchFetchData(dispatch)(listKey, params ? { url, params } : url),
-            };
-        } else {
-            return {
-                loadSource: false,
-            };
-        }
-    };
-
-    return connect(mapStateToProps, mapDispatchToProps)(DynSourceInput);
-};
-
-export default dynSourceInput;

package/src/Components/FormFragments/ErrorWrapper.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import './Styles.scss';
-
-const errorWrapper = props => {
-    return (
-        <div>
-            {props.children}
-
-            {props.error && <div className="form-field-error">{props.error}</div>}
-        </div>
-    );
-};
-
-export default errorWrapper;