@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Components/FormFragments/IntlInput.js

@@ -1,98 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import { getAvailableLocales, T } from '../../App/i18n';
-import '../Styles.scss';
-import IconButton from '../../UIComponents/IconButton';
-import TranslateIcon from '../../UIComponents/icons/TranslateIcon';
-import { Tooltip } from '@material-ui/core';
-
-const IntlInputHoc = IntlInputComponent => {
-    class IntlInputWrapper extends Component {
-        onChange = (name, value) => {
-            this.props.onChange(name, value, this.props.locale);
-        };
-
-        render() {
-            return <IntlInputComponent {...this.props} onChange={this.onChange} />;
-        }
-    }
-
-    class IntlInput extends Component {
-        constructor(props) {
-            super(props);
-
-            this.state = {
-                open: false,
-            };
-
-            this.locales = getAvailableLocales();
-        }
-
-        onToggle = () => {
-            this.setState({ open: !this.state.open });
-        };
-
-        onChange = (name, value, locale) => {
-            const values = [].concat(this.props.value || []),
-                entity = _.find(values, { language: locale });
-            if (entity) {
-                entity[this.props.intl.name] = value;
-            } else {
-                values.push({
-                    language: locale,
-                    [this.props.intl.name]: value,
-                });
-            }
-            this.props.onChange(name, values);
-        };
-
-        render() {
-            const { open } = this.state;
-            const tfs = [];
-            const locales = open ? this.locales : [this.props.locale];
-            for (let locale of locales) {
-                const _locale = locale.replace('-', '_');
-                const props = { ...this.props };
-                const value = _.get(_.find(props.value, { language: _locale }), props.intl.name);
-                props.label = (
-                    <span key={locale}>
-                        {props.label}
-                        {` (${locale})`}
-                    </span>
-                );
-                props.locale = _locale;
-                props.type = props.intl.type;
-                props.value = value;
-                tfs.push(
-                    <IntlInputWrapper
-                        {...props}
-                        onChange={this.onChange}
-                        key={props.name + props.intl.name + locale}
-                    />
-                );
-            }
-            const iconProps = {
-                color: open ? 'primary' : 'inherit',
-            };
-            return (
-                <div className={'intl-input' + (open ? ' highlighted-area' : '')}>
-                    {tfs}
-                    <Tooltip title={T('Translations')}>
-                        <IconButton className="intl-input-toggle" onClick={this.onToggle}>
-                            <TranslateIcon {...iconProps} />
-                        </IconButton>
-                    </Tooltip>
-                </div>
-            );
-        }
-    }
-
-    const mapStateToProps = ({ i18n }) => ({
-        locale: i18n.locale,
-    });
-
-    return connect(mapStateToProps)(IntlInput);
-};
-
-export default IntlInputHoc;

package/src/Components/FormFragments/Label.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-
-export default withStyles(
-    () => ({
-        root: {},
-        requiredMark: {},
-    }),
-    { name: 'Label' }
-)(({ required, classes, children }) => (
-    <span className={classes.root}>
-        {children}
-        {required && <span className={classes.requiredMark}>*</span>}
-    </span>
-));

package/src/Components/FormFragments/MarkDown.js

