VSinerva/freesewing
1
0
Fork 0
Code Activity

✨ Added handling of pattern/recipe (restore) defaults

Browse source
This commit is contained in:
Joost De Cock 2019-10-03 12:32:50 +02:00
parent eb2dcf9568
commit 70d10e5946
14 changed files with 402 additions and 315 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/components/src/.form/FormFieldBool/index.js
View file

@ -19,14 +19,14 @@ const Bool = props => {
<FormControlLabel
control={<Radio color="primary" />}
value="false"
checked={value === 'false' || value === false ? true : false}
checked={value === 'true' || value === true || value === 1 ? false : true}
label={props.labels[0]}
className="po-list-item"
/>
<FormControlLabel
control={<Radio color="primary" />}
value="true"
checked={value === 'true' || value === true ? true : false}
checked={value === 'true' || value === true || value === 1 ? true : false}
label={props.labels[1]}
className="po-list-item"
/>

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

@ -1,54 +1,59 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import FormFieldList from "../../.form/FormFieldList";
import OptionPreamble from "../OptionPreamble";
import { injectIntl } from "react-intl";
import { languages } from "@freesewing/i18n";
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import FormFieldList from '../../.form/FormFieldList'
import OptionPreamble from '../OptionPreamble'
import { injectIntl } from 'react-intl'
import { languages } from '@freesewing/i18n'
const DraftSettingLanguage = props => {
const [value, setValue] = useState(
props.value === null ? props.intl.locale : props.value
);
const [expanded, setExpanded] = useState(false);
const [value, setValue] = useState(props.value === null ? props.intl.locale : props.value)
const [expanded, setExpanded] = useState(false)
const update = (name, newValue, evt) => {
props.updateValue(props.name, newValue);
setValue(newValue);
};
props.updateValue(props.name, newValue)
setValue(newValue)
}
const reset = () => {
setValue(props.intl.locale);
props.updateValue(props.name, props.intl.locale);
};
const toggleExpanded = () => setExpanded(!expanded);
setValue(props.dflt || props.intl.locale)
props.updateValue(props.name, props.dflt || props.intl.locale)
}
const patternReset = () => {
setValue(props.intl.locale)
props.updateValue(props.name, props.intl.locale)
}
const toggleExpanded = () => setExpanded(!expanded)
const option = (
<FormFieldList
name={props.name}
value={value}
dflt={props.intl.locale}
dflt={props.dflt}
patternDflt={props.intl.locale}
onChange={update}
label={"po-list-" + props.name}
label={'po-list-' + props.name}
updateValue={update}
list={languages}
/>
);
)
return (
<li>
<OptionPreamble
dflt={props.intl.locale}
dflt={props.dflt}
patternDflt={props.intl.locale}
value={value}
desc={props.desc}
title={props.title}
id={"po-list-" + props.name}
id={'po-list-' + props.name}
displayValue={languages[value]}
reset={reset}
patternReset={patternReset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.raiseEvent("showHelp", {
type: "draftSetting",
props.raiseEvent('showHelp', {
type: 'draftSetting',
value: props.name
})
}
@ -56,8 +61,8 @@ const DraftSettingLanguage = props => {
noDocs={props.noDocs}
/>
</li>
);
};
)
}
DraftSettingLanguage.propTypes = {
raiseEvent: PropTypes.func.isRequired,
@ -65,6 +70,6 @@ DraftSettingLanguage.propTypes = {
name: PropTypes.string.isRequired,
title: PropTypes.node.isRequired,
desc: PropTypes.node.isRequired
};
}
export default injectIntl(DraftSettingLanguage);
export default injectIntl(DraftSettingLanguage)

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

