@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Components/FormFragments/SimpleNestedData.js

@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-
-import nestedDataComponent from './NestedDataComponent';
-
-class SimpleNestedData extends Component {
-    componentDidMount() {
-        const { schema, value } = this.props;
-        schema.updateValues(value);
-    }
-
-    componentWillReceiveProps(props) {
-        const { schema, value } = props;
-        schema.updateValues(value);
-    }
-
-    render() {
-        const { fields } = this.props;
-
-        return <div>{fields.map((field, idx) => this.props.renderWrappedInput(field, idx))}</div>;
-    }
-}
-
-function changeCustomizer(name, value) {
-    const { value: currentData, name: containerField, onChange } = this.props;
-    return onChange(containerField, { ...currentData, [name]: value });
-}
-
-export default nestedDataComponent(SimpleNestedData, { changeCustomizer });

package/src/Components/FormFragments/SimpleTable.js

@@ -1,224 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { T } from '../../App/i18n';
-
-import {
-    Table,
-    TableBody,
-    TableHead,
-    TableHeadColumn,
-    TableRow,
-    TableRowColumn,
-} from '../../UIComponents/Table';
-import IconButton from '../../UIComponents/IconButton';
-import DeleteForever from '../../UIComponents/icons/DeleteForeverIcon';
-
-import ColumnFilter from '../ListColumnFilter';
-import Dialog from '../../UIComponents/Dialog';
-import FlatButton from '../../UIComponents/FlatButton';
-
-const tableStyle = {
-    actionsColumn: {
-        width: '48px',
-    },
-    deleteButton: {
-        marginLeft: '-24px',
-    },
-    column: {
-        whiteSpace: 'normal',
-        overflow: 'auto',
-        paddingTop: 16,
-        paddingBottom: 16,
-    },
-};
-
-class SimpleTable extends Component {
-    state = {
-        filteredData: null,
-        filters: {},
-        order: {},
-        deleteConfirmDialogRowIndex: null,
-        selectedRows: [],
-    };
-
-    onFilterChange = (fieldName, value) => {
-        if (value) {
-            this.setState({
-                filters: {
-                    ...this.state.filters,
-                    [fieldName]: value,
-                },
-            });
-        } else {
-            this.setState({
-                filters: _.omit(this.state.filters, fieldName),
-            });
-        }
-    };
-
-    onSortChange = (fieldName, dir) => {
-        if (dir) {
-            this.setState({
-                order: {
-                    ...this.state.order,
-                    [fieldName]: dir,
-                },
-            });
-        } else {
-            this.setState({
-                order: _.omit(this.state.order, fieldName),
-            });
-        }
-    };
-
-    componentDidUpdate(prevProps, prevState) {
-        const { filters, order } = this.state;
-        const { data, selectedRows } = this.props;
-
-        if (prevState.filters !== filters || prevState.order !== order || prevProps.data !== data) {
-            let filteredData = data;
-
-            // do the filtering
-            Object.keys(filters).forEach(fieldName => {
-                filteredData = _.filter(filteredData, rowData => {
-                    const valueStr = ('' + rowData[fieldName]).toLowerCase();
-                    const searchStr = ('' + filters[fieldName]).toLowerCase();
-                    return valueStr.indexOf(searchStr) !== -1;
-                });
-            });
-
-            // create field name and direction list from the order map
-            const fieldNames = [];
-            const dirs = [];
-            Object.keys(order).forEach(fieldName => {
-                fieldNames.push(fieldName);
-                dirs.push(order[fieldName]);
-            });
-            if (fieldNames.length > 0) {
-                filteredData = _.orderBy(filteredData, fieldNames, dirs);
-            }
-            this.setState({ filteredData });
-        }
-
-        if (prevProps.selectedRows !== selectedRows) {
-            this.setState({ selectedRows });
-        }
-    }
-
-    renderDeleteButton = rowIndex => {
-        return (
-            this.props.onDeleteRow && (
-                <React.Fragment>
-                    <IconButton
-                        onClick={e =>
-                            e.stopPropagation() || this.setState({ deleteConfirmDialogRowIndex: rowIndex })
-                        }
-                        style={tableStyle.deleteButton}
-                    >
-                        <DeleteForever />
-                    </IconButton>
-                    {this.state.deleteConfirmDialogRowIndex === rowIndex &&
-                        this.renderConfirmationDialog(rowIndex)}
-                </React.Fragment>
-            )
-        );
-    };
-
-    renderConfirmationDialog = rowIndex => {
-        return (
-            <Dialog
-                title={T('confirmationModal.titleSingle')}
-                open={this.state.deleteConfirmDialogRowIndex !== null}
-                onClose={() => this.setState({ deleteConfirmDialogRowIndex: null })}
-                actions={
-                    <React.Fragment>
-                        <FlatButton
-                            label={T('confirmationModal.delete')}
-                            primary={true}
-                            onClick={() => {
-                                this.setState({ deleteConfirmDialogRowIndex: null });
-                                this.props.onDeleteRow(rowIndex);
-                            }}
-                        />
-                        <FlatButton
-                            label={T('confirmationModal.cancel')}
-                            onClick={() => this.setState({ deleteConfirmDialogRowIndex: null })}
-                        />
-                    </React.Fragment>
-                }
-            ></Dialog>
-        );
-    };
-
-    render() {
-        const { onRowSelection, columns, errors } = this.props;
-        const data = this.state.filteredData || this.props.data;
-
-        return (
-            <Table
-                selectable={!!onRowSelection}
-                onRowSelected={rows => {
-                    this.setState({ selectedRows: rows });
-                    if (typeof this.props.onRowSelection === 'function') {
-                        this.props.onRowSelection(rows);
-                    }
-                }}
-                selected={this.state.selectedRows}
-            >
-                <TableHead displaySelectAll={false} adjustForCheckbox={false}>
-                    <TableRow>
-                        {columns.map(column => (
-                            <TableHeadColumn key={column.name}>
-                                <ColumnFilter
-                                    {...column}
-                                    onFilterChange={this.onFilterChange}
-                                    onSortChange={this.onSortChange}
-                                />
-                            </TableHeadColumn>
-                        ))}
-                        <TableHeadColumn key="actions" style={tableStyle.actionsColumn}></TableHeadColumn>
-                    </TableRow>
-                </TableHead>
-                <TableBody deselectOnClickaway={false} displayRowCheckbox={false} ref="tableBody">
-                    {data.map((row, index) => {
-                        const style = _.isArray(errors) && errors.length ? { background: 'red' } : {};
-                        return (
-                            <TableRow key={index} style={style}>
-                                {columns.map((column, i) => (
-                                    <TableRowColumn
-                                        key={i}
-                                        style={tableStyle.column}
-                                        onClick={e => {
-                                            if (column.disableSelection) {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                            }
-                                        }}
-                                    >
-                                        {column.renderValue
-                                            ? column.renderValue(row[column.name], row)
-                                            : row[column.name] !== null && row[column.name] !== undefined
-                                            ? String(row[column.name])
-                                            : ''}
-                                    </TableRowColumn>
-                                ))}
-                                <TableRowColumn
-                                    key="actions"
-                                    style={tableStyle.actionsColumn}
-                                    onClick={e => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                    }}
-                                >
-                                    {this.renderDeleteButton(index)}
-                                </TableRowColumn>
-                            </TableRow>
-                        );
-                    })}
-                </TableBody>
-            </Table>
-        );
-    }
-}
-
-export default SimpleTable;

