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

package/src/inputs.jsx

@@ -14,18 +14,13 @@ const InputTypes = {
   checked: PropTypes.bool,
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
-  error: PropTypes.string
+  error: PropTypes.string,
 };
 
 const RawInputSwitch = ({ classes, className, label, checked, onChange }) => {
   return (
     <InputContainer className={className} label={label}>
-      <Switch
-        className={classes.switchRoot}
-        checked={checked}
-        onChange={onChange}
-        aria-label={label}
-      />
+      <Switch className={classes.switchRoot} checked={checked} onChange={onChange} aria-label={label} />
     </InputContainer>
   );
 };
@@ -35,11 +30,11 @@ RawInputSwitch.propTypes = { ...InputTypes };
 const InputSwitch = withStyles({
   switchRoot: {
     justifyContent: 'inherit',
-    transform: 'translate(-20%, 20%)'
-  }
+    transform: 'translate(-20%, 20%)',
+  },
 })(RawInputSwitch);
 
-const RawInputCheckbox = props => {
+const RawInputCheckbox = (props) => {
   const { classes, className, label, checked, onChange, disabled, error } = props;
 
   return (
@@ -57,7 +52,7 @@ const RawInputCheckbox = props => {
 
 RawInputCheckbox.propTypes = { ...InputTypes };
 
-const RawInputRadio = props => {
+const RawInputRadio = (props) => {
   const { classes, className, label, checked, onChange, disabled, error } = props;
 
   return (
@@ -77,20 +72,20 @@ RawInputRadio.propTypes = { ...InputTypes };
 
 const InputCheckbox = withStyles({
   checkboxRoot: {
-    transform: 'translate(-25%, 20%)'
+    transform: 'translate(-25%, 20%)',
   },
   error: {
-    color: 'red'
-  }
+    color: 'red',
+  },
 })(RawInputCheckbox);
 
 const InputRadio = withStyles(() => ({
   radioRoot: {
-    transform: 'translate(-20%, 20%)'
+    transform: 'translate(-20%, 20%)',
   },
   error: {
-    color: 'red'
-  }
+    color: 'red',
+  },
 }))(RawInputRadio);
 
 export { InputSwitch, InputCheckbox, InputRadio };

package/src/langs.jsx

@@ -11,21 +11,21 @@ import debug from 'debug';
 
 const log = debug('pie-elements:config-ui:langs');
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     flexDirection: 'column',
     alignItems: 'start',
     display: 'flex',
     position: 'relative',
     paddingTop: '0px',
-    paddingRight: '0px'
+    paddingRight: '0px',
   },
   formControl: {
-    position: 'initial'
+    position: 'initial',
   },
   inputLabel: {
-    paddingBottom: theme.spacing.unit
-  }
+    paddingBottom: theme.spacing.unit,
+  },
 });
 
 export class RawLangs extends React.Component {
@@ -35,7 +35,7 @@ export class RawLangs extends React.Component {
     selected: PropTypes.string,
     label: PropTypes.string,
     classes: PropTypes.object.isRequired,
-    uid: PropTypes.string
+    uid: PropTypes.string,
   };
 
   constructor(props) {
@@ -43,7 +43,7 @@ export class RawLangs extends React.Component {
     this.uid = props.uid || (Math.random() * 10000).toFixed();
   }
 
-  choose = event => {
+  choose = (event) => {
     log('[choose] event: ', event);
     if (this.props.onChange) {
       this.props.onChange(event.target.value);
@@ -80,43 +80,28 @@ export const LanguageControls = withStyles({
     display: 'grid',
     gridAutoFlow: 'column',
     gridAutoColumns: '1fr',
-    gridGap: '8px'
-  }
-})(
-  ({
-    classes,
-    langs,
-    activeLang,
-    defaultLang,
-    onActiveLangChange,
-    onDefaultLangChange,
-    className
-  }) => {
-    const names = classNames(classes.languageControls, className);
+    gridGap: '8px',
+  },
+})(({ classes, langs, activeLang, defaultLang, onActiveLangChange, onDefaultLangChange, className }) => {
+  const names = classNames(classes.languageControls, className);
 
-    return (
-      <div className={names}>
-        <Langs
-          label="Choose language to edit"
-          langs={langs}
-          selected={activeLang}
-          onChange={l => onActiveLangChange(l)}
-        />
-        <Langs
-          label="Default language"
-          langs={langs}
-          selected={defaultLang}
-          onChange={l => onDefaultLangChange(l)}
-        />
-      </div>
-    );
-  }
-);
+  return (
+    <div className={names}>
+      <Langs
+        label="Choose language to edit"
+        langs={langs}
+        selected={activeLang}
+        onChange={(l) => onActiveLangChange(l)}
+      />
+      <Langs label="Default language" langs={langs} selected={defaultLang} onChange={(l) => onDefaultLangChange(l)} />
+    </div>
+  );
+});
 
 LanguageControls.propTypes = {
   langs: PropTypes.array,
   activeLang: PropTypes.string.isRequired,
   defaultLang: PropTypes.string.isRequired,
   onActiveLangChange: PropTypes.func.isRequired,
-  onDefaultLangChange: PropTypes.func.isRequired
+  onDefaultLangChange: PropTypes.func.isRequired,
 };

package/src/layout/config-layout.jsx

@@ -6,29 +6,25 @@ import SettingsBox from './settings-box';
 
 class ConfigLayout extends React.Component {
   static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.element),
-      PropTypes.element
-    ]),
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
     settings: PropTypes.element,
     className: PropTypes.string,
     classes: PropTypes.object,
