Merge pull request #4040 from BenJamesBen/allow-blank-optional-measurements
fix(workbench): Allow blank optional measurements
This commit is contained in:
commit
4cc8a1a7a8
2 changed files with 32 additions and 21 deletions
|
@ -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
|
||||||
|
|
|
@ -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} />
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue