@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Components/GeneralFragments/MiniPopup.js

@@ -1,105 +0,0 @@
-import React from 'react';
-import { findDOMNode } from 'react-dom';
-import Paper from '../../UIComponents/Paper';
-
-const Styles = {
-    container: {
-        position: 'relative',
-        display: 'inline-block',
-    },
-    paper: {
-        position: 'fixed',
-        padding: 10,
-        whiteSpace: 'normal',
-        zIndex: 100,
-    },
-    title: {
-        margin: '0 0 10px 0',
-        fontSize: '1.2em',
-    },
-    label: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-    },
-};
-
-export default class MiniPopup extends React.Component {
-    state = {
-        show: false,
-        top: 0,
-        left: 0,
-        maxWidth: 500,
-    };
-
-    closePopup = () => {
-        this.setState({ show: false });
-        document.removeEventListener('click', this.closePopup);
-    };
-
-    showPopup = evt => {
-        evt.preventDefault();
-        evt.stopPropagation();
-
-        // calculate the top, left, and maxWidth values
-        let element = this.container;
-        let top = 0,
-            left = this.label.offsetWidth;
-        do {
-            top += element.offsetTop;
-            left += element.offsetLeft;
-        } while ((element = element.offsetParent));
-        element = this.container;
-        do {
-            top -= element.scrollTop || 0;
-            left -= element.scrollLeft || 0;
-        } while ((element = element.parentElement));
-        const maxWidth = Math.max(320, Math.min(500, window.innerWidth - left));
-
-        this.setState({ show: true, top, left, maxWidth });
-
-        // set the click listener to close the popup when the user clicks somewhere
-        document.addEventListener('click', this.closePopup);
-    };
-
-    componentDidUpdate() {
-        if (!this.state.show) {
-            return;
-        }
-
-        // adjust the top and left values to the new content
-        // eslint-disable-next-line react/no-find-dom-node
-        const paper = findDOMNode(this.paper);
-        const top = parseInt(paper.style.top);
-        if (top + paper.offsetHeight > window.innerHeight) {
-            paper.style.top = window.innerHeight - paper.offsetHeight + 'px';
-        }
-        const left = parseInt(paper.style.left);
-        if (left + paper.offsetWidth > window.innerWidth) {
-            paper.style.left = window.innerWidth - paper.offsetWidth + 'px';
-        }
-    }
-
-    render() {
-        const { children, label, title } = this.props;
-        const { show, top, left, maxWidth } = this.state;
-        const paperStyle = {
-            ...Styles.paper,
-            display: show ? 'inline-block' : 'none',
-            top,
-            left,
-            maxWidth,
-        };
-
-        return (
-            <div style={Styles.container} onClick={this.showPopup} ref={ref => (this.container = ref)}>
-                <div style={Styles.label} ref={ref => (this.label = ref)}>
-                    {label}
-                </div>
-                <Paper ref={ref => (this.paper = ref)} style={paperStyle} zDepth={2}>
-                    {title && <h2 style={Styles.title}>{title}</h2>}
-                    {children}
-                </Paper>
-            </div>
-        );
-    }
-}

package/src/Components/GeneralFragments/Styles.scss

@@ -1,8 +0,0 @@
-.brokenImg {
-  display: inline-block;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  background: radial-gradient(white 25%, #E0E0E0 100%);
-  color: #D0D0D0;
-}

package/src/Components/GeneralFragments/index.js

@@ -1,13 +0,0 @@
-import Headline from './Headline';
-import Box from './Box';
-import Content from './Content';
-
-export { Headline };
-export { Box };
-export { Content };
-
-export default {
-    Headline,
-    Box,
-    Content,
-};

package/src/Components/InputHelpers.js

@@ -1,7 +0,0 @@
-export const delay = (cb, delay = 300) => {
-    let timeout;
-    return function() {
-        clearTimeout(timeout);
-        timeout = setTimeout.apply(window, [cb, delay, ...arguments]);
-    };
-};

package/src/Components/Join.js

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export const Join = props => {
-    const { children, glue } = props;
-    const out = [];
-    for (let i = 0; i < children.length - 1; i++) {
-        out.push(children[i]);
-        out.push(glue);
-    }
-    out.push(children[children.length - 1]);
-    return <div>{out}</div>;
-};
-
-export default Join;

package/src/Components/LicenseInfo.js

@@ -1,86 +0,0 @@
-import React, { Component } from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import InfoIcon from '@material-ui/icons/Info';
-import IconButton from '../UIComponents/IconButton';
-import Typography from '../UIComponents/Typography';
-import { t, T } from '../App/i18n';
-import { browserHistory } from 'react-router';
-
-const styles = {
-    licenseLinks: {
-        cursor: 'pointer',
-        textDecoration: 'underline',
-        fontWeight: 'bold',
-    },
-    licenseInfo: {
-        height: 30,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'row',
-    },
-    divider: {
-        padding: '0 4px',
-    },
-    popup: {
-        '& button': {
-            padding: 6,
-            marginLeft: 5,
-            color: '#fff',
-        },
-    },
-};
-
-class LicenseInfo extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        const { showLicenseError, classes } = this.props;
-        const showInfo = false;
-        return showLicenseError ? (
-            <div className={classes.licenseInfo}>
-                <Typography variant="body1" color="inherit" className={classes.licenseError}>
-                    {T('license.error')}
-                </Typography>
-                <Typography variant="body1" color="inherit" className={classes.divider}>
-                    -
-                </Typography>
-                <Typography
-                    variant="body1"
-                    color="inherit"
-                    onClick={() => browserHistory.push(window.basePath + '/licenses')}
-                    className={classes.licenseLinks}
-                >
-                    {T('license.addLicense')}
-                </Typography>
-                <Typography variant="body1" color="inherit" className={classes.divider}>
-                    -
-                </Typography>
-                <Typography
-                    variant="body1"
-                    color="inherit"
-                    className={classes.licenseLinks}
-                    onClick={() => window.open(t('license.buyUrl'))}
-                >
-                    {T('license.buyLicense')}
-                </Typography>
-                {showInfo && (
-                    <div
-                        className={classes.popup}
-                        title={t('license.info')}
-                        onClick={() => {
-                            window.open(t('license.infoUrl'));
-                        }}
-                    >
-                        <IconButton>
-                            <InfoIcon />
-                        </IconButton>
-                    </div>
-                )}
-            </div>
-        ) : null;
-    }
-}
-export default withStyles(styles)(LicenseInfo);

package/src/Components/List.js