@ -1,37 +1,40 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import FormFieldSlider from "../../.form/FormFieldSlider";
import formatMm from "@freesewing/utils/formatMm";
import roundMm from "@freesewing/utils/roundMm";
import sliderStep from "@freesewing/utils/sliderStep";
import OptionPreamble from "../OptionPreamble";
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import FormFieldSlider from '../../.form/FormFieldSlider'
import formatMm from '@freesewing/utils/formatMm'
import roundMm from '@freesewing/utils/roundMm'
import sliderStep from '@freesewing/utils/sliderStep'
import OptionPreamble from '../OptionPreamble'
const DraftSettingMargin = props => {
const [value, setValue] = useState(
props.value === null ? props.dflt : props.value
);
const [expanded, setExpanded] = useState(false);
const [value, setValue] = useState(props.value === null ? props.dflt : props.value)
const [expanded, setExpanded] = useState(false)
const update = (name, newValue, evt) => {
newValue = roundMm(newValue);
newValue = roundMm(newValue)
// Sometimes, when sliding, the rapid succession of updates
// causes a weird timing issue to result in a value that is NaN.
// If that's the case, just ignore this update and keep the
// previous one instead
if (!isNaN(newValue)) {
setValue(newValue);
if (evt.type !== "mousemove") props.updateValue("margin", newValue);
setValue(newValue)
if (evt.type !== 'mousemove') props.updateValue('margin', newValue)
} else {
props.updateValue("margin", value);
props.updateValue('margin', value)
}
}
};
const reset = () => {
setValue(props.dflt);
props.updateValue("margin", props.dflt);
};
setValue(props.dflt)
props.updateValue('margin', props.dflt)
}
const toggleExpanded = () => setExpanded(!expanded);
const patternReset = () => {
setValue(props.patternDflt)
props.updateValue('margin', props.patternDflt)
}
const toggleExpanded = () => setExpanded(!expanded)
let option = (
<FormFieldSlider
@ -44,12 +47,13 @@ const DraftSettingMargin = props => {
max={25.4}
step={sliderStep[props.units]}
/>
);
)
return (
<li>
<OptionPreamble
dflt={props.dflt}
patternDflt={props.patternDflt}
value={value}
desc={props.desc}
title={props.title}
@ -57,31 +61,32 @@ const DraftSettingMargin = props => {
displayValue={formatMm(value, props.units)}
displayFormat="html"
reset={reset}
patternReset={patternReset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.raiseEvent("showHelp", {
type: "draftSetting",
value: "margin"
props.raiseEvent('showHelp', {
type: 'draftSetting',
value: 'margin'
})
}
option={option}
noDocs={props.noDocs}
/>
</li>
);
};
)
}
DraftSettingMargin.propTypes = {
raiseEvent: PropTypes.func.isRequired,
updateValue: PropTypes.func.isRequired,
title: PropTypes.node.isRequired,
desc: PropTypes.node.isRequired,
units: PropTypes.oneOf(["metric", "imperial"]).isRequired
};
units: PropTypes.oneOf(['metric', 'imperial']).isRequired
}
DraftSettingMargin.defaultProps = {
// FIXME
};
}
export default DraftSettingMargin;
export default DraftSettingMargin

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