-    sidePanelMinWidth: PropTypes.number
+    sidePanelMinWidth: PropTypes.number,
   };
 
   static defaultProps = {
-    sidePanelMinWidth: 950
+    sidePanelMinWidth: 950,
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      layoutMode: undefined
+      layoutMode: undefined,
     };
   }
 
-  onResize = contentRect => {
+  onResize = (contentRect) => {
     const { bounds } = contentRect;
     const { sidePanelMinWidth } = this.props;
     const layoutMode = bounds.width >= sidePanelMinWidth ? 'inline' : 'tabbed';
@@ -47,9 +43,7 @@ class ConfigLayout extends React.Component {
             <div ref={measureRef}>
               <LayoutContents
                 mode={layoutMode}
-                secondary={
-                  layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings
-                }
+                secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}
               >
                 {children}
               </LayoutContents>

package/src/layout/layout-contents.jsx

@@ -9,7 +9,7 @@ class RawLayoutContents extends React.Component {
     mode: PropTypes.oneOf(['tabbed', 'inline']),
     secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    classes: PropTypes.object
+    classes: PropTypes.object,
   };
 
   render() {
@@ -24,11 +24,7 @@ class RawLayoutContents extends React.Component {
           </div>
         )}
         {mode === 'tabbed' && (
-          <Tabs
-            onChange={this.onTabsChange}
-            contentClassName={classes.contentContainer}
-            indicatorColor="primary"
-          >
+          <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
             <div title="Design">{children}</div>
             <div title="settings">{secondary}</div>
           </Tabs>
@@ -41,20 +37,20 @@ class RawLayoutContents extends React.Component {
 const styles = () => ({
   flow: {
     display: 'flex',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   },
   container: {
     display: 'flex',
     flexDirection: 'column',
-    position: 'relative'
+    position: 'relative',
   },
   contentContainer: {
-    padding: '32px 16px 0 16px'
+    padding: '32px 16px 0 16px',
   },
   configContainer: {
     flex: '1',
-    marginRight: '20px'
-  }
+    marginRight: '20px',
+  },
 });
 
 export default withStyles(styles)(RawLayoutContents);

package/src/layout/settings-box.jsx

@@ -6,7 +6,7 @@ export class SettingsBox extends React.Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   };
   static defaultProps = {};
   render() {
@@ -25,7 +25,7 @@ const styles = () => ({
     maxWidth: '300px',
     padding: '24px 8px 24px 24px',
     width: '80%',
-    zIndex: 99
-  }
+    zIndex: 99,
+  },
 });
 export default withStyles(styles)(SettingsBox);

package/src/mui-box/index.jsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 
 const log = debug('pie-elements:config-ui:mui-box');
 
-const MuiBox = withStyles(theme => {
+const MuiBox = withStyles((theme) => {
   const light = theme.palette.type === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
@@ -26,10 +26,10 @@ const MuiBox = withStyles(theme => {
         position: 'absolute',
         transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         pointerEvents: 'none',
-        backgroundColor: bottomLineColor
+        backgroundColor: bottomLineColor,
       },
       '&:hover:before': {
-        height: '2px'
+        height: '2px',
       },
       '&:after': {
         left: 0,
@@ -41,14 +41,14 @@ const MuiBox = withStyles(theme => {
         transform: 'scaleX(0)',
         transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
         pointerEvents: 'none',
-        backgroundColor: theme.palette.primary[theme.palette.type] //'#304ffe'
-      }
+        backgroundColor: theme.palette.primary[theme.palette.type], //'#304ffe'
+      },
     },
     focused: {
       '&:after': {
-        transform: 'scaleX(1)'
-      }
-    }
+        transform: 'scaleX(1)',
+      },
+    },
   };
 })(({ children, classes, focused }) => {
   const names = classNames(classes.muiBox, focused && classes.focused);
@@ -58,7 +58,7 @@ const MuiBox = withStyles(theme => {
 
 MuiBox.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  focused: PropTypes.bool.isRequired
+  focused: PropTypes.bool.isRequired,
 };
 
 export default MuiBox;

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;