✨ Hiding advanced options by default in DraftConfigurator
This commit is contained in:
Joost De Cock
parent
6f69769d8e
commit
c76d041680
7 changed files with 161 additions and 134 deletions
|
|
@ -0,0 +1,4 @@
|
|||
import React from 'react'
|
||||
import PatternOptionBool from '../PatternOptionBool'
|
||||
|
||||
export default props => <PatternOptionBool {...props} name="advanced" />
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import Sa from '.'
|
||||
|
||||
const props = {
|
||||
raiseEvent: (type, data) => console.log(`Action of type ${type} triggered, data passed is`, data),
|
||||
updateValue: (name, value) => console.log(`Updated setting ${name}, value is now: ${value}`),
|
||||
name: 'sa',
|
||||
dflt: 'dflt',
|
||||
title: 'Seam allowance',
|
||||
desc:
|
||||
"This is the seam allowance description. I'm wrapped in a p tag. This component only sets the CSS class on a non-default value. It's up to you to supply the CSS to style it.",
|
||||
labels: {
|
||||
none: 'No seam allowance',
|
||||
dflt: 'Standard seam allowance',
|
||||
custom: 'Custom seam allowance'
|
||||
}
|
||||
}
|
||||
|
||||
storiesOf('Low level/DraftSettingSa', module)
|
||||
.add('Metric', () => <Sa {...props} units="metric" />)
|
||||
.add('Imperial', () => <Sa {...props} units="imperial" />)
|
||||
|
|
@ -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);
|
||||
};
|
||||
const getDefault = 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;
|
||||
default:
|
||||
return false;
|
||||
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]
|
||||
switch (setting) {
|
||||
case 'sa':
|
||||
return 10
|
||||
case 'only':
|
||||
return 'dflt'
|
||||
case 'complete':
|
||||
return true
|
||||
case 'margin':
|
||||
return 2
|
||||
case 'units':
|
||||
return props.units
|
||||
default:
|
||||
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 (
|
||||
<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);
|
||||
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"}
|
||||
>
|
||||
<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>
|
||||
</li>
|
||||
{children}
|
||||
</React.Fragment>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
) : null}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
DraftSettings.propTypes = {
|
||||
config: PropTypes.object.isRequired
|
||||
};
|
||||
}
|
||||
|
||||
DraftSettings.defaultProps = {};
|
||||
DraftSettings.defaultProps = {}
|
||||
|
||||
export default DraftSettings;
|
||||
export default DraftSettings
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const DraftConfigurator = props => {
|
|||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<FormattedMessage id="app.draftSettings" />
|
||||
<FormattedMessage id="app.settings" />
|
||||
</span>
|
||||
<DraftSettings
|
||||
noDocs={props.noDocs}
|
||||
|
|
|
|||
|
|
@ -262,3 +262,5 @@ whatYouNeed: What you need
|
|||
fabricOptions: Fabric options
|
||||
cutting: Cutting
|
||||
instructions: Instructions
|
||||
hide: Hide
|
||||
show: Show
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
advanced:
|
||||
title: Advanced
|
||||
description: Controls whether or not to display advanced settings and pattern options
|
||||
|
||||
paperless:
|
||||
title: Paperless
|
||||
description: Drafts a pattern with all dimensions included so you can transfer it on fabric or another medium without the need to print
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue