@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Components/FormFragments/File.js

@@ -1,202 +0,0 @@
-import React, { useState } from 'react';
-import _, { isString, get } from 'lodash';
-
-import RaisedButton from '../../UIComponents/RaisedButton';
-import IconButton from '../../UIComponents/IconButton';
-import FolderIcon from '../../UIComponents/icons/FolderIcon';
-import DeleteIcon from '../../UIComponents/icons/DeleteIcon';
-import LaunchIcon from '../../UIComponents/icons/LaunchIcon';
-import Tooltip from '../../UIComponents/Tooltip';
-
-import ErrorWrapper from './ErrorWrapper';
-import networkConfig from '../../App/Config/network';
-import { T } from '../../App/i18n';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import { withStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
-import { CircularProgress } from '@material-ui/core';
-
-const styles = {
-    button: {
-        marginTop: 7,
-        marginBottom: 7,
-    },
-    fileInput: {
-        cursor: 'pointer',
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        right: 0,
-        left: 0,
-        width: '100%',
-        opacity: 0,
-    },
-    fileInputName: {
-        display: 'inline-block',
-        marginLeft: 15,
-    },
-    folderIcon: {
-        verticalAlign: 'middle',
-        marginRight: 6,
-    },
-    viewButton: {
-        verticalAlign: 'middle',
-    },
-    previewImage: {
-        height: 180,
-        width: 180,
-        objectFit: 'scale-down',
-        marginLeft: 10,
-    },
-    previewImageProgress: {
-        position: 'absolute',
-        marginTop: 90,
-        marginLeft: -90,
-    },
-    previewImageOpenable: {
-        cursor: 'pointer',
-    },
-    wrapper: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-    label: {
-        position: 'relative',
-        transform: 'none',
-    },
-    warningText: {
-        fontSize: 12,
-        color: 'grey',
-    },
-};
-
-const getFilenameFromPath = path => {
-    return isString(path) ? path.split('/').pop() : get(path, 'name', '');
-};
-
-const getPreviewImagePath = path => {
-    return path ? networkConfig.basePath.replace(/\/$/, '') + path : '';
-};
-
-const File = props => {
-    const {
-        isPreviewRequired = false,
-        deleteEnabled = false,
-        openEnabled = false,
-        showFileName = false,
-        openOnPreviewClick = true,
-        classes,
-    } = props;
-    const [previewUrl, setPreviewUrl] = useState(null);
-    const [previewImageLoaded, setPreviewImageLoaded] = useState(null);
-
-    const addPreviewImage = file => {
-        var reader = new FileReader();
-        reader.onload = e => {
-            setPreviewUrl(e.target.result);
-        };
-        reader.readAsDataURL(file);
-    };
-
-    const openFile = () => {
-        let url = previewUrl || props.value;
-        const isDataUrl = /^data:/.test(url);
-        if (!isDataUrl) {
-            url = `${networkConfig.basePath}${props.value.replace(/^\//, '')}?${Math.random()}`;
-        }
-
-        const w = window.open(url);
-
-        if (isDataUrl) {
-            const image = new Image();
-            image.src = url;
-            w.document.write(image.outerHTML);
-        }
-    };
-
-    return (
-        <ErrorWrapper error={props.error}>
-            <FormControl>
-                {props.label && (
-                    <InputLabel className={clsx('label', classes.label)}>{props.label}</InputLabel>
-                )}
-                <div className={clsx('element-wrapper', classes.wrapper)}>
-                    <RaisedButton className={classes.button}>
-                        <span>
-                            <FolderIcon className={classes.folderIcon} />
-                            {T('Upload file')}
-                        </span>
-                        <input
-                            type="file"
-                            className={classes.fileInput}
-                            accept={props.accept}
-                            onChange={evt => {
-                                props.onChange(props.name, evt.target.files[0]);
-                                isPreviewRequired && addPreviewImage(evt.target.files[0]);
-                            }}
-                        />
-                    </RaisedButton>
-                    {props.value && _.isString(props.value) && (
-                        <React.Fragment>
-                            {deleteEnabled && (
-                                <Tooltip title={T('Delete file')}>
-                                    <IconButton
-                                        className={classes.viewButton}
-                                        onClick={() => props.onChange(props.name, null)}
-                                    >
-                                        <DeleteIcon />
-                                    </IconButton>
-                                </Tooltip>
-                            )}
-                            {openEnabled && (
-                                <Tooltip title={T('View')}>
-                                    <IconButton className={classes.viewButton} onClick={openFile}>
-                                        <LaunchIcon />
-                                    </IconButton>
-                                </Tooltip>
-                            )}
-                            {showFileName && (
-                                <div className={classes.fileInputName}>
-                                    {getFilenameFromPath(props.value)}
-                                </div>
-                            )}
-                        </React.Fragment>
-                    )}
-
-                    {props.value && !_.isString(props.value) && showFileName && (
-                        <div className={classes.fileInputName}>{getFilenameFromPath(props.value)}</div>
-                    )}
-                    {isPreviewRequired && (previewUrl || props.value) && (
-                        <div>
-                            <img
-                                className={clsx(
-                                    classes.previewImage,
-                                    openOnPreviewClick && classes.previewImageOpenable
-                                )}
-                                onLoad={() => setPreviewImageLoaded(true)}
-                                src={previewUrl || getPreviewImagePath(props.value)}
-                                onClick={openOnPreviewClick ? openFile : null}
-                            />
-                            {!previewImageLoaded && (
-                                <CircularProgress size={24} className={classes.previewImageProgress} />
-                            )}
-                        </div>
-                    )}
-                </div>
-                {props.warningMessage && <span className={classes.warningText}>{props.warningMessage}</span>}
-            </FormControl>
-        </ErrorWrapper>
-    );
-};
-
-File.defaultProps = {
-    onChange: () => {},
-    isPreviewRequired: false,
-    deleteEnabled: false,
-    openEnabled: false,
-    showFileName: false,
-    openOnPreviewClick: true,
-};
-
-export default withStyles(styles)(File);

package/src/Components/FormFragments/HintText.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-
-export default withStyles(
-    () => ({
-        hint: {
-            fontSize: 15,
-        },
-    }),
-    { name: 'HintText' }
-)(props => {
-    const { classes, renderHintText, value } = props;
-    return <span className={classes.hint}>{renderHintText(value)}</span>;
-});

package/src/Components/FormFragments/InlineAddButton.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { isEmpty } from 'lodash';
-
-import IconButton from '../../UIComponents/IconButton';
-import AddCircleOutlineIcon from '../../UIComponents/icons/AddCircleOutlineIcon';
-
-export const InlineAddButton = props => (
-    <IconButton
-        className="form-input-addButton"
-        onClick={props.onClick}
-        onMouseDown={e => e.preventDefault()}
-    >
-        <AddCircleOutlineIcon />
-    </IconButton>
-);
-
-export default InlineAddButton;
-
-function realEmpty(value) {
-    if (typeof value === 'object') {
-        return isEmpty(value);
-    }
-    return !value;
-}
-
-export const withAddButton = Component =>
-    connect(
-        // map state to props
-        ({ form }, { addButton }) => {
-            let selectData;
-            if (addButton && addButton.target) {
-                selectData = form.entityValuesByKey[addButton.target];
-            }
-            return {
-                selectData,
-            };
-        },
-        // map dispatch to props
-        () => ({})
-    )(
-        class InlineAddWrapper extends React.Component {
-            state = {
-                showAddButton: false,
-            };
-
-            componentWillReceiveProps(props) {
-                if (
-                    props.selectData &&
-                    props.selectData.ready &&
-                    props.selectData !== this.props.selectData
-                ) {
-                    if (this.input.triggerChange) {
-                        this.input.triggerChange(props.selectData.value);
-                    } else {
-                        // eslint-disable-next-line no-console
-                        console.error('Element does not have a triggerChange function!', this.input);
-                    }
-                }
-            }
-
-            onFocus = () => {
-                if (this.props.addButton && (realEmpty(this.props.value) || this.props.addButton.multiple)) {
-                    this.setState({ showAddButton: true });
-                }
-            };
-            onBlur = () => {
-                if (this.state.showAddButton) {
-                    this.setState({ showAddButton: false });
-                }
-            };
-
-            onChange = (name, value) => {
-                const { onChange } = this.props;
-                onChange(name, value);
-
-                if (this.props.addButton && (realEmpty(value) || this.props.addButton.multiple)) {
-                    this.setState({ showAddButton: true });
-                }
-            };
-
-            onAddAction = () => {
-                const { onAction, addButton } = this.props;
-                if (onAction) {
-                    onAction('CREATE_ENTITY', { target: addButton.target });
-                }
-                if (this.input.triggerClose instanceof Function) {
-                    this.input.triggerClose();
-                }
-            };
-
-            getProps() {
-                const { onFocus, onBlur, onChange } = this;
-                const props = { ...this.props, onFocus, onBlur, onChange };
-                // eslint-disable-next-line no-unused-vars
-                const { addButton, onAction, selectData, ...otherProps } = props;
-                return otherProps;
-            }
-
-            render() {
-                return (
-                    <div>
-                        <Component ref={ref => (this.input = ref)} {...this.getProps()} />
-                        {this.state.showAddButton && <InlineAddButton onClick={this.onAddAction} />}
-                    </div>
-                );
-            }
-        }
-    );

package/src/Components/FormFragments/InputArray.js

@@ -1,246 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-
-import SimpleTable from './SimpleTable';
-import { T } from '../../App/i18n';
-import Data from '../../App/Data';
-
-import nestedDataComponent from './NestedDataComponent';
-import { generateObjectPropertyStringComparator } from '../../App/Utils';
-import RaisedButton from '../../UIComponents/RaisedButton';
-import Dialog from '../../UIComponents/Dialog';
-import Add from '../../UIComponents/icons/AddIcon';
-import { withValidatorCallbackContext } from '../ValidatorCallbackProvider';
-
-import './Styles.scss';
-
-class InputArray extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            showEditor: false,
-            selectedRow: false,
-            newItem: false,
-        };
-    }
-
-    componentWillMount() {
-        const { schema } = this.props;
-
-        schema.addListener(
-            Data.EventTypes.reset,
-            ({ event }) => event.active !== this && this.setState({ selectedRow: false, showEditor: false })
-        );
-
-        this.props.setChangeListener(() => {
-            // in edit mode call setData on change
-            if (this.state.selectedRow !== false) {
-                this.setData({ updateOnly: true });
-            }
-        });
-    }
-
-    componentDidMount() {
-        this.props.validatorCallbackContext.addValidator &&
-            this.props.validatorCallbackContext.addValidator(this.validatorCallback);
-    }
-
-    componentWillUnmount() {
-        this.props.validatorCallbackContext.removeValidator &&
-            this.props.validatorCallbackContext.removeValidator(this.validatorCallback);
-    }
-
-    validatorCallback = () => {
-        if (this.state.showEditor) {
-            return this.setData();
-        }
-        return true;
-    };
-
-    onRowSelection = rows => {
-        const { schema } = this.props;
-        schema.reset({ active: rows.length !== 0 && this });
-        if (rows.length !== 0) {
-            const selectedRow = rows[0];
-            const { value, errors } = this.props;
-            if (value[selectedRow]) {
-                schema.updateValues(value[selectedRow]);
-                schema.setErrors(_.isArray(errors) ? errors[selectedRow] : undefined);
-                this.setState({ selectedRow, showEditor: true });
-            }
-        }
-    };
-
-    setData = (options = {}) => {
-        const { updateOnly = false } = options;
-        const { selectedRow } = this.state;
-        const { schema } = this.props;
-        if (schema.validate()) {
-            const value = _.isArray(this.props.value) ? this.props.value : [];
-            const data = schema.getData();
-            const updateOnPropertyMatch = _.get(this.props, 'array.updateOnPropertyMatch');
-
-            let item;
-            if (updateOnPropertyMatch) {
-                // find the item in the list with the same property value
-                item = _.find(
-                    value,
-                    generateObjectPropertyStringComparator(updateOnPropertyMatch, data[updateOnPropertyMatch])
-                );
-            }
-            // if the item is there, merge the data into it
-            if (item) {
-                _.merge(item, data);
-            }
-            // if an item is selected for edit
-            else if (selectedRow !== false) {
-                value[selectedRow] = data;
-            }
-            // if it's a new item
-            else if (!updateOnly) {
-                value.push(data);
-            }
-            const { name } = this.props;
-            this.props.onChange(name, value);
-
-            if (!updateOnly) {
-                schema.reset();
-                this.setState({ selectedRow: false, showEditor: false });
-            }
-            return true;
-        } else {
-            // eslint-disable-next-line no-console
-            console.error('Validation error!', schema.getErrors());
-        }
-        return false;
-    };
-
-    onCancel = () => {
-        const { schema } = this.props;
-        schema.reset();
-        this.setState({ selectedRow: false, showEditor: false, newItem: false });
-    };
-
-    onDelete = row => {
-        const { name, value } = this.props;
-        value.splice(row, 1);
-        this.props.onChange(name, value);
-
-        const { schema } = this.props;
-        schema.reset();
-        this.setState({ selectedRow: false, showEditor: false });
-    };
-
-    addNewItem = () => {
-        if (this.state.showEditor) {
-            if (!this.setData()) {
-                return;
-            }
-        }
-        const { schema } = this.props;
-        schema.reset({ active: this });
-        this.setState(state => ({
-            selectedRow: false,
-            showEditor: !this.isAddingDisabled(),
-            newItem: !state.newItem,
-        }));
-    };
-
-    isAddingDisabled() {
-        const {
-            array: { disableAdd },
-        } = this.props;
-        if (disableAdd instanceof Function) {
-            return disableAdd(this.props);
-        }
-        return disableAdd;
-    }
-
-    renderAddButton = () => {
-        const addButtonLabel = this.props.array.addButtonLabel || 'Add';
-        const label = _.isString(addButtonLabel) ? T(addButtonLabel) : addButtonLabel;
-        return (
-            !this.isAddingDisabled() && (
-                <RaisedButton onClick={this.addNewItem} id="add" color="secondary">
-                    <Add />
-                    {label}
-                </RaisedButton>
-            )
-        );
-    };
-
-    renderCancelButton = () => {
-        const addMode = this.state.selectedRow === false;
-        if (addMode && this.state.showEditor) {
-            return <RaisedButton label={T('Cancel')} onClick={this.onCancel} id="cancel" />;
-        }
-    };
-
-    render() {
-        const { label, array, value, errors, buttonsPosition = '', showPopup = false } = this.props;
-        const { fields, disableDelete, disableEdit } = array;
-        const { newItem } = this.state;
-        const columns = array.columns || fields;
-        const selectedRows = this.state.selectedRow === false ? [] : [this.state.selectedRow];
-
-        return (
-            <div>
-                {label && <div className="label">{label}</div>}
-                {buttonsPosition === 'top' && (
-                    <div className="cancel-button">
-                        {!showPopup && this.renderCancelButton()}
-                        <div className="action-buttons">{this.renderAddButton()}</div>
-                    </div>
-                )}
-
-                {value.length > 0 && (
-                    <SimpleTable
-                        columns={columns}
-                        data={value}
-                        onRowSelection={!disableEdit && this.onRowSelection}
-                        selectedRows={selectedRows}
-                        onDeleteRow={!disableDelete && this.onDelete}
-                        errors={errors}
-                    />
-                )}
-
-                {this.state.showEditor &&
-                    (showPopup ? (
-                        <Dialog open={true}>
-                            <div className="form">
-                                {fields.map((field, idx) => this.props.renderWrappedInput(field, idx))}
-                            </div>
-                            <div className="overlay-actions">
-                                {newItem && (
-                                    <RaisedButton
-                                        primary={true}
-                                        label={T('Save')}
-                                        onClick={() => {
-                                            this.addNewItem();
-                                            this.setState({ selectedRow: false, showEditor: false });
-                                        }}
-                                    />
-                                )}
-                                <RaisedButton
-                                    label={newItem ? T('Cancel') : T('Close')}
-                                    onClick={this.onCancel}
-                                />
-                            </div>
-                        </Dialog>
-                    ) : (
-                        <div>{fields.map((field, idx) => this.props.renderWrappedInput(field, idx))}</div>
-                    ))}
-
-                {buttonsPosition !== 'top' && (
-                    <div className="cancel-button">
-                        {!showPopup && this.renderCancelButton()}
-                        <div className="action-buttons">{this.renderAddButton()}</div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-export default nestedDataComponent(withValidatorCallbackContext(InputArray));

package/src/Components/FormFragments/InputGroup.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import withStyles from '@material-ui/core/styles/withStyles';
-import { T } from '../../App/i18n';
-import { get } from 'lodash';
-
-const styles = {
-    wrapper: {
-        display: 'flex',
-        alignItems: 'center',
-        '& > *': {
-            marginRight: 16,
-        },
-        '& .form-input-wrapper': {
-            paddingBottom: 0,
-        },
-    },
-    label: {
-        paddingTop: 8,
-        position: 'relative',
-        transform: 'none',
-    },
-};
-
-const inputGroup = withStyles(styles)(props => {
-    const { classes, fields, label, dataReference, required, renderWrappedInput } = props;
-    const error = fields.length > 0 ? get(dataReference[fields[0].name], 'error', '') : '';
-    return fields ? (
-        <FormControl>
-            {label && (
-                <InputLabel required={required} className={classes.label}>
-                    {label}
-                </InputLabel>
-            )}
-            <div className={'element-wrapper ' + classes.wrapper}>{fields.map(renderWrappedInput)}</div>
-            {error && (
-                <div className="form-field-error" style={{ paddingTop: 5 }}>
-                    {T(error, { escapeDot: true })}
-                </div>
-            )}
-        </FormControl>
-    ) : null;
-});
-
-export default inputGroup;

package/src/Components/FormFragments/InputWithSource.js

@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-
-export const getInputValueByConfig = ({ value, sourceConfig }) => {
-    if (_.isObject(value)) {
-        if (_.isObject(sourceConfig) && sourceConfig.value) {
-            return _.get(value, sourceConfig.value);
-        } else if (value.id) {
-            return value.id;
-        } else {
-            throw new Error('Cannot read ID from input value object!');
-        }
-    }
-    return value;
-};
-
-export const getInputItemParamsByConfig = (item, sourceConfig) => {
-    let value, text;
-    if (_.isObject(item)) {
-        if (sourceConfig) {
-            value = _.get(item, sourceConfig.value, item.id);
-            text = _.isFunction(sourceConfig.text)
-                ? sourceConfig.text.call(null, item)
-                : _.get(item, sourceConfig.text, item.id);
-        } else if (item.id) {
-            value = text = item.id;
-        } else {
-            throw new Error('Cannot read params from input item object!');
-        }
-    } else {
-        value = text = item;
-    }
-    return {
-        value,
-        text,
-    };
-};
-
-export const getInputItemKeyByConfig = sourceConfig => {
-    return sourceConfig.value || 'id';
-};
-
-export const sourceConfigPropType = PropTypes.shape({
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-    value: PropTypes.string.isRequired,
-});
-
-export const valueToNull = value => (value === 'null' ? null : value);
-export const nullToValue = value => (value === null ? 'null' : value);