🚧 More work on React components

packages/components/src/GistConfigurator/index.js

@@ -5,19 +5,36 @@ import Deg from "../PatternOptionDegree";
 import Mm from "../PatternOptionMillimeter";
 import Bool from "../PatternOptionBool";
 import OptionGroup from "../OptionGroup";
-import { optionType, defaultGist, gistDefaults } from "../utils";
+import { optionType, gistDefaults } from "../utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, injectIntl } from "react-intl";
+import { i18n as languages } from "@freesewing/i18n";
+import List from "@material-ui/core/List";
+import ListSubheader from "@material-ui/core/ListSubheader";
+import CollapsedIcon from "@material-ui/icons/ArrowDropDown";
+import ExpandedIcon from "@material-ui/icons/ArrowRight";
+import PatternOptions from "../PatternOptions";
+import DraftSettings from "../DraftSettings";
 
 const GistConfigurator = props => {
-  const [gist, setGist] = useState(props.gist || defaultGist);
+  console.log(languages);
+  const [gist, setGist] = useState(props.gist);
+  const [expanded, setExpanded] = useState([]);
 
   const update = (type, name, value) => {
     console.log("updating", type, name, value);
   };
 
+  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 pattern = patternInfo[props.pattern];
-  let dflts = gistDefaults(pattern.config, gist);
+  let dflts = gistDefaults(pattern.config, props.gist);
 
   return (
     <div className="gist-config">
@@ -25,25 +42,23 @@ const GistConfigurator = props => {
         <h2>
           <FormattedMessage id="app.patternOptions" />
         </h2>
-        {Object.keys(pattern.optionGroups).map(group => (
-          <React.Fragment key={group}>
-            <h3 key={group + "-title"}>
-              <FormattedMessage id={"optiongroups." + group} />
-            </h3>
-            <OptionGroup
-              key={group + "-group"}
-              units={props.units}
-              pattern={pattern}
-              dflts={dflts}
-              options={pattern.optionGroups[group]}
-              updateValue={update}
-              triggerAction={props.triggerAction}
-            />
-          </React.Fragment>
-        ))}
+        <PatternOptions
+          pattern={props.pattern}
+          units={props.units}
+          updateValue={update}
+          triggerAction={props.triggerAction}
+        />
         <h2>
           <FormattedMessage id="app.draftSettings" />
         </h2>
+        <DraftSettings
+          pattern={props.pattern}
+          units={props.units}
+          updateValue={update}
+          triggerAction={props.triggerAction}
+          language={props.intl.locale}
+          languages={languages[props.intl.locale]}
+        />
       </div>
     </div>
   );
@@ -56,4 +71,4 @@ GistConfigurator.propTypes = {
 
 GistConfigurator.defaultProps = {};
 
-export default GistConfigurator;
+export default injectIntl(GistConfigurator);