@ -1,53 +1,65 @@
import React, { useState } from "react";
import FormFieldChecks from "../../.form/FormFieldChecks";
import FormFieldList from "../../.form/FormFieldList";
import OptionPreamble from "../OptionPreamble";
import React, { useState } from 'react'
import FormFieldChecks from '../../.form/FormFieldChecks'
import FormFieldList from '../../.form/FormFieldList'
import OptionPreamble from '../OptionPreamble'
const DraftSettingOnly = props => {
const [value, setValue] = useState(
props.value === null ? "dflt" : props.value === false ? "dflt" : "custom"
);
const [parts, setParts] = useState(
value === "custom" ? props.value : props.customDflt
);
const [expanded, setExpanded] = useState(false);
props.value === null ? 'dflt' : props.value === false ? 'dflt' : 'custom'
)
const [parts, setParts] = useState(value === 'custom' ? props.value : props.customDflt)
const [expanded, setExpanded] = useState(false)
const update = (name, newValue, evt) => {
setValue(newValue);
if (newValue === "dflt") props.updateValue("only", false);
else props.updateValue("only", parts);
};
setValue(newValue)
if (newValue === 'dflt') props.updateValue('only', false)
else props.updateValue('only', parts)
}
let onlyDfltToggle = 'dflt'
if (props.dflt === 'custom' || Array.isArray(props.dflt)) onlyDfltToggle = 'custom'
const reset = () => {
setValue("dflt");
setParts([]);
props.updateValue("only", false);
};
setValue(onlyDfltToggle)
if (onlyDfltToggle === 'dflt') {
setParts([])
props.updateValue('only', false)
} else {
setParts(props.dflt)
props.updateValue('only', props.dflt)
}
}
const patternReset = () => {
setValue('dflt')
setParts([])
props.updateValue('only', false)
}
const updateCustom = (name, newValue, evt) => {
props.updateValue("only", newValue);
setParts(newValue);
};
props.updateValue('only', newValue)
setParts(newValue)
}
const toggleExpanded = () => setExpanded(!expanded);
const toggleExpanded = () => setExpanded(!expanded)
const list = {
dflt: props.labels.dflt,
custom: props.labels.custom
};
}
let option = (
<FormFieldList
name="only"
value={value}
dflt={props.dflt}
patternDflt={props.dflt}
onChange={update}
label="po-list-only"
updateValue={update}
list={list}
/>
);
if (value === "custom")
)
if (value === 'custom')
option = (
<React.Fragment>
{option}
@ -62,31 +74,34 @@ const DraftSettingOnly = props => {
list={list}
/>
</React.Fragment>
);
)
return (
<li>
<OptionPreamble
dflt="dflt"
dflt={onlyDfltToggle}
patternDflt="dflt"
sameButDifferent={props.dflt !== props.value}
value={value}
desc={props.desc}
title={props.title}
id="po-list-only"
displayValue={props.labels[value]}
reset={reset}
patternReset={patternReset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.raiseEvent("showHelp", {
type: "draftSetting",
value: "only"
props.raiseEvent('showHelp', {
type: 'draftSetting',
value: 'only'
})
}
option={option}
noDocs={props.noDocs}
/>
</li>
);
};
)
}
export default DraftSettingOnly;
export default DraftSettingOnly

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

