@pie-lib/config-ui 11.3.12 → 12.0.0-beta.1

package/src/number-text-field-custom.jsx

@@ -9,23 +9,23 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import Remove from '@material-ui/icons/Remove';
 import Add from '@material-ui/icons/Add';
 
-const styles = (theme) => ({
+const styles = theme => ({
   input: {
     '& input[type=number]': {
-      '-moz-appearance': 'textfield',
+      '-moz-appearance': 'textfield'
     },
     '& input[type=number]::-webkit-outer-spin-button': {
       '-webkit-appearance': 'none',
-      margin: 0,
+      margin: 0
     },
     '& input[type=number]::-webkit-inner-spin-button': {
       '-webkit-appearance': 'none',
-      margin: 0,
-    },
+      margin: 0
+    }
   },
   iconButton: {
-    padding: '2px',
-  },
+    padding: '2px'
+  }
 });
 
 const fallbackNumber = (min, max) => {
@@ -58,7 +58,7 @@ export class NumberTextFieldCustom extends React.Component {
     step: PropTypes.number,
     label: PropTypes.string,
     disableUnderline: PropTypes.bool,
-    variant: PropTypes.string,
+    variant: PropTypes.string
   };
 
   static defaultProps = {
@@ -66,7 +66,7 @@ export class NumberTextFieldCustom extends React.Component {
     customValues: [],
     textAlign: 'center',
     variant: 'standard',
-    onlyIntegersAllowed: false,
+    onlyIntegersAllowed: false
   };
 
   constructor(props) {
@@ -76,7 +76,7 @@ export class NumberTextFieldCustom extends React.Component {
 
     this.state = {
       value,
-      currentIndex,
+      currentIndex
     };
 
     if (value !== props.value) {
@@ -116,7 +116,7 @@ export class NumberTextFieldCustom extends React.Component {
 
   normalizeValueAndIndex = (customValues, number) => {
     const value = this.clamp(number);
-    const currentIndex = (customValues || []).findIndex((val) => val === value);
+    const currentIndex = (customValues || []).findIndex(val => val === value);
 
     if ((customValues || []).length > 0 && currentIndex === -1) {
       const closestValue = this.getClosestValue(customValues, value);
@@ -131,10 +131,10 @@ export class NumberTextFieldCustom extends React.Component {
     customValues.reduce(
       (closest, value, index) =>
         Math.abs(value - number) < Math.abs(closest.value - number) ? { value, index } : closest,
-      { value: customValues[0], index: 0 },
+      { value: customValues[0], index: 0 }
     );
 
-  onBlur = (event) => {
+  onBlur = event => {
     const { customValues, onlyIntegersAllowed } = this.props;
     const { value } = event.target;
     const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
@@ -145,9 +145,9 @@ export class NumberTextFieldCustom extends React.Component {
       this.setState(
         {
           value: number.toString(),
-          currentIndex,
+          currentIndex
         },
-        () => this.props.onChange(event, number),
+        () => this.props.onChange(event, number)
       );
     }
   };
@@ -181,13 +181,13 @@ export class NumberTextFieldCustom extends React.Component {
     this.setState(
       {
         value: number.toString(),
-        currentIndex: updatedIndex,
+        currentIndex: updatedIndex
       },
       () => {
         if (shouldUpdate) {
           onChange(event, number);
         }
-      },
+      }
     );
   }
 
@@ -204,7 +204,7 @@ export class NumberTextFieldCustom extends React.Component {
       disableUnderline,
       helperText,
       variant,
-      textAlign,
+      textAlign
     } = this.props;
     const { value } = this.state;
     const names = classNames(className, classes.input);
@@ -212,7 +212,7 @@ export class NumberTextFieldCustom extends React.Component {
     return (
       <TextField
         variant={variant}
-        inputRef={(ref) => (this.inputRef = ref)}
+        inputRef={ref => (this.inputRef = ref)}
         disabled={disabled}
         label={label}
         value={value}
@@ -220,13 +220,13 @@ export class NumberTextFieldCustom extends React.Component {
         helperText={helperText}
         onChange={this.onChange}
         onBlur={this.onBlur}
-        onKeyPress={(e) => {
+        onKeyPress={e => {
           // once the Enter key is pressed, we force input blur
           if (e.key === 'Enter' && this.inputRef) {
             this.inputRef.blur();
           }
         }}
-        onKeyDown={(e) => {
+        onKeyDown={e => {
           if (e.key === 'ArrowUp') {
             this.changeValue(e);
           }
@@ -245,7 +245,7 @@ export class NumberTextFieldCustom extends React.Component {
               <IconButton
                 className={classes.iconButton}
                 disabled={disabled}
-                onClick={(e) => this.changeValue(e, -1, true)}
+                onClick={e => this.changeValue(e, -1, true)}
               >
                 <Remove fontSize="small" />
               </IconButton>
@@ -256,17 +256,17 @@ export class NumberTextFieldCustom extends React.Component {
               <IconButton
                 className={classes.iconButton}
                 disabled={disabled}
-                onClick={(e) => this.changeValue(e, 1, true)}
+                onClick={e => this.changeValue(e, 1, true)}
               >
                 <Add fontSize="small" />
               </IconButton>
             </InputAdornment>
-          ),
+          )
         }}
         inputProps={{
           style: { textAlign },
           min,
-          max,
+          max
         }}
       />
     );

package/src/number-text-field.jsx

@@ -8,8 +8,8 @@ import isFinite from 'lodash/isFinite';
 import InputAdornment from '@material-ui/core/InputAdornment';
 const log = debug('@pie-lib:config-ui:number-text-field');
 
-const styles = (theme) => ({
-  root: { marginRight: theme.spacing.unit },
+const styles = theme => ({
+  root: { marginRight: theme.spacing.unit }
 });
 
 const fallbackNumber = (min, max) => {
@@ -39,11 +39,11 @@ export class NumberTextField extends React.Component {
     suffix: PropTypes.string,
     showErrorWhenOutsideRange: PropTypes.bool,
     disableUnderline: PropTypes.bool,
-    variant: PropTypes.string,
+    variant: PropTypes.string
   };
 
   static defaultProps = {
-    showErrorWhenOutsideRange: false,
+    showErrorWhenOutsideRange: false
   };
 
   constructor(props) {
@@ -52,7 +52,7 @@ export class NumberTextField extends React.Component {
     const value = this.clamp(props.value);
 
     this.state = {
-      value,
+      value
     };
 
     if (value !== props.value) {
@@ -87,7 +87,7 @@ export class NumberTextField extends React.Component {
    * on Blur (this can be triggered by pressing Enter, see below)
    * we check the entered value and reset it if needed
    */
-  onBlur = (event) => {
+  onBlur = event => {
     const value = event.target.value;
 
     const rawNumber = parseFloat(value);
@@ -149,7 +149,7 @@ export class NumberTextField extends React.Component {
       inputClassName,
       disableUnderline,
       showErrorWhenOutsideRange,
-      variant,
+      variant
     } = this.props;
     const names = classNames(classes.root, className);
 
@@ -157,7 +157,7 @@ export class NumberTextField extends React.Component {
     return (
       <TextField
         variant={variant || 'standard'}
-        inputRef={(ref) => {
+        inputRef={ref => {
           this.inputRef = ref;
         }}
         disabled={disabled}
@@ -167,7 +167,7 @@ export class NumberTextField extends React.Component {
         helperText={error}
         onChange={this.onChange}
         onBlur={this.onBlur}
-        onKeyPress={(e) => {
+        onKeyPress={e => {
           // once the Enter key is pressed, we force input blur
           if (e.key === 'Enter' && this.inputRef) {
             this.inputRef.blur();
@@ -176,16 +176,16 @@ export class NumberTextField extends React.Component {
         type="number"
         className={names}
         InputLabelProps={{
-          shrink: true,
+          shrink: true
         }}
         InputProps={{
           endAdornment: suffix && <InputAdornment position="end">{suffix}</InputAdornment>,
           className: inputClassName,
-          disableUnderline: disableUnderline,
+          disableUnderline: disableUnderline
         }}
         inputProps={{
           min,
-          max,
+          max
         }}
         margin="normal"
       />

package/src/radio-with-label.jsx

@@ -6,8 +6,8 @@ import { withStyles } from '@material-ui/core/styles';
 export default withStyles({
   label: {
     left: '-5px',
-    position: 'relative',
-  },
+    position: 'relative'
+  }
 })(({ label, value, checked, onChange, classes }) => (
   <FormControlLabel
     value={value}

package/src/settings/display-size.jsx

@@ -4,11 +4,11 @@ import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import NumberTextField from '../number-text-field';
 
-const DisplaySize = withStyles((theme) => ({
+const DisplaySize = withStyles(theme => ({
   displaySize: {
     display: 'flex',
-    paddingTop: theme.spacing.unit,
-  },
+    paddingTop: theme.spacing.unit
+  }
 }))(({ size, label, classes, onChange }) => {
   const updateSize = (key, v) => {
     onChange({ ...size, [key]: v });
@@ -43,10 +43,10 @@ const DisplaySize = withStyles((theme) => ({
 DisplaySize.propTypes = {
   size: PropTypes.shape({
     width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired
   }).isRequired,
   label: PropTypes.string.isRequired,
-  onChange: PropTypes.func,
+  onChange: PropTypes.func
 };
 
 export default DisplaySize;

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 {
@@ -19,12 +19,11 @@ const toChoice = (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,
+    choices: choices && choices.map(o => toChoice(o)),
+    isConfigProperty
   };
 };
 
@@ -33,7 +32,7 @@ export const dropdown = (label, choices, isConfigProperty = false) => {
     type: 'dropdown',
     label,
     choices,
-    isConfigProperty,
+    isConfigProperty
   };
 };
 
@@ -41,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
   };
 };
 
@@ -60,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

@@ -9,7 +9,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import debug from 'debug';
 
 import Toggle from './toggle';
-import { NChoice } from '../two-choice';
+import TwoChoice from '../two-choice';
 import SettingsRadioLabel from './settings-radio-label';
 import { NumberTextField } from '../index';
 import Checkbox from '../checkbox';
@@ -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,18 +42,19 @@ 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 }) => {
   return (
-    <NChoice
+    <TwoChoice
       className={classes.radioSettings}
-      direction="horizontal"
+      direction="vertical"
       customLabel={SettingsRadioLabel}
       value={value}
       header={label}
-      opts={choices}
+      one={choices[0]}
+      two={choices[1]}
       onChange={onChange}
     />
   );
@@ -61,37 +62,37 @@ const Radio = ({ classes, label, value, onChange, choices }) => {
 
 Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
 
-const StyledRadio = withStyles((theme) => ({
+const StyledRadio = withStyles({
   radioSettings: {
-    marginTop: theme.spacing.unit / 2,
-    paddingBottom: theme.spacing.unit / 2,
+    marginTop: '4px',
+    paddingBottom: '4px',
     width: '100%',
     '& > label': {
       color: 'rgba(0, 0, 0, 0.89)',
       transform: 'translate(0, 10px) scale(1)',
-      fontSize: '14px',
+      fontSize: '14px'
     },
     '& > div': {
-      marginTop: theme.spacing.unit * 2.5,
-    },
+      marginTop: '20px'
+    }
   },
   label: {
-    display: 'none',
-  },
-}))(Radio);
+    display: 'none'
+  }
+})(Radio);
 
-const Dropdown = withStyles((theme) => ({
+const Dropdown = withStyles({
   label: {
     margin: 0,
-    fontSize: theme.typography.fontSize,
+    fontSize: '14px'
   },
   wrapper: {
-    marginTop: theme.spacing.unit / 2,
+    marginTop: '4px',
     border: '2px solid lightgrey',
     borderRadius: '4px',
-    padding: `0 ${theme.spacing.unit}px`,
-  },
-}))(({ classes, label, value, onChange, choices = [] }) => {
+    padding: '0 8px'
+  }
+})(({ classes, label, value, onChange, choices = [] }) => {
   return (
     <div>
       {label && <p className={classes.label}>{label}</p>}
@@ -114,19 +115,19 @@ const Dropdown = withStyles((theme) => ({
 
 Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
 
-const NumberField = withStyles((theme) => ({
+const NumberField = withStyles({
   field: {
     width: '35%',
-    marginRight: theme.spacing.unit * 3,
-    marginTop: theme.spacing.unit,
+    marginRight: '24px',
+    marginTop: '8px'
   },
   wrapper: {
-    marginTop: theme.spacing.unit / 2,
+    marginTop: '4px',
     border: '2px solid lightgrey',
     borderRadius: '4px',
-    padding: `0 ${theme.spacing.unit}px`,
-  },
-}))(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
+    padding: '0 8px'
+  }
+})(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
   return (
     <NumberTextField
       label={label || 'Label'}
@@ -149,10 +150,12 @@ 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 };
 
@@ -161,24 +164,24 @@ const tagMap = {
   radio: StyledRadio,
   dropdown: Dropdown,
   numberField: NumberField,
-  checkbox: CheckboxChoice,
+  checkbox: CheckboxChoice
 };
 
-const Group = withStyles((theme) => ({
+const Group = withStyles(() => ({
   group: {
-    margin: `0 0 ${theme.spacing.unit * 2}px 0`,
+    margin: '0 0 25px 0'
   },
   groupHeader: {
     color: '#495B8F',
-    fontSize: theme.typography.fontSize + 2,
+    fontSize: '16px',
     fontWeight: 600,
-    marginBottom: theme.spacing.unit,
+    marginBottom: '8px'
   },
   numberFields: {
-    fontSize: theme.typography.fontSize,
-    marginBottom: 0,
-  },
-}))((props) => {
+    fontSize: '0.85rem',
+    marginBottom: 0
+  }
+}))(props => {
   const { classes, model, label, group, configuration, onChange } = props;
 
   /**
@@ -192,7 +195,7 @@ const Group = withStyles((theme) => ({
     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) => {
@@ -208,7 +211,7 @@ const Group = withStyles((theme) => ({
       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>
@@ -219,7 +222,7 @@ const Group = withStyles((theme) => ({
       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>
@@ -234,7 +237,7 @@ const Group = withStyles((theme) => ({
     <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>
@@ -247,17 +250,16 @@ 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) => {
     log('[changeModel]', key, value);
-
     const { onChangeModel, onChangeConfiguration } = this.props;
     const model = { ...this.props.model };
     const configuration = { ...this.props.configuration };
@@ -273,29 +275,22 @@ export class Panel extends React.Component {
 
   render() {
     const { groups, model, configuration } = this.props;
-
     log('render:', model);
 
-    const renderedGroups = Object.keys(groups || {}).map((group) => {
-      const showGroup = Object.entries(groups[group]).some(([propName, propVal]) => !!propVal);
-
-      if (showGroup) {
-        return (
+    return (
+      <div>
+        {Object.keys(groups).map(g => (
           <Group
-            label={group}
-            key={group}
+            label={g}
+            key={g}
             model={model}
             configuration={configuration}
-            group={groups[group]}
+            group={groups[g]}
             onChange={this.change}
           />
-        );
-      }
-
-      return null;
-    });
-
-    return <div>{renderedGroups}</div>;
+        ))}
+      </div>
+    );
   }
 }
 

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

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