@@ -1,128 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import ReactMde from 'react-mde';
-import * as Showdown from 'showdown';
-import 'react-mde/lib/styles/css/react-mde-all.css';
-import ErrorWrapper from './ErrorWrapper';
-import FormControlLabel from '../../UIComponents/FormControlLabel';
-import { withStyles } from '@material-ui/core/styles';
-import debounce from 'lodash/debounce';
-
-const MARK_DOWN_FIELD_TRANSLATION_KEY = 'markDownField';
-
-import { use, t } from '../../App/i18n';
-use(
-    {
-        en: {
-            [MARK_DOWN_FIELD_TRANSLATION_KEY]: {
-                write: 'Write',
-                preview: 'Preview',
-            },
-        },
-        de: {
-            [MARK_DOWN_FIELD_TRANSLATION_KEY]: {
-                write: 'Schreiben',
-                preview: 'Vorschau',
-            },
-        },
-    },
-    true
-);
-
-const converter = new Showdown.Converter({
-    tables: true,
-    simplifiedAutoLink: true,
-    openLinksInNewWindow: true,
-});
-
-const toolbarCommands = [
-    ['header', 'bold', 'italic'],
-    ['link'],
-    ['unordered-list', 'ordered-list'],
-    ['image'],
-];
-
-const StyledFormControlLabel = withStyles({
-    labelPlacementStart: {},
-    root: {
-        margin: 0,
-        alignItems: 'flex-start',
-        width: '100%',
-    },
-})(FormControlLabel);
-
-const StyledMde = withStyles({
-    reactMde: {
-        width: '100%',
-        border: 0,
-        marginBottom: 10,
-    },
-    toolbar: {
-        background: 'none',
-        border: 0,
-    },
-    textArea: {
-        border: '1px solid rgba(0, 0, 0, 0.2) !important',
-    },
-    preview: {
-        overflowX: 'auto',
-    },
-})(ReactMde);
-
-export const MarkDown = props => {
-    const [selectedTab, setSelectedTab] = useState('write');
-    const { value, error, onChange, label, classes, maxEditorHeight, name } = props;
-    const [currentValue, setCurrentValue] = useState(value);
-    const onChangeDebounced = useCallback(debounce(onChange, 300), [onChange]);
-    useEffect(() => {
-        setCurrentValue(value);
-    }, [value]);
-    const changeHandler = value => {
-        setCurrentValue(value);
-        onChangeDebounced(name, value);
-    };
-    const translations = t(MARK_DOWN_FIELD_TRANSLATION_KEY);
-
-    return (
-        <ErrorWrapper error={error}>
-            <StyledFormControlLabel
-                label={label}
-                labelPlacement="top"
-                classes={classes}
-                control={
-                    <StyledMde
-                        maxEditorHeight={maxEditorHeight}
-                        value={currentValue}
-                        onChange={changeHandler}
-                        selectedTab={selectedTab}
-                        onTabChange={setSelectedTab}
-                        generateMarkdownPreview={markdown => Promise.resolve(converter.makeHtml(markdown))}
-                        childProps={{
-                            writeButton: {
-                                tabIndex: -1,
-                            },
-                        }}
-                        toolbarCommands={toolbarCommands}
-                        l18n={translations}
-                    />
-                }
-            />
-        </ErrorWrapper>
-    );
-};
-
-MarkDown.propTypes = {
-    value: PropTypes.string,
-    error: PropTypes.node,
-    onChange: PropTypes.func.isRequired,
-    label: PropTypes.node,
-    classes: PropTypes.object,
-    maxEditorHeight: PropTypes.number,
-    name: PropTypes.string,
-};
-
-MarkDown.defaultProps = {
-    value: '',
-};
-
-export default MarkDown;

package/src/Components/FormFragments/MonacoEditor.js

@@ -1,75 +0,0 @@
-/* global monaco */
-
-import withStyles from '@material-ui/core/styles/withStyles';
-import debounce from 'lodash/debounce';
-import ErrorWrapper from './ErrorWrapper';
-import React, { useEffect, useRef, useState } from 'react';
-import CircularProgress from '@material-ui/core/CircularProgress';
-
-const MonacoEditor = withStyles({
-    root: {
-        width: '100%',
-        height: 400,
-        border: '1px solid rgba(0, 0, 0, 0.2)',
-    },
-    labelContainer: {
-        height: 36,
-        display: 'flex',
-        alignItems: 'center',
-    },
-    progress: {
-        marginLeft: 8,
-    },
-})(({ name, value, onChange, label, error, classes, language }) => {
-    const ref = useRef();
-    const [loading, setLoading] = useState(true);
-    const [fallbackMode, setFallbackMode] = useState(false);
-    useEffect(() => {
-        let editor;
-        import('monaco-editor/esm/vs/editor/editor.api')
-            .then(() => {
-                if (ref.current) {
-                    editor = monaco.editor.create(ref.current, {
-                        value,
-                        language,
-                    });
-                    editor.getModel().onDidChangeContent(
-                        debounce(() => {
-                            onChange(name, editor.getModel().getValue());
-                        }, 300)
-                    );
-                }
-            })
-            .catch(() => setFallbackMode(true))
-            .finally(() => setLoading(false));
-        return () => {
-            if (editor) {
-                editor.dispose();
-                editor = null;
-            }
-        };
-    }, []);
-
-    return (
-        <ErrorWrapper error={error}>
-            <div>
-                <div className={classes.labelContainer}>
-                    <span>{label}</span>
-                    {loading && <CircularProgress size={20} className={classes.progress} />}
-                </div>
-                {fallbackMode ? (
-                    <textarea
-                        name={name}
-                        value={value}
-                        onChange={({ target: { value } }) => onChange(name, value)}
-                        className={classes.root}
-                    />
-                ) : (
-                    <div className={classes.root} ref={ref} />
-                )}
-            </div>
-        </ErrorWrapper>
-    );
-});
-
-export default MonacoEditor;