@ -1,89 +1,92 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import FormFieldList from "../../.form/FormFieldList";
import FormFieldSlider from "../../.form/FormFieldSlider";
import formatMm from "@freesewing/utils/formatMm";
import roundMm from "@freesewing/utils/roundMm";
import defaultSa from "@freesewing/utils/defaultSa";
import sliderStep from "@freesewing/utils/sliderStep";
import OptionPreamble from "../OptionPreamble";
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import FormFieldList from '../../.form/FormFieldList'
import FormFieldSlider from '../../.form/FormFieldSlider'
import formatMm from '@freesewing/utils/formatMm'
import roundMm from '@freesewing/utils/roundMm'
import defaultSa from '@freesewing/utils/defaultSa'
import sliderStep from '@freesewing/utils/sliderStep'
import OptionPreamble from '../OptionPreamble'
const DraftSettingSa = props => {
const [value, setValue] = useState(
props.value === defaultSa[props.units]
? "dflt"
: props.value === 0
? "none"
: "custom"
);
props.value === defaultSa[props.units] ? 'dflt' : props.value === 0 ? 'none' : 'custom'
)
const [saValue, setSaValue] = useState(
props.value === null ? defaultSa[props.units] : props.value
);
const [customValue, setCustomValue] = useState(
value === "custom" ? props.value : 10
);
const [expanded, setExpanded] = useState(false);
)
const [customValue, setCustomValue] = useState(value === 'custom' ? props.value : 10)
const [expanded, setExpanded] = useState(false)
const update = (name, newValue, evt) => {
switch (newValue) {
case "none":
props.updateValue("sa", 0);
setValue(newValue);
setSaValue(0);
break;
case "dflt":
props.updateValue("sa", defaultSa[props.units]);
setValue(newValue);
setSaValue(defaultSa[props.units]);
break;
case 'none':
props.updateValue('sa', 0)
setValue(newValue)
setSaValue(0)
break
case 'dflt':
props.updateValue('sa', defaultSa[props.units])
setValue(newValue)
setSaValue(defaultSa[props.units])
break
default:
props.updateValue("sa", customValue);
setValue(newValue);
setSaValue(customValue);
break;
props.updateValue('sa', customValue)
setValue(newValue)
setSaValue(customValue)
break
}
};
}
let saDfltToggle = 'dflt'
if (props.dflt === 0) saDfltToggle = 'none'
if (props.dflt !== 10) saDfltToggle = 'custom'
const reset = () => {
setValue("dflt");
setSaValue(defaultSa[props.units]);
props.updateValue("sa", defaultSa[props.units]);
};
const toggleExpanded = () => setExpanded(!expanded);
setValue(saDfltToggle)
setSaValue(props.dflt)
props.updateValue('sa', props.dflt)
}
const patternReset = () => {
setValue('dflt')
setSaValue(defaultSa[props.units])
props.updateValue('sa', defaultSa[props.units])
}
const toggleExpanded = () => setExpanded(!expanded)
const updateCustom = (name, newValue, evt) => {
newValue = roundMm(newValue);
newValue = roundMm(newValue)
// Sometimes, when sliding, the rapid succession of updates
// causes a weird timing issue to result in a value that is NaN.
// If that's the case, just ignore this update and keep the
// previous one instead
if (!isNaN(newValue)) {
setSaValue(newValue);
setCustomValue(newValue);
if (evt.type !== "mousemove") props.updateValue("sa", newValue);
setSaValue(newValue)
setCustomValue(newValue)
if (evt.type !== 'mousemove') props.updateValue('sa', newValue)
} else {
props.updateValue("sa", customValue);
props.updateValue('sa', customValue)
}
}
};
const list = {
none: props.labels.none,
dflt: props.labels.dflt,
custom: props.labels.custom
};
}
let option = (
<FormFieldList
name="sa"
value={value}
dflt={"dflt"}
dflt={'dflt'}
onChange={update}
label="po-bool-sa"
updateValue={update}
list={list}
/>
);
if (value === "custom")
)
if (value === 'custom')
option = (
<React.Fragment>
{option}
@ -98,12 +101,13 @@ const DraftSettingSa = props => {
step={sliderStep[props.units]}
/>
</React.Fragment>
);
)
return (
<li>
<OptionPreamble
dflt={"dflt"}
dflt={saDfltToggle}
patternDflt={'dflt'}
sameButDifferent={props.dflt !== props.value}
value={value}
desc={props.desc}
title={props.title}
@ -111,31 +115,32 @@ const DraftSettingSa = props => {
displayValue={formatMm(saValue, props.units)}
displayFormat="html"
reset={reset}
patternReset={patternReset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.raiseEvent("showHelp", {
type: "draftSetting",
value: "sa"
props.raiseEvent('showHelp', {
type: 'draftSetting',
value: 'sa'
})
}
option={option}
noDocs={props.noDocs}
/>
</li>
);
};
)
}
DraftSettingSa.propTypes = {
updateValue: PropTypes.func.isRequired,
title: PropTypes.node.isRequired,
desc: PropTypes.node.isRequired,
units: PropTypes.oneOf(["metric", "imperial"]).isRequired,
units: PropTypes.oneOf(['metric', 'imperial']).isRequired,
labels: PropTypes.object
};
}
DraftSettingSa.defaultProps = {
// FIXME
};
}
export default DraftSettingSa;
export default DraftSettingSa

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

@ -1,22 +1,27 @@
import React, { useState } from "react";
import FormFieldList from "../../.form/FormFieldList";
import OptionPreamble from "../OptionPreamble";
import React, { useState } from 'react'
import FormFieldList from '../../.form/FormFieldList'
import OptionPreamble from '../OptionPreamble'
const DraftSettingUnits = props => {
const [value, setValue] = useState(props.dflt);
const [expanded, setExpanded] = useState(false);
const [value, setValue] = useState(props.dflt)
const [expanded, setExpanded] = useState(false)
const update = (name, newValue, evt) => {
props.updateValue(props.name, newValue);
setValue(newValue);
};
props.updateValue(props.name, newValue)
setValue(newValue)
}
const reset = () => {
setValue(props.dflt);
props.updateValue(props.name, props.dflt);
};
setValue(props.dflt)
props.updateValue(props.name, props.dflt)
}
const toggleExpanded = () => setExpanded(!expanded);
const patternReset = () => {
setValue(props.patternDflt)
props.updateValue(props.name, props.patternDflt)
}
const toggleExpanded = () => setExpanded(!expanded)
let option = (
<FormFieldList
@ -28,31 +33,33 @@ const DraftSettingUnits = props => {
updateValue={update}
list={props.list}
/>
);
)
return (
<li>
<OptionPreamble
dflt={props.dflt}
patternDflt={props.patternDflt}
value={value}
desc={props.desc}
title={props.title}
id="po-list-units"
displayValue={props.list[value]}
reset={reset}
patternReset={patternReset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.raiseEvent("showHelp", {
type: "draftSetting",
value: "units"
props.raiseEvent('showHelp', {
type: 'draftSetting',
value: 'units'
})
}
option={option}
noDocs={props.noDocs}
/>
</li>
);
};
)
}
export default DraftSettingUnits;
export default DraftSettingUnits

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

@ -20,9 +20,8 @@ const DraftSettings = props => {
else shown.splice(index, 1)
setExpanded(shown)
}
const getDefault = setting => {
if (props.recipe && typeof props.recipe.settings[setting] !== 'undefined')
return props.recipe.settings[setting]
const getDefault = (setting, recipe = false) => {
if (recipe && typeof recipe.settings[setting] !== 'undefined') return recipe.settings[setting]
switch (setting) {
case 'sa':
return 10
@ -68,7 +67,8 @@ const DraftSettings = props => {
name: setting,
labels: labels[setting],
noDocs: props.noDocs,
dflt: getDefault(setting)
dflt: getDefault(setting, props.recipe),
patternDflt: getDefault(setting)
}
childProps.title = <FormattedMessage id={'settings.' + setting + '.title'} />
childProps.desc = <FormattedMessage id={'settings.' + setting + '.description'} />

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

@ -20,6 +20,7 @@ const OptionGroup = props => {
let extraProps = {
name,
dflt: optionDefault(name, props.config.options[name], props.recipe),
patternDflt: optionDefault(name, props.config.options[name]),
units: props.units,
updateValue: props.updateValue,
raiseEvent: props.raiseEvent,

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

@ -1,74 +1,90 @@
import React from "react";
import PropTypes from "prop-types";
import IconButton from "@material-ui/core/IconButton";
import RightIcon from "@material-ui/icons/KeyboardArrowRight";
import ResetIcon from "@material-ui/icons/SettingsBackupRestore";
import HelpIcon from "@material-ui/icons/Help";
import { injectIntl } from "react-intl";
import React from 'react'
import PropTypes from 'prop-types'
import IconButton from '@material-ui/core/IconButton'
import RightIcon from '@material-ui/icons/KeyboardArrowRight'
import ResetIcon from '@material-ui/icons/SettingsBackupRestore'
import HelpIcon from '@material-ui/icons/Help'
import { injectIntl } from 'react-intl'
const OptionPreamble = props => {
const styles = {
container: {
display: "flex",
flexDirection: "row",
alignItems: "center"
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
left: {
flexGrow: 1,
margin: "0 0.5rem"
margin: '0 0.5rem'
},
right: {
margin: "0 5px 0 0 ",
textAlign: "right"
margin: '0 5px 0 0 ',
textAlign: 'right'
}
}
};
const resetLabel = props.intl.formatMessage({
id: "app.restoreDefaults",
defaultMessage: " ♻️ "
});
id: 'app.restoreDefaults',
defaultMessage: ' ♻️ '
})
const resetPatternLabel = props.intl.formatMessage({
id: 'app.restorePatternDefaults',
defaultMessage: ' ♻️ '
})
const resetRecipeLabel = props.intl.formatMessage({
id: 'app.restoreRecipeDefaults',
defaultMessage: ' ♻️ '
})
const docsLabel = props.intl.formatMessage({
id: "app.docs",
defaultMessage: " 🤔 "
});
id: 'app.docs',
defaultMessage: ' 🤔 '
})
let displayClass = props.value === props.dflt ? "dflt" : "custom";
let displayValue = <span className={displayClass}>{props.displayValue}</span>;
if (props.displayFormat === "html")
let recipe = false
if (props.dflt !== props.patternDflt) recipe = 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'
let displayValue = <span className={displayClass}>{props.displayValue}</span>
if (props.displayFormat === 'html')
displayValue = (
<span
className={displayClass}
dangerouslySetInnerHTML={{ __html: props.displayValue }}
/>
);
<span className={displayClass} dangerouslySetInnerHTML={{ __html: props.displayValue }} />
)
return (
<React.Fragment>
<div onClick={props.toggleExpanded} style={styles.container}>
<div style={styles.left}>
<RightIcon
className={
"icon-col-exp " + (props.expanded ? "expanded" : "collapsed")
}
/>
<RightIcon className={'icon-col-exp ' + (props.expanded ? 'expanded' : 'collapsed')} />
{props.title}
</div>
<div style={styles.right}>{displayValue}</div>
</div>
<div
className={props.expanded ? "col-exp expanded" : "col-exp collapsed"}
>
<div className={props.expanded ? 'col-exp expanded' : 'col-exp collapsed'}>
<div style={styles.container}>
<div style={styles.left}>
<p>{props.desc}</p>
</div>
<div style={styles.right}>
{recipe ? (
<IconButton
title={resetLabel}
aria-label={resetLabel}
title={resetPatternLabel}
aria-label={resetPatternLabel}
color="primary"
disabled={props.value === props.dflt ? true : false}
disabled={props.value === props.patternDflt ? true : false}
onClick={props.patternReset}
className="mini-icon-btn pattern"
>
<ResetIcon />
</IconButton>
) : null}
<IconButton
title={recipe ? resetRecipeLabel : resetLabel}
aria-label={recipe ? resetRecipeLabel : resetLabel}
color="primary"
disabled={props.value === props.dflt && !props.sameButDifferent ? true : false}
onClick={props.reset}
className="mini-icon-btn"
className={'mini-icon-btn' + (recipe ? ' recipe' : '')}
>
<ResetIcon />
</IconButton>
@ -88,8 +104,8 @@ const OptionPreamble = props => {
{props.option}
</div>
</React.Fragment>
);
};
)
}
OptionPreamble.propTypes = {
dflt: PropTypes.oneOfType([
@ -108,10 +124,10 @@ OptionPreamble.propTypes = {
showHelp: PropTypes.func.isRequired,
expanded: PropTypes.bool,
displayFormat: PropTypes.string
};
}
OptionPreamble.defaultProps = {
displayFormat: "node"
};
displayFormat: 'node'
}
export default injectIntl(OptionPreamble);
export default injectIntl(OptionPreamble)

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

@ -1,25 +1,28 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import FormFieldBool from "../../.form/FormFieldBool";
import OptionPreamble from "../OptionPreamble";
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import FormFieldBool from '../../.form/FormFieldBool'
import OptionPreamble from '../OptionPreamble'
const PatternOptionBool = props => {
const [value, setValue] = useState(
props.value === null ? props.dflt : props.value
);
const [expanded, setExpanded] = useState(false);
const [value, setValue] = useState(props.value === null ? props.dflt : props.value)
const [expanded, setExpanded] = useState(false)
const update = (name, newValue, evt) => {
props.updateValue(props.name, newValue);
setValue(newValue);
};
props.updateValue(props.name, newValue)
setValue(newValue)
}
const reset = () => {
setValue(props.dflt);
props.updateValue(props.name, props.dflt);
};
setValue(props.dflt)
props.updateValue(props.name, props.dflt)
}
const toggleExpanded = () => setExpanded(!expanded);
const patternReset = () => {
setValue(props.patternDflt)
props.updateValue(props.name, props.patternDflt)
}
const toggleExpanded = () => setExpanded(!expanded)
let option = (
<FormFieldBool
@ -27,26 +30,28 @@ const PatternOptionBool = props => {
value={value}
dflt={props.dflt}
onChange={update}
label={"po-bool-" + props.name}
label={'po-bool-' + props.name}
updateValue={update}
labels={props.labels}
/>
);
)
return (
<li>
<OptionPreamble
dflt={props.dflt}
patternDflt={props.patternDflt}
value={value}
desc={props.desc}
title={props.title}
id={"po-list-" + props.name}
id={'po-list-' + props.name}
displayValue={value ? props.labels[1] : props.labels[0]}
toggleExpanded={toggleExpanded}
expanded={expanded}
reset={reset}
patternReset={patternReset}
showHelp={() =>
props.raiseEvent("showHelp", {
type: "draftSetting",
props.raiseEvent('showHelp', {
type: 'draftSetting',
value: props.name
})
}
@ -54,8 +59,8 @@ const PatternOptionBool = props => {
noDocs={props.noDocs}
/>
</li>
);
};
)
}
PatternOptionBool.propTypes = {
raiseEvent: PropTypes.func.isRequired,
@ -69,6 +74,6 @@ PatternOptionBool.propTypes = {
title: PropTypes.node.isRequired,
desc: PropTypes.node.isRequired,
labels: PropTypes.array.isRequired
};
}
export default PatternOptionBool;
export default PatternOptionBool

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

