@pie-element/ebsr 6.6.3-next.1131 → 6.6.3-next.1199

package/configure/node_modules/@pie-lib/config-ui/src/settings/panel.jsx

@@ -1,297 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import Select from '@material-ui/core/Select';
-import Input from '@material-ui/core/Input';
-import MenuItem from '@material-ui/core/MenuItem';
-import debug from 'debug';
-
-import Toggle from './toggle';
-import TwoChoice from '../two-choice';
-import SettingsRadioLabel from './settings-radio-label';
-import { NumberTextField } from '../index';
-import Checkbox from '../checkbox';
-
-const log = debug('pie-lib:config-ui:settings:panel');
-
-const labelValue = {
-  label: PropTypes.string,
-  value: PropTypes.string
-};
-
-const baseTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-const CheckboxChoice = ({ label, value, onChange }) => {
-  return (
-    <Checkbox
-      checked={value}
-      label={label}
-      onChange={event => {
-        onChange(event.target.checked);
-      }}
-    />
-  );
-};
-
-CheckboxChoice.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.bool,
-  onChange: PropTypes.func
-};
-
-const Radio = ({ classes, label, value, onChange, choices }) => {
-  return (
-    <TwoChoice
-      className={classes.radioSettings}
-      direction="vertical"
-      customLabel={SettingsRadioLabel}
-      value={value}
-      header={label}
-      one={choices[0]}
-      two={choices[1]}
-      onChange={onChange}
-    />
-  );
-};
-
-Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
-
-const StyledRadio = withStyles({
-  radioSettings: {
-    marginTop: '4px',
-    paddingBottom: '4px',
-    width: '100%',
-    '& > label': {
-      color: 'rgba(0, 0, 0, 0.89)',
-      transform: 'translate(0, 10px) scale(1)',
-      fontSize: '14px'
-    },
-    '& > div': {
-      marginTop: '20px'
-    }
-  },
-  label: {
-    display: 'none'
-  }
-})(Radio);
-
-const Dropdown = withStyles({
-  label: {
-    margin: 0,
-    fontSize: '14px'
-  },
-  wrapper: {
-    marginTop: '4px',
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: '0 8px'
-  }
-})(({ classes, label, value, onChange, choices = [] }) => {
-  return (
-    <div>
-      {label && <p className={classes.label}>{label}</p>}
-      <Select
-        className={classes.wrapper}
-        value={value || (choices && choices[0])}
-        onChange={({ target }) => onChange(target.value)}
-        input={<Input id={`dropdown-${label}`} />}
-        disableUnderline
-      >
-        {choices.map((l, index) => (
-          <MenuItem key={index} value={l}>
-            {l}
-          </MenuItem>
-        ))}
-      </Select>
-    </div>
-  );
-});
-
-Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
-
-const NumberField = withStyles({
-  field: {
-    width: '35%',
-    marginRight: '24px',
-    marginTop: '8px'
-  },
-  wrapper: {
-    marginTop: '4px',
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: '0 8px'
-  }
-})(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
-  return (
-    <NumberTextField
-      label={label || 'Label'}
-      value={value}
-      max={max}
-      min={min}
-      onChange={(ev, value) => onChange(value)}
-      suffix={suffix}
-      className={classes.field}
-      showErrorWhenOutsideRange
-      inputClassName={classes.wrapper}
-      disableUnderline
-    />
-  );
-});
-
-NumberField.propTypes = {
-  ...baseTypes,
-  classes: PropTypes.object,
-  suffix: PropTypes.string,
-  min: PropTypes.number,
-  max: PropTypes.number,
-  value: PropTypes.number
-};
-
-const ToggleWrapper = ({ label, value, onChange }) => (
-  <Toggle label={label} checked={!!value} toggle={onChange} />
-);
-
-ToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };
-
-const tagMap = {
-  toggle: ToggleWrapper,
-  radio: StyledRadio,
-  dropdown: Dropdown,
-  numberField: NumberField,
-  checkbox: CheckboxChoice
-};
-
-const Group = withStyles(() => ({
-  group: {
-    margin: '0 0 25px 0'
-  },
-  groupHeader: {
-    color: '#495B8F',
-    fontSize: '16px',
-    fontWeight: 600,
-    marginBottom: '8px'
-  },
-  numberFields: {
-    fontSize: '0.85rem',
-    marginBottom: 0
-  }
-}))(props => {
-  const { classes, model, label, group, configuration, onChange } = props;
-
-  /**
-   * @param group - the group of settings
-   * @param key - the key(or path) to be used to set or get from model or configuration
-   * @param innerKey - the key(or path) to be used to get from the group (used only for numberField type)
-   * @returns tag that corresponds to element type */
-  const getTag = (group, key, innerKey) => {
-    const { isConfigProperty, ...properties } = get(group, innerKey || key);
-    const value = isConfigProperty ? get(configuration, key) : get(model, key);
-    const tagProps = { ...properties, key, value };
-    const Tag = tagMap[tagProps.type];
-
-    return <Tag key={key} {...tagProps} onChange={v => onChange(key, v, isConfigProperty)} />;
-  };
-
-  const content = (group, key) => {
-    const currentGroup = group[key];
-
-    if (!currentGroup) {
-      return null;
-    }
-
-    const { type, label, fields, choices } = currentGroup;
-
-    if (type === 'numberFields') {
-      return (
-        <div key={`numberField-${label}`}>
-          <p className={classes.numberFields}>{label}</p>
-          {Object.keys(fields).map(fieldKey => {
-            return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);
-          })}
-        </div>
-      );
-    }
-
-    if (type === 'checkboxes') {
-      return (
-        <div key={`checkbox-${label}`}>
-          <p>{label}</p>
-          {Object.keys(choices).map(choiceKey => {
-            return getTag(group, `${key}.${choiceKey}`, `${key}.choices.${choiceKey}`);
-          })}
-        </div>
-      );
-    }
-
-    // if type is toggle, radio, dropdown or numberField
-    return getTag(group, key);
-  };
-
-  return (
-    <div className={classes.group}>
-      <div className={classes.groupHeader}>{label}</div>
-
-      {Object.keys(group).map(key => {
-        return content(group, key);
-      })}
-    </div>
-  );
-});
-
-export class Panel extends React.Component {
-  static propTypes = {
-    model: PropTypes.object,
-    configuration: PropTypes.object,
-    groups: PropTypes.object,
-    onChangeModel: PropTypes.func,
-    onChangeConfiguration: PropTypes.func
-  };
-
-  static defaultProps = {
-    onChangeModel: () => {},
-    onChangeConfiguration: () => {}
-  };
-
-  change = (key, value, isConfigProperty = false) => {
-    log('[changeModel]', key, value);
-    const { onChangeModel, onChangeConfiguration } = this.props;
-    const model = { ...this.props.model };
-    const configuration = { ...this.props.configuration };
-
-    if (isConfigProperty) {
-      set(configuration, key, value);
-      onChangeConfiguration(configuration, key);
-    } else {
-      set(model, key, value);
-      onChangeModel(model, key);
-    }
-  };
-
-  render() {
-    const { groups, model, configuration } = this.props;
-    log('render:', model);
-
-    return (
-      <div>
-        {Object.keys(groups).map(g => (
-          <Group
-            label={g}
-            key={g}
-            model={model}
-            configuration={configuration}
-            group={groups[g]}
-            onChange={this.change}
-          />
-        ))}
-      </div>
-    );
-  }
-}
-
-export default Panel;