package/src/Components/FormFragments/NestedDataComponent.js

@@ -1,144 +0,0 @@
-import React, { Component } from 'react';
-import { isPlainObject, isArray, pick, filter } from 'lodash';
-import Data from '../../App/Data';
-
-import { InputWrapper } from '../Form';
-import { T } from '../../App/i18n';
-import _ from 'lodash';
-import Label from './Label';
-
-const nestedDataComponent = (NestingComponent, config = {}) => {
-    class NestedDataHOC extends Component {
-        constructor(props) {
-            super(props);
-
-            this.state = {
-                schema: null,
-            };
-        }
-
-        componentWillMount() {
-            const { schema } = this.props;
-            if (!schema) {
-                throw new Error('Schema must be provided for NestedDataComponent!');
-            }
-            this.setState({ schema: this.initData(schema) });
-        }
-
-        initData = schema => {
-            let data;
-            if (schema instanceof Data) {
-                data = schema;
-            } else {
-                data = new Data(schema);
-            }
-            data.addListener(Data.EventTypes.validate, this.onDataModified);
-            data.addListener(Data.EventTypes.setValue, this.onDataModified);
-            data.addListener(Data.EventTypes.update, this.onDataModified);
-            return data;
-        };
-
-        onDataModified = () => {
-            this.forceUpdate();
-        };
-
-        componentWillReceiveProps(props) {
-            if (!_.isEqual(this.props.schema, props.schema)) {
-                this.state.schema.updateSchemaObject(props.schema);
-            }
-        }
-
-        onChange = (name, value) => {
-            const { schema } = this.state;
-            schema[name] = value;
-
-            this.changeListener && this.changeListener(name, value, schema);
-            config.changeCustomizer && config.changeCustomizer.call(this, name, value);
-        };
-
-        setChangeListener = fn => {
-            this.changeListener = fn;
-        };
-
-        onChangePick = (names, valueObj) => {
-            const { schema } = this.state;
-            // get the given properties from the value object
-            if (isArray(names)) {
-                schema.updateValues(pick(valueObj, names));
-            }
-            // map the given properties from the value Object
-            else if (isPlainObject(names)) {
-                const mappedValues = {};
-                for (let p in names) {
-                    mappedValues[p] = valueObj[names[p]];
-                }
-                schema.updateValues(mappedValues);
-            }
-        };
-
-        renderWrappedInput = (input, key) => {
-            const { name } = input;
-            const { schema } = this.state;
-
-            if (name && typeof schema[name] !== 'object') {
-                throw new Error('Data field does not exist: ' + name);
-            }
-
-            if (input.shouldRender && !input.shouldRender(schema, input)) {
-                return null;
-            }
-
-            if (input.showField) {
-                const fieldsArray = _.get(input, 'tabs.array.fields');
-                let selectedField = _.find(fieldsArray, 'renderField');
-                if (selectedField.renderField && !selectedField.renderField(schema, selectedField)) {
-                    const filteredOutField = filter(fieldsArray, i => i.name !== selectedField.name);
-                    const inputWithoutSelectedField = {
-                        ...input,
-
-                        tabs: {
-                            ...input.tabs,
-                            array: {
-                                ...input.tabs.array,
-                                fields: filteredOutField,
-                            },
-                        },
-                    };
-                    input = inputWithoutSelectedField;
-                }
-            }
-
-            const { value, error, constraints } = schema[name];
-            const required = constraints && constraints.presence;
-            let props = {
-                ...this.props,
-                ...(isPlainObject(input) ? input : { type: input }),
-                value,
-                schema: schema[name].schema || schema,
-                parentSchema: schema[name].schema ? schema : null,
-                error: T(error, { escapeDot: true }),
-                label: <Label required={required}>{input.label && T(input.label)}</Label>,
-                onChange: this.onChange,
-                onChangePick: this.onChangePick,
-            };
-
-            return <InputWrapper {...props} key={input.name + key} />;
-        };
-
-        render() {
-            const { schema } = this.state;
-            const { renderWrappedInput, setChangeListener } = this;
-            const props = {
-                ...this.props,
-                schema,
-                renderWrappedInput,
-                setChangeListener,
-            };
-            return <NestingComponent ref="component" {...props} />;
-        }
-    }
-
-    return NestedDataHOC;
-};
-
-export default nestedDataComponent;

