✨ Hiding advanced options by default in DraftConfigurator

packages/components/src/DraftConfigurator/DraftSettings/index.js

@@ -1,51 +1,50 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
-import DraftSettingSa from "../DraftSettingSa";
-import DraftSettingMargin from "../DraftSettingMargin";
-import DraftSettingComplete from "../DraftSettingComplete";
-import DraftSettingPaperless from "../DraftSettingPaperless";
-import DraftSettingUnits from "../DraftSettingUnits";
-import DraftSettingLanguage from "../DraftSettingLanguage";
-import DraftSettingOnly from "../DraftSettingOnly";
-import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { FormattedMessage } from 'react-intl'
+import DraftSettingSa from '../DraftSettingSa'
+import DraftSettingMargin from '../DraftSettingMargin'
+import DraftSettingComplete from '../DraftSettingComplete'
+import DraftSettingPaperless from '../DraftSettingPaperless'
+import DraftSettingAdvanced from '../DraftSettingAdvanced'
+import DraftSettingUnits from '../DraftSettingUnits'
+import DraftSettingLanguage from '../DraftSettingLanguage'
+import DraftSettingOnly from '../DraftSettingOnly'
+import RightIcon from '@material-ui/icons/KeyboardArrowRight'
 
 const DraftSettings = props => {
-  const [expanded, setExpanded] = useState([]);
+  const [expanded, setExpanded] = useState([])
   const toggleGroup = group => {
-    let shown = expanded.slice(0);
-    let index = shown.indexOf(group);
-    if (index === -1) shown.push(group);
-    else shown.splice(index, 1);
-    setExpanded(shown);
-  };
+    let shown = expanded.slice(0)
+    let index = shown.indexOf(group)
+    if (index === -1) shown.push(group)
+    else shown.splice(index, 1)
+    setExpanded(shown)
+  }
   const getDefault = setting => {
-    if (props.recipe && typeof props.recipe.settings[setting] !== "undefined")
-      return props.recipe.settings[setting];
+    if (props.recipe && typeof props.recipe.settings[setting] !== 'undefined')
+      return props.recipe.settings[setting]
     switch (setting) {
-      case "sa":
-        return 10;
-      case "only":
-        return "dflt";
-      case "complete":
-        return true;
-      case "margin":
-        return 2;
-      case "units":
-        return props.units;
+      case 'sa':
+        return 10
+      case 'only':
+        return 'dflt'
+      case 'complete':
+        return true
+      case 'margin':
+        return 2
+      case 'units':
+        return props.units
       default:
-        return false;
+        return false
     }
-  };
+  }
 
