From 7a48cafe22350c06f5e0cdf3583dbac7ba170cda Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Sat, 22 Jul 2023 18:47:14 -0600 Subject: [PATCH 01/26] fix degree inputs --- sites/shared/components/sets/measie-input.mjs | 2 +- sites/shared/components/workbench/menus/shared/inputs.mjs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/sites/shared/components/sets/measie-input.mjs b/sites/shared/components/sets/measie-input.mjs index 3a23db0ccee..07bdfd19fcb 100644 --- a/sites/shared/components/sets/measie-input.mjs +++ b/sites/shared/components/sets/measie-input.mjs @@ -168,7 +168,7 @@ export const MeasieInput = ({ > diff --git a/sites/shared/components/workbench/menus/shared/inputs.mjs b/sites/shared/components/workbench/menus/shared/inputs.mjs index 99b8a7695f2..247d917c21e 100644 --- a/sites/shared/components/workbench/menus/shared/inputs.mjs +++ b/sites/shared/components/workbench/menus/shared/inputs.mjs @@ -216,7 +216,7 @@ export const SliderInput = ({ debouncedHandleChange(evt.target.value), + handleChange: (evt) => debouncedHandleChange(Number(evt.target.value)), min, max, t, @@ -243,7 +243,7 @@ export const SliderInput = ({ debouncedHandleChange(evt.target.value)} + onChange={(evt) => debouncedHandleChange(Number(evt.target.value))} className={` range range-sm mt-1 ${changed ? 'range-accent' : 'range-secondary'} From 8781e60350a173f182e9eac720f59daa1a0b18f1 Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Wed, 26 Jul 2023 16:38:51 -0600 Subject: [PATCH 02/26] support fractions and comma decimal separators --- sites/shared/components/sets/measie-input.mjs | 95 ++++---- .../workbench/menus/design-options/index.mjs | 13 +- .../workbench/menus/shared/inputs.mjs | 212 +++++++++++++++--- sites/shared/components/workbench/new.mjs | 56 ++--- .../workbench/views/measies/editor.mjs | 2 + .../workbench/views/measies/index.mjs | 2 +- .../workbench/views/measies/wbmeasies.en.yaml | 4 +- sites/shared/utils.mjs | 65 ++++-- 8 files changed, 309 insertions(+), 140 deletions(-) diff --git a/sites/shared/components/sets/measie-input.mjs b/sites/shared/components/sets/measie-input.mjs index 07bdfd19fcb..87bb0b5e523 100644 --- a/sites/shared/components/sets/measie-input.mjs +++ b/sites/shared/components/sets/measie-input.mjs @@ -1,8 +1,9 @@ import { isDegreeMeasurement } from 'config/measurements.mjs' -import { measurementAsMm, formatMm } from 'shared/utils.mjs' +import { measurementAsMm, formatMm, measurementAsUnits } from 'shared/utils.mjs' import { Collapse } from 'shared/components/collapse.mjs' import { PlusIcon, EditIcon } from 'shared/components/icons.mjs' -import { useState } from 'react' +import { NumberInput } from 'shared/components/workbench/menus/shared/inputs.mjs' +import { useState, useCallback } from 'react' export const ns = ['account'] const Mval = ({ m, val = false, imperial = false, className = '' }) => @@ -101,34 +102,35 @@ export const MeasieInput = ({ }) => { const isDegree = isDegreeMeasurement(m) const factor = isDegree ? 1 : mset.imperial ? 25.4 : 10 + const units = mset.imperial ? 'imperial' : 'metric' + const [val, setVal] = useState(() => { + const measie = mset.measies?.[m] + if (!measie) return '' + if (isDegree) return measie + return measurementAsUnits(measie, units) + }) - const isValValid = (val) => - typeof val === 'undefined' || val === '' ? null : val != false && !isNaN(val) - const isValid = (newVal) => (typeof newVal === 'undefined' ? isValValid(val) : isValValid(newVal)) - - const [val, setVal] = useState(mset.measies?.[m] / factor || '') - const [valid, setValid] = useState(isValid(mset.measies?.[m] / factor || '')) + const [valid, setValid] = useState(null) // Update onChange - const update = (evt) => { - setVal(evt.target.value) + const update = useCallback( + (validVal, rawVal) => { + setValid(validVal) + setVal(validVal || rawVal) - const useVal = isDegree - ? evt.target.value - : measurementAsMm(evt.target.value, mset.imperial ? 'imperial' : 'metric') - const validUpdate = isValid(useVal) - setValid(validUpdate) - - if (validUpdate && typeof onUpdate === 'function') { - onUpdate(m, useVal) - } - } + if (validVal && typeof onUpdate === 'function') { + const useVal = isDegree ? validVal : measurementAsMm(validVal, units) + onUpdate(m, useVal) + } + }, + [isDegree, setValid, setVal, onUpdate, units] + ) const save = async () => { // FIXME startLoading() const measies = {} - measies[m] = val * factor + measies[m] = isDegree ? val : measurementAsMm(val, units) const result = await backend.updateSet(mset.id, { measies }) if (result.success) { refresh() @@ -137,7 +139,7 @@ export const MeasieInput = ({ stopLoading() } - const fraction = (i, base) => update({ target: { value: Math.floor(val) + i / base } }) + const fraction = (i, base) => update(Math.floor(('' + val).split(/[\s\.]/)[0]) + i / base) if (!m) return null @@ -147,48 +149,41 @@ export const MeasieInput = ({