@ -1,43 +1,49 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import FormFieldList from "../../.form/FormFieldList";
import OptionPreamble from "../OptionPreamble";
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import FormFieldList from '../../.form/FormFieldList'
import OptionPreamble from '../OptionPreamble'
const PatternOptionList = props => {
const [value, setValue] = useState(props.dflt);
const [expanded, setExpanded] = useState(false);
const [value, setValue] = useState(props.dflt)
const [expanded, setExpanded] = useState(false)
const update = (name, newValue, evt) => {
props.updateValue(props.name, newValue);
setValue(newValue);
};
props.updateValue(props.name, newValue)
setValue(newValue)
}
const reset = () => {
setValue(props.dflt);
props.updateValue(props.name, props.dflt);
};
setValue(props.dflt)
props.updateValue(props.name, props.dflt)
}
const toggleExpanded = () => setExpanded(!expanded);
const patternReset = () => {
setValue(props.patternDflt)
props.updateValue(props.name, props.patternDflt)
}
const toggleExpanded = () => setExpanded(!expanded)
// Add translations
let stringKey = `options.${props.pattern}.${props.name}.options.`;
let list = {};
let stringKey = `options.${props.pattern}.${props.name}.options.`
let list = {}
for (let item of props.list)
list[item] = props.intl.formatMessage({
id: stringKey + item,
defaultMessage: item
});
})
let option = (
<FormFieldList
name={props.name}
value={value}
dflt={props.dflt}
patternDflt={props.patternDflt}
onChange={update}
label={"po-list-" + props.name}
label={'po-list-' + props.name}
updateValue={update}
list={list}
/>
);
)
return (
<li>
<OptionPreamble
@ -45,14 +51,15 @@ const PatternOptionList = props => {
value={value}
desc={props.desc}
title={props.title}
id={"po-list-" + props.name}
id={'po-list-' + props.name}
displayValue={list[value]}
reset={reset}
patternReset={patternReset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.raiseEvent("showHelp", {
type: "patternOption",
props.raiseEvent('showHelp', {
type: 'patternOption',
value: props.name
})
}
@ -60,19 +67,16 @@ const PatternOptionList = props => {
noDocs={props.noDocs}
/>
</li>
);
};
)
}
PatternOptionList.propTypes = {
updateValue: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
dflt: PropTypes.oneOfType([
PropTypes.number.isRequired,
PropTypes.string.isRequired
]),
dflt: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
title: PropTypes.node.isRequired,
desc: PropTypes.node.isRequired,
list: PropTypes.array.isRequired
};
}
export default PatternOptionList;
export default PatternOptionList

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