-  let noyes = [
-    <FormattedMessage id="app.no" />,
-    <FormattedMessage id="app.yes" />
-  ];
+  let noyes = [<FormattedMessage id="app.no" />, <FormattedMessage id="app.yes" />]
+  let hideshow = [<FormattedMessage id="app.hide" />, <FormattedMessage id="app.show" />]
   let units = {
     metric: <FormattedMessage id="app.metricUnits" />,
     imperial: <FormattedMessage id="app.imperialUnits" />
-  };
+  }
   const addProps = setting => {
     const labels = {
       sa: {
@@ -58,8 +57,9 @@ const DraftSettings = props => {
         custom: <FormattedMessage id="app.custom" />
       },
       paperless: noyes,
-      complete: noyes
-    };
+      advanced: hideshow,
+      complete: hideshow
+    }
     let childProps = {
       raiseEvent: props.raiseEvent,
       updateValue: props.updateValue,
@@ -69,80 +69,74 @@ const DraftSettings = props => {
       labels: labels[setting],
       noDocs: props.noDocs,
       dflt: getDefault(setting)
-    };
-    childProps.title = (
-      <FormattedMessage id={"settings." + setting + ".title"} />
-    );
-    childProps.desc = (
-      <FormattedMessage id={"settings." + setting + ".description"} />
-    );
-    if (setting === "only") {
-      childProps.customDflt = [];
-      childProps.parts = {};
+    }
+    childProps.title = <FormattedMessage id={'settings.' + setting + '.title'} />
+    childProps.desc = <FormattedMessage id={'settings.' + setting + '.description'} />
+    if (setting === 'only') {
+      childProps.customDflt = []
+      childProps.parts = {}
       if (props.config.draftOrder) {
         for (let part of props.config.draftOrder)
-          childProps.parts[part] = <FormattedMessage id={"parts." + part} />;
+          childProps.parts[part] = <FormattedMessage id={'parts.' + part} />
       }
     }
     if (
-      typeof props.gist !== "undefined" &&
-      typeof props.gist.settings !== "undefined" &&
-      typeof props.gist.settings[setting] !== "undefined"
+      typeof props.gist !== 'undefined' &&
+      typeof props.gist.settings !== 'undefined' &&
+      typeof props.gist.settings[setting] !== 'undefined'
     )
-      childProps.value = props.gist.settings[setting];
-    else childProps.value = null;
+      childProps.value = props.gist.settings[setting]
+    else childProps.value = null
 
-    return childProps;
-  };
+    return childProps
+  }
 
   let groups = {
-    preferences: [
-      <DraftSettingSa {...addProps("sa")} />,
-      <DraftSettingPaperless {...addProps("paperless")} />,
-      <DraftSettingComplete {...addProps("complete")} />
-    ],
     advanced: [
-      <DraftSettingOnly {...addProps("only")} />,
-      <DraftSettingMargin {...addProps("margin")} />,
-      <DraftSettingUnits {...addProps("units")} list={units} />,
-      <DraftSettingLanguage {...addProps("locale")} />
+      <DraftSettingLanguage {...addProps('locale')} />,
+      <DraftSettingUnits {...addProps('units')} list={units} />,
+      <DraftSettingComplete {...addProps('complete')} />,
+      <DraftSettingMargin {...addProps('margin')} />,
+      <DraftSettingOnly {...addProps('only')} />
     ]
-  };
+  }
 
   return (
-    <ul className="config l2">
-      {Object.keys(groups).map(group => {
-        let open = true;
-        if (expanded.indexOf(group) === -1) open = false;
-        let children = null;
-        if (open) children = groups[group].map(component => component);
-        return (
-          <React.Fragment key={group}>
-            <li
-              className={open ? "expanded" : "collapsed"}
-              key={group + "-ghead"}
-            >
-              <span onClick={() => toggleGroup(group)}>
-                <RightIcon
-                  className={
-                    "icon-col-exp " + (open ? "expanded" : "collapsed")
-                  }
-                />
-                <FormattedMessage id={"optiongroups." + group} />
-              </span>
-            </li>
-            {children}
-          </React.Fragment>
-        );
-      })}
-    </ul>
-  );
-};
+    <React.Fragment>
+      <ul className="config l2 nogroups">
+        <DraftSettingSa {...addProps('sa')} />
+        <DraftSettingPaperless {...addProps('paperless')} />
+        <DraftSettingAdvanced {...addProps('advanced')} />
+      </ul>
+      {props.gist.settings.advanced ? (
+        <ul className="config l2">
+          {Object.keys(groups).map(group => {
+            let open = true
+            if (expanded.indexOf(group) === -1) open = false
+            let children = null
+            if (open) children = groups[group].map(component => component)
+            return (
+              <React.Fragment key={group}>
+                <li className={open ? 'expanded' : 'collapsed'} key={group + '-ghead'}>
+                  <span onClick={() => toggleGroup(group)}>
+                    <RightIcon className={'icon-col-exp ' + (open ? 'expanded' : 'collapsed')} />
+                    <FormattedMessage id={'optiongroups.' + group} />
+                  </span>
+                </li>
+                {children}
+              </React.Fragment>
+            )
+          })}
+        </ul>
+      ) : null}
+    </React.Fragment>
+  )
+}
 
 DraftSettings.propTypes = {
   config: PropTypes.object.isRequired
-};
+}
 
-DraftSettings.defaultProps = {};
+DraftSettings.defaultProps = {}
 
-export default DraftSettings;
+export default DraftSettings