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

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

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

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

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

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

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

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

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

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

@ -1,31 +1,29 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import DraftSettings from ".";
import React from 'react'
import { storiesOf } from '@storybook/react'
import DraftSettings from '.'
const props = {
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) =>
console.log(`Update ${type} with new value`, data),
gist: {
raiseEvent: (type, data) => console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) => console.log(`Update ${type} with new value`, data),
data: {
settings: {
options: {}
}
},
languages: {
de: "German",
en: "English",
es: "Spanish",
fr: "French",
nl: "Dutch"
de: 'German',
en: 'English',
es: 'Spanish',
fr: 'French',
nl: 'Dutch'
},
language: "en"
};
language: 'en'
}
storiesOf("Low level/DraftSettings", module)
.add("Simon metric", () => (
<DraftSettings pattern="simon" gist={false} units="metric" {...props} />
storiesOf('Low level/DraftSettings', module)
.add('Simon metric', () => (
<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 extraProps = {
name,
dflt: optionDefault(name, props.config.options[name], props.recipe),
patternDflt: optionDefault(name, props.config.options[name]),
dflt: optionDefault(name, props.config.options[name], props.pattern),
designDflt: optionDefault(name, props.config.options[name]),
units: props.units,
updateValue: props.updateValue,
raiseEvent: props.raiseEvent,
@ -32,12 +32,12 @@ const OptionGroup = props => {
noDocs: props.noDocs
}
if (
typeof props.gist !== 'undefined' &&
typeof props.gist.settings !== 'undefined' &&
typeof props.gist.settings.options !== 'undefined' &&
typeof props.gist.settings.options[name] !== 'undefined'
typeof props.data !== 'undefined' &&
typeof props.data.settings !== 'undefined' &&
typeof props.data.settings.options !== '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
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 { storiesOf } from "@storybook/react";
import OptionGroup from ".";
import React from 'react'
import { storiesOf } from '@storybook/react'
import OptionGroup from '.'
const options = {
armholeDrop: { pct: 10, min: 1, max: 75 },
@ -13,28 +13,26 @@ const options = {
stretchFactor: { pct: 5, min: 0, max: 15 },
shoulderStrapWidth: { pct: 15, min: 10, max: 40 },
shoulderStrapPlacement: { pct: 40, min: 20, max: 80 }
};
}
const props = {
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) =>
console.log(`Update ${type} with new value`, data),
gist: {
raiseEvent: (type, data) => console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) => console.log(`Update ${type} with new value`, data),
data: {
settings: {
options: {}
}
},
pattern: {
config: {
name: "aaron",
name: 'aaron',
options: options
}
},
dflts: { 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" />
));
))

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

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

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

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

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

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

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

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

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

@ -27,8 +27,8 @@ const PatternOptions = props => {
key={group + '-group'}
units={props.units}
config={props.config}
gist={props.gist}
recipe={props.recipe}
data={props.data}
pattern={props.pattern}
options={props.config.optionGroups[group]}
updateValue={props.updateValue}
raiseEvent={props.raiseEvent}
@ -50,7 +50,7 @@ const PatternOptions = props => {
const children = []
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))
}
}

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

@ -1,28 +1,21 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import PatternOptions from ".";
import React from 'react'
import { storiesOf } from '@storybook/react'
import PatternOptions from '.'
const props = {
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) =>
console.log(`Update ${type} with new value`, data),
gist: {
raiseEvent: (type, data) => console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) => console.log(`Update ${type} with new value`, data),
data: {
settings: {
options: {}
}
}
};
}
storiesOf("Low level/PatternOptions", module)
.add("Simon metric", () => (
<PatternOptions pattern="simon" gist={false} units="metric" {...props} />
storiesOf('Low level/PatternOptions', module)
.add('Simon metric', () => (
<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">
<li>
<span>
<FormattedMessage id="app.patternOptions" />
<FormattedMessage id="app.designOptions" />
</span>
<PatternOptions
noDocs={props.noDocs}
config={props.config}
gist={props.gist}
recipe={props.recipe}
updateValue={(name, value) => props.updateGist(value, 'settings', 'options', name)}
data={props.data}
pattern={props.pattern}
updateValue={(name, value) => props.updatePatternData(value, 'settings', 'options', name)}
raiseEvent={props.raiseEvent}
units={props.units}
/>
</li>
<li>
<span>
<FormattedMessage id="app.settings" />
<FormattedMessage id="app.patternOptions" />
</span>
<DraftSettings
noDocs={props.noDocs}
config={props.config}
gist={props.gist}
recipe={props.recipe}
updateValue={(name, value) => props.updateGist(value, 'settings', name)}
data={props.data}
pattern={props.pattern}
updateValue={(name, value) => props.updatePatternData(value, 'settings', name)}
raiseEvent={props.raiseEvent}
units={props.units}
/>