@pie-element/ebsr 9.12.1 → 9.12.2-next.18

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/settings/index.js

@@ -0,0 +1,82 @@
+import Panel from './panel';
+
+export { Panel };
+
+export const textField = (label, isConfigProperty = true) => ({
+  label,
+  type: 'textField',
+  isConfigProperty,
+});
+
+export const toggle = (label, isConfigProperty = false) => ({
+  type: 'toggle',
+  label,
+  isConfigProperty,
+});
+
+const toChoice = (opt) => {
+  if (typeof opt === 'string') {
+    return { label: opt, value: opt };
+  } else {
+    return opt;
+  }
+};
+
+export const radio = function() {
+  const args = Array.prototype.slice.call(arguments);
+  const [label, choices, isConfigProperty = false] = args;
+
+  return {
+    type: 'radio',
+    label,
+    choices: choices && choices.map((o) => toChoice(o)),
+    isConfigProperty,
+  };
+};
+
+export const dropdown = (label, choices, isConfigProperty = false) => {
+  return {
+    type: 'dropdown',
+    label,
+    choices,
+    isConfigProperty,
+  };
+};
+
+export const numberField = (label, options, isConfigProperty = false) => ({
+  ...options,
+  label,
+  type: 'numberField',
+  isConfigProperty,
+});
+
+export const numberFields = (label, fields, isConfigProperty = false) => {
+  Object.keys(fields).map((key) => {
+    fields[key] = numberField(fields[key].label, fields[key], isConfigProperty);
+  });
+
+  return {
+    type: 'numberFields',
+    label,
+    fields,
+  };
+};
+
+export const checkbox = (label, settings, isConfigProperty = false) => ({
+  ...settings,
+  label,
+  type: 'checkbox',
+  isConfigProperty,
+});
+
+export const checkboxes = (label, choices, isConfigProperty = false) => {
+  Object.keys(choices).map((key) => {
+    choices[key] = checkbox(choices[key].label, choices[key], isConfigProperty);
+  });
+
+  return {
+    type: 'checkboxes',
+    label,
+    choices,
+  };
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/settings/panel.jsx

@@ -0,0 +1,326 @@
+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 { NChoice } from '../two-choice';
+import SettingsRadioLabel from './settings-radio-label';
+import NumberTextField from '../number-text-field';
+import Checkbox from '../checkbox';
+import Typography from '@material-ui/core/Typography';
+
+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 (
+    <NChoice
+      className={classes.radioSettings}
+      direction="horizontal"
+      customLabel={SettingsRadioLabel}
+      value={value}
+      header={label}
+      opts={choices}
+      onChange={onChange}
+    />
+  );
+};
+
+Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
+
+const StyledRadio = withStyles((theme) => ({
+  radioSettings: {
+    marginTop: theme.spacing.unit / 2,
+    paddingBottom: theme.spacing.unit / 2,
+    width: '100%',
+    '& > label': {
+      color: 'rgba(0, 0, 0, 0.89)',
+      transform: 'translate(0, 10px) scale(1)',
+      fontSize: '14px',
+    },
+    '& > div': {
+      marginTop: theme.spacing.unit * 2.5,
+    },
+  },
+  label: {
+    display: 'none',
+  },
+}))(Radio);
+
+const Dropdown = withStyles((theme) => ({
+  label: {
+    margin: 0,
+    fontSize: theme.typography.fontSize,
+  },
+  wrapper: {
+    marginTop: theme.spacing.unit / 2,
+    border: '2px solid lightgrey',
+    borderRadius: '4px',
+    padding: `0 ${theme.spacing.unit}px`,
+  },
+}))(({ classes, label, value, onChange, choices = [] }) => {
+  const getItemLabel = (l) => (typeof l === 'string' ? l : l.label);
+  const getItemValue = (l) => (typeof l === 'string' ? l : l.value);
+  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={getItemValue(l)}>
+            {getItemLabel(l)}
+          </MenuItem>
+        ))}
+      </Select>
+    </div>
+  );
+});
+
+Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
+
+const TextField = withStyles((theme) => ({
+  field: {
+    marginRight: theme.spacing.unit * 3,
+    marginTop: theme.spacing.unit,
+  },
+}))(({ classes, label }) => {
+  return <Typography className={classes.field}>{label}</Typography>;
+});
+
+const NumberField = withStyles((theme) => ({
+  field: {
+    width: '35%',
+    marginRight: theme.spacing.unit * 3,
+    marginTop: theme.spacing.unit,
+  },
+  wrapper: {
+    marginTop: theme.spacing.unit / 2,
+    border: '2px solid lightgrey',
+    borderRadius: '4px',
+    padding: `0 ${theme.spacing.unit}px`,
+  },
+}))(({ 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
+      classes={classes}
+    />
+  );
+});
+
+NumberField.propTypes = {
+  ...baseTypes,
+  classes: PropTypes.object,
+  suffix: PropTypes.string,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
+};
+
+TextField.propTypes = {
+  ...baseTypes,
+};
+
+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,
+  textField: TextField,
+};
+
+const Group = withStyles((theme) => ({
+  group: {
+    margin: `0 0 ${theme.spacing.unit * 2}px 0`,
+  },
+  groupHeader: {
+    color: '#495B8F',
+    fontSize: theme.typography.fontSize + 2,
+    fontWeight: 600,
+    marginBottom: theme.spacing.unit,
+  },
+  numberFields: {
+    fontSize: theme.typography.fontSize,
+    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, numberField or numberText
+    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,
+    modal: PropTypes.object,
+  };
+
+  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, modal } = this.props;
+
+    log('render:', model);
+
+    const renderedGroups = Object.keys(groups || {}).map((group) => {
+      const showGroup = Object.entries(groups[group]).some(([, propVal]) => !!propVal);
+
+      if (showGroup) {
+        return (
+          <Group
+            label={group}
+            key={group}
+            model={model}
+            configuration={configuration}
+            group={groups[group]}
+            onChange={this.change}
+          />
+        );
+      }
+
+      return null;
+    });
+
+    return (
+      <div>
+        {renderedGroups}
+        {modal}
+      </div>
+    );
+  }
+}
+
+export default Panel;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/settings/settings-radio-label.jsx

@@ -0,0 +1,20 @@
+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((theme) => ({
+  label: {
+    color: 'rgba(0, 0, 0, 0.89)',
+    fontSize: theme.typography.fontSize - 2,
+    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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/settings/toggle.jsx

@@ -0,0 +1,31 @@
+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: theme.typography.fontSize,
+    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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/tabs/index.jsx

@@ -0,0 +1,47 @@
+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,
+    contentStyle: PropTypes.object,
+    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, contentStyle = {}, 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} style={contentStyle}>
+          {children[value]}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(() => ({ tabRoot: {} }))(Tabs);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/tags-input/index.jsx

@@ -0,0 +1,119 @@
+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: `0px solid ${theme.palette.background.paper}`,
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  input: {
+    padding: '2px',
+    margin: '1px',
+    minWidth: '30px',
+    width: '100%',
+    flex: '1',
+    border: `0px solid ${theme.palette.background.paper}`,
+    height: '28px',
+    fontSize: theme.typography.fontSize,
+    fontFamily: theme.typography.fontFamily,
+    outline: 'none',
+    '&:focus': {
+      outline: 'none',
+    },
+  },
+});
+
+export default withStyles(styles)(TagsInput);