package/src/Components/FormFragments/SimpleTextEditor.js

@@ -1,26 +0,0 @@
-import withStyles from '@material-ui/core/styles/withStyles';
-import ErrorWrapper from './ErrorWrapper';
-import React from 'react';
-
-const SimpleTextEditor = withStyles({
-    root: {
-        width: '100%',
-        height: 400,
-    },
-})(({ name, value, onChange, label, error, classes }) => {
-    return (
-        <ErrorWrapper error={error}>
-            <div>
-                {label && <div className="label">{label}</div>}
-                <textarea
-                    name={name}
-                    value={value}
-                    onChange={({ target: { value } }) => onChange(name, value)}
-                    className={classes.root}
-                />
-            </div>
-        </ErrorWrapper>
-    );
-});
-
-export default SimpleTextEditor;

package/src/Components/FormFragments/Styles.scss

@@ -1,119 +0,0 @@
-.action-buttons {
-  flex-direction: column;
-  display: flex;
-  align-items: flex-end;
-}
-.cancel-button {
-  flex-direction: column;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin-top: -0.8em;
-}
-
-.form-field-error {
-  position: relative;
-  bottom: 15px;
-  font-size: 12px;
-  line-height: 12px;
-  color: rgb(244, 67, 54);
-  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-}
-
-.form-field-loading {
-  text-align: center;
-  height: 72px;
-  line-height: 24px;
-  padding: 12px;
-  font-size: 0.8em;
-}
-
-.group {
-  .group-container {
-    padding-left: 15px;
-
-    .group-label {
-      padding-top: 5px;
-      font-size: .8em;
-      font-weight: bold;
-    }
-    .group-item {
-    }
-
-    &:after {
-      content: '';
-      display: block;
-      clear: both;
-    }
-  }
-
-  &.table {
-    .group-container {
-      .group-label {
-        float: left;
-        width: 20%;
-        padding-top: 20px;
-      }
-      .group-item {
-        float: right;
-        width: 80%
-      }
-    }
-  }
-}
-
-.twoSideSelect-sideContainer {
-  > div {
-    min-height: 48px;
-    width: 50%;
-    display: inline-block;
-    float: left;
-  }
-  .twoSideSelect-source {
-    > div {
-
-    }
-  }
-  &:after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-}
-
-.twoSideSelect-content {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  max-width: 85%;
-}
-
-.twoSideSelect-item {
-  line-height: 48px;
-  min-height: 48px;
-  display: flex;
-  > * {
-    vertical-align: middle;
-    flex: 1;
-  }
-  > button {
-    float: right;
-  }
-}
-
-.twoSideSelect-selection {
-  &.sortable {
-    .twoSideSelect-item {
-      cursor: move;
-    }
-  }
-}
-
-.twoSideSelect-info {
-  color: rgb(158, 158, 158);
-}
-
-.overlay-actions {
-  text-align: right;
-}

