@pie-lib/config-ui 11.0.24-next.4 → 11.0.25

package/src/settings/index.js

@@ -5,10 +5,10 @@ export { Panel };
 export const toggle = (label, isConfigProperty = false) => ({
   type: 'toggle',
   label,
-  isConfigProperty
+  isConfigProperty,
 });
 
-const toChoice = opt => {
+const toChoice = (opt) => {
   if (typeof opt === 'string') {
     return { label: opt, value: opt };
   } else {
@@ -22,8 +22,8 @@ export const radio = function() {
   return {
     type: 'radio',
     label,
-    choices: choices && choices.map(o => toChoice(o)),
-    isConfigProperty
+    choices: choices && choices.map((o) => toChoice(o)),
+    isConfigProperty,
   };
 };
 
@@ -32,7 +32,7 @@ export const dropdown = (label, choices, isConfigProperty = false) => {
     type: 'dropdown',
     label,
     choices,
-    isConfigProperty
+    isConfigProperty,
   };
 };
 
@@ -40,18 +40,18 @@ export const numberField = (label, options, isConfigProperty = false) => ({
   ...options,
   label,
   type: 'numberField',
-  isConfigProperty
+  isConfigProperty,
 });
 
 export const numberFields = (label, fields, isConfigProperty = false) => {
-  Object.keys(fields).map(key => {
+  Object.keys(fields).map((key) => {
     fields[key] = numberField(fields[key].label, fields[key], isConfigProperty);
   });
 
   return {
     type: 'numberFields',
     label,
-    fields
+    fields,
   };
 };
 
@@ -59,17 +59,17 @@ export const checkbox = (label, settings, isConfigProperty = false) => ({
   ...settings,
   label,
   type: 'checkbox',
-  isConfigProperty
+  isConfigProperty,
 });
 
 export const checkboxes = (label, choices, isConfigProperty = false) => {
-  Object.keys(choices).map(key => {
+  Object.keys(choices).map((key) => {
     choices[key] = checkbox(choices[key].label, choices[key], isConfigProperty);
   });
 
   return {
     type: 'checkboxes',
     label,
-    choices
+    choices,
   };
 };

package/src/settings/panel.jsx

@@ -18,13 +18,13 @@ const log = debug('pie-lib:config-ui:settings:panel');
 
 const labelValue = {
   label: PropTypes.string,
-  value: PropTypes.string
+  value: PropTypes.string,
 };
 
 const baseTypes = {
   label: PropTypes.string,
   value: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 const CheckboxChoice = ({ label, value, onChange }) => {
@@ -32,7 +32,7 @@ const CheckboxChoice = ({ label, value, onChange }) => {
     <Checkbox
       checked={value}
       label={label}
-      onChange={event => {
+      onChange={(event) => {
         onChange(event.target.checked);
       }}
     />
@@ -42,7 +42,7 @@ const CheckboxChoice = ({ label, value, onChange }) => {
 CheckboxChoice.propTypes = {
   label: PropTypes.string,
   value: PropTypes.bool,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 const Radio = ({ classes, label, value, onChange, choices }) => {
@@ -70,28 +70,28 @@ const StyledRadio = withStyles({
     '& > label': {
       color: 'rgba(0, 0, 0, 0.89)',
       transform: 'translate(0, 10px) scale(1)',
-      fontSize: '14px'
+      fontSize: '14px',
     },
     '& > div': {
-      marginTop: '20px'
-    }
+      marginTop: '20px',
+    },
   },
   label: {
-    display: 'none'
-  }
+    display: 'none',
+  },
 })(Radio);
 
 const Dropdown = withStyles({
   label: {
     margin: 0,
-    fontSize: '14px'
+    fontSize: '14px',
   },
   wrapper: {
     marginTop: '4px',
     border: '2px solid lightgrey',
     borderRadius: '4px',
-    padding: '0 8px'
-  }
+    padding: '0 8px',
+  },
 })(({ classes, label, value, onChange, choices = [] }) => {
   return (
     <div>
@@ -119,14 +119,14 @@ const NumberField = withStyles({
   field: {
     width: '35%',
     marginRight: '24px',
-    marginTop: '8px'
+    marginTop: '8px',
   },
   wrapper: {
     marginTop: '4px',
     border: '2px solid lightgrey',
     borderRadius: '4px',
-    padding: '0 8px'
-  }
+    padding: '0 8px',
+  },
 })(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
   return (
     <NumberTextField
@@ -150,12 +150,10 @@ NumberField.propTypes = {
   suffix: PropTypes.string,
   min: PropTypes.number,
   max: PropTypes.number,
-  value: PropTypes.number
+  value: PropTypes.number,
 };
 
-const ToggleWrapper = ({ label, value, onChange }) => (
-  <Toggle label={label} checked={!!value} toggle={onChange} />
-);
+const ToggleWrapper = ({ label, value, onChange }) => <Toggle label={label} checked={!!value} toggle={onChange} />;
 
 ToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };
 
@@ -164,24 +162,24 @@ const tagMap = {
   radio: StyledRadio,
   dropdown: Dropdown,
   numberField: NumberField,
-  checkbox: CheckboxChoice
+  checkbox: CheckboxChoice,
 };
 
 const Group = withStyles(() => ({
   group: {
-    margin: '0 0 25px 0'
+    margin: '0 0 25px 0',
   },
   groupHeader: {
     color: '#495B8F',
     fontSize: '16px',
     fontWeight: 600,
-    marginBottom: '8px'
+    marginBottom: '8px',
   },
   numberFields: {
     fontSize: '0.85rem',
-    marginBottom: 0
-  }
-}))(props => {
+    marginBottom: 0,
+  },
+}))((props) => {
   const { classes, model, label, group, configuration, onChange } = props;
 
   /**
@@ -195,7 +193,7 @@ const Group = withStyles(() => ({
     const tagProps = { ...properties, key, value };
     const Tag = tagMap[tagProps.type];
 
-    return <Tag key={key} {...tagProps} onChange={v => onChange(key, v, isConfigProperty)} />;
+    return <Tag key={key} {...tagProps} onChange={(v) => onChange(key, v, isConfigProperty)} />;
   };
 
   const content = (group, key) => {
@@ -211,7 +209,7 @@ const Group = withStyles(() => ({
       return (
         <div key={`numberField-${label}`}>
           <p className={classes.numberFields}>{label}</p>
-          {Object.keys(fields).map(fieldKey => {
+          {Object.keys(fields).map((fieldKey) => {
             return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);
           })}
         </div>
@@ -222,7 +220,7 @@ const Group = withStyles(() => ({
       return (
         <div key={`checkbox-${label}`}>
           <p>{label}</p>
-          {Object.keys(choices).map(choiceKey => {
+          {Object.keys(choices).map((choiceKey) => {
             return getTag(group, `${key}.${choiceKey}`, `${key}.choices.${choiceKey}`);
           })}
         </div>
@@ -237,7 +235,7 @@ const Group = withStyles(() => ({
     <div className={classes.group}>
       <div className={classes.groupHeader}>{label}</div>
 
-      {Object.keys(group).map(key => {
+      {Object.keys(group).map((key) => {
         return content(group, key);
       })}
     </div>
@@ -250,12 +248,12 @@ export class Panel extends React.Component {
     configuration: PropTypes.object,
     groups: PropTypes.object,
     onChangeModel: PropTypes.func,
-    onChangeConfiguration: PropTypes.func
+    onChangeConfiguration: PropTypes.func,
   };
 
   static defaultProps = {
     onChangeModel: () => {},
-    onChangeConfiguration: () => {}
+    onChangeConfiguration: () => {},
   };
 
   change = (key, value, isConfigProperty = false) => {
@@ -279,7 +277,7 @@ export class Panel extends React.Component {
 
     return (
       <div>
-        {Object.keys(groups).map(g => (
+        {Object.keys(groups).map((g) => (
           <Group
             label={g}
             key={g}

package/src/settings/settings-radio-label.jsx

@@ -8,8 +8,8 @@ export default withStyles({
     color: 'rgba(0, 0, 0, 0.89)',
     fontSize: '12px',
     left: '-5px',
-    position: 'relative'
-  }
+    position: 'relative',
+  },
 })(({ label, value, checked, onChange, classes }) => (
   <FormControlLabel
     value={value}

package/src/settings/toggle.jsx

@@ -4,28 +4,28 @@ 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 => ({
+const Toggle = withStyles((theme) => ({
   toggle: {
     display: 'flex',
     width: '100%',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   },
   label: {
     color: 'rgba(0, 0, 0, 0.89)',
     fontSize: '14px',
-    paddingTop: theme.spacing.unit * 2
-  }
+    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)} />
+    <Switch checked={checked} onChange={(e) => toggle(e.target.checked)} />
   </div>
 ));
 
 Toggle.propTypes = {
   checked: PropTypes.bool,
   label: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired
+  toggle: PropTypes.func.isRequired,
 };
 
 export default Toggle;

package/src/tabs/index.jsx

@@ -10,13 +10,13 @@ export class Tabs extends React.Component {
     classes: PropTypes.object,
     className: PropTypes.string,
     contentClassName: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      value: 0
+      value: 0,
     };
   }
 
@@ -29,15 +29,13 @@ export class Tabs extends React.Component {
     const { children, className, contentClassName, classes } = this.props;
 
     const tabClasses = {
-      root: classes.tabRoot
+      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
+            c && c.props.title ? <MuiTab classes={tabClasses} key={index} label={c.props.title} /> : null,
           )}
         </MuiTabs>
         <div className={contentClassName}>{children[value]}</div>
@@ -47,5 +45,5 @@ export class Tabs extends React.Component {
 }
 
 export default withStyles(() => ({
-  tabRoot: {}
+  tabRoot: {},
 }))(Tabs);

package/src/tags-input/index.jsx

@@ -10,32 +10,30 @@ const ENTER = 13;
 const Tag = withStyles(() => ({
   tag: {
     padding: '0px',
-    margin: '1px'
-  }
-}))(({ classes, label, onDelete }) => (
-  <Chip className={classes.tag} label={label} onDelete={onDelete} />
-));
+    margin: '1px',
+  },
+}))(({ classes, label, onDelete }) => <Chip className={classes.tag} label={label} onDelete={onDelete} />);
 
 Tag.propTypes = {
   label: PropTypes.string.isRequired,
-  onDelete: PropTypes.func.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
+    onChange: PropTypes.func.isRequired,
   };
 
   constructor(props) {
     super(props);
     this.state = {
       value: '',
-      focused: false
+      focused: false,
     };
 
-    this.onKeyDown = event => {
+    this.onKeyDown = (event) => {
       if (event.keyCode === ENTER && this.state.value !== '') {
         const tag = this.state.value.trim();
         const newTags = uniq(this.props.tags.concat([tag]));
@@ -47,11 +45,11 @@ export class TagsInput extends React.Component {
       }
     };
 
-    this.onChange = event => {
+    this.onChange = (event) => {
       this.setState({ value: event.target.value });
     };
 
-    this.deleteTag = tag => {
+    this.deleteTag = (tag) => {
       const { tags } = this.props;
 
       const tagIndex = tags.indexOf(tag);
@@ -80,7 +78,7 @@ export class TagsInput extends React.Component {
             <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
           ))}
           <input
-            ref={r => (this.input = r)}
+            ref={(r) => (this.input = r)}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}
             className={classes.input}
@@ -95,11 +93,11 @@ export class TagsInput extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   tagsInput: {
     border: 'solid 0px white',
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   input: {
     padding: '2px',
@@ -113,9 +111,9 @@ const styles = theme => ({
     fontFamily: theme.typography.fontFamily,
     outline: 'none',
     '&:focus': {
-      outline: 'none'
-    }
-  }
+      outline: 'none',
+    },
+  },
 });
 
 export default withStyles(styles)(TagsInput);

package/src/two-choice.jsx

@@ -5,16 +5,16 @@ import React from 'react';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 
-const styles = theme => ({
+const styles = (theme) => ({
   group: {
     display: 'flex',
     flexWrap: 'wrap',
     paddingLeft: 0,
-    marginTop: theme.spacing.unit
+    marginTop: theme.spacing.unit,
   },
   vertical: {
-    flexDirection: 'column'
-  }
+    flexDirection: 'column',
+  },
 });
 
 class RawNChoice extends React.Component {
@@ -26,17 +26,17 @@ class RawNChoice extends React.Component {
     value: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
-    classes: PropTypes.object.isRequired
+    classes: PropTypes.object.isRequired,
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.props.onChange(event.currentTarget.value);
   };
 
   render() {
     const { header, className, classes, customLabel, opts, value, direction } = this.props;
 
-    const preppedOpts = opts.map(o => {
+    const preppedOpts = opts.map((o) => {
       return typeof o === 'string' ? { label: o, value: o } : o;
     });
     const LabelComponent = customLabel || RadioWithLabel;
@@ -71,7 +71,7 @@ class TwoChoice extends React.Component {
     one: PropTypes.oneOfType([labelValue, PropTypes.string]),
     two: PropTypes.oneOfType([labelValue, PropTypes.string]),
     className: PropTypes.string,
-    customLabel: PropTypes.func
+    customLabel: PropTypes.func,
   };
 
   render() {

package/src/with-stateful-model.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const withStatefulModel = Component => {
+const withStatefulModel = (Component) => {
   class Stateful extends React.Component {
     static propTypes = {
       model: PropTypes.object.isRequired,
-      onChange: PropTypes.func.isRequired
+      onChange: PropTypes.func.isRequired,
     };
 
     constructor(props) {
       super(props);
       this.state = {
-        model: props.model
+        model: props.model,
       };
     }
 
@@ -19,7 +19,7 @@ const withStatefulModel = Component => {
       this.setState({ model: props.model });
     }
 
-    onChange = model => {
+    onChange = (model) => {
       this.setState({ model }, () => {
         this.props.onChange(this.state.model);
       });