VSinerva/freesewing
1
0
Fork 0
Code Activity

✨ Hiding advanced options by default in DraftConfigurator

Browse source
This commit is contained in:
Joost De Cock 2019-09-17 07:59:57 +02:00
parent 6f69769d8e
commit c76d041680
7 changed files with 161 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/components/src/DraftConfigurator/DraftSettingAdvanced/index.js Normal file
View file

@ -0,0 +1,4 @@
import React from 'react'
import PatternOptionBool from '../PatternOptionBool'
export default props => <PatternOptionBool {...props} name="advanced" />

22
packages/components/src/DraftConfigurator/DraftSettingAdvanced/stories.js Normal file
View file

@ -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" />)

190
packages/components/src/DraftConfigurator/DraftSettings/index.js
View file

@ -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

71
packages/components/src/DraftConfigurator/PatternOptions/index.js
View file

@ -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

2
packages/components/src/DraftConfigurator/index.js
View file

@ -25,7 +25,7 @@ const DraftConfigurator = props => {
</li>
<li>
<span>
<FormattedMessage id="app.draftSettings" />
<FormattedMessage id="app.settings" />
</span>
<DraftSettings
noDocs={props.noDocs}

2
packages/i18n/src/locales/en/app.yaml
View file

@ -262,3 +262,5 @@ whatYouNeed: What you need
fabricOptions: Fabric options
cutting: Cutting
instructions: Instructions
hide: Hide
show: Show

4
packages/i18n/src/locales/en/settings.yml
View file

@ -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