@@ -1,355 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-
-import {
-    Table,
-    TableBody,
-    TableFooter,
-    TableHead,
-    TableHeadColumn,
-    TableRow,
-    TableRowColumn,
-} from '../UIComponents/Table';
-import DeleteForeverIcon from '../UIComponents/icons/DeleteForeverIcon';
-import FloatingActionButton from '../UIComponents/FloatingActionButton';
-import IconButton from '../UIComponents/IconButton';
-import IconMenu from '../UIComponents/IconMenu';
-import MenuItem from '../UIComponents/MenuItem';
-import AddIcon from '../UIComponents/icons/AddIcon';
-import ViewListIcon from '../UIComponents/icons/ViewListIcon';
-
-import Pagination from './Pagination';
-import SearchBar from './SearchBar';
-import ColumnFilter from './ListColumnFilter';
-import { delay } from './InputHelpers';
-import { T, t } from '../App/i18n';
-
-import './Styles.scss';
-import TableCell from '../UIComponents/Table/TableCell';
-import ListItemText from '../UIComponents/ListItemText';
-import Checkbox from '../UIComponents/Checkbox';
-import AddButton from './AddButton';
-import Tooltip from '../UIComponents/Tooltip';
-import FlatButton from '../UIComponents/FlatButton';
-import Dialog from '../UIComponents/Dialog';
-
-export const AddItemButton = props => (
-    <FloatingActionButton mini={true} {...props}>
-        <AddIcon />
-    </FloatingActionButton>
-);
-
-const ColumnList = props => (
-    <div style={{ display: 'inline-block', marginLeft: 3 }}>
-        <IconMenu
-            iconComponent={ViewListIcon}
-            placement="bottom-start"
-            disablePortal
-            tooltip={t('list.columnVisibilityInfo')}
-        >
-            {props.columns.map((column, idx) => (
-                <MenuItem key={idx} onClick={() => props.onToggleColumn(idx)}>
-                    <Checkbox checked={props.shown[idx]} value={column.label} />
-                    <ListItemText inset primary={t(column.label)} />
-                </MenuItem>
-            ))}
-        </IconMenu>
-    </div>
-);
-
-const listStyle = {
-    footerCol: {
-        textAlign: 'right',
-        whiteSpace: 'normal',
-        lineHeight: '48px',
-        verticalAlign: 'middle',
-        padding: '0 0 0 20px',
-        border: 0,
-    },
-    groupButtons: {
-        float: 'left',
-    },
-    searchBar: {
-        width: 256,
-        float: 'right',
-        marginTop: 10,
-    },
-    removeButton: {},
-};
-
-export default class List extends Component {
-    static defaultProps = {
-        onRowSelection: () => {},
-        selectable: true,
-        rowsTotal: 0,
-        columns: [],
-        data: [],
-        shownColumns: null,
-        showCheckboxes: true,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            fixedHeader: true,
-            stripedRows: false,
-            showRowHover: false,
-            enableSelectAll: props.showCheckboxes,
-            deselectOnClickaway: false,
-            shownColumns: props.shownColumns || props.columns.map(col => _.get(col, 'show', true)),
-            showDeleteHint: false,
-        };
-
-        this.selectedRows = [];
-    }
-
-    componentWillReceiveProps(props) {
-        if (_.isArray(props.selected)) {
-            this.selectedRows = props.selected;
-        }
-        if (!_.isEqual(props.shownColumns, this.props.shownColumns)) {
-            this.setState({ shownColumns: props.shownColumns });
-        }
-    }
-
-    hasSelectedRows() {
-        return this.selectedRows === 'all' || (_.isArray(this.selectedRows) && this.selectedRows.length > 0);
-    }
-
-    onDeleteItems = () => {
-        if (this.hasSelectedRows()) {
-            this.props.onDeleteItems();
-        } else {
-            this.setState({
-                showDeleteHint: true,
-            });
-        }
-    };
-
-    onPaginationChange = data => {
-        _.isFunction(this.props.onPaginationChange) && this.props.onPaginationChange(data);
-    };
-
-    onSearchChange = delay(data => {
-        _.isFunction(this.props.onSearchChange) && this.props.onSearchChange(data);
-    });
-
-    renderAddItemButton = () => {
-        const label = _.isString(this.props.addButtonLabel)
-            ? T(this.props.addButtonLabel)
-            : this.props.addButtonLabel;
-        return this.props.onAddItem && <AddButton onClick={this.props.onAddItem} label={label} />;
-    };
-
-    renderDeleteButton = () => {
-        return (
-            this.props.onDeleteItems && (
-                <Tooltip title={t('list.deleteEntriesInfo')}>
-                    <IconButton
-                        color={this.hasSelectedRows() ? 'primary' : ''}
-                        onClick={this.onDeleteItems}
-                        style={listStyle.removeButton}
-                    >
-                        <DeleteForeverIcon />
-                    </IconButton>
-                </Tooltip>
-            )
-        );
-    };
-
-    renderDeleteHint = () => {
-        const { showDeleteHint } = this.state;
-        return (
-            <Dialog
-                title={T('Hint')}
-                onClose={() =>
-                    this.setState({
-                        showDeleteHint: false,
-                    })
-                }
-                actions={
-                    <FlatButton
-                        label={T('Ok')}
-                        onClick={() =>
-                            this.setState({
-                                showDeleteHint: false,
-                            })
-                        }
-                    />
-                }
-                open={showDeleteHint}
-            >
-                <span>{T('list.deleteEntriesHint')}</span>
-            </Dialog>
-        );
-    };
-
-    renderTopComponent() {
-        return null;
-    }
-
-    renderSearchBar() {
-        return (
-            this.props.onSearchChange && (
-                <SearchBar label={t('Search')} style={listStyle.searchBar} onChange={this.onSearchChange} />
-            )
-        );
-    }
-
-    renderPaginationWithTools() {
-        const { columns, data, rowsTotal, rowsPerPage, renderAction } = this.props;
-        return (
-            <TableRow showCheckbox={false}>
-                <Pagination
-                    style={listStyle.footerCol}
-                    onPaginationChange={this.onPaginationChange}
-                    rowsTotal={rowsTotal || data.length}
-                    colSpan={columns.length}
-                    currentPage={_.get(this.props, 'listParams.offset', 0) / rowsPerPage}
-                    rowsPerPage={rowsPerPage}
-                    beforeElement={
-                        <div style={listStyle.groupButtons}>
-                            {this.renderDeleteButton()}
-                            {renderAction && renderAction(this.props)}
-                        </div>
-                    }
-                />
-            </TableRow>
-        );
-    }
-
-    renderColumnList(columns, shownColumns, onToggle) {
-        return <ColumnList columns={columns} shown={shownColumns} onToggleColumn={onToggle} />;
-    }
-
-    onToggleColumn = idx => {
-        let { shownColumns } = this.state;
-        shownColumns[idx] = !shownColumns[idx];
-        this.setState({ shownColumns });
-
-        _.isFunction(this.props.onShownColumnsChange) && this.props.onShownColumnsChange(shownColumns);
-    };
-
-    getSortValue(column) {
-        const { listParams } = this.props;
-        const sortKey = column.sortKey || `.${column.name}`;
-        if (
-            listParams &&
-            listParams.orderby &&
-            (listParams.orderby === sortKey || -1 !== listParams.orderby.indexOf(sortKey))
-        ) {
-            return listParams.orderdir;
-        }
-        return null;
-    }
-    
-    getRowStyle(index) {
-        if(this.props.getRowStyle) {
-            return this.props.getRowStyle(index);
-        }
-        
-        return { cursor: 'pointer' };
-    }
-
-    renderTable = () => {
-        const { rowActions, columns, data, showCheckboxes, onDeleteItems, renderAction } = this.props;
-        const { shownColumns } = this.state;
-        const renderCheckboxes = onDeleteItems || renderAction;
-
-        return (
-            <div className="list-container">
-                {columns.length > 1 && this.renderColumnList(columns, shownColumns, this.onToggleColumn)}
-
-                {this.renderSearchBar()}
-
-                {this.renderTopComponent()}
-
-                <div style={{ clear: 'both', marginBottom: 12 }} />
-
-                <Table
-                    showCheckbox={renderCheckboxes}
-                    selectable={this.props.selectable}
-                    onRowSelected={(rows, event) => {
-                        this.selectedRows = rows;
-                        this.props.onRowSelection(rows, event);
-                    }}
-                    selected={this.selectedRows}
-                    isRowSelectable={this.props.isRowSelectable}
-                >
-                    <TableHead showCheckbox={showCheckboxes}>
-                        {this.renderPaginationWithTools()}
-                        <TableRow>
-                            {columns.map(
-                                (column, i) =>
-                                    shownColumns[i] && (
-                                        <TableCell
-                                            key={column.name}
-                                            className={column.name}
-                                            padding={column.disablePadding ? 'none' : 'default'}
-                                            style={{ width: column.width ? column.width : '' }}
-                                        >
-                                            <ColumnFilter
-                                                {...column}
-                                                onFilterChange={this.props.onFilterChange}
-                                                onSortChange={this.props.onSortChange}
-                                                sort={this.getSortValue(column)}
-                                            />
-                                        </TableCell>
-                                    )
-                            )}
-                            {_.isArray(rowActions) && rowActions.length && (
-                                <TableHeadColumn key="actions">{T('Actions')}</TableHeadColumn>
-                            )}
-                        </TableRow>
-                    </TableHead>
-                    <TableBody className="list-body">
-                        {data.map((row, index) => {
-                            return (
-                                <TableRow key={index} style={this.getRowStyle(index)}>
-                                    {columns.map(
-                                        (column, i) =>
-                                            shownColumns[i] && (
-                                                <TableRowColumn
-                                                    key={i}
-                                                    className={column.name}
-                                                    padding={column.disablePadding ? 'none' : 'default'}
-                                                    style={{ width: column.width ? column.width : '' }}
-                                                >
-                                                    {_.isFunction(column.renderValue)
-                                                        ? column.renderValue(row[column.name], row)
-                                                        : row[column.name]}
-                                                </TableRowColumn>
-                                            )
-                                    )}
-                                    {_.isArray(rowActions) && rowActions.length && (
-                                        <TableRowColumn key="actions">
-                                            {_.has(row, 'id') &&
-                                                rowActions.map(() => {
-                                                    // action buttons here
-                                                })}
-                                        </TableRowColumn>
-                                    )}
-                                </TableRow>
-                            );
-                        })}
-                    </TableBody>
-                    <TableFooter>{this.renderPaginationWithTools()}</TableFooter>
-                </Table>
-            </div>
-        );
-    };
-
-    renderAddButtonElement = ({ AddButtonComponent }, ...otherProps) =>
-        AddButtonComponent ? <AddButtonComponent {...otherProps} /> : this.renderAddItemButton();
-
-    render() {
-        return (
-            <div style={{ position: 'relative' }}>
-                {this.renderAddButtonElement(this.props)}
-                {this.renderTable()}
-                {this.renderDeleteHint()}
-            </div>
-        );
-    }
-}