@pie-lib/config-ui 11.3.13-next.0 → 12.0.0-beta.1

package/src/input.jsx

@@ -10,42 +10,42 @@ export default class Input extends React.Component {
     label: PropTypes.string,
     type: PropTypes.string.isRequired,
     error: PropTypes.func,
-    noModelUpdateOnError: PropTypes.bool,
+    noModelUpdateOnError: PropTypes.bool
   };
 
   static defaultProps = {
     type: 'text',
     error: (value, type) => (type === 'number' ? !value || isNaN(value) : !value),
-    noModelUpdateOnError: false,
+    noModelUpdateOnError: false
   };
 
   constructor(props) {
     super(props);
 
     this.state = {
-      value: props.value,
+      value: props.value
     };
   }
 
   componentWillReceiveProps(newProps) {
     this.setState({
-      value: newProps.value,
+      value: newProps.value
     });
   }
 
-  onChange = (event) => {
+  onChange = event => {
     const { type, onChange, error } = this.props;
     const value = event.target.value;
 
     if (error(value, type)) {
       this.setState({
         error: true,
-        value: event.target.value,
+        value: event.target.value
       });
     } else {
       this.setState({
         error: false,
-        value: event.target.value,
+        value: event.target.value
       });
 
       onChange(event);

package/src/inputs.jsx

@@ -14,13 +14,18 @@ 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>
   );
 };
@@ -30,11 +35,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 (
@@ -52,7 +57,7 @@ const RawInputCheckbox = (props) => {
 
 RawInputCheckbox.propTypes = { ...InputTypes };
 
-const RawInputRadio = (props) => {
+const RawInputRadio = props => {
   const { classes, className, label, checked, onChange, disabled, error } = props;
 
   return (
@@ -70,22 +75,22 @@ const RawInputRadio = (props) => {
 
 RawInputRadio.propTypes = { ...InputTypes };
 
-const InputCheckbox = withStyles((theme) => ({
+const InputCheckbox = withStyles({
   checkboxRoot: {
-    transform: 'translate(-25%, 20%)',
+    transform: 'translate(-25%, 20%)'
   },
   error: {
-    color: theme.palette.error.main,
-  },
-}))(RawInputCheckbox);
+    color: 'red'
+  }
+})(RawInputCheckbox);
 
-const InputRadio = withStyles((theme) => ({
+const InputRadio = withStyles(() => ({
   radioRoot: {
-    transform: 'translate(-20%, 20%)',
+    transform: 'translate(-20%, 20%)'
   },
   error: {
-    color: theme.palette.error.main,
-  },
+    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,9 +43,8 @@ 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);
     }
@@ -53,16 +52,13 @@ export class RawLangs extends React.Component {
 
   render() {
     let { langs, selected, label, classes } = this.props;
-
     log('[render] selected:', selected);
-
     return (
       <div className={classes.root}>
         <FormControl className={classes.formControl}>
           <InputLabel className={classes.inputLabel} htmlFor={this.uid}>
             {label}
           </InputLabel>
-
           <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>
             {langs.map((l, index) => (
               <MenuItem key={index} value={l}>
@@ -84,28 +80,43 @@ 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

@@ -1,31 +1,34 @@
 import React from 'react';
 import Measure from 'react-measure';
-import { withContentRect } from 'react-measure';
 import PropTypes from 'prop-types';
 import LayoutContents from './layout-contents';
 import SettingsBox from './settings-box';
 
-class MeasuredConfigLayout extends React.Component {
+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,
-    settings: PropTypes.element,
-    sidePanelMinWidth: PropTypes.number,
-    hideSettings: PropTypes.bool,
+    sidePanelMinWidth: PropTypes.number
   };
 
   static defaultProps = {
-    sidePanelMinWidth: 950,
-    hideSettings: false,
+    sidePanelMinWidth: 950
   };
 
   constructor(props) {
     super(props);
-    this.state = { layoutMode: undefined };
+    this.state = {
+      layoutMode: undefined
+    };
   }
 
-  onResize = (contentRect) => {
+  onResize = contentRect => {
     const { bounds } = contentRect;
     const { sidePanelMinWidth } = this.props;
     const layoutMode = bounds.width >= sidePanelMinWidth ? 'inline' : 'tabbed';
@@ -37,15 +40,17 @@ class MeasuredConfigLayout extends React.Component {
     return (
       <Measure bounds onResize={this.onResize}>
         {({ measureRef }) => {
-          const { children, settings, hideSettings } = this.props;
+          const { settings, children } = this.props;
           const { layoutMode } = this.state;
 
-          const settingsPanel = layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings;
-          const secondaryContent = hideSettings ? null : settingsPanel;
-
           return (
             <div ref={measureRef}>
-              <LayoutContents mode={layoutMode} secondary={secondaryContent}>
+              <LayoutContents
+                mode={layoutMode}
+                secondary={
+                  layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings
+                }
+              >
                 {children}
               </LayoutContents>
             </div>
@@ -56,6 +61,4 @@ class MeasuredConfigLayout extends React.Component {
   }
 }
 
-const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
-
 export default ConfigLayout;

package/src/layout/layout-contents.jsx

@@ -1,106 +1,60 @@
 import React from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core';
 import Tabs from '../tabs';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
 
 class RawLayoutContents extends React.Component {
   static propTypes = {
     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
   };
 
-  getConfiguration = () => {
-    const { secondary } = this.props;
-    // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
-
-    return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;
-  };
-
-  // // eslint-disable-next-line no-unused-vars
-  // componentDidUpdate(prevProps, prevState, snapshot) {
-  //   const configuration = this.getConfiguration();
-  //   const { mode } = this.props;
-  //
-  //   // promptHolder class is used to wrap up inputs:
-  //   // we don't want inputs to fill the entire scrollable container,
-  //   // but instead we want inputs to fit in the first view,
-  //   // so we calculate the maximum space inputs need
-  //   try {
-  //     if (
-  //       configuration?.maxWidth &&
-  //       getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==
-  //         configuration?.maxWidth
-  //     ) {
-  //       document.documentElement.style.setProperty(
-  //         '--pie-prompt-holder-max-width',
-  //         mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,
-  //       );
-  //     }
-  //   } catch (e) {
-  //     console.log(e.toString());
-  //   }
-  // }
-
   render() {
     const { mode, secondary, children, classes } = this.props;
-    const configuration = this.getConfiguration();
-
-    let hasSettingsPanel = Object.entries(configuration || {}).some(([propName, obj]) => !!obj?.settings);
-    // ebsr has configuration.partA and configuration.partB
-    // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings
-
-    if (!hasSettingsPanel) {
-      try {
-        hasSettingsPanel = JSON.stringify(configuration)?.match(/settings":true/)?.length;
-      } catch (e) {
-        console.log(e.toString());
-      }
-    }
 
     return (
-      <div className={classes.container}>
+      <div className={classnames(classes.container)}>
         {mode === 'inline' && (
-          <div className={classnames(classes.flow, classes.contentContainer)}>
+          <div className={classes.flow}>
             <div className={classes.configContainer}>{children}</div>
-            {hasSettingsPanel && <div className={classes.settingsContainer}>{secondary}</div>}
+            <div>{secondary}</div>
           </div>
         )}
-
-        {mode === 'tabbed' && hasSettingsPanel && (
-          <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
+        {mode === 'tabbed' && (
+          <Tabs
+            onChange={this.onTabsChange}
+            contentClassName={classes.contentContainer}
+            indicatorColor="primary"
+          >
             <div title="Design">{children}</div>
-            <div title="Settings">{secondary}</div>
+            <div title="settings">{secondary}</div>
           </Tabs>
         )}
-
-        {mode === 'tabbed' && !hasSettingsPanel && <div className={classes.contentContainer}>{children}</div>}
       </div>
     );
   }
 }
 
-const styles = (theme) => ({
+const styles = () => ({
   flow: {
     display: 'flex',
-    justifyContent: 'space-between',
+    justifyContent: 'space-between'
   },
   container: {
     display: 'flex',
     flexDirection: 'column',
-    position: 'relative',
+    position: 'relative'
   },
   contentContainer: {
-    padding: `${theme.spacing.unit * 2}px 0`,
+    padding: '32px 16px 0 16px'
   },
   configContainer: {
     flex: '1',
-  },
-  settingsContainer: {
-    marginLeft: theme.spacing.unit * 2,
-  },
+    marginRight: '20px'
+  }
 });
 
 export default withStyles(styles)(RawLayoutContents);

package/src/layout/settings-box.jsx

@@ -2,34 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
-
 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() {
     const { classes, className, children } = this.props;
-
     return <div className={classNames(classes.settingsBox, className)}>{children}</div>;
   }
 }
-const styles = (theme) => ({
+const styles = () => ({
   settingsBox: {
-    backgroundColor: theme.palette.background.paper,
-    border: `2px solid ${theme.palette.grey[200]}`,
+    backgroundColor: '#FFF',
+    border: '2px solid #EEE',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'flex-start',
     minWidth: '275px',
     maxWidth: '300px',
-    padding: '20px 4px 4px 20px',
-    zIndex: 99,
-  },
+    padding: '24px 8px 24px 24px',
+    width: '80%',
+    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;