1
0
Fork 0

Merge pull request #4040 from BenJamesBen/allow-blank-optional-measurements

fix(workbench): Allow blank optional measurements
This commit is contained in:
Enoch Riese 2023-05-17 13:28:50 -05:00 committed by GitHub
commit 4cc8a1a7a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 21 deletions

View file

@ -11,17 +11,22 @@ import { measurementAsMm } from 'shared/utils.mjs'
* m holds the measurement name. It's just so long to type * m holds the measurement name. It's just so long to type
* measurement and I always have some typo in it because dyslexia. * measurement and I always have some typo in it because dyslexia.
*/ */
export const MeasurementInput = ({ m, gist, app, updateMeasurements, focus }) => { export const MeasurementInput = ({ m, gist, app, updateMeasurements, focus, optional = false }) => {
const { t } = useTranslation(['app', 'measurements']) const { t } = useTranslation(['app', 'measurements'])
const prefix = app.site === 'org' ? '' : 'https://freesewing.org' const prefix = app.site === 'org' ? '' : 'https://freesewing.org'
const title = t(`measurements:${m}`) const title = t(`measurements:${m}`)
const isDegree = isDegreeMeasurement(m) const isDegree = isDegreeMeasurement(m)
const factor = useMemo(() => (isDegree ? 1 : gist.units == 'imperial' ? 25.4 : 10), [gist.units]) const factor = useMemo(
() => (isDegree ? 1 : gist.units == 'imperial' ? 25.4 : 10),
[gist.units, isDegree]
)
const isValValid = (val) => const isValValid = useCallback((val) => (val == false ? optional : !isNaN(val)), [optional])
typeof val === 'undefined' || val === '' ? null : val != false && !isNaN(val) const isValid = useCallback(
const isValid = (newVal) => (typeof newVal === 'undefined' ? isValValid(val) : isValValid(newVal)) (newVal, val) => (typeof newVal === 'undefined' ? isValValid(val) : isValValid(newVal)),
[isValValid]
)
const [val, setVal] = useState(gist.measurements?.[m] / factor || '') const [val, setVal] = useState(gist.measurements?.[m] / factor || '')
@ -52,15 +57,15 @@ export const MeasurementInput = ({ m, gist, app, updateMeasurements, focus }) =>
}, 500) }, 500)
} }
}, },
[gist.units] [gist.units, isDegree, isValid, m, updateMeasurements]
) )
// use this for better update efficiency // use this for better update efficiency
const memoVal = useMemo(() => gist.measurements?.[m], [gist]) const memoVal = useMemo(() => gist.measurements?.[m], [gist, m])
// track validity against the value and the units // track validity against the value and the units
const valid = useMemo( const valid = useMemo(
() => isValid(isDegree ? val : measurementAsMm(val, gist.units)), () => isValid(isDegree ? val : measurementAsMm(val, gist.units)),
[val, gist.units] [val, gist.units, isDegree, isValid]
) )
// hook to update the value or format when the gist changes // hook to update the value or format when the gist changes

View file

@ -1,4 +1,4 @@
import React, { useMemo, useEffect, useState } from 'react' import React, { useMemo, useEffect, useState, useCallback } from 'react'
import { MeasurementInput } from '../inputs/measurement.mjs' import { MeasurementInput } from '../inputs/measurement.mjs'
import { adult, doll, giant } from '@freesewing/models' import { adult, doll, giant } from '@freesewing/models'
import { import {
@ -21,15 +21,18 @@ export const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady
const { t } = useTranslation(['app', 'cfp']) const { t } = useTranslation(['app', 'cfp'])
// Method to handle measurement updates // Method to handle measurement updates
const updateMeasurements = (value, m = false) => { const updateMeasurements = useCallback(
if (m === false) { (value, m = false) => {
// Set all measurements if (m === false) {
updateGist('measurements', value) // Set all measurements
} else { updateGist('measurements', value)
// Set one measurement } else {
updateGist(['measurements', m], value) // Set one measurement
} updateGist(['measurements', m], value)
} }
},
[updateGist]
)
const [firstInvalid, setFirstInvalid] = useState(undefined) const [firstInvalid, setFirstInvalid] = useState(undefined)
@ -45,10 +48,13 @@ export const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady
setFirstInvalid(undefined) setFirstInvalid(undefined)
} }
}, [gistReady]) }, [gistReady, design.patternConfig?.measurements, gist?.measurements])
// Save us some typing // Save us some typing
const inputProps = useMemo(() => ({ app, updateMeasurements, gist }), [app, gist]) const inputProps = useMemo(
() => ({ app, updateMeasurements, gist }),
[app, gist, updateMeasurements]
)
const shortname = design.designConfig.data.name.replace('@freesewing/', '') const shortname = design.designConfig.data.name.replace('@freesewing/', '')
return ( return (
@ -104,7 +110,7 @@ export const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady
<> <>
<h3>{t('optionalMeasurements')}</h3> <h3>{t('optionalMeasurements')}</h3>
{design.patternConfig.optionalMeasurements.map((m) => ( {design.patternConfig.optionalMeasurements.map((m) => (
<MeasurementInput key={m} m={m} {...inputProps} /> <MeasurementInput key={m} m={m} optional={true} {...inputProps} />
))} ))}
</> </>
)} )}