@ -1,46 +1,49 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import FormFieldSlider from "../../.form/FormFieldSlider";
import OptionPreamble from "../OptionPreamble";
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import FormFieldSlider from '../../.form/FormFieldSlider'
import OptionPreamble from '../OptionPreamble'
const PatternOptionPctDegCount = props => {
let factor = 1;
if (props.type === "pct") factor = 100;
const round = val => Math.round(val * 10) / 10;
let factor = 1
if (props.type === 'pct') factor = 100
const round = val => Math.round(val * 10) / 10
const [value, setValue] = useState(
props.value === null ? props.dflt : round(props.value * factor)
);
)
const [previousValue, setPreviousValue] = useState(
props.value === null ? props.dflt : round(props.value * factor)
);
const [expanded, setExpanded] = useState(false);
)
const [expanded, setExpanded] = useState(false)
const update = (name, newValue, evt) => {
newValue = round(newValue);
newValue = round(newValue)
// Sometimes, when sliding, the rapid succession of updates
// causes a weird timing issue to result in a value that is NaN.
// If that's the case, just ignore this update and keep the
// previous one instead
if (!isNaN(newValue)) {
setValue(newValue);
if (evt.type !== "mousemove")
props.updateValue(props.name, newValue / factor);
setValue(newValue)
if (evt.type !== 'mousemove') props.updateValue(props.name, newValue / factor)
} else {
if (evt.type !== "mousemove")
props.updateValue(props.name, value / factor);
if (evt.type !== 'mousemove') props.updateValue(props.name, value / factor)
}
}
};
const reset = () => {
setValue(props.dflt);
props.updateValue(props.name, props.dflt / factor);
};
setValue(props.dflt)
props.updateValue(props.name, props.dflt / factor)
}
const toggleExpanded = () => setExpanded(!expanded);
const patternReset = () => {
setValue(props.patternDflt)
props.updateValue(props.name, props.patternDflt / factor)
}
let unit = "";
if (props.type === "pct") unit = "%";
if (props.type === "deg") unit = "°";
const toggleExpanded = () => setExpanded(!expanded)
let unit = ''
if (props.type === 'pct') unit = '%'
if (props.type === 'deg') unit = '°'
let option = (
<FormFieldSlider
@ -48,28 +51,30 @@ const PatternOptionPctDegCount = props => {
value={value}
min={props.min}
max={props.max}
step={props.type === "count" ? 1 : props.step}
step={props.type === 'count' ? 1 : props.step}
onChange={update}
label={"po-" + props.type + "-" + props.name}
label={'po-' + props.type + '-' + props.name}
updateValue={update}
/>
);
)
return (
<li>
<OptionPreamble
dflt={props.dflt}
patternDflt={props.patternDflt}
value={value}
desc={props.desc}
title={props.title}
id={"po-" + props.type + "-" + props.name}
id={'po-' + props.type + '-' + props.name}
displayValue={value + unit}
reset={reset}
patternReset={patternReset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.raiseEvent("showHelp", {
type: "patternOption",
props.raiseEvent('showHelp', {
type: 'patternOption',
value: props.name
})
}
@ -77,8 +82,8 @@ const PatternOptionPctDegCount = props => {
noDocs={props.noDocs}
/>
</li>
);
};
)
}
PatternOptionPctDegCount.propTypes = {
min: PropTypes.number,
@ -89,14 +94,14 @@ PatternOptionPctDegCount.propTypes = {
dflt: PropTypes.number.isRequired,
title: PropTypes.node.isRequired,
desc: PropTypes.node.isRequired,
type: PropTypes.oneOf(["pct", "deg", "count"])
};
type: PropTypes.oneOf(['pct', 'deg', 'count'])
}
PatternOptionPctDegCount.defaultProps = {
min: 0,
max: 100,
step: 0.1,
type: "pct"
};
type: 'pct'
}
export default PatternOptionPctDegCount;
export default PatternOptionPctDegCount

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