package/src/Components/FormFragments/Tabs.js

@@ -1,207 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-
-import { InputWrapper } from '../Form';
-import { Tab, Tabs } from '../../UIComponents/Tabs';
-import { T } from '../../App/i18n';
-import Data from '../../App/Data';
-
-import { getInputItemParamsByConfig } from './InputWithSource';
-import nestedDataComponent from './NestedDataComponent';
-
-import './Styles.scss';
-
-class InputTabs extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            tabValue: null,
-            tabData: {},
-        };
-    }
-
-    componentWillMount() {
-        const { source, sourceConfig, schema } = this.props;
-
-        schema.addListener(Data.EventTypes.init, this.assignTabValue);
-        schema.addListener(Data.EventTypes.reset, this.assignTabValue);
-
-        this.setState(
-            { tabValue: getInputItemParamsByConfig(source[0], sourceConfig).value },
-            this.assignTabValue
-        );
-        this.initTabData();
-    }
-
-    componentWillReceiveProps(props) {
-        if (!_.isEqual(props, this.props)) {
-            this.initTabData(props);
-        }
-    }
-
-    initTabData = props => {
-        const { source, sourceConfig } = props || this.props;
-        const tabData = {};
-        source.forEach(item => {
-            const idx = getInputItemParamsByConfig(item, sourceConfig).value;
-            tabData[idx] = this.filterValuesAndErrors(item, props);
-        });
-        this.setState({ tabData });
-    };
-
-    assignTabValue = () => {
-        this.props.tabs.assignTabValue &&
-            this.props.tabs.assignTabValue(this.state.tabValue, this.props.schema);
-    };
-
-    onChange = (name, value) => {
-        const { tabs } = this.props;
-        const { tabData, tabValue } = this.state;
-        tabData[tabValue].filteredValues = value;
-        this.setState({ tabData });
-        switch (tabs.type) {
-            case 'array':
-                this.props.onChange(name, _.flatten(_.map(tabData, 'filteredValues')));
-                break;
-
-            default:
-                this.props.onChange(name, value);
-                break;
-        }
-    };
-
-    renderWrappedInput = (input, key, filteredValue, filteredErrors, tabValue) => {
-        const { value, error, schema, tabs, disableAdd, parentSchema } = this.props;
-        const props = {
-            ...input,
-            schema,
-            parentSchema,
-            disableAdd,
-            tabValue,
-            errors: filteredErrors,
-            value: filteredValue || value,
-            error: T(error, { escapeDot: true }),
-            label: T(input.label),
-            onChange: tabs.type === 'array' ? (name, value) => this.onChange(name, value) : this.onChange,
-        };
-
-        return <InputWrapper {...props} key={input.name + key} />;
-    };
-
-    renderTab = tabValue => {
-        const { filteredValues, filteredErrors } = this.state.tabData[tabValue];
-        const { tabs } = this.props;
-        switch (tabs.type) {
-            case 'array': {
-                const arrayInput = tabs;
-                return this.renderWrappedInput(
-                    arrayInput,
-                    arrayInput.name,
-                    filteredValues,
-                    filteredErrors,
-                    tabValue
-                );
-            }
-
-            default:
-                throw new Error('Unhandled tab type: ' + tabs.type);
-        }
-    };
-
-    filterValuesAndErrors = (sourceItem, props) => {
-        const { tabs, value, errors } = props || this.props;
-        const filteredErrors = [];
-        const filteredValues = [];
-        let row = 0;
-        _.forEach(value, (v, idx) => {
-            const res = tabs.filterValues(sourceItem, v);
-            if (res) {
-                filteredValues.push(v);
-                if (errors && errors[idx]) {
-                    filteredErrors[row] = errors[idx];
-                }
-                row++;
-            }
-        });
-        return {
-            filteredValues,
-            filteredErrors,
-        };
-    };
-
-    onTabChange = tabValue => {
-        if (this.state.tabValue !== tabValue) {
-            this.setState({ tabValue }, () => {
-                this.assignTabValue();
-            });
-        }
-    };
-
-    render() {
-        const { source, sourceConfig, label, tabs } = this.props;
-
-        let component;
-
-        switch (tabs.layout) {
-            case 'groups':
-                component = (
-                    <div className={'group ' + tabs.className}>
-                        {source.map((item, idx) => {
-                            const { value, text } = getInputItemParamsByConfig(item, sourceConfig);
-
-                            const { filteredErrors } = this.state.tabData[value];
-                            const style = filteredErrors.length ? { background: 'red' } : {};
-
-                            return (
-                                <div
-                                    className="group-container"
-                                    key={idx}
-                                    onFocus={() => this.onTabChange(value)}
-                                >
-                                    <div className="group-label" style={style}>
-                                        {text}
-                                    </div>
-                                    <div className="group-item">{this.renderTab(value)}</div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                );
-                break;
-
-            default:
-                component = (
-                    <Tabs>
-                        {source.map((item, idx) => {
-                            const { value, text } = getInputItemParamsByConfig(item, sourceConfig);
-
-                            const { filteredErrors } = this.state.tabData[value];
-                            const style = filteredErrors.length ? { background: 'red' } : {};
-                            return (
-                                <Tab
-                                    label={text}
-                                    value={value}
-                                    key={idx}
-                                    onActive={tab => this.onTabChange(tab.props.value)}
-                                    style={style}
-                                >
-                                    <div>{this.renderTab(value)}</div>
-                                </Tab>
-                            );
-                        })}
-                    </Tabs>
-                );
-        }
-
-        return (
-            <div>
-                <div className="label">{label}</div>
-
-                {component}
-            </div>
-        );
-    }
-}
-
-export default nestedDataComponent(InputTabs);

package/src/Components/FormFragments/Text.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import TextField from '../../UIComponents/TextField';
-
-import styles from './styles';
-
-const text = props => (
-    <TextField
-        label={props.label}
-        onChange={evt => {
-            props.onChange(
-                props.name,
-                evt.target.value === '' && props.emptyValue !== undefined
-                    ? props.emptyValue
-                    : evt.target.value
-            );
-        }}
-        value={props.value || ''}
-        style={styles.input}
-        error={Boolean(props.error)}
-        helperText={props.error || props.helperText}
-        type={props.type}
-        multiline={props.multiLine || false}
-        InputProps={{
-            readOnly: props.readOnly,
-        }}
-        inputProps={props.inputProps}
-        rows={props.rows || 1}
-    />
-);
-
-text.defaultProps = {
-    onChange: () => {},
-    type: 'text',
-};
-
-export default text;

package/src/Components/FormFragments/TimePicker.js

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