VSinerva/freesewing
1
0
Fork 0
Code Activity

feat (components): Changes to components for v2.2

Browse source
This commit is contained in:
Joost De Cock 2019-12-26 11:58:52 +01:00
parent 90017ea08d
commit 2ac8280446
16 changed files with 107 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js
View file

@ -29,7 +29,7 @@ const DraftSettingLanguage = props => {
name={props.name} name={props.name}
value={value} value={value}
dflt={props.dflt} dflt={props.dflt}
patternDflt={props.intl.locale} designDflt={props.intl.locale}
onChange={update} onChange={update}
label={'po-list-' + props.name} label={'po-list-' + props.name}
updateValue={update} updateValue={update}
@ -41,7 +41,7 @@ const DraftSettingLanguage = props => {
<li> <li>
<OptionPreamble <OptionPreamble
dflt={props.dflt} dflt={props.dflt}
patternDflt={props.intl.locale} designDflt={props.intl.locale}
value={value} value={value}
desc={props.desc} desc={props.desc}
title={props.title} title={props.title}

6
packages/components/src/DraftConfigurator/DraftSettingMargin/index.js
View file

@ -30,8 +30,8 @@ const DraftSettingMargin = props => {
} }
const patternReset = () => { const patternReset = () => {
setValue(props.patternDflt) setValue(props.designDflt)
props.updateValue('margin', props.patternDflt) props.updateValue('margin', props.designDflt)
} }
const toggleExpanded = () => setExpanded(!expanded) const toggleExpanded = () => setExpanded(!expanded)
@ -53,7 +53,7 @@ const DraftSettingMargin = props => {
<li> <li>
<OptionPreamble <OptionPreamble
dflt={props.dflt} dflt={props.dflt}
patternDflt={props.patternDflt} designDflt={props.designDflt}
value={value} value={value}
desc={props.desc} desc={props.desc}
title={props.title} title={props.title}

4
packages/components/src/DraftConfigurator/DraftSettingOnly/index.js
View file

@ -52,7 +52,7 @@ const DraftSettingOnly = props => {
name="only" name="only"
value={value} value={value}
dflt={props.dflt} dflt={props.dflt}
patternDflt={props.dflt} designDflt={props.dflt}
onChange={update} onChange={update}
label="po-list-only" label="po-list-only"
updateValue={update} updateValue={update}
@ -80,7 +80,7 @@ const DraftSettingOnly = props => {
<li> <li>
<OptionPreamble <OptionPreamble
dflt={onlyDfltToggle} dflt={onlyDfltToggle}
patternDflt="dflt" designDflt="dflt"
sameButDifferent={props.dflt !== props.value} sameButDifferent={props.dflt !== props.value}
value={value} value={value}
desc={props.desc} desc={props.desc}

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

@ -106,7 +106,7 @@ const DraftSettingSa = props => {
<li> <li>
<OptionPreamble <OptionPreamble
dflt={saDfltToggle} dflt={saDfltToggle}
patternDflt={'dflt'} designDflt={'dflt'}
sameButDifferent={props.dflt !== props.value} sameButDifferent={props.dflt !== props.value}
value={value} value={value}
desc={props.desc} desc={props.desc}

6
packages/components/src/DraftConfigurator/DraftSettingUnits/index.js
View file

@ -17,8 +17,8 @@ const DraftSettingUnits = props => {
} }
const patternReset = () => { const patternReset = () => {
setValue(props.patternDflt) setValue(props.designDflt)
props.updateValue(props.name, props.patternDflt) props.updateValue(props.name, props.designDflt)
} }
const toggleExpanded = () => setExpanded(!expanded) const toggleExpanded = () => setExpanded(!expanded)
@ -39,7 +39,7 @@ const DraftSettingUnits = props => {
<li> <li>
<OptionPreamble <OptionPreamble
dflt={props.dflt} dflt={props.dflt}
patternDflt={props.patternDflt} designDflt={props.designDflt}
value={value} value={value}
desc={props.desc} desc={props.desc}
title={props.title} title={props.title}

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

@ -20,8 +20,9 @@ const DraftSettings = props => {
else shown.splice(index, 1) else shown.splice(index, 1)
setExpanded(shown) setExpanded(shown)
} }
const getDefault = (setting, recipe = false) => { const getDefault = (setting, pattern = false) => {
if (recipe && typeof recipe.settings[setting] !== 'undefined') return recipe.settings[setting] if (pattern && typeof pattern.settings[setting] !== 'undefined')
return pattern.settings[setting]
switch (setting) { switch (setting) {
case 'sa': case 'sa':
return 10 return 10
@ -67,8 +68,8 @@ const DraftSettings = props => {
name: setting, name: setting,
labels: labels[setting], labels: labels[setting],
noDocs: props.noDocs, noDocs: props.noDocs,
dflt: getDefault(setting, props.recipe), dflt: getDefault(setting, props.pattern),
patternDflt: getDefault(setting) designDflt: getDefault(setting)
} }
childProps.title = <FormattedMessage id={'settings.' + setting + '.title'} /> childProps.title = <FormattedMessage id={'settings.' + setting + '.title'} />
childProps.desc = <FormattedMessage id={'settings.' + setting + '.description'} /> childProps.desc = <FormattedMessage id={'settings.' + setting + '.description'} />
@ -81,11 +82,11 @@ const DraftSettings = props => {
} }
} }
if ( if (
typeof props.gist !== 'undefined' && typeof props.data !== 'undefined' &&
typeof props.gist.settings !== 'undefined' && typeof props.data.settings !== 'undefined' &&
typeof props.gist.settings[setting] !== 'undefined' typeof props.data.settings[setting] !== 'undefined'
) )
childProps.value = props.gist.settings[setting] childProps.value = props.data.settings[setting]
else childProps.value = null else childProps.value = null
return childProps return childProps
@ -108,7 +109,7 @@ const DraftSettings = props => {
<DraftSettingPaperless {...addProps('paperless')} /> <DraftSettingPaperless {...addProps('paperless')} />
<DraftSettingAdvanced {...addProps('advanced')} /> <DraftSettingAdvanced {...addProps('advanced')} />
</ul> </ul>
{props.gist.settings.advanced ? ( {props.data.settings.advanced ? (
<ul className="config l2"> <ul className="config l2">
{Object.keys(groups).map(group => { {Object.keys(groups).map(group => {
let open = true let open = true

40
packages/components/src/DraftConfigurator/DraftSettings/stories.js
View file

@ -1,31 +1,29 @@
import React from "react"; import React from 'react'
import { storiesOf } from "@storybook/react"; import { storiesOf } from '@storybook/react'
import DraftSettings from "."; import DraftSettings from '.'
const props = { const props = {
raiseEvent: (type, data) => raiseEvent: (type, data) => console.log(`Action of type ${type} triggered, data passed is`, data),
console.log(`Action of type ${type} triggered, data passed is`, data), updateValue: (type, data) => console.log(`Update ${type} with new value`, data),
updateValue: (type, data) => data: {
console.log(`Update ${type} with new value`, data),
gist: {
settings: { settings: {
options: {} options: {}
} }
}, },
languages: { languages: {
de: "German", de: 'German',
en: "English", en: 'English',
es: "Spanish", es: 'Spanish',
fr: "French", fr: 'French',
nl: "Dutch" nl: 'Dutch'
}, },
language: "en" language: 'en'
}; }
storiesOf("Low level/DraftSettings", module) storiesOf('Low level/DraftSettings', module)
.add("Simon metric", () => ( .add('Simon metric', () => (
<DraftSettings pattern="simon" gist={false} units="metric" {...props} /> <DraftSettings pattern="simon" data={false} units="metric" {...props} />
))
.add('Trayvon imperial', () => (
<DraftSettings pattern="trayvon" data={false} units="imperial" {...props} />
)) ))
.add("Trayvon imperial", () => (
<DraftSettings pattern="trayvon" gist={false} units="imperial" {...props} />
));

14
packages/components/src/DraftConfigurator/OptionGroup/index.js
View file

@ -19,8 +19,8 @@ const OptionGroup = props => {
let stringKey = `options.${props.config.name}.${name}.` let stringKey = `options.${props.config.name}.${name}.`
let extraProps = { let extraProps = {
name, name,
dflt: optionDefault(name, props.config.options[name], props.recipe), dflt: optionDefault(name, props.config.options[name], props.pattern),
patternDflt: optionDefault(name, props.config.options[name]), designDflt: optionDefault(name, props.config.options[name]),
units: props.units, units: props.units,
updateValue: props.updateValue, updateValue: props.updateValue,
raiseEvent: props.raiseEvent, raiseEvent: props.raiseEvent,
@ -32,12 +32,12 @@ const OptionGroup = props => {
noDocs: props.noDocs noDocs: props.noDocs
} }
if ( if (
typeof props.gist !== 'undefined' && typeof props.data !== 'undefined' &&
typeof props.gist.settings !== 'undefined' && typeof props.data.settings !== 'undefined' &&
typeof props.gist.settings.options !== 'undefined' && typeof props.data.settings.options !== 'undefined' &&
typeof props.gist.settings.options[name] !== 'undefined' typeof props.data.settings.options[name] !== 'undefined'
) )
extraProps.value = props.gist.settings.options[name] extraProps.value = props.data.settings.options[name]
else extraProps.value = null else extraProps.value = null
let noyes = [<FormattedMessage id="app.no" />, <FormattedMessage id="app.yes" />] let noyes = [<FormattedMessage id="app.no" />, <FormattedMessage id="app.yes" />]

24
packages/components/src/DraftConfigurator/OptionGroup/stories.js
View file

@ -1,6 +1,6 @@
import React from "react"; import React from 'react'
import { storiesOf } from "@storybook/react"; import { storiesOf } from '@storybook/react'
import OptionGroup from "."; import OptionGroup from '.'
const options = { const options = {
armholeDrop: { pct: 10, min: 1, max: 75 }, armholeDrop: { pct: 10, min: 1, max: 75 },
@ -13,28 +13,26 @@ const options = {
stretchFactor: { pct: 5, min: 0, max: 15 }, stretchFactor: { pct: 5, min: 0, max: 15 },
shoulderStrapWidth: { pct: 15, min: 10, max: 40 }, shoulderStrapWidth: { pct: 15, min: 10, max: 40 },
shoulderStrapPlacement: { pct: 40, min: 20, max: 80 } shoulderStrapPlacement: { pct: 40, min: 20, max: 80 }
}; }
const props = { const props = {
raiseEvent: (type, data) => raiseEvent: (type, data) => console.log(`Action of type ${type} triggered, data passed is`, data),
console.log(`Action of type ${type} triggered, data passed is`, data), updateValue: (type, data) => console.log(`Update ${type} with new value`, data),
updateValue: (type, data) => data: {
console.log(`Update ${type} with new value`, data),
gist: {
settings: { settings: {
options: {} options: {}
} }
}, },
pattern: { pattern: {
config: { config: {
name: "aaron", name: 'aaron',
options: options options: options
} }
}, },
dflts: { options: {} }, dflts: { options: {} },
options: Object.keys(options) options: Object.keys(options)
}; }
storiesOf("Low level/OptionGroup", module).add("Simon metric", () => ( storiesOf('Low level/OptionGroup', module).add('Simon metric', () => (
<OptionGroup pattern="simon" {...props} units="metric" /> <OptionGroup pattern="simon" {...props} units="metric" />
)); ))

32
packages/components/src/DraftConfigurator/OptionPreamble/index.js
View file

@ -27,12 +27,12 @@ const OptionPreamble = props => {
id: 'app.restoreDefaults', id: 'app.restoreDefaults',
defaultMessage: ' ♻️ ' defaultMessage: ' ♻️ '
}) })
const resetPatternLabel = props.intl.formatMessage({ const resetDesignLabel = props.intl.formatMessage({
id: 'app.restorePatternDefaults', id: 'app.restoreDesignDefaults',
defaultMessage: ' ♻️ ' defaultMessage: ' ♻️ '
}) })
const resetRecipeLabel = props.intl.formatMessage({ const resetPatternLabel = props.intl.formatMessage({
id: 'app.restoreRecipeDefaults', id: 'app.restorePatternDefaults',
defaultMessage: ' ♻️ ' defaultMessage: ' ♻️ '
}) })
const docsLabel = props.intl.formatMessage({ const docsLabel = props.intl.formatMessage({
@ -40,11 +40,11 @@ const OptionPreamble = props => {
defaultMessage: ' 🤔 ' defaultMessage: ' 🤔 '
}) })
let recipe = false let pattern = false
if (props.dflt !== props.patternDflt) recipe = true if (props.dflt !== props.designDflt) pattern = true
let displayClass = props.value === props.dflt ? 'dflt' : 'custom' let displayClass = props.value === props.dflt ? 'dflt' : 'custom'
if (recipe && props.value === props.patternDflt) displayClass = 'p-dflt' if (pattern && props.value === props.designDflt) displayClass = 'p-dflt'
else if (recipe && props.sameButDifferent) displayClass = 'custom' else if (pattern && props.sameButDifferent) displayClass = 'custom'
let displayValue = <span className={displayClass}>{props.displayValue}</span> let displayValue = <span className={displayClass}>{props.displayValue}</span>
if (props.displayFormat === 'html') if (props.displayFormat === 'html')
@ -66,25 +66,25 @@ const OptionPreamble = props => {
<p>{props.desc}</p> <p>{props.desc}</p>
</div> </div>
<div style={styles.right}> <div style={styles.right}>
{recipe ? ( {pattern ? (
<IconButton <IconButton
title={resetPatternLabel} title={resetDesignLabel}
aria-label={resetPatternLabel} aria-label={resetDesignLabel}
color="primary" color="primary"
disabled={props.value === props.patternDflt ? true : false} disabled={props.value === props.designDflt ? true : false}
onClick={props.patternReset} onClick={props.designReset}
className="mini-icon-btn pattern" className="mini-icon-btn pattern"
> >
<ResetIcon /> <ResetIcon />
</IconButton> </IconButton>
) : null} ) : null}
<IconButton <IconButton
title={recipe ? resetRecipeLabel : resetLabel} title={pattern ? resetPatternLabel : resetLabel}
aria-label={recipe ? resetRecipeLabel : resetLabel} aria-label={pattern ? resetPatternLabel : resetLabel}
color="primary" color="primary"
disabled={props.value === props.dflt && !props.sameButDifferent ? true : false} disabled={props.value === props.dflt && !props.sameButDifferent ? true : false}
onClick={props.reset} onClick={props.reset}
className={'mini-icon-btn' + (recipe ? ' recipe' : '')} className={'mini-icon-btn' + (pattern ? ' pattern' : '')}
> >
<ResetIcon /> <ResetIcon />
</IconButton> </IconButton>

6
packages/components/src/DraftConfigurator/PatternOptionBool/index.js
View file

@ -18,8 +18,8 @@ const PatternOptionBool = props => {
} }
const patternReset = () => { const patternReset = () => {
setValue(props.patternDflt) setValue(props.designDflt)
props.updateValue(props.name, props.patternDflt) props.updateValue(props.name, props.designDflt)
} }
const toggleExpanded = () => setExpanded(!expanded) const toggleExpanded = () => setExpanded(!expanded)
@ -39,7 +39,7 @@ const PatternOptionBool = props => {
<li> <li>
<OptionPreamble <OptionPreamble
dflt={props.dflt} dflt={props.dflt}
patternDflt={props.patternDflt} designDflt={props.designDflt}
value={value} value={value}
desc={props.desc} desc={props.desc}
title={props.title} title={props.title}

6
packages/components/src/DraftConfigurator/PatternOptionList/index.js
View file

@ -18,8 +18,8 @@ const PatternOptionList = props => {
} }
const patternReset = () => { const patternReset = () => {
setValue(props.patternDflt) setValue(props.designDflt)
props.updateValue(props.name, props.patternDflt) props.updateValue(props.name, props.designDflt)
} }
const toggleExpanded = () => setExpanded(!expanded) const toggleExpanded = () => setExpanded(!expanded)
@ -37,7 +37,7 @@ const PatternOptionList = props => {
name={props.name} name={props.name}
value={value} value={value}
dflt={props.dflt} dflt={props.dflt}
patternDflt={props.patternDflt} designDflt={props.designDflt}
onChange={update} onChange={update}
label={'po-list-' + props.name} label={'po-list-' + props.name}
updateValue={update} updateValue={update}

6
packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js
View file

@ -35,8 +35,8 @@ const PatternOptionPctDegCount = props => {
} }
const patternReset = () => { const patternReset = () => {
setValue(props.patternDflt) setValue(props.designDflt)
props.updateValue(props.name, props.patternDflt / factor) props.updateValue(props.name, props.designDflt / factor)
} }
const toggleExpanded = () => setExpanded(!expanded) const toggleExpanded = () => setExpanded(!expanded)
@ -62,7 +62,7 @@ const PatternOptionPctDegCount = props => {
<li> <li>
<OptionPreamble <OptionPreamble
dflt={props.dflt} dflt={props.dflt}
patternDflt={props.patternDflt} designDflt={props.designDflt}
value={value} value={value}
desc={props.desc} desc={props.desc}
title={props.title} title={props.title}

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

@ -27,8 +27,8 @@ const PatternOptions = props => {
key={group + '-group'} key={group + '-group'}
units={props.units} units={props.units}
config={props.config} config={props.config}
gist={props.gist} data={props.data}
recipe={props.recipe} pattern={props.pattern}
options={props.config.optionGroups[group]} options={props.config.optionGroups[group]}
updateValue={props.updateValue} updateValue={props.updateValue}
raiseEvent={props.raiseEvent} raiseEvent={props.raiseEvent}
@ -50,7 +50,7 @@ const PatternOptions = props => {
const children = [] const children = []
for (let group in props.config.optionGroups) { for (let group in props.config.optionGroups) {
if (props.gist.settings.advanced || group !== 'advanced') { if (props.data.settings.advanced || group !== 'advanced') {
children.push(renderGroup(group)) children.push(renderGroup(group))
} }
} }

33
packages/components/src/DraftConfigurator/PatternOptions/stories.js
View file

@ -1,28 +1,21 @@
import React from "react"; import React from 'react'
import { storiesOf } from "@storybook/react"; import { storiesOf } from '@storybook/react'
import PatternOptions from "."; import PatternOptions from '.'
const props = { const props = {
raiseEvent: (type, data) => raiseEvent: (type, data) => console.log(`Action of type ${type} triggered, data passed is`, data),
console.log(`Action of type ${type} triggered, data passed is`, data), updateValue: (type, data) => console.log(`Update ${type} with new value`, data),
updateValue: (type, data) => data: {
console.log(`Update ${type} with new value`, data),
gist: {
settings: { settings: {
options: {} options: {}
} }
} }
}; }
storiesOf("Low level/PatternOptions", module) storiesOf('Low level/PatternOptions', module)
.add("Simon metric", () => ( .add('Simon metric', () => (
<PatternOptions pattern="simon" gist={false} units="metric" {...props} /> <PatternOptions pattern="simon" data={false} units="metric" {...props} />
))
.add('Trayvon imperial', () => (
<PatternOptions design="trayvon" data={false} units="imperial" {...props} />
)) ))
.add("Trayvon imperial", () => (
<PatternOptions
pattern="trayvon"
gist={false}
units="imperial"
{...props}
/>
));

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

@ -10,28 +10,28 @@ const DraftConfigurator = props => {
<ul className="config l1"> <ul className="config l1">
<li> <li>
<span> <span>
<FormattedMessage id="app.patternOptions" /> <FormattedMessage id="app.designOptions" />
</span> </span>
<PatternOptions <PatternOptions
noDocs={props.noDocs} noDocs={props.noDocs}
config={props.config} config={props.config}
gist={props.gist} data={props.data}
recipe={props.recipe} pattern={props.pattern}
updateValue={(name, value) => props.updateGist(value, 'settings', 'options', name)} updateValue={(name, value) => props.updatePatternData(value, 'settings', 'options', name)}
raiseEvent={props.raiseEvent} raiseEvent={props.raiseEvent}
units={props.units} units={props.units}
/> />
</li> </li>
<li> <li>
<span> <span>
<FormattedMessage id="app.settings" /> <FormattedMessage id="app.patternOptions" />
</span> </span>
<DraftSettings <DraftSettings
noDocs={props.noDocs} noDocs={props.noDocs}
config={props.config} config={props.config}
gist={props.gist} data={props.data}
recipe={props.recipe} pattern={props.pattern}
updateValue={(name, value) => props.updateGist(value, 'settings', name)} updateValue={(name, value) => props.updatePatternData(value, 'settings', name)}
raiseEvent={props.raiseEvent} raiseEvent={props.raiseEvent}
units={props.units} units={props.units}
/> />