package/configure/node_modules/@pie-lib/config-ui/src/settings/settings-radio-label.jsx

@@ -1,20 +0,0 @@
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Radio from '@material-ui/core/Radio';
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-
-export default withStyles({
-  label: {
-    color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: '12px',
-    left: '-5px',
-    position: 'relative'
-  }
-})(({ label, value, checked, onChange, classes }) => (
-  <FormControlLabel
-    value={value}
-    classes={classes}
-    control={<Radio checked={checked} onChange={onChange} />}
-    label={label}
-  />
-));

package/configure/node_modules/@pie-lib/config-ui/src/settings/toggle.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import InputLabel from '@material-ui/core/InputLabel';
-import { withStyles } from '@material-ui/core/styles';
-import Switch from '@material-ui/core/Switch';
-
-const Toggle = withStyles(theme => ({
-  toggle: {
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between'
-  },
-  label: {
-    color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: '14px',
-    paddingTop: theme.spacing.unit * 2
-  }
-}))(({ checked, label, toggle, classes }) => (
-  <div className={classes.toggle}>
-    <InputLabel className={classes.label}>{label}</InputLabel>
-    <Switch checked={checked} onChange={e => toggle(e.target.checked)} />
-  </div>
-));
-
-Toggle.propTypes = {
-  checked: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired
-};
-
-export default Toggle;

