From 70d10e5946b0c9c29fbfd5bf372cd29ee80b31ea Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Thu, 3 Oct 2019 12:32:50 +0200 Subject: [PATCH] :sparkles: Added handling of pattern/recipe (restore) defaults --- .../src/.form/FormFieldBool/index.js | 4 +- .../DraftSettingLanguage/index.js | 61 +++++---- .../DraftSettingMargin/index.js | 65 +++++---- .../DraftSettingOnly/index.js | 81 ++++++----- .../DraftConfigurator/DraftSettingSa/index.js | 129 +++++++++--------- .../DraftSettingUnits/index.js | 45 +++--- .../DraftConfigurator/DraftSettings/index.js | 8 +- .../DraftConfigurator/OptionGroup/index.js | 1 + .../DraftConfigurator/OptionPreamble/index.js | 108 ++++++++------- .../PatternOptionBool/index.js | 53 +++---- .../PatternOptionList/index.js | 62 +++++---- .../PatternOptionPctDegCount/index.js | 79 ++++++----- .../components/src/DraftConfigurator/index.js | 1 - .../src/components/_draft-configurator.scss | 20 +++ 14 files changed, 402 insertions(+), 315 deletions(-) diff --git a/packages/components/src/.form/FormFieldBool/index.js b/packages/components/src/.form/FormFieldBool/index.js index c4b23ecd92b..f70160eb582 100644 --- a/packages/components/src/.form/FormFieldBool/index.js +++ b/packages/components/src/.form/FormFieldBool/index.js @@ -19,14 +19,14 @@ const Bool = props => { } 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" /> } 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" /> diff --git a/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js b/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js index 7383ae30d93..47905cab0e1 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js @@ -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 = ( - ); + ) return (
  • - props.raiseEvent("showHelp", { - type: "draftSetting", + props.raiseEvent('showHelp', { + type: 'draftSetting', value: props.name }) } @@ -56,8 +61,8 @@ const DraftSettingLanguage = props => { noDocs={props.noDocs} />
    • - ); -}; + ) +} 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) diff --git a/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js b/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js index 387e0cf5b07..2e038fba728 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js @@ -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 = ( { max={25.4} step={sliderStep[props.units]} /> - ); + ) return (
  • { 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} />
    • - ); -}; + ) +} 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 diff --git a/packages/components/src/DraftConfigurator/DraftSettingOnly/index.js b/packages/components/src/DraftConfigurator/DraftSettingOnly/index.js index e30f923f021..df7689bd30d 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingOnly/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingOnly/index.js @@ -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 = ( - ); - if (value === "custom") + ) + if (value === 'custom') option = ( {option} @@ -62,31 +74,34 @@ const DraftSettingOnly = props => { list={list} /> - ); + ) return (
  • - props.raiseEvent("showHelp", { - type: "draftSetting", - value: "only" + props.raiseEvent('showHelp', { + type: 'draftSetting', + value: 'only' }) } option={option} noDocs={props.noDocs} />
    • - ); -}; + ) +} -export default DraftSettingOnly; +export default DraftSettingOnly diff --git a/packages/components/src/DraftConfigurator/DraftSettingSa/index.js b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js index cce9ea9a134..da69e037c46 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingSa/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js @@ -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 = ( - ); - if (value === "custom") + ) + if (value === 'custom') option = ( {option} @@ -98,12 +101,13 @@ const DraftSettingSa = props => { step={sliderStep[props.units]} /> - ); - + ) return (
  • { 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} />
    • - ); -}; + ) +} 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 diff --git a/packages/components/src/DraftConfigurator/DraftSettingUnits/index.js b/packages/components/src/DraftConfigurator/DraftSettingUnits/index.js index fa7464a09c1..b6497059883 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingUnits/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingUnits/index.js @@ -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 = ( { updateValue={update} list={props.list} /> - ); + ) return (
  • - props.raiseEvent("showHelp", { - type: "draftSetting", - value: "units" + props.raiseEvent('showHelp', { + type: 'draftSetting', + value: 'units' }) } option={option} noDocs={props.noDocs} />
    • - ); -}; + ) +} -export default DraftSettingUnits; +export default DraftSettingUnits diff --git a/packages/components/src/DraftConfigurator/DraftSettings/index.js b/packages/components/src/DraftConfigurator/DraftSettings/index.js index be1b0d75d83..d9d37ef9b5d 100644 --- a/packages/components/src/DraftConfigurator/DraftSettings/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettings/index.js @@ -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 = childProps.desc = diff --git a/packages/components/src/DraftConfigurator/OptionGroup/index.js b/packages/components/src/DraftConfigurator/OptionGroup/index.js index 1452f937159..f1f38278f83 100644 --- a/packages/components/src/DraftConfigurator/OptionGroup/index.js +++ b/packages/components/src/DraftConfigurator/OptionGroup/index.js @@ -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, diff --git a/packages/components/src/DraftConfigurator/OptionPreamble/index.js b/packages/components/src/DraftConfigurator/OptionPreamble/index.js index 97bd24a2dcf..c8af854aa46 100644 --- a/packages/components/src/DraftConfigurator/OptionPreamble/index.js +++ b/packages/components/src/DraftConfigurator/OptionPreamble/index.js @@ -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 = {props.displayValue}; - 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 = {props.displayValue} + + if (props.displayFormat === 'html') displayValue = ( - - ); + + ) return (
    - + {props.title}
    {displayValue}
    -
    +

    {props.desc}

    + {recipe ? ( + + + + ) : null} @@ -88,8 +104,8 @@ const OptionPreamble = props => { {props.option}
    - ); -}; + ) +} 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) diff --git a/packages/components/src/DraftConfigurator/PatternOptionBool/index.js b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js index 4b3802cf22f..60dcac06afe 100644 --- a/packages/components/src/DraftConfigurator/PatternOptionBool/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js @@ -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 = ( { value={value} dflt={props.dflt} onChange={update} - label={"po-bool-" + props.name} + label={'po-bool-' + props.name} updateValue={update} labels={props.labels} /> - ); + ) return (
  • - props.raiseEvent("showHelp", { - type: "draftSetting", + props.raiseEvent('showHelp', { + type: 'draftSetting', value: props.name }) } @@ -54,8 +59,8 @@ const PatternOptionBool = props => { noDocs={props.noDocs} />
    • - ); -}; + ) +} 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 diff --git a/packages/components/src/DraftConfigurator/PatternOptionList/index.js b/packages/components/src/DraftConfigurator/PatternOptionList/index.js index beecee323f4..88c6109006f 100644 --- a/packages/components/src/DraftConfigurator/PatternOptionList/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptionList/index.js @@ -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 = ( - ); + ) return (
  • { 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} />
    • - ); -}; + ) +} 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 diff --git a/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js index 10b91178823..08d6cdbe0c3 100644 --- a/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js @@ -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 = ( { 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 (
  • - props.raiseEvent("showHelp", { - type: "patternOption", + props.raiseEvent('showHelp', { + type: 'patternOption', value: props.name }) } @@ -77,8 +82,8 @@ const PatternOptionPctDegCount = props => { noDocs={props.noDocs} />
    • - ); -}; + ) +} 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 diff --git a/packages/components/src/DraftConfigurator/index.js b/packages/components/src/DraftConfigurator/index.js index 0bf99596f0c..a99e1b1b743 100644 --- a/packages/components/src/DraftConfigurator/index.js +++ b/packages/components/src/DraftConfigurator/index.js @@ -6,7 +6,6 @@ import DraftSettings from './DraftSettings' const DraftConfigurator = props => { const [expanded, setExpanded] = useState([]) - return (
    • diff --git a/packages/css-theme/src/components/_draft-configurator.scss b/packages/css-theme/src/components/_draft-configurator.scss index a45ec9a9854..7b3c9296ca5 100644 --- a/packages/css-theme/src/components/_draft-configurator.scss +++ b/packages/css-theme/src/components/_draft-configurator.scss @@ -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; +} +