package/src/Components/FormFragments/ObjectToggle.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import UIToggle from '../../UIComponents/Toggle';
-import ErrorWrapper from './ErrorWrapper';
-import FormControlLabel from '../../UIComponents/FormControlLabel';
-import withStyles from '@material-ui/core/styles/withStyles';
-
-const errorStyle = {
-    thumbOff: {
-        backgroundColor: '#ffcccc',
-    },
-    trackOff: {
-        backgroundColor: '#ff9d9d',
-    },
-    thumbSwitched: {
-        backgroundColor: 'red',
-    },
-    trackSwitched: {
-        backgroundColor: '#ff9d9d',
-    },
-    labelStyle: {
-        color: 'red',
-    },
-};
-
-const styles = {
-    label: {
-        marginLeft: 0,
-        justifyContent: 'space-between',
-        width: '100%',
-        marginRight: 0,
-    },
-    body: {
-        fontSize: 16,
-    },
-};
-
-const objectToggle = props => {
-    const extraProps = props.error && {
-        thumbStyle: errorStyle.thumbOff,
-        trackStyle: errorStyle.trackOff,
-        thumbSwitchedStyle: errorStyle.thumbSwitched,
-        trackSwitchedStyle: errorStyle.trackSwitched,
-        labelStyle: errorStyle.labelStyle,
-    };
-    const { classes } = props;
-    return (
-        <ErrorWrapper error={props.error}>
-            <FormControlLabel
-                label={props.label}
-                default={!!props.defaultValue}
-                labelPlacement="start"
-                {...extraProps}
-                classes={{ labelPlacementStart: classes.label, label: classes.body }}
-                control={
-                    <UIToggle
-                        checked={!!(props.mapObjectToBoolean && props.mapObjectToBoolean(props.value))}
-                        onChange={event => {
-                            if (props.sourceConfig) {
-                                const checkedObj = props.mapItemsToBoolean(
-                                    props.source,
-                                    event.target.checked
-                                );
-                                props.onChange(props.name, checkedObj);
-                            }
-                        }}
-                        color="primary"
-                        style={styles.toggle}
-                    />
-                }
-            />
-        </ErrorWrapper>
-    );
-};
-
-export default withStyles(styles)(objectToggle);

package/src/Components/FormFragments/RadioGroup.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { RadioButton, RadioGroup } from '../../UIComponents/RadioButton';
-import FormControlLabel from '../../UIComponents/FormControlLabel';
-import styles from './styles';
-import { getInputValueByConfig } from './InputWithSource';
-
-const radioGroup = props => {
-    const value = getInputValueByConfig(props).toString();
-    return (
-        <div>
-            <div>{props.label}</div>
-            <RadioGroup
-                name={props.name}
-                value={value}
-                onChange={() => props.onChange(props.name, event.target.value)}
-            >
-                {props.source.map((item, idx) => (
-                    <FormControlLabel
-                        key={idx}
-                        value={item.value}
-                        label={item.label}
-                        style={styles.radioButton}
-                        control={<RadioButton color="primary" />}
-                    />
-                ))}
-            </RadioGroup>
-        </div>
-    );
-};
-
-export default radioGroup;

package/src/Components/FormFragments/Select.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import find from 'lodash/find';
-
-import SelectField from '../../UIComponents/SelectField';
-import MenuItem from '../../UIComponents/MenuItem';
-
-import {
-    getInputValueByConfig,
-    getInputItemParamsByConfig,
-    valueToNull,
-    nullToValue,
-} from './InputWithSource';
-
-const select = props => {
-    const value = nullToValue(getInputValueByConfig(props));
-    return (
-        <SelectField
-            style={{ width: '100%' }}
-            label={props.label}
-            value={value}
-            onChange={event => {
-                if (props.useObjects && props.sourceConfig) {
-                    const key = props.sourceConfig.value;
-                    const selectedObj = find(props.source, { [key]: event.target.value });
-                    props.onChange(props.name, selectedObj);
-                } else {
-                    props.onChange(props.name, valueToNull(event.target.value));
-                }
-            }}
-            onFocus={() => props.source.length === 0 && this.props.loadSource && this.props.loadSource()}
-            disabled={props.disabled}
-            error={props.error}
-            shrinkLabel={props.shrinkLabel}
-            placeholderValue={props.placeholderValue}
-            placeholder={props.placeholder}
-            disablePlaceholder={props.disablePlaceholder}
-        >
-            {props.source.map((item, idx) => {
-                const { value, text } = getInputItemParamsByConfig(item, props.sourceConfig);
-                const _value = nullToValue(value);
-                return (
-                    <MenuItem value={_value} key={idx}>
-                        {text}
-                    </MenuItem>
-                );
-            })}
-        </SelectField>
-    );
-};
-
-export default select;

package/src/Components/FormFragments/SetInput.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { getInputItemKeyByConfig, getInputItemParamsByConfig } from './InputWithSource';
-import { generateObjectPropertyStringComparator } from '../../App/Utils';
-import { withTheme } from '@material-ui/core/styles';
-
-const SetInputHoc = ArrayInputComponent => {
-    class SetInput extends React.Component {
-        onChange = (key, value) => {
-            let values = this.props.value ? [...this.props.value] : [];
-            const { useObjects } = this.props.set;
-            const { source, sourceConfig } = this.props;
-            const valueKey = getInputItemKeyByConfig(sourceConfig);
-            if (typeof value === 'boolean') {
-                if (value) {
-                    values.push(
-                        useObjects
-                            ? _.find(source, generateObjectPropertyStringComparator(valueKey, key))
-                            : key
-                    );
-                } else {
-                    values.splice(
-                        useObjects
-                            ? _.findIndex(values, generateObjectPropertyStringComparator(valueKey, key))
-                            : values.indexOf(key),
-                        1
-                    );
-                }
-            } else {
-                throw new Error('Not implemented!');
-            }
-            this.props.onChange(this.props.name, values);
-        };
-
-        render() {
-            const values = this.props.value;
-            const items = this.props.source || [];
-            const { sourceConfig, set, theme } = this.props;
-            const { useObjects, type } = set;
-            const valueKey = getInputItemKeyByConfig(sourceConfig);
-            const tfs = [];
-            for (let item of items) {
-                const props = { ...this.props };
-                const { value, text } = getInputItemParamsByConfig(item, sourceConfig);
-                props.label = text;
-                props.type = type;
-                props.onChange = this.onChange;
-                props.name = value;
-                props.value =
-                    (useObjects
-                        ? _.findIndex(values, generateObjectPropertyStringComparator(valueKey, value))
-                        : values.indexOf(value)) > -1;
-                tfs.push(<ArrayInputComponent {...props} key={props.name} />);
-            }
-            return (
-                <div className="array-input">
-                    <div style={{ color: theme.palette.text.primary }}>{this.props.label}</div>
-                    {tfs}
-                </div>
-            );
-        }
-    }
-
-    return withTheme()(SetInput);
-};
-
-export default SetInputHoc;