package/configure/node_modules/@pie-lib/config-ui/src/tabs/index.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import MuiTabs from '@material-ui/core/Tabs';
-import MuiTab from '@material-ui/core/Tab';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core';
-
-export class Tabs extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    contentClassName: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 0
-    };
-  }
-
-  handleChange = (event, value) => {
-    this.setState({ value });
-  };
-
-  render() {
-    const { value } = this.state;
-    const { children, className, contentClassName, classes } = this.props;
-
-    const tabClasses = {
-      root: classes.tabRoot
-    };
-    return (
-      <div className={className}>
-        <MuiTabs indicatorColor="primary" value={value} onChange={this.handleChange}>
-          {React.Children.map(children, (c, index) =>
-            c && c.props.title ? (
-              <MuiTab classes={tabClasses} key={index} label={c.props.title} />
-            ) : null
-          )}
-        </MuiTabs>
-        <div className={contentClassName}>{children[value]}</div>
-      </div>
-    );
-  }
-}
-
-export default withStyles(() => ({
-  tabRoot: {}
-}))(Tabs);

package/configure/node_modules/@pie-lib/config-ui/src/tags-input/index.jsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import uniq from 'lodash/uniq';
-import Chip from '@material-ui/core/Chip';
-import MuiBox from '../mui-box';
-
-const ENTER = 13;
-
-const Tag = withStyles(() => ({
-  tag: {
-    padding: '0px',
-    margin: '1px'
-  }
-}))(({ classes, label, onDelete }) => (
-  <Chip className={classes.tag} label={label} onDelete={onDelete} />
-));
-
-Tag.propTypes = {
-  label: PropTypes.string.isRequired,
-  onDelete: PropTypes.func.isRequired
-};
-
-export class TagsInput extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    tags: PropTypes.arrayOf(PropTypes.string).isRequired,
-    onChange: PropTypes.func.isRequired
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      focused: false
-    };
-
-    this.onKeyDown = event => {
-      if (event.keyCode === ENTER && this.state.value !== '') {
-        const tag = this.state.value.trim();
-        const newTags = uniq(this.props.tags.concat([tag]));
-
-        if (newTags.length !== this.props.tags.length) {
-          this.props.onChange(newTags);
-          this.setState({ value: '' });
-        }
-      }
-    };
-
-    this.onChange = event => {
-      this.setState({ value: event.target.value });
-    };
-
-    this.deleteTag = tag => {
-      const { tags } = this.props;
-
-      const tagIndex = tags.indexOf(tag);
-      if (tagIndex !== -1) {
-        tags.splice(tagIndex, 1);
-        this.props.onChange(tags);
-        this.input.focus();
-      }
-    };
-  }
-
-  onFocus = () => {
-    this.setState({ focused: true });
-  };
-
-  onBlur = () => {
-    this.setState({ focused: false });
-  };
-
-  render() {
-    const { classes, tags } = this.props;
-    return (
-      <MuiBox focused={this.state.focused}>
-        <div className={classes.tagsInput}>
-          {(tags || []).map((t, index) => (
-            <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
-          ))}
-          <input
-            ref={r => (this.input = r)}
-            onKeyDown={this.onKeyDown}
-            onChange={this.onChange}
-            className={classes.input}
-            value={this.state.value}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            type="text"
-          />
-        </div>
-      </MuiBox>
-    );
-  }
-}
-
-const styles = theme => ({
-  tagsInput: {
-    border: 'solid 0px white',
-    display: 'flex',
-    flexWrap: 'wrap'
-  },
-  input: {
-    padding: '2px',
-    margin: '1px',
-    minWidth: '30px',
-    width: '100%',
-    flex: '1',
-    border: 'solid 0px white',
-    height: '28px',
-    fontSize: theme.typography.fontSize,
-    fontFamily: theme.typography.fontFamily,
-    outline: 'none',
-    '&:focus': {
-      outline: 'none'
-    }
-  }
-});
-
-export default withStyles(styles)(TagsInput);

