✨ Hiding advanced options by default in DraftConfigurator

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

@@ -1,30 +1,30 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import OptionGroup from "../OptionGroup";
-import { FormattedMessage } from "react-intl";
-import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import OptionGroup from '../OptionGroup'
+import { FormattedMessage } from 'react-intl'
+import RightIcon from '@material-ui/icons/KeyboardArrowRight'
 
 const PatternOptions = 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 renderGroup = group => {
-    let open = true;
-    if (expanded.indexOf(group) === -1) open = false;
-    let output = [];
-    let children = null;
+    let open = true
+    if (expanded.indexOf(group) === -1) open = false
+    let output = []
+    let children = null
     if (expanded.indexOf(group) !== -1)
       children = (
         <ul className="config l3">
           <OptionGroup
             noDocs={props.noDocs}
-            key={group + "-group"}
+            key={group + '-group'}
             units={props.units}
             config={props.config}
             gist={props.gist}
@@ -34,34 +34,35 @@ const PatternOptions = props => {
             raiseEvent={props.raiseEvent}
           />
         </ul>
-      );
+      )
     output.push(
-      <li className={open ? "expanded" : "collapsed"} key={group + "-ghead"}>
+      <li className={open ? 'expanded' : 'collapsed'} key={group + '-ghead'}>
         <span onClick={() => toggleGroup(group)}>
-          <RightIcon
-            className={"icon-col-exp " + (open ? "expanded" : "collapsed")}
-          />
-          <FormattedMessage id={"optiongroups." + group} />
+          <RightIcon className={'icon-col-exp ' + (open ? 'expanded' : 'collapsed')} />
+          <FormattedMessage id={'optiongroups.' + group} />
         </span>
         {children}
       </li>
-    );
+    )
 
-    return output;
-  };
+    return output
+  }
 
-  return (
-    <ul className="config l2">
-      {Object.keys(props.config.optionGroups).map(group => renderGroup(group))}
-    </ul>
-  );
-};
+  const children = []
+  for (let group in props.config.optionGroups) {
+    if (props.gist.settings.advanced || group !== 'advanced') {
+      children.push(renderGroup(group))
+    }
+  }
+
+  return <ul className="config l2">{children}</ul>
+}
 
 PatternOptions.propTypes = {
   config: PropTypes.object.isRequired,
   raiseEvent: PropTypes.func
-};
+}
 
-PatternOptions.defaultProps = {};
+PatternOptions.defaultProps = {}
 
-export default PatternOptions;
+export default PatternOptions