@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Components/Form.js

@@ -1,270 +0,0 @@
-import React, { Component } from 'react';
-import { get, isPlainObject } from 'lodash';
-
-import { T } from '../App/i18n';
-import RaisedButton from '../UIComponents/RaisedButton';
-import FlatButton from '../UIComponents/FlatButton';
-
-import FF from './FormFragments';
-import IntlInputHoc from './FormFragments/IntlInput';
-import DynSourceHoc from './FormFragments/DynSourceInput';
-import SetInputHoc from './FormFragments/SetInput';
-import InputArray from './FormFragments/InputArray';
-import InputTabs from './FormFragments/Tabs';
-import File from './FormFragments/File';
-import SimpleTextEditor from './FormFragments/SimpleTextEditor';
-import MonacoEditor from './FormFragments/MonacoEditor';
-import InputGroup from './FormFragments/InputGroup';
-import HintText from './FormFragments/HintText';
-import Label from './FormFragments/Label';
-import MarkDown from './FormFragments/MarkDown';
-import ValidatorCallbackProvider from './ValidatorCallbackProvider';
-
-import './Styles.scss';
-
-const getInputComponentByType = type => {
-    if (typeof type !== 'string') {
-        return type;
-    }
-    switch (type) {
-        case 'text':
-        case 'password':
-        case 'number':
-            return FF.Text;
-        case 'autocomplete':
-            return FF.AutoComplete;
-        case 'select':
-            return FF.Select;
-        case 'checkbox':
-            return FF.Checkbox;
-        case 'radiogroup':
-            return FF.RadioGroup;
-        case 'toggle':
-            return FF.Toggle;
-        case 'objectToggle':
-            return FF.ObjectToggle;
-        case 'time':
-            return FF.TimePicker;
-        case 'date':
-            return FF.DatePicker;
-        case 'datetime':
-            return FF.DateTimePicker;
-        case 'chip':
-            return FF.Chip;
-        case 'autocompleteEntity':
-            return FF.AutocompleteEntity;
-        case 'value':
-            return FF.Value;
-        case 'array':
-            return InputArray;
-        case 'intl':
-            return IntlInput;
-        case 'dynSource':
-            return DynSourceInput;
-        case 'set':
-            return SetInput;
-        case 'tabs':
-            return InputTabs;
-        case 'file':
-            return File;
-        case 'textEditor':
-            return SimpleTextEditor;
-        case 'codeEditor':
-            return MonacoEditor;
-        case 'inputGroup':
-            return InputGroup;
-        case 'markDown':
-            return MarkDown;
-        case 'hinttext':
-            return HintText;
-        case 'attributeValueChip':
-            return FF.AttributeValueChip;
-        default:
-            return null;
-    }
-};
-export { getInputComponentByType };
-
-const InputSwitch = props => {
-    const InputComponent = getInputComponentByType(props.type);
-    if (InputComponent) {
-        return <InputComponent {...props} />;
-    }
-    return <div>{props.value}</div>;
-};
-export { InputSwitch };
-
-const IntlInput = IntlInputHoc(InputSwitch);
-
-const DynSourceInput = DynSourceHoc(InputSwitch);
-
-const SetInput = SetInputHoc(InputSwitch);
-
-const InputWrapper = props =>
-    props.noWrap ? (
-        props.children || <InputSwitch {...props} />
-    ) : (
-        <div
-            key={props.name}
-            id={props.name}
-            className={`form-input-wrapper ${props.error ? 'withError' : ''}`}
-        >
-            {props.children || <InputSwitch {...props} />}
-        </div>
-    );
-export { InputWrapper };
-
-const Form = props => {
-    const { children, submitText, onSubmit, className, onCancel, cancelText, actionButtons } = props;
-    return (
-        <ValidatorCallbackProvider onValidated={onSubmit}>
-            {({ validateAll }) => {
-                return (
-                    <div className={'form' + (className ? ' ' + className : '')}>
-                        <div className="form-inner">
-                            {children}
-
-                            <div className="action-buttons">
-                                {actionButtons}
-                                {onSubmit && (
-                                    <RaisedButton
-                                        label={submitText}
-                                        primary={true}
-                                        onClick={validateAll}
-                                        id="submit"
-                                    />
-                                )}
-                                {onCancel && (
-                                    <FlatButton
-                                        label={cancelText}
-                                        primary={false}
-                                        onClick={onCancel}
-                                        id="cancel"
-                                    />
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                );
-            }}
-        </ValidatorCallbackProvider>
-    );
-};
-export { Form };
-
-class ConfigurableForm extends Component {
-    onSubmit = this.props.onSubmit;
-
-    onCancel = this.props.onCancel;
-
-    onChange = (name, value) => this.props.onChange(name, value);
-
-    onAction = (type, data) => this.props.onAction(type, data);
-
-    onKeyPress = e => e.charCode === 13 && this.props.onSubmit();
-
-    componentDidMount() {
-        if (this.props.submitOnEnter) {
-            this.refs.form.addEventListener('keypress', this.onKeyPress);
-        }
-    }
-
-    componentWillUnmount() {
-        this.refs.form.removeEventListener('keypress', this.onKeyPress);
-    }
-
-    renderWrappedInput = (input, key) => {
-        const { data } = this.props;
-        if (!input) {
-            throw new Error('No input defined!');
-        }
-        if (!data) {
-            throw new Error('No data defined!');
-        }
-
-        if (input.shouldRender && !input.shouldRender(data, input)) {
-            return null;
-        }
-
-        let props = {
-            ...(isPlainObject(input) ? input : { type: input }),
-            label: input.label && T(input.label),
-            onChange: this.onChange,
-            onAction: this.onAction,
-            renderWrappedInput: this.renderWrappedInput,
-            helperText: input.helperText && T(input.helperText),
-        };
-
-        if (input.name) {
-            const field = input.name;
-
-            if (field) {
-                if (data[field] === undefined) {
-                    throw new Error('Data field does not exist: ' + field);
-                }
-            }
-
-            const { value, error, schema, errors, constraints } = data[field];
-            const required = constraints && (constraints.presence || constraints.identifier);
-            const displayAsMandatory = get(input, 'displayAsMandatory', required);
-
-            props = {
-                ...props,
-                label: <Label required={displayAsMandatory}>{props.label}</Label>,
-                value,
-                schema,
-                errors,
-                error: displayAsMandatory ? T(error, { escapeDot: true }) : '',
-            };
-        } else {
-            props = {
-                ...props,
-                dataReference: data, // update fields with no direct data binding (technical wrappers)
-            };
-        }
-
-        if (input.calculateProps) {
-            props = {
-                ...props,
-                ...input.calculateProps({ props, data, input, key }),
-            };
-        }
-
-        return <InputWrapper {...props} key={(input.name || '') + key} />;
-    };
-
-    render() {
-        const {
-            formFields,
-            submitText,
-            innerElementTop,
-            innerElementBottom,
-            cancelText,
-            actionButtons,
-            children,
-        } = this.props;
-        return (
-            <div ref="form">
-                <Form
-                    onSubmit={this.onSubmit}
-                    submitText={submitText || T('Save')}
-                    onCancel={this.onCancel}
-                    cancelText={cancelText || T('Cancel')}
-                    actionButtons={actionButtons}
-                >
-                    {innerElementTop}
-
-                    {formFields && formFields.map((field, idx) => this.renderWrappedInput(field, idx))}
-
-                    {children}
-
-                    {innerElementBottom}
-                </Form>
-            </div>
-        );
-    }
-}
-
-export { ConfigurableForm };
-
-export default ConfigurableForm;

package/src/Components/FormFragments/AttributeValueChip.js

@@ -1,140 +0,0 @@
-import React from 'react';
-import { cloneDeep, debounce, find, differenceBy, get, isString } from 'lodash';
-
-import UIChipInput, { propTypes } from '../../UIComponents/ChipInput';
-import { Filters } from '../../UIComponents/AutoComplete';
-import { withAddButton } from './InlineAddButton';
-import { t } from '../../App/i18n';
-
-class AttributeValueChip extends React.Component {
-
-    static propTypes = {
-        sourceConfig: propTypes.dataSourceConfig,
-    };
-
-    state = {
-        placeholder: '',
-    };
-
-    isNumericAttributeType = () => {
-        const type = get(this.props, 'schema._data.attributedatatype.value');
-        return type === 'integer' || type === 'number';
-    }
-
-    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 placeholder = t(this.isNumericAttributeType() ? 'item.attributes.searchOrAddNumbericAttributeValue' : 'item.attributes.searchOrAddAttributeValue');
-        this.setState({ placeholder });
-        const { onFocus } = this.props;
-        onFocus && onFocus(evt);
-    };
-
-    onBlur = evt => {
-        const { onBlur } = this.props;
-        this.setState({ placeholder: null});
-        onBlur && onBlur(evt);
-    };
-
-    onInputEnterKey = evt => {
-        this.triggerChange({id: null, value: evt.target.value, translated_value: evt.target.value});
-    }
-
-    render() {
-        const { value, label, source, sourceConfig, openOnFocus, autoLoad } = this.props;
-        const { placeholder } = this.state;
-        const { onRequestAdd, onRequestDelete, onUpdateInput, onBlur, onFocus, onInputEnterKey } = this;
-
-        return (
-            <UIChipInput
-                floatingLabelText={label}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                dataSource={source}
-                onInputValueChange={onUpdateInput}
-                dataSourceConfig={sourceConfig}
-                value={value}
-                handleChange={onRequestAdd}
-                onRequestDelete={onRequestDelete}
-                openOnFocus={openOnFocus}
-                filter={autoLoad === false ? Filters.defaultFilter : Filters.fuzzyFilter}
-                onInputEnterKey={onInputEnterKey}
-                resetOnInputEnterKey={true}
-                textFieldType={'number'}
-                placeholder={placeholder}
-            />
-        );
-    }
-}
-
-export default withAddButton(AttributeValueChip);

package/src/Components/FormFragments/AutoComplete.js

@@ -1,184 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { t } from '../../App/i18n';
-import PropTypes from 'prop-types';
-
-import UIAutoComplete, { propTypes as autoCompletePropTypes, Filters } from '../../UIComponents/AutoComplete';
-import { withAddButton } from './InlineAddButton';
-
-class AutoComplete extends React.Component {
-    element = React.createRef();
-
-    static propTypes = {
-        sourceConfig: autoCompletePropTypes.dataSourceConfig,
-        value: PropTypes.string,
-        getSearchText: PropTypes.func,
-        source: PropTypes.array,
-        schema: PropTypes.object,
-        onChangePick: PropTypes.func,
-        onChange: PropTypes.func,
-        pick: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-        name: PropTypes.string,
-        autoLoad: PropTypes.bool,
-        loadSource: PropTypes.func,
-        maxSearchResults: PropTypes.number,
-        map: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.func, PropTypes.any]),
-        useObjects: PropTypes.bool,
-        onBlur: PropTypes.func,
-        onFocus: PropTypes.func,
-        label: PropTypes.object,
-        placeholder: PropTypes.string,
-        error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-    };
-
-    static defaultProps = {
-        maxSearchResults: 5,
-        fullWidth: true,
-    };
-
-    state = {
-        searchText: '',
-    };
-
-    componentDidMount() {
-        this.initSearchText(this.props.value);
-    }
-
-    UNSAFE_componentWillReceiveProps(props) {
-        if (!_.isEqual(props.value, this.props.value)) {
-            this.initSearchText(props.value);
-        }
-    }
-
-    initSearchText(value) {
-        const { getSearchText, sourceConfig, source, schema } = this.props;
-        let searchText;
-        if (!value) {
-            searchText = '';
-        } else if (getSearchText) {
-            searchText = getSearchText(value, schema);
-        } else if (_.isObject(value)) {
-            searchText = value[sourceConfig.text];
-        } else if (sourceConfig && sourceConfig.text && schema && schema[sourceConfig.text]) {
-            searchText = schema[sourceConfig.text].value;
-        } else {
-            const idx = sourceConfig
-                ? _.findIndex(source, item => '' + item[sourceConfig.value] === '' + value)
-                : false;
-            searchText = sourceConfig ? (idx > -1 ? source[idx][sourceConfig.text] : value) : value || '';
-        }
-        this.setState({ searchText });
-    }
-
-    onUpdateInput = searchText => {
-        if (_.isString(searchText)) {
-            this.setState({ searchText });
-        }
-        // when the text is removed, trigger the change event with null value
-        if (!searchText && this.props.value) {
-            const { pick, onChangePick, name, onChange } = this.props;
-            if (pick && onChangePick) {
-                onChangePick(pick, {});
-            } else {
-                onChange(name, null);
-            }
-        } else if (_.isString(searchText)) {
-            const { autoLoad, loadSource, maxSearchResults } = this.props;
-            if (autoLoad === false) {
-                // it should be set to false directly
-                const query = searchText;
-                const loadParams = { query };
-                if (maxSearchResults) {
-                    loadParams.offset = 0;
-                    loadParams.limit = maxSearchResults;
-                }
-                loadSource(loadParams);
-            }
-        }
-    };
-
-    onNewRequest = chosenRequest => {
-        const { pick, onChangePick, onChange, name } = this.props;
-        if (pick && onChangePick && chosenRequest) {
-            onChangePick(pick, chosenRequest);
-        } else if (name && chosenRequest) {
-            onChange(name, this.mapSelectedData(chosenRequest));
-        }
-    };
-
-    mapSelectedData(data) {
-        const { sourceConfig, useObjects, map } = this.props;
-        if (!useObjects && sourceConfig && sourceConfig.value) {
-            return data[sourceConfig.value];
-        }
-        let mappedData;
-        if (_.isFunction(map)) {
-            mappedData = map(data);
-        } else if (_.isArray(map)) {
-            mappedData = _.pick(data, map);
-        } else if (_.isPlainObject(map)) {
-            mappedData = {};
-            Object.keys(map).forEach(p => {
-                mappedData[p] = data[map[p]];
-            });
-        } else {
-            mappedData = data;
-        }
-        return mappedData;
-    }
-
-    onBlur = () => {
-        // when the text is removed, trigger the change event with null value
-        if (!this.state.searchText && this.props.value) {
-            const { name, onChange } = this.props;
-            onChange(name, null);
-        }
-        const { onBlur } = this.props;
-        onBlur && onBlur();
-    };
-
-    onFocus = () => {
-        const { onFocus } = this.props;
-        onFocus && onFocus();
-    };
-
-    /**
-     * Called by the InlineAddButton, when the data is ready
-     * @param value
-     */
-    triggerChange(value) {
-        this.onNewRequest(value);
-    }
-
-    /**
-     * Called by the InlineAddButton, when the popup is opened the list should not be shown
-     */
-    triggerClose() {
-        this.element.current.setState({ open: false });
-    }
-
-    render() {
-        const { sourceConfig, source, label, placeholder, maxSearchResults, autoLoad, error } = this.props;
-        const { onBlur, onFocus } = this;
-
-        return (
-            <UIAutoComplete
-                ref={this.element}
-                floatingLabelText={label}
-                dataSource={source}
-                searchText={this.state.searchText}
-                onInputValueChange={searchText => this.onUpdateInput(searchText)}
-                handleChange={this.onNewRequest}
-                dataSourceConfig={sourceConfig}
-                maxSearchResults={maxSearchResults}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                filter={autoLoad === false ? Filters.defaultFilter : Filters.fuzzyFilter}
-                placeholder={placeholder && t(placeholder)}
-                error={error}
-            />
-        );
-    }
-}
-
-export default withAddButton(AutoComplete);