@ -6,7 +6,6 @@ import DraftSettings from './DraftSettings'
const DraftConfigurator = props => {
const [expanded, setExpanded] = useState([])
return (
<ul className="config l1">
<li>

20
packages/css-theme/src/components/_draft-configurator.scss
View file

@ -76,6 +76,7 @@ ul.config.l4 > li > div { padding-left: 2.5rem; }
span.dflt,
span.p-dflt,
span.custom {
padding: 2px 4px;
border-radius: 4px;
@ -86,6 +87,12 @@ span.custom {
.theme-wrapper.dark span.custom {
color: $oc-yellow-8;
}
.theme-wrapper.light span.p-dflt {
background: $oc-green-2;
}
.theme-wrapper.dark span.p-dflt {
color: $oc-green-6;
}
.theme-wrapper.light div.col-exp.expanded {
border-left: 4px solid $fc-text-light;
}
@ -107,3 +114,16 @@ button.mini-icon-btn {
margin: 0;
padding: 2px;
}
.theme-wrapper.light button.mini-icon-btn.recipe:enabled {
color: $oc-blue-7;
}
.theme-wrapper.light button.mini-icon-btn.pattern:enabled {
color: $oc-green-8;
}
.theme-wrapper.dark button.mini-icon-btn.recipe:enabled {
color: $oc-blue-5;
}
.theme-wrapper.dark button.mini-icon-btn.pattern:enabled {
color: $oc-green-6;
}