From cda9b037139618ae3d171f01e0ccac6d653927c1 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Sat, 25 Apr 2020 19:09:02 +0200 Subject: [PATCH] refactor(components): Removed prop-types dependency --- .../src/.form/FormFieldBool/index.js | 35 ++--- .../src/.form/FormFieldChecks/index.js | 46 +++--- .../src/.form/FormFieldList/index.js | 16 +- .../src/.form/FormFieldMeasurement/index.js | 10 -- .../src/.form/FormFieldSlider/index.js | 39 ++--- packages/components/src/Blockquote/index.js | 18 +-- packages/components/src/Draft/Circle/index.js | 5 - packages/components/src/Draft/Part/index.js | 9 -- packages/components/src/Draft/Path/index.js | 7 - packages/components/src/Draft/Point/index.js | 9 +- .../components/src/Draft/Snippet/index.js | 5 - packages/components/src/Draft/Svg/index.js | 47 +++--- packages/components/src/Draft/Text/index.js | 7 +- .../components/src/Draft/TextOnPath/index.js | 6 - packages/components/src/Draft/index.js | 23 +-- .../DraftSettingLanguage/index.js | 11 +- .../DraftSettingMargin/index.js | 15 +- .../DraftConfigurator/DraftSettingSa/index.js | 15 +- .../DraftConfigurator/DraftSettings/index.js | 105 +++++++------ .../DraftConfigurator/OptionGroup/index.js | 19 +-- .../DraftConfigurator/OptionPreamble/index.js | 84 +++++----- .../PatternOptionBool/index.js | 17 +-- .../PatternOptionList/index.js | 12 +- .../PatternOptionMillimeter/index.js | 111 +++++++------- .../PatternOptionPctDegCount/index.js | 98 ++++++------ .../DraftConfigurator/PatternOptions/index.js | 14 +- .../components/src/DraftConfigurator/index.js | 48 +++--- packages/components/src/Emblem/index.js | 23 +-- packages/components/src/Example/index.js | 144 ++++++++---------- packages/components/src/Icon/index.js | 60 +++----- packages/components/src/LineDrawing/index.js | 22 +-- packages/components/src/Logo/index.js | 41 ++--- packages/components/src/Navbar/index.js | 41 ++--- packages/components/src/Ogol/index.js | 30 ++-- packages/components/src/Robot/index.js | 57 +++---- .../SampleConfigurator/OptionGroup/index.js | 12 +- .../PatternOptions/index.js | 42 +++-- packages/components/src/Spinner/index.js | 17 +-- .../src/Workbench/DraftPattern/index.js | 19 +-- .../src/Workbench/Measurements/index.js | 75 ++++----- .../src/Workbench/SamplePattern/index.js | 17 +-- packages/components/src/Workbench/Welcome/bak | 30 ---- .../components/src/Workbench/Zoombox/index.js | 22 ++- packages/components/src/Workbench/index.js | 102 ++++++------- 44 files changed, 559 insertions(+), 1026 deletions(-) delete mode 100644 packages/components/src/Workbench/Welcome/bak diff --git a/packages/components/src/.form/FormFieldBool/index.js b/packages/components/src/.form/FormFieldBool/index.js index f70160eb582..c8482f5cdac 100644 --- a/packages/components/src/.form/FormFieldBool/index.js +++ b/packages/components/src/.form/FormFieldBool/index.js @@ -1,49 +1,36 @@ import React, { useState, useEffect } from 'react' -import PropTypes from 'prop-types' import Radio from '@material-ui/core/Radio' import RadioGroup from '@material-ui/core/RadioGroup' import FormControlLabel from '@material-ui/core/FormControlLabel' -const Bool = props => { - const [value, setValue] = useState(props.dflt) +const Bool = ({ dflt = false, labels = ['false', 'true'], value, name, updateValue }) => { + const [val, setVal] = useState(dflt) useEffect(() => { - if (props.value !== value) setValue(props.value) - }, [props.value]) + if (value !== val) setVal(value) + }, [value]) const toggle = () => { - props.updateValue(props.name, !value) - setValue(!value) + updateValue(name, !val) + setVal(!val) } return ( - + } value="false" - checked={value === 'true' || value === true || value === 1 ? false : true} - label={props.labels[0]} + checked={val === 'true' || val === true || val === 1 ? false : true} + label={labels[0]} className="po-list-item" /> } value="true" - checked={value === 'true' || value === true || value === 1 ? true : false} - label={props.labels[1]} + checked={val === 'true' || val === true || val === 1 ? true : false} + label={labels[1]} className="po-list-item" /> ) } -Bool.propTypes = { - dflt: PropTypes.bool, - labels: PropTypes.array, - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired -} - -Bool.defaultProps = { - dflt: false, - labels: ['false', 'true'] -} - export default Bool diff --git a/packages/components/src/.form/FormFieldChecks/index.js b/packages/components/src/.form/FormFieldChecks/index.js index 0f578155cc2..087fd183113 100644 --- a/packages/components/src/.form/FormFieldChecks/index.js +++ b/packages/components/src/.form/FormFieldChecks/index.js @@ -1,24 +1,23 @@ -import React, { useState } from "react"; -import PropTypes from "prop-types"; -import FormGroup from "@material-ui/core/FormGroup"; -import FormControlLabel from "@material-ui/core/FormControlLabel"; -import Checkbox from "@material-ui/core/Checkbox"; +import React, { useState } from 'react' +import FormGroup from '@material-ui/core/FormGroup' +import FormControlLabel from '@material-ui/core/FormControlLabel' +import Checkbox from '@material-ui/core/Checkbox' -const FormFieldChecks = props => { - const [value, setValue] = useState(props.dflt ? props.dflt : []); +const FormFieldChecks = (props) => { + const [value, setValue] = useState(props.dflt ? props.dflt : []) - const toggle = part => { - let parts = value.slice(0); - let index = parts.indexOf(part); - if (index === -1) parts.push(part); - else parts.splice(index, 1); - setValue(parts); - props.updateValue(props.name, parts); - }; + const toggle = (part) => { + let parts = value.slice(0) + let index = parts.indexOf(part) + if (index === -1) parts.push(part) + else parts.splice(index, 1) + setValue(parts) + props.updateValue(props.name, parts) + } return ( - {Object.keys(props.checks).map(i => { + {Object.keys(props.checks).map((i) => { return ( { key={i} className="po-list-item" /> - ); + ) })} - ); -}; + ) +} -FormFieldChecks.propTypes = { - dflt: PropTypes.array, - checks: PropTypes.object, - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired -}; - -export default FormFieldChecks; +export default FormFieldChecks diff --git a/packages/components/src/.form/FormFieldList/index.js b/packages/components/src/.form/FormFieldList/index.js index 84cd273b653..58761b512ea 100644 --- a/packages/components/src/.form/FormFieldList/index.js +++ b/packages/components/src/.form/FormFieldList/index.js @@ -1,15 +1,14 @@ import React, { useState, useEffect } from 'react' -import PropTypes from 'prop-types' import Radio from '@material-ui/core/Radio' import RadioGroup from '@material-ui/core/RadioGroup' import FormControlLabel from '@material-ui/core/FormControlLabel' -const FormFieldList = props => { +const FormFieldList = (props) => { const [value, setValue] = useState(props.dflt) useEffect(() => { if (props.value !== value) setValue(props.value) }, [props.value]) - const update = evt => { + const update = (evt) => { props.updateValue(props.name, evt.target.value) setValue(evt.target.value) } @@ -30,15 +29,4 @@ const FormFieldList = props => { ) } -FormFieldList.propTypes = { - dflt: PropTypes.oneOfType([ - PropTypes.number.isRequired, - PropTypes.string.isRequired, - PropTypes.bool.isRequired - ]), - list: PropTypes.object, - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired -} - export default FormFieldList diff --git a/packages/components/src/.form/FormFieldMeasurement/index.js b/packages/components/src/.form/FormFieldMeasurement/index.js index 40bf9975c10..87fcf1fc565 100644 --- a/packages/components/src/.form/FormFieldMeasurement/index.js +++ b/packages/components/src/.form/FormFieldMeasurement/index.js @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react' -import PropTypes from 'prop-types' import TextField from '@material-ui/core/TextField' import IconButton from '@material-ui/core/IconButton' import InvalidIcon from '@material-ui/icons/Warning' @@ -47,13 +46,4 @@ const FormFieldMeasurement = (props) => { ) } -FormFieldMeasurement.propTypes = { - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - units: PropTypes.oneOf(['metric', 'imperial']) -} - -FormFieldMeasurement.defaultProps = {} - export default injectIntl(FormFieldMeasurement) diff --git a/packages/components/src/.form/FormFieldSlider/index.js b/packages/components/src/.form/FormFieldSlider/index.js index 03196f79126..7ce652cfa19 100644 --- a/packages/components/src/.form/FormFieldSlider/index.js +++ b/packages/components/src/.form/FormFieldSlider/index.js @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react' -import PropTypes from 'prop-types' import Slider from '@material-ui/core/Slider' import { withStyles } from '@material-ui/core/styles' @@ -11,48 +10,32 @@ const PaddedSlider = withStyles({ thumb: { width: '16px', height: '16px' } })(Slider) -const FormFieldSlider = props => { - const [value, setValue] = useState(props.value) +const FormFieldSlider = ({ min = 0, max = 100, step = 0.1, label = false, updateValue, name }) => { + const [val, setVal] = useState(value) useEffect(() => { - if (props.value !== value) setValue(props.value) - }, [props.value]) + if (value !== val) setVal(value) + }, [value]) const update = (evt, newValue) => { - props.updateValue(props.name, newValue, evt) - setValue(newValue) + updateValue(name, newValue, evt) + setVal(newValue) } return ( ) } -FormFieldSlider.propTypes = { - min: PropTypes.number, - max: PropTypes.number, - step: PropTypes.number, - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]) -} - -FormFieldSlider.defaultProps = { - min: 0, - max: 100, - step: 0.1, - label: false -} - export default FormFieldSlider diff --git a/packages/components/src/Blockquote/index.js b/packages/components/src/Blockquote/index.js index 08df37edc89..90f24232bce 100644 --- a/packages/components/src/Blockquote/index.js +++ b/packages/components/src/Blockquote/index.js @@ -1,26 +1,16 @@ import React from 'react' -import PropTypes from 'prop-types' import Icon from '../Icon' -const Blockquote = props => { +const Blockquote = (props) => { const attr = Object.assign({}, props) delete attr.type delete attr.children return ( -
- {props.children} - {props.type === 'fixme' ? null : } +
+ {props.children || null} + {props.type !== 'fixme' && }
) } -Blockquote.propTypes = { - type: PropTypes.string.isRequired, - children: PropTypes.node -} - -Blockquote.defaultProps = { - type: 'note', - children: null -} export default Blockquote diff --git a/packages/components/src/Draft/Circle/index.js b/packages/components/src/Draft/Circle/index.js index d750fad0fca..6157384d6b6 100644 --- a/packages/components/src/Draft/Circle/index.js +++ b/packages/components/src/Draft/Circle/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' const Circle = (props) => ( ( /> ) -Circle.propTypes = { - point: PropTypes.object.isRequired -} - export default Circle diff --git a/packages/components/src/Draft/Part/index.js b/packages/components/src/Draft/Part/index.js index 1598281c57a..8e5ab4936d0 100644 --- a/packages/components/src/Draft/Part/index.js +++ b/packages/components/src/Draft/Part/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import Path from '../Path' import Point from '../Point' import Snippet from '../Snippet' @@ -136,12 +135,4 @@ const Part = (props) => { ) } -Part.propTypes = { - part: PropTypes.object.isRequired, - name: PropTypes.string.isRequired, - language: PropTypes.string.isRequired, - paperless: PropTypes.bool.isRequired, - design: PropTypes.bool.isRequired -} - export default Part diff --git a/packages/components/src/Draft/Path/index.js b/packages/components/src/Draft/Path/index.js index 8533d1fd21c..e06fb17f02a 100644 --- a/packages/components/src/Draft/Path/index.js +++ b/packages/components/src/Draft/Path/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import TextOnPath from '../TextOnPath' import DesignPath from '../DesignPath' import { getProps } from '../utils' @@ -18,10 +17,4 @@ const Path = (props) => { return output } -Path.propTypes = { - path: PropTypes.object.isRequired, - name: PropTypes.string.isRequired, - language: PropTypes.string.isRequired -} - export default Path diff --git a/packages/components/src/Draft/Point/index.js b/packages/components/src/Draft/Point/index.js index 9da3564b90c..ee672706881 100644 --- a/packages/components/src/Draft/Point/index.js +++ b/packages/components/src/Draft/Point/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import DesignPoint from '../DesignPoint' import Text from '../Text' import Circle from '../Circle' @@ -12,14 +11,8 @@ const Point = (props) => { output.push() if (props.point.attributes.get('data-circle')) output.push() - if (output.length < 1) return null - else return output -} -Point.propTypes = { - point: PropTypes.object.isRequired, - name: PropTypes.string.isRequired, - language: PropTypes.string.isRequired + return output.length < 1 ? null : output } export default Point diff --git a/packages/components/src/Draft/Snippet/index.js b/packages/components/src/Draft/Snippet/index.js index ac18a093f8c..1d1fd0b1627 100644 --- a/packages/components/src/Draft/Snippet/index.js +++ b/packages/components/src/Draft/Snippet/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { getProps } from '../utils' const Snippet = (props) => { @@ -25,8 +24,4 @@ const Snippet = (props) => { return } -Snippet.propTypes = { - snippet: PropTypes.object.isRequired -} - export default Snippet diff --git a/packages/components/src/Draft/Svg/index.js b/packages/components/src/Draft/Svg/index.js index af9be6ae531..1512b1519dc 100644 --- a/packages/components/src/Draft/Svg/index.js +++ b/packages/components/src/Draft/Svg/index.js @@ -1,40 +1,33 @@ import React from 'react' -import PropTypes from 'prop-types' -const Svg = (props) => { +const Svg = ({ + embed = true, + design = false, + language = 'en', + className = 'freesewing draft', + style = {}, + viewBox = false, + width, + height, + children +}) => { let attributes = { xmlns: 'http://www.w3.org/2000/svg', 'xmlns:svg': 'http://www.w3.org/2000/svg', xmlnsXlink: 'http://www.w3.org/1999/xlink', - xmlLang: props.language, - viewBox: props.viewBox || `0 0 ${props.width} ${props.height}`, - className: props.className, - style: props.style + xmlLang: language, + viewBox: viewBox || `0 0 ${width} ${height}`, + className, + style } - if (!props.embed) { - attributes.width = props.width + 'mm' - attributes.height = props.height + 'mm' + if (!embed) { + attributes.width = width + 'mm' + attributes.height = height + 'mm' } - if (props.design) attributes.className += ' design' + if (design) attributes.className += ' design' - return {props.children} -} - -Svg.propTypes = { - embed: PropTypes.bool, - className: PropTypes.string, - language: PropTypes.string, - design: PropTypes.bool -} - -Svg.defaultProps = { - embed: true, - design: false, - language: 'en', - className: 'freesewing draft', - style: {}, - viewBox: false + return {children} } export default Svg diff --git a/packages/components/src/Draft/Text/index.js b/packages/components/src/Draft/Text/index.js index 822bb194343..ecf2c120d62 100644 --- a/packages/components/src/Draft/Text/index.js +++ b/packages/components/src/Draft/Text/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { strings } from '@freesewing/i18n' const Text = (props) => { @@ -30,6 +29,7 @@ const Text = (props) => { ) } } else text.push({translated}) + return ( { ) } -Text.propTypes = { - point: PropTypes.object.isRequired, - language: PropTypes.string.isRequired -} - export default Text diff --git a/packages/components/src/Draft/TextOnPath/index.js b/packages/components/src/Draft/TextOnPath/index.js index df0a93f532d..9d92e7d8cac 100644 --- a/packages/components/src/Draft/TextOnPath/index.js +++ b/packages/components/src/Draft/TextOnPath/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { strings } from '@freesewing/i18n' const TextOnPath = (props) => { @@ -29,9 +28,4 @@ const TextOnPath = (props) => { ) } -TextOnPath.propTypes = { - path: PropTypes.object.isRequired, - language: PropTypes.string.isRequired -} - export default TextOnPath diff --git a/packages/components/src/Draft/index.js b/packages/components/src/Draft/index.js index 7b30b7341ca..b2f1b79dfc9 100644 --- a/packages/components/src/Draft/index.js +++ b/packages/components/src/Draft/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import Svg from './Svg' import Defs from './Defs' import Part from './Part' @@ -11,8 +10,8 @@ const Draft = (props) => ( height={props.height} language={props.settings.locale} id={props.settings.idPrefix + 'svg'} - design={props.design} - style={props.style} + design={props.design || false} + style={props.style || {}} viewBox={props.viewBox} className={props.className || 'freesewing draft'} > @@ -20,7 +19,7 @@ const Draft = (props) => ( units={props.settings.units} parts={props.parts} paperless={props.settings.paperless} - design={props.design} + design={props.design || false} /> {Object.keys(props.parts).map((name) => ( @@ -31,8 +30,8 @@ const Draft = (props) => ( units={props.settings.units} key={name} name={name} - focus={props.focus} - design={props.design} + focus={props.focus || false} + design={props.design || false} raiseEvent={props.raiseEvent} /> ))} @@ -40,16 +39,4 @@ const Draft = (props) => ( ) -Draft.propTypes = { - parts: PropTypes.object.isRequired, - settings: PropTypes.object.isRequired, - design: PropTypes.bool -} - -Draft.defaultProps = { - design: false, - focus: false, - style: {} -} - export default Draft diff --git a/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js b/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js index 08f6c105e18..6b543871dac 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js @@ -1,11 +1,10 @@ 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 DraftSettingLanguage = (props) => { const [value, setValue] = useState(props.value === null ? props.intl.locale : props.value) const [expanded, setExpanded] = useState(false) @@ -64,12 +63,4 @@ const DraftSettingLanguage = props => { ) } -DraftSettingLanguage.propTypes = { - raiseEvent: PropTypes.func.isRequired, - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired, - title: PropTypes.node.isRequired, - desc: PropTypes.node.isRequired -} - export default injectIntl(DraftSettingLanguage) diff --git a/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js b/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js index a56b5616e84..7ee25469dd7 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js @@ -1,12 +1,11 @@ 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 DraftSettingMargin = (props) => { const [value, setValue] = useState(props.value === null ? props.dflt : props.value) const [expanded, setExpanded] = useState(false) @@ -77,16 +76,4 @@ const DraftSettingMargin = props => { ) } -DraftSettingMargin.propTypes = { - raiseEvent: PropTypes.func.isRequired, - updateValue: PropTypes.func.isRequired, - title: PropTypes.node.isRequired, - desc: PropTypes.node.isRequired, - units: PropTypes.oneOf(['metric', 'imperial']).isRequired -} - -DraftSettingMargin.defaultProps = { - // FIXME -} - export default DraftSettingMargin diff --git a/packages/components/src/DraftConfigurator/DraftSettingSa/index.js b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js index 353da493b00..12f1632ff09 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingSa/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js @@ -1,5 +1,4 @@ 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' @@ -8,7 +7,7 @@ import defaultSa from '@freesewing/utils/defaultSa' import sliderStep from '@freesewing/utils/sliderStep' import OptionPreamble from '../OptionPreamble' -const DraftSettingSa = props => { +const DraftSettingSa = (props) => { const [value, setValue] = useState( props.value === defaultSa[props.units] ? 'dflt' : props.value === 0 ? 'none' : 'custom' ) @@ -131,16 +130,4 @@ const DraftSettingSa = props => { ) } -DraftSettingSa.propTypes = { - updateValue: PropTypes.func.isRequired, - title: PropTypes.node.isRequired, - desc: PropTypes.node.isRequired, - units: PropTypes.oneOf(['metric', 'imperial']).isRequired, - labels: PropTypes.object -} - -DraftSettingSa.defaultProps = { - // FIXME -} - export default DraftSettingSa diff --git a/packages/components/src/DraftConfigurator/DraftSettings/index.js b/packages/components/src/DraftConfigurator/DraftSettings/index.js index 1cb49ae8a84..9d473164c13 100644 --- a/packages/components/src/DraftConfigurator/DraftSettings/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettings/index.js @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import PropTypes from 'prop-types' import { FormattedMessage } from 'react-intl' import DraftSettingSa from '../DraftSettingSa' import DraftSettingMargin from '../DraftSettingMargin' @@ -11,9 +10,41 @@ import DraftSettingLanguage from '../DraftSettingLanguage' import DraftSettingOnly from '../DraftSettingOnly' import RightIcon from '@material-ui/icons/KeyboardArrowRight' -const DraftSettings = props => { +const DraftSettings = ({ + units = 'metric', + raiseEvent, + updateValue, + noDocs, + pattern, + config, + data = { settings: {} } +}) => { + // State const [expanded, setExpanded] = useState([]) - const toggleGroup = group => { + + // Building blocks + const noyes = [, ] + const hideshow = [, ] + const metricimperial = { + metric: , + imperial: + } + const labels = { + sa: { + none: , + dflt: , + custom: + }, + only: { + dflt: , + custom: + }, + paperless: noyes, + advanced: hideshow, + complete: hideshow + } + // Methods + const toggleGroup = (group) => { let shown = expanded.slice(0) let index = shown.indexOf(group) if (index === -1) shown.push(group) @@ -33,42 +64,21 @@ const DraftSettings = props => { case 'margin': return 2 case 'units': - return props.units + return units default: return false } } - - let noyes = [, ] - let hideshow = [, ] - let units = { - metric: , - imperial: - } - const addProps = setting => { - const labels = { - sa: { - none: , - dflt: , - custom: - }, - only: { - dflt: , - custom: - }, - paperless: noyes, - advanced: hideshow, - complete: hideshow - } + const addProps = (setting) => { let childProps = { - raiseEvent: props.raiseEvent, - updateValue: props.updateValue, - units: props.units, + raiseEvent, + updateValue, + units, key: setting, name: setting, labels: labels[setting], - noDocs: props.noDocs, - dflt: getDefault(setting, props.pattern), + noDocs, + dflt: getDefault(setting, pattern), designDflt: getDefault(setting) } childProps.title = @@ -76,26 +86,21 @@ const DraftSettings = props => { if (setting === 'only') { childProps.customDflt = [] childProps.parts = {} - if (props.config.draftOrder) { - for (let part of props.config.draftOrder) + if (config.draftOrder) { + for (let part of config.draftOrder) childProps.parts[part] = } } - if ( - typeof props.data !== 'undefined' && - typeof props.data.settings !== 'undefined' && - typeof props.data.settings[setting] !== 'undefined' - ) - childProps.value = props.data.settings[setting] + if (typeof data.settings[setting] !== 'undefined') childProps.value = data.settings[setting] else childProps.value = null return childProps } - let groups = { + const groups = { advanced: [ , - , + , , , @@ -103,19 +108,19 @@ const DraftSettings = props => { } return ( - + <>
- {props.data.settings.advanced ? ( + {data.settings.advanced && (
    - {Object.keys(groups).map(group => { + {Object.keys(groups).map((group) => { let open = true if (expanded.indexOf(group) === -1) open = false let children = null - if (open) children = groups[group].map(component => component) + if (open) children = groups[group].map((component) => component) return (
  • @@ -129,15 +134,9 @@ const DraftSettings = props => { ) })}
- ) : null} - + )} + ) } -DraftSettings.propTypes = { - config: PropTypes.object.isRequired -} - -DraftSettings.defaultProps = {} - export default DraftSettings diff --git a/packages/components/src/DraftConfigurator/OptionGroup/index.js b/packages/components/src/DraftConfigurator/OptionGroup/index.js index 504ed332e8e..500b37b9384 100644 --- a/packages/components/src/DraftConfigurator/OptionGroup/index.js +++ b/packages/components/src/DraftConfigurator/OptionGroup/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import Pct from '../PatternOptionPercentage' import Deg from '../PatternOptionDegree' import Mm from '../PatternOptionMillimeter' @@ -12,7 +11,7 @@ import { FormattedMessage } from 'react-intl' import { injectIntl } from 'react-intl' import RightIcon from '@material-ui/icons/KeyboardArrowRight' -const OptionGroup = props => { +const OptionGroup = (props) => { const renderOption = (name, sub = false) => { let option = props.config.options[name] let type = optionType(option) @@ -66,12 +65,10 @@ const OptionGroup = props => { } return ( - - {props.options.map(name => { - //let key = name; + <> + {props.options.map((name) => { let output = [] if (typeof name === 'object') { - //key = Object.keys(name).pop(); // Subgroup for (let subGroup of Object.keys(name)) { let children = [] @@ -90,16 +87,8 @@ const OptionGroup = props => { return output })} - + ) } -OptionGroup.propTypes = { - config: PropTypes.object.isRequired, - options: PropTypes.array.isRequired, - units: PropTypes.oneOf(['metric', 'imperial']).isRequired -} - -OptionGroup.defaultProps = {} - export default injectIntl(OptionGroup) diff --git a/packages/components/src/DraftConfigurator/OptionPreamble/index.js b/packages/components/src/DraftConfigurator/OptionPreamble/index.js index b058a475b80..769a4da2a4b 100644 --- a/packages/components/src/DraftConfigurator/OptionPreamble/index.js +++ b/packages/components/src/DraftConfigurator/OptionPreamble/index.js @@ -1,11 +1,25 @@ 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 { injectIntl } from 'react-intl' -const OptionPreamble = props => { +const OptionPreamble = ({ + intl, + title, + desc, + dflt, + designDflt, + option, + value, + displayValue, + displayFormat = 'node', + sameButDifferent, + expanded, + toggleExpanded, + reset, + designReset +}) => { const styles = { container: { display: 'flex', @@ -22,43 +36,41 @@ const OptionPreamble = props => { } } - const resetLabel = props.intl.formatMessage({ + const resetLabel = intl.formatMessage({ id: 'app.restoreDefaults', defaultMessage: ' ♻️ ' }) - const resetDesignLabel = props.intl.formatMessage({ + const resetDesignLabel = intl.formatMessage({ id: 'app.restoreDesignDefaults', defaultMessage: ' ♻️ ' }) - const resetPatternLabel = props.intl.formatMessage({ + const resetPatternLabel = intl.formatMessage({ id: 'app.restorePatternDefaults', defaultMessage: ' ♻️ ' }) let pattern = false - if (props.dflt !== props.designDflt) pattern = true - let displayClass = props.value === props.dflt ? 'dflt' : 'custom' - if (pattern && props.value === props.designDflt) displayClass = 'p-dflt' - else if (pattern && props.sameButDifferent) displayClass = 'custom' - let displayValue = {props.displayValue} + if (dflt !== designDflt) pattern = true + let displayClass = value === dflt ? 'dflt' : 'custom' + if (pattern && value === designDflt) displayClass = 'p-dflt' + else if (pattern && sameButDifferent) displayClass = 'custom' + let dspValue = {displayValue} - if (props.displayFormat === 'html') - displayValue = ( - - ) + if (displayFormat === 'html') + dspValue = return ( -
+
- - {props.title} + + {title}
-
{displayValue}
+
{dspValue}
-
+
-

{props.desc}

+

{desc}

{pattern ? ( @@ -66,8 +78,8 @@ const OptionPreamble = props => { title={resetDesignLabel} aria-label={resetDesignLabel} color="primary" - disabled={props.value === props.designDflt ? true : false} - onClick={props.designReset} + disabled={value === designDflt ? true : false} + onClick={designReset} className="mini-icon-btn pattern" > @@ -77,40 +89,18 @@ const OptionPreamble = props => { title={pattern ? resetPatternLabel : resetLabel} aria-label={pattern ? resetPatternLabel : resetLabel} color="primary" - disabled={props.value === props.dflt && !props.sameButDifferent ? true : false} - onClick={props.reset} + disabled={value === dflt && !sameButDifferent ? true : false} + onClick={reset} className={'mini-icon-btn' + (pattern ? ' pattern' : '')} >
- {props.option} + {option}
) } -OptionPreamble.propTypes = { - dflt: PropTypes.oneOfType([ - PropTypes.number.isRequired, - PropTypes.string.isRequired, - PropTypes.bool.isRequired - ]), - value: PropTypes.oneOfType([ - PropTypes.number.isRequired, - PropTypes.string.isRequired, - PropTypes.bool.isRequired - ]), - title: PropTypes.node.isRequired, - desc: PropTypes.node.isRequired, - reset: PropTypes.func.isRequired, - expanded: PropTypes.bool, - displayFormat: PropTypes.string -} - -OptionPreamble.defaultProps = { - displayFormat: 'node' -} - export default injectIntl(OptionPreamble) diff --git a/packages/components/src/DraftConfigurator/PatternOptionBool/index.js b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js index cf29ff224f1..1cf1facc273 100644 --- a/packages/components/src/DraftConfigurator/PatternOptionBool/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js @@ -1,9 +1,8 @@ import React, { useState } from 'react' -import PropTypes from 'prop-types' import FormFieldBool from '../../.form/FormFieldBool' import OptionPreamble from '../OptionPreamble' -const PatternOptionBool = props => { +const PatternOptionBool = (props) => { const [value, setValue] = useState(props.value === null ? props.dflt : props.value) const [expanded, setExpanded] = useState(false) @@ -62,18 +61,4 @@ const PatternOptionBool = props => { ) } -PatternOptionBool.propTypes = { - raiseEvent: PropTypes.func.isRequired, - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired, - dflt: PropTypes.oneOfType([ - PropTypes.number.isRequired, - PropTypes.string.isRequired, - PropTypes.bool.isRequired - ]), - title: PropTypes.node.isRequired, - desc: PropTypes.node.isRequired, - labels: PropTypes.array.isRequired -} - export default PatternOptionBool diff --git a/packages/components/src/DraftConfigurator/PatternOptionList/index.js b/packages/components/src/DraftConfigurator/PatternOptionList/index.js index 7ca88a9e85f..7804ab4b983 100644 --- a/packages/components/src/DraftConfigurator/PatternOptionList/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptionList/index.js @@ -1,9 +1,8 @@ import React, { useState } from 'react' -import PropTypes from 'prop-types' import FormFieldList from '../../.form/FormFieldList' import OptionPreamble from '../OptionPreamble' -const PatternOptionList = props => { +const PatternOptionList = (props) => { const [value, setValue] = useState(props.dflt) const [expanded, setExpanded] = useState(false) @@ -70,13 +69,4 @@ const PatternOptionList = props => { ) } -PatternOptionList.propTypes = { - updateValue: PropTypes.func.isRequired, - name: 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 diff --git a/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js b/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js index 1166a51a978..44e0e8822e5 100644 --- a/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js @@ -1,94 +1,85 @@ -import React, { useState } from "react"; -import PropTypes from "prop-types"; -import sliderStep from "@freesewing/utils/sliderStep"; -import roundMm from "@freesewing/utils/roundMm"; -import roundMmUp from "@freesewing/utils/roundMmUp"; -import roundMmDown from "@freesewing/utils/roundMmDown"; -import formatMm from "@freesewing/utils/formatMm"; -import FormFieldSlider from "../../.form/FormFieldSlider"; -import OptionPreamble from "../OptionPreamble"; +import React, { useState } from 'react' +import sliderStep from '@freesewing/utils/sliderStep' +import roundMm from '@freesewing/utils/roundMm' +import roundMmUp from '@freesewing/utils/roundMmUp' +import roundMmDown from '@freesewing/utils/roundMmDown' +import formatMm from '@freesewing/utils/formatMm' +import FormFieldSlider from '../../.form/FormFieldSlider' +import OptionPreamble from '../OptionPreamble' -const PatternOptionMillimeter = props => { - const [value, setValue] = useState(props.dflt); - const [previousValue, setPreviousValue] = useState(props.dflt); - const [expanded, setExpanded] = useState(false); +const PatternOptionMillimeter = ({ + title = false, + desc = false, + units = 'metric', + min = 0, + max = 100, + updateValue, + name, + dflt, + noDocs +}) => { + const [val, setVal] = useState(dflt) + const [previousValue, setPreviousValue] = useState(dflt) + const [expanded, setExpanded] = useState(false) const update = (name, newValue, evt) => { - newValue = roundMm(newValue, props.units); + newValue = roundMm(newValue, units) // 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); + setVal(newValue) + if (evt.type !== 'mousemove') updateValue(name, newValue) } else { - if (evt.type !== "mousemove") props.updateValue(props.name, value); + if (evt.type !== 'mousemove') updateValue(name, val) } - }; + } const reset = () => { - setValue(props.dflt); - props.updateValue(props.name, props.dflt); - }; + setVal(dflt) + updateValue(name, dflt) + } - const toggleExpanded = () => setExpanded(!expanded); + const toggleExpanded = () => setExpanded(!expanded) let option = ( - ); + ) return (
  • - props.raiseEvent("showHelp", { - type: "patternOption", - value: props.name + raiseEvent('showHelp', { + type: 'patternOption', + value: name }) } option={option} - noDocs={props.noDocs} + noDocs={noDocs} />
    • - ); -}; + ) +} -PatternOptionMillimeter.propTypes = { - min: PropTypes.number, - max: PropTypes.number, - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired, - dflt: PropTypes.number.isRequired, - title: PropTypes.node.isRequired, - desc: PropTypes.node.isRequired, - units: PropTypes.oneOf(["metric", "imperial"]).isRequired -}; - -PatternOptionMillimeter.defaultProps = { - min: 0, - max: 100, - title: false, - desc: false -}; - -export default PatternOptionMillimeter; +export default PatternOptionMillimeter diff --git a/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js index b2130e6acef..4bba5c848bf 100644 --- a/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js @@ -1,18 +1,27 @@ import React, { useState } from 'react' -import PropTypes from 'prop-types' import FormFieldSlider from '../../.form/FormFieldSlider' import OptionPreamble from '../OptionPreamble' -const PatternOptionPctDegCount = props => { +const PatternOptionPctDegCount = ({ + min = 0, + max = 100, + step = 0.1, + type = 'pct', + updateValue, + name, + dflt, + designDflt, + title, + desc, + value, + raiseEvent, + noDocs +}) => { 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) - ) + if (type === 'pct') factor = 100 + const round = (val) => Math.round(val * 10) / 10 + const [val, setVal] = useState(value === null ? dflt : round(value * factor)) + const [previousValue, setPreviousValue] = useState(value === null ? dflt : round(value * factor)) const [expanded, setExpanded] = useState(false) const update = (name, newValue, evt) => { @@ -22,38 +31,38 @@ const PatternOptionPctDegCount = props => { // 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) + setVal(newValue) + if (evt.type !== 'mousemove') updateValue(name, newValue / factor) } else { - if (evt.type !== 'mousemove') props.updateValue(props.name, value / factor) + if (evt.type !== 'mousemove') updateValue(name, value / factor) } } const reset = () => { - setValue(props.dflt) - props.updateValue(props.name, props.dflt / factor) + setVal(dflt) + updateValue(name, dflt / factor) } const patternReset = () => { - setValue(props.designDflt) - props.updateValue(props.name, props.designDflt / factor) + setVal(designDflt) + updateValue(name, designDflt / factor) } const toggleExpanded = () => setExpanded(!expanded) let unit = '' - if (props.type === 'pct') unit = '%' - if (props.type === 'deg') unit = '°' + if (type === 'pct') unit = '%' + if (type === 'deg') unit = '°' let option = ( ) @@ -61,47 +70,28 @@ const PatternOptionPctDegCount = props => { return (
  • - props.raiseEvent('showHelp', { + raiseEvent('showHelp', { type: 'patternOption', - value: props.name + value: name }) } option={option} - noDocs={props.noDocs} + noDocs={noDocs} />
    • ) } -PatternOptionPctDegCount.propTypes = { - min: PropTypes.number, - max: PropTypes.number, - step: PropTypes.number, - updateValue: PropTypes.func.isRequired, - name: PropTypes.string.isRequired, - dflt: PropTypes.number.isRequired, - title: PropTypes.node.isRequired, - desc: PropTypes.node.isRequired, - type: PropTypes.oneOf(['pct', 'deg', 'count']) -} - -PatternOptionPctDegCount.defaultProps = { - min: 0, - max: 100, - step: 0.1, - type: 'pct' -} - export default PatternOptionPctDegCount diff --git a/packages/components/src/DraftConfigurator/PatternOptions/index.js b/packages/components/src/DraftConfigurator/PatternOptions/index.js index a45ab880b0a..77cfb9314b8 100644 --- a/packages/components/src/DraftConfigurator/PatternOptions/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptions/index.js @@ -1,12 +1,11 @@ import React, { useState } from 'react' -import PropTypes from 'prop-types' import OptionGroup from '../OptionGroup' import { FormattedMessage } from 'react-intl' import RightIcon from '@material-ui/icons/KeyboardArrowRight' -const PatternOptions = props => { +const PatternOptions = (props) => { const [expanded, setExpanded] = useState([]) - const toggleGroup = group => { + const toggleGroup = (group) => { let shown = expanded.slice(0) let index = shown.indexOf(group) if (index === -1) shown.push(group) @@ -14,7 +13,7 @@ const PatternOptions = props => { setExpanded(shown) } - const renderGroup = group => { + const renderGroup = (group) => { let open = true if (expanded.indexOf(group) === -1) open = false let output = [] @@ -58,11 +57,4 @@ const PatternOptions = props => { return
      {children}
    } -PatternOptions.propTypes = { - config: PropTypes.object.isRequired, - raiseEvent: PropTypes.func -} - -PatternOptions.defaultProps = {} - export default PatternOptions diff --git a/packages/components/src/DraftConfigurator/index.js b/packages/components/src/DraftConfigurator/index.js index 0d10d62e767..1d8eb43fd5d 100644 --- a/packages/components/src/DraftConfigurator/index.js +++ b/packages/components/src/DraftConfigurator/index.js @@ -1,11 +1,25 @@ -import React, { useState } from 'react' -import PropTypes from 'prop-types' +import React from 'react' import { FormattedMessage } from 'react-intl' import PatternOptions from './PatternOptions' import DraftSettings from './DraftSettings' -const DraftConfigurator = props => { - const [expanded, setExpanded] = useState([]) +const DraftConfigurator = ({ + noDocs = false, + units = 'metric', + config = {}, + data = {}, + pattern, + updatePatternData, + raiseEvent +}) => { + let childProps = { + noDocs, + units, + config, + data, + pattern, + raiseEvent + } return (
    • @@ -13,13 +27,8 @@ const DraftConfigurator = props => { props.updatePatternData(value, 'settings', 'options', name)} - raiseEvent={props.raiseEvent} - units={props.units} + {...childProps} + updateValue={(name, value) => updatePatternData(value, 'settings', 'options', name)} />
    • @@ -27,25 +36,12 @@ const DraftConfigurator = props => { props.updatePatternData(value, 'settings', name)} - raiseEvent={props.raiseEvent} - units={props.units} + {...childProps} + updateValue={(name, value) => updatePatternData(value, 'settings', name)} />
    ) } -DraftConfigurator.propTypes = { - units: PropTypes.oneOf(['metric', 'imperial']).isRequired -} - -DraftConfigurator.defaultProps = { - noDocs: false -} - export default DraftConfigurator diff --git a/packages/components/src/Emblem/index.js b/packages/components/src/Emblem/index.js index 1e5a5c8adbf..dcc0aee220b 100644 --- a/packages/components/src/Emblem/index.js +++ b/packages/components/src/Emblem/index.js @@ -1,21 +1,10 @@ -import React from "react"; -import PropTypes from "prop-types"; +import React from 'react' -const Emblem = props => ( +const Emblem = (props) => ( - {props.t1} - {props.t2} + {props.t1 || 'Free'} + {props.t2 || 'Sewing'} -); +) -Emblem.propTypes = { - t1: PropTypes.string, - t2: PropTypes.string -}; - -Emblem.defaultProps = { - t1: "Free", - t2: "Sewing" -}; - -export default Emblem; +export default Emblem diff --git a/packages/components/src/Example/index.js b/packages/components/src/Example/index.js index fb13eedeb57..1df03432e97 100644 --- a/packages/components/src/Example/index.js +++ b/packages/components/src/Example/index.js @@ -1,41 +1,47 @@ -import React, { useState } from "react"; -import PropTypes from "prop-types"; -import examples from "@freesewing/examples"; -import rendertest from "@freesewing/rendertest"; -import tutorial from "@freesewing/tutorial"; -import Draft from "../Draft"; -import Design from "../Workbench/Design"; -import IconButton from "@material-ui/core/IconButton"; -import ResetIcon from "@material-ui/icons/SettingsBackupRestore"; -import Switch from "@material-ui/core/Switch"; +import React, { useState } from 'react' +import examples from '@freesewing/examples' +import rendertest from '@freesewing/rendertest' +import tutorial from '@freesewing/tutorial' +import Draft from '../Draft' +import Design from '../Workbench/Design' +import IconButton from '@material-ui/core/IconButton' +import ResetIcon from '@material-ui/icons/SettingsBackupRestore' +import Switch from '@material-ui/core/Switch' -const Example = props => { - const [design, setDesign] = useState(false); - const [focus, setFocus] = useState(null); +const Example = ({ + pattern = 'examples', + design = true, + caption = '', + options = {}, + settings, + part = '', + sample +}) => { + const [designMode, setDesignMode] = useState(false) + const [focus, setFocus] = useState(null) const raiseEvent = (type, data) => { - if (type === "clearFocusAll") return setFocus(null); - let f = {}; - if (focus !== null) f = { ...focus }; - if (typeof f[data.part] === "undefined") - f[data.part] = { paths: [], points: [], coords: [] }; - if (type === "point") f[data.part].points.push(data.name); - else if (type === "path") f[data.part].paths.push(data.name); - else if (type === "coords") f[data.part].coords.push(data.coords); - else if (type === "clearFocus") { - let i = focus[data.part][data.type].indexOf(data.name); - f[data.part][data.type].splice(i, 1); + if (type === 'clearFocusAll') return setFocus(null) + let f = {} + if (focus !== null) f = { ...focus } + if (typeof f[data.part] === 'undefined') f[data.part] = { paths: [], points: [], coords: [] } + if (type === 'point') f[data.part].points.push(data.name) + else if (type === 'path') f[data.part].paths.push(data.name) + else if (type === 'coords') f[data.part].coords.push(data.coords) + else if (type === 'clearFocus') { + let i = focus[data.part][data.type].indexOf(data.name) + f[data.part][data.type].splice(i, 1) } - setFocus(f); - }; + setFocus(f) + } - let focusCount = 0; + let focusCount = 0 if (focus !== null) { for (let p of Object.keys(focus)) { - for (let i in focus[p].points) focusCount++; - for (let i in focus[p].paths) focusCount++; - for (let i in focus[p].coords) focusCount++; + for (let i in focus[p].points) focusCount++ + for (let i in focus[p].paths) focusCount++ + for (let i in focus[p].coords) focusCount++ } } @@ -43,75 +49,49 @@ const Example = props => { examples, rendertest, tutorial - }; - const settings = { - options: { ...props.options }, + } + settings = { + options: { ...options }, measurements: { headCircumference: 390 }, - ...props.settings - }; - if (props.part !== "") settings.only = [props.part]; - const pattern = new patterns[props.pattern](settings); + ...settings + } + if (part !== '') settings.only = [part] + const patternInstance = new patterns[pattern](settings) - if (props.sample) pattern.sample(); - else pattern.draft(); - const patternProps = pattern.getRenderProps(); + if (sample) patternInstance.sample() + else patternInstance.draft() + const patternProps = patternInstance.getRenderProps() return ( -
    +
    - {props.design ? ( + {designMode ? (
    - {design ? ( - raiseEvent("clearFocusAll", null)} - > - - - ) : null} + raiseEvent('clearFocusAll', null)}> + + setDesign(!design)} - value={design} + checked={designMode} + onChange={() => setDesignMode(!designMode)} + value={designMode} color="primary" />
    ) : null} - +
    -
    {props.caption}
    - {design ? ( +
    {caption}
    + {designMode && (
    - ) : null} + )}
    - ); -}; + ) +} -Example.propTypes = { - pattern: PropTypes.string, - design: PropTypes.bool, - caption: PropTypes.string, - part: PropTypes.string, - options: PropTypes.obj -}; - -Example.defaultProps = { - pattern: "examples", - design: true, - caption: "", - options: {}, - part: "" -}; - -export default Example; +export default Example diff --git a/packages/components/src/Icon/index.js b/packages/components/src/Icon/index.js index 547b5793814..de3c5f219ae 100644 --- a/packages/components/src/Icon/index.js +++ b/packages/components/src/Icon/index.js @@ -1,40 +1,24 @@ -import React from "react"; -import PropTypes from "prop-types"; -import icons from "./icons"; +import React from 'react' +import icons from './icons' -const Icon = props => { - return ( - - - - ); -}; +const Icon = ({ + size = 24, + viewBox = '0 0 24 24', + className = '', + icon = 'github', + color = false, + style = {} +}) => ( + + + +) -Icon.propTypes = { - size: PropTypes.number, - viewBox: PropTypes.string, - icon: PropTypes.string, - style: PropTypes.object -}; - -Icon.defaultProps = { - size: 24, - viewBox: "0 0 24 24", - className: "", - icon: "github", - color: false, - style: {} -}; - -export default Icon; +export default Icon diff --git a/packages/components/src/LineDrawing/index.js b/packages/components/src/LineDrawing/index.js index 584a7813a1f..fcd9b0a7464 100644 --- a/packages/components/src/LineDrawing/index.js +++ b/packages/components/src/LineDrawing/index.js @@ -1,11 +1,10 @@ import React from 'react' -import PropTypes from 'prop-types' import patterns from './patterns' -const LineDrawing = props => { +const LineDrawing = (props) => { const attr = { - style: props.style, - className: 'fs linedrawing ' + props.className, + style: props.style || {}, + className: 'fs linedrawing ' + (props.className || ''), xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 270 270' } @@ -13,20 +12,7 @@ const LineDrawing = props => { attr.width = props.size attr.height = props.size } - return {patterns[props.pattern] || null} -} - -LineDrawing.propTypes = { - size: PropTypes.number, - pattern: PropTypes.string, - style: PropTypes.object -} - -LineDrawing.defaultProps = { - size: 0, - className: '', - pattern: 'aaron', - style: {} + return {patterns[props.pattern || 'aaron'] || null} } export default LineDrawing diff --git a/packages/components/src/Logo/index.js b/packages/components/src/Logo/index.js index 09b551d6539..12e3848518a 100644 --- a/packages/components/src/Logo/index.js +++ b/packages/components/src/Logo/index.js @@ -1,39 +1,24 @@ -import React from "react"; -import PropTypes from "prop-types"; +import React from 'react' -const Logo = props => { +const Logo = ({ size = 24, embed = false, className = '', color = false }) => { let svgProps = { - xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 48 48", - className: props.className - }; - if (!props.embed) { - svgProps.width = props.size; - svgProps.height = props.size; + xmlns: 'http://www.w3.org/2000/svg', + viewBox: '0 0 48 48', + className: className + } + if (!embed) { + svgProps.width = size + svgProps.height = size } return ( - ); -}; + ) +} -Logo.propTypes = { - size: PropTypes.number, - embed: PropTypes.bool, - className: PropTypes.string, - color: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]) -}; - -Logo.defaultProps = { - size: 24, - embed: false, - className: "", - color: false -}; - -export default Logo; +export default Logo diff --git a/packages/components/src/Navbar/index.js b/packages/components/src/Navbar/index.js index 223e17b8b8c..f4cfe19c6bf 100644 --- a/packages/components/src/Navbar/index.js +++ b/packages/components/src/Navbar/index.js @@ -1,11 +1,15 @@ import React from 'react' -import PropTypes from 'prop-types' import Logo from '../Logo' import Emblem from '../Emblem' import { FormattedMessage } from 'react-intl' import useMediaQuery from '@material-ui/core/useMediaQuery' -const Navbar = props => { +const Navbar = ({ + home = 'https://freesewing.org/', + navs = { left: [], right: [], mleft: {}, mright: {} }, + logo = , + emblem = +}) => { const mobile = useMediaQuery('(max-width:599px)') if (mobile) return null @@ -47,49 +51,36 @@ const Navbar = props => { let homeProps = { href: '#home' } - if (typeof props.home === 'function') homeProps.onClick = props.home - else homeProps.href = props.home + if (typeof home === 'function') homeProps.onClick = home + else homeProps.href = home - let logo = ( + let logoDiv = ( ) - let emblem = ( + let emblemDiv = ( ) return (
    - {logo} - {emblem} - {Object.keys(props.navs.left).map(key => renderNav(key, props.navs.left[key]))} + {logoDiv} + {emblemDiv} + {Object.keys(navs.left).map((key) => renderNav(key, navs.left[key]))}
    - {Object.keys(props.navs.right).map(key => renderNav(key, props.navs.right[key]))} + {Object.keys(navs.right).map((key) => renderNav(key, navs.right[key]))}
    ) } -Navbar.propTypes = { - navs: PropTypes.object, - logo: PropTypes.node, - emblem: PropTypes.node, - home: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) -} - -Navbar.defaultProps = { - home: 'https://freesewing.org/', - navs: { left: [], right: [], mleft: {}, mright: {} }, - logo: , - emblem: -} export default Navbar diff --git a/packages/components/src/Ogol/index.js b/packages/components/src/Ogol/index.js index f24d5bdde72..f270cb6b213 100644 --- a/packages/components/src/Ogol/index.js +++ b/packages/components/src/Ogol/index.js @@ -1,33 +1,21 @@ -import React from "react"; -import PropTypes from "prop-types"; +import React from 'react' -const Ogol = props => { +const Ogol = (props) => { return ( - ); -}; + ) +} -Ogol.propTypes = { - size: PropTypes.number, - embed: PropTypes.bool -}; - -Ogol.defaultProps = { - size: 24, - embed: false, - color: "#fff" -}; - -export default Ogol; +export default Ogol diff --git a/packages/components/src/Robot/index.js b/packages/components/src/Robot/index.js index 6a2af1008f3..d23a62309c7 100644 --- a/packages/components/src/Robot/index.js +++ b/packages/components/src/Robot/index.js @@ -1,38 +1,23 @@ -import React from "react"; -import PropTypes from "prop-types"; -import poses from "./poses"; +import React from 'react' +import poses from './poses' -const Robot = props => { - return ( - - - - ); -}; +const Robot = ({ + size = 124, + viewBox = '0 0 500 500', + className = '', + pose = 'yay', + color = false, + embed = false +}) => ( + + + +) -Robot.propTypes = { - size: PropTypes.number, - viewBox: PropTypes.string, - pose: PropTypes.string, - embed: PropTypes.bool -}; - -Robot.defaultProps = { - size: 124, - viewBox: "0 0 500 500", - className: "", - pose: "yay", - color: false -}; - -export default Robot; +export default Robot diff --git a/packages/components/src/SampleConfigurator/OptionGroup/index.js b/packages/components/src/SampleConfigurator/OptionGroup/index.js index dfae06eca0a..f127c72deea 100644 --- a/packages/components/src/SampleConfigurator/OptionGroup/index.js +++ b/packages/components/src/SampleConfigurator/OptionGroup/index.js @@ -1,12 +1,11 @@ import React from 'react' -import PropTypes from 'prop-types' import { FormattedMessage } from 'react-intl' import { injectIntl } from 'react-intl' -const OptionGroup = props => { +const OptionGroup = (props) => { return ( - {props.options.map(name => { + {props.options.map((name) => { let output = [] if (typeof name === 'object') { // Subgroup @@ -44,11 +43,4 @@ const OptionGroup = props => { ) } -OptionGroup.propTypes = { - config: PropTypes.object.isRequired, - options: PropTypes.array.isRequired -} - -OptionGroup.defaultProps = {} - export default injectIntl(OptionGroup) diff --git a/packages/components/src/SampleConfigurator/PatternOptions/index.js b/packages/components/src/SampleConfigurator/PatternOptions/index.js index 070bc53ab94..06f609365c3 100644 --- a/packages/components/src/SampleConfigurator/PatternOptions/index.js +++ b/packages/components/src/SampleConfigurator/PatternOptions/index.js @@ -1,46 +1,38 @@ -import React from "react"; -import PropTypes from "prop-types"; -import OptionGroup from "../OptionGroup"; -import { FormattedMessage } from "react-intl"; +import React from 'react' +import OptionGroup from '../OptionGroup' +import { FormattedMessage } from 'react-intl' -const PatternOptions = props => { - const renderGroup = group => { - let output = []; +const PatternOptions = (props) => { + const renderGroup = (group) => { + let output = [] let children = (
    - ); + ) output.push( -
  • +

  • - +

    {children}
    • - ); + ) - return output; - }; + return output + } return (
      - {Object.keys(props.config.optionGroups).map(group => renderGroup(group))} + {Object.keys(props.config.optionGroups).map((group) => renderGroup(group))}
    - ); -}; + ) +} -PatternOptions.propTypes = { - config: PropTypes.object.isRequired, - sampleOption: PropTypes.func.isRequired -}; - -PatternOptions.defaultProps = {}; - -export default PatternOptions; +export default PatternOptions diff --git a/packages/components/src/Spinner/index.js b/packages/components/src/Spinner/index.js index a7162278a25..dc1774679b0 100644 --- a/packages/components/src/Spinner/index.js +++ b/packages/components/src/Spinner/index.js @@ -1,12 +1,11 @@ import React from 'react' -import PropTypes from 'prop-types' -const Spinner = props => { +const Spinner = (props) => { return ( @@ -65,14 +64,4 @@ const Spinner = props => { ) } -Spinner.propTypes = { - size: PropTypes.number, - embed: PropTypes.bool -} - -Spinner.defaultProps = { - size: 200, - embed: false -} - export default Spinner diff --git a/packages/components/src/Workbench/DraftPattern/index.js b/packages/components/src/Workbench/DraftPattern/index.js index fa6d4bb7bf8..17bb795f2af 100644 --- a/packages/components/src/Workbench/DraftPattern/index.js +++ b/packages/components/src/Workbench/DraftPattern/index.js @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import PropTypes from 'prop-types' import Draft from '../../Draft' import Zoombox from '../Zoombox' import Design from '../Design' @@ -115,7 +114,7 @@ const DraftPattern = (props) => { return (
    -
    +
    { updatePatternData={props.updateGist} raiseEvent={props.raiseEvent} freesewing={props.freesewing} - units={props.units} + units={props.units || 'metric'} />
    @@ -232,18 +231,4 @@ const DraftPattern = (props) => { ) } -DraftPattern.propTypes = { - gist: PropTypes.object.isRequired, - updateGist: PropTypes.func.isRequired, - config: PropTypes.object.isRequired, - raiseEvent: PropTypes.func.isRequired, - Pattern: PropTypes.func.isRequired, - units: PropTypes.oneOf(['metric', 'imperial']) -} - -DraftPattern.defaultProps = { - units: 'metric', - pointInfo: null -} - export default DraftPattern diff --git a/packages/components/src/Workbench/Measurements/index.js b/packages/components/src/Workbench/Measurements/index.js index 02c99962dd0..3d358df1091 100644 --- a/packages/components/src/Workbench/Measurements/index.js +++ b/packages/components/src/Workbench/Measurements/index.js @@ -1,31 +1,30 @@ -import React from "react"; -import PropTypes from "prop-types"; -import Button from "@material-ui/core/Button"; -import { FormattedMessage, FormattedHTMLMessage } from "react-intl"; -import FormFieldMeasurement from "../../.form/FormFieldMeasurement"; -import { withBreasts, withoutBreasts } from "@freesewing/models"; +import React from 'react' +import Button from '@material-ui/core/Button' +import { FormattedMessage, FormattedHTMLMessage } from 'react-intl' +import FormFieldMeasurement from '../../.form/FormFieldMeasurement' +import { withBreasts, withoutBreasts } from '@freesewing/models' -const Measurements = props => { +const Measurements = (props) => { const styles = { container: { - display: "flex", - flexDirection: "row", - width: "100%", - minHeight: "70vh" + display: 'flex', + flexDirection: 'row', + width: '100%', + minHeight: '70vh' }, chooser: { - width: "100%", - maxWidth: "500px", - margin: "auto", - alignSelf: "center" + width: '100%', + maxWidth: '500px', + margin: 'auto', + alignSelf: 'center' } - }; + } - const getValue = m => { - if (props.measurements === null) return ""; - if (typeof props.measurements[m] === "undefined") return ""; - return props.measurements[m]; - }; + const getValue = (m) => { + if (props.measurements === null) return '' + if (typeof props.measurements[m] === 'undefined') return '' + return props.measurements[m] + } if (props.required.length < 1) return ( @@ -43,18 +42,14 @@ const Measurements = props => {

      - + {props.language} .freesewing.dev/core/config

    - ); + ) return (
    @@ -79,13 +74,13 @@ const Measurements = props => {

    - {props.required.map(m => ( + {props.required.map((m) => ( ))} @@ -96,11 +91,9 @@ const Measurements = props => {
      - {Object.keys(withoutBreasts).map(m => ( + {Object.keys(withoutBreasts).map((m) => (
    • -
    - ); -}; + ) +} -Measurements.propTypes = { - measurements: PropTypes.object.isRequired, - required: PropTypes.array.isRequired, - units: PropTypes.oneOf(["metric", "imperial"]), - updateMeasurement: PropTypes.func.isRequired, - preloadMeasurements: PropTypes.func.isRequired -}; - -export default Measurements; +export default Measurements diff --git a/packages/components/src/Workbench/SamplePattern/index.js b/packages/components/src/Workbench/SamplePattern/index.js index 91450c15711..2f736055e9f 100644 --- a/packages/components/src/Workbench/SamplePattern/index.js +++ b/packages/components/src/Workbench/SamplePattern/index.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import SampleConfigurator from '../../SampleConfigurator' import svgattrPlugin from '@freesewing/plugin-svgattr' import { FormattedMessage } from 'react-intl' @@ -35,7 +34,7 @@ const SamplePattern = (props) => { updateGist={props.updateGist} raiseEvent={props.raiseEvent} freesewing={props.freesewing} - units={props.units} + units={props.units || 'metric'} /> @@ -43,18 +42,4 @@ const SamplePattern = (props) => { ) } -SamplePattern.propTypes = { - gist: PropTypes.object.isRequired, - updateGist: PropTypes.func.isRequired, - config: PropTypes.object.isRequired, - raiseEvent: PropTypes.func.isRequired, - Pattern: PropTypes.func.isRequired, - units: PropTypes.oneOf(['metric', 'imperial']) -} - -SamplePattern.defaultProps = { - units: 'metric', - pointInfo: null -} - export default SamplePattern diff --git a/packages/components/src/Workbench/Welcome/bak b/packages/components/src/Workbench/Welcome/bak deleted file mode 100644 index defa7e9fb22..00000000000 --- a/packages/components/src/Workbench/Welcome/bak +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import Logo from "../../Logo"; -import FormattedMessage from "react-intl"; -import Button from "@material-ui/core/Button"; - -const Welcome = props => { - - const style = { - textAlign: "center" - } - - return ( -
    -
    -
    -

    -

    freesewing.dev

    -

    : gitter.im/freesewing

    - -
    -
    - ); -}; - -export default Welcome; diff --git a/packages/components/src/Workbench/Zoombox/index.js b/packages/components/src/Workbench/Zoombox/index.js index de029706eea..0f22c2bc842 100644 --- a/packages/components/src/Workbench/Zoombox/index.js +++ b/packages/components/src/Workbench/Zoombox/index.js @@ -43,7 +43,6 @@ const Zoombox = (props) => { setPanning(false) setPanFrom(false) updateViewBox(evt) - //props.setViewBox(`${from[0] * factor} ${from[1] * factor} ${to[0] * factor} ${to[1] * factor}`) } } const handlePan = (evt) => { @@ -55,9 +54,9 @@ const Zoombox = (props) => { // Bump into left } else if (from[1] + (evt.clientY - panFrom[1]) <= -5) { // Bump into top - } else if (to[0] + (evt.clientX - panFrom[0]) >= box.width - 11) { + } else if (to[0] + (evt.clientX - panFrom[0]) >= box.width + 5) { // Bump into right - } else if (to[1] + (evt.clientY - panFrom[1]) >= box.height - 11) { + } else if (to[1] + (evt.clientY - panFrom[1]) >= box.height + 5) { // Bump into bottom } else { setPanFrom([evt.clientX, evt.clientY]) @@ -78,7 +77,12 @@ const Zoombox = (props) => { if (dragging == 2) { updateViewBox(evt) if (falseAlarm) setFalseAlarm(false) - } else setFalseAlarm(true) + } else { + setFalseAlarm(true) + let box = ref.current.getBoundingClientRect() + setBox(box) + setFactor(props.patternProps.width / box.width) + } setDragging(false) setPanning(false) evt.stopPropagation() @@ -93,20 +97,15 @@ const Zoombox = (props) => { setTo([evt.clientX - box.x, evt.clientY - box.y]) } } - const handleMouseOver = (evt) => { - evt.stopPropagation() - evt.preventDefault() - setFactor(props.patternProps.width / box.width) - } const updateViewBox = (evt) => { props.setViewBox( from[0] * factor + ' ' + from[1] * factor + ' ' + - (evt.clientX - box.x - from[0]) * factor + + (to[0] - from[0]) * factor + ' ' + - (evt.clientY - box.y - from[1]) * factor + (to[1] - from[1]) * factor ) } @@ -115,7 +114,6 @@ const Zoombox = (props) => {
    { +const Workbench = ({ + updateGist, + setLanguage, + userLanguage = 'en', + language = 'en', + gist, + importGist, + config, + freesewing, + Pattern, + units = 'metric' +}) => { const [display, setDisplay] = useState(null) const [pattern, setPattern] = useState(false) const [theme, setTheme] = useState('light') @@ -27,27 +37,23 @@ const Workbench = (props) => { useEffect(() => { let m = getMeasurements() setMeasurements(m) - props.updateGist(m, 'settings', 'measurements') + updateGist(m, 'settings', 'measurements') setDisplay(getDisplay()) - props.setLanguage(props.userLanguage || 'en') + setLanguage(userLanguage) }, []) useEffect(() => { - if (props.from) props.importGist(props.from) - }, [props.from]) - useEffect(() => { - if (props.language !== props.gist.settings.locale) - props.updateGist(props.language, 'settings', 'locale') - }, [props.language]) + if (language !== gist.settings.locale) updateGist(language, 'settings', 'locale') + }, [language]) - const getDisplay = () => storage.get(props.config.name + '-display') + const getDisplay = () => storage.get(config.name + '-display') const saveDisplay = (d) => { setDisplay(d) - storage.set(props.config.name + '-display', d) + storage.set(config.name + '-display', d) } - const getMeasurements = () => storage.get(props.config.name + '-measurements') + const getMeasurements = () => storage.get(config.name + '-measurements') const saveMeasurements = (data) => { - storage.set(props.config.name + '-measurements', data) - props.updateGist(data, 'settings', 'measurements') + storage.set(config.name + '-measurements', data) + updateGist(data, 'settings', 'measurements') } const updateMeasurement = (name, val) => { let updatedMeasurements = { ...measurements } @@ -64,7 +70,7 @@ const Workbench = (props) => { saveMeasurements(updatedMeasurements) } const measurementsMissing = () => { - let required = props.config.measurements + let required = config.measurements if (required.length < 1) return false if (measurements === null) return true for (let m of required) { @@ -110,7 +116,7 @@ const Workbench = (props) => { version: { type: 'link', href: 'https://github.com/freesewing/freesewing/releases', - text: 'v' + props.freesewing.version + text: 'v' + freesewing.version }, language: { type: 'button', @@ -140,19 +146,19 @@ const Workbench = (props) => { let main = null switch (display) { case 'languages': - main = + main = break case 'draft': if (measurementsMissing()) saveDisplay('measurements') main = ( { if (measurementsMissing()) saveDisplay('measurements') main = ( ) break @@ -177,59 +183,49 @@ const Workbench = (props) => { main = ( ) break case 'json': - main = + main = break case 'inspect': main = ( ) break default: - main = + main = } const themes = { dark, light } + return (
    {display !== 'welcome' ? saveDisplay('welcome')} /> : null} {main} - {display !== 'welcome' ?
    ) } -Workbench.propTypes = { - freesewing: PropTypes.object.isRequired, - Pattern: PropTypes.func.isRequired, - config: PropTypes.object.isRequired, - from: PropTypes.object -} - -Workbench.defaultProps = { - from: { settings: { embed: true } } -} - export default withLanguage( withGist(Workbench, { gist: defaultGist,