package/configure/node_modules/@pie-lib/config-ui/src/two-choice.jsx

@@ -1,94 +0,0 @@
-import { InputContainer } from '@pie-lib/render-ui';
-import PropTypes from 'prop-types';
-import RadioWithLabel from './radio-with-label';
-import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = theme => ({
-  group: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    paddingLeft: 0,
-    marginTop: theme.spacing.unit
-  },
-  vertical: {
-    flexDirection: 'column'
-  }
-});
-
-class RawNChoice extends React.Component {
-  static propTypes = {
-    header: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    customLabel: PropTypes.func,
-    opts: PropTypes.array.isRequired,
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    direction: PropTypes.oneOf(['horizontal', 'vertical']),
-    classes: PropTypes.object.isRequired
-  };
-
-  handleChange = event => {
-    this.props.onChange(event.currentTarget.value);
-  };
-
-  render() {
-    const { header, className, classes, customLabel, opts, value, direction } = this.props;
-
-    const preppedOpts = opts.map(o => {
-      return typeof o === 'string' ? { label: o, value: o } : o;
-    });
-    const LabelComponent = customLabel || RadioWithLabel;
-
-    return (
-      <InputContainer label={header} className={className}>
-        <div className={classNames(classes.group, classes[direction])}>
-          {preppedOpts.map((o, index) => (
-            <LabelComponent
-              value={o.value}
-              key={index}
-              checked={o.value === value}
-              onChange={this.handleChange}
-              label={o.label}
-            />
-          ))}
-        </div>
-      </InputContainer>
-    );
-  }
-}
-
-export const NChoice = withStyles(styles)(RawNChoice);
-
-const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
-
-class TwoChoice extends React.Component {
-  static propTypes = {
-    header: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    one: PropTypes.oneOfType([labelValue, PropTypes.string]),
-    two: PropTypes.oneOfType([labelValue, PropTypes.string]),
-    className: PropTypes.string,
-    customLabel: PropTypes.func
-  };
-
-  render() {
-    const { one, two, header, className, customLabel, value, onChange } = this.props;
-    const opts = [one, two];
-
-    return (
-      <NChoice
-        customLabel={customLabel}
-        header={header}
-        className={className}
-        opts={opts}
-        value={value}
-        onChange={onChange}
-      />
-    );
-  }
-}
-
-export default withStyles(styles)(TwoChoice);

package/configure/node_modules/@pie-lib/config-ui/src/with-stateful-model.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const withStatefulModel = Component => {
-  class Stateful extends React.Component {
-    static propTypes = {
-      model: PropTypes.object.isRequired,
-      onChange: PropTypes.func.isRequired
-    };
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        model: props.model
-      };
-    }
-
-    componentWillReceiveProps(props) {
-      this.setState({ model: props.model });
-    }
-
-    onChange = model => {
-      this.setState({ model }, () => {
-        this.props.onChange(this.state.model);
-      });
-    };
-
-    render() {
-      return <Component model={this.state.model} onChange={this.onChange} />;
-    }
-  }
-
-  return Stateful;
-};
-
-export default withStatefulModel;