wip(lab): Work on workbench
- Moved the various tabs on the draft view to their own views. - Renames modes to views - Started to group various aspects of the workbench state under `_state` in the gist to prevent it from getting all mixed up with the core settings. - Updated events title to make it more clear not all events might be present - Removed valid state in measurements input since it was only getting updated on keyboard input but now when preloading measurements (which it does now)
This commit is contained in:
parent
bbb2b2c23f
commit
3653700572
12 changed files with 155 additions and 156 deletions
|
@ -13,15 +13,17 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
|
|||
const { t } = useTranslation(['app', 'measurements'])
|
||||
const prefix = (app.site === 'org') ? '' : 'https://freesewing.org'
|
||||
const title = t(`measurements:${m}`)
|
||||
const isValid = input => {
|
||||
if (input === '') return ''
|
||||
return !isNaN(input)
|
||||
}
|
||||
|
||||
const isValValid = val => (typeof val === 'undefined' || val === '')
|
||||
? null
|
||||
: !isNaN(val)
|
||||
const isValid = (newVal) => (typeof newVal === 'undefined')
|
||||
? isValValid(gist?.measurements?.[m])
|
||||
: isValValid(newVal)
|
||||
|
||||
const update = evt => {
|
||||
setVal(evt.target.value)
|
||||
const ok = isValid(evt.target.value)
|
||||
console.log({ok})
|
||||
if (ok) {
|
||||
setValid(true)
|
||||
updateMeasurements(evt.target.value*10, m)
|
||||
|
@ -29,10 +31,6 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
|
|||
}
|
||||
|
||||
const [val, setVal] = useState(gist?.measurements?.[m] || '')
|
||||
const [valid, setValid] = useState(typeof gist?.measurements?.[m] === 'undefined'
|
||||
? '' :
|
||||
isValid(gist.measurements[m])
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (gist?.measurements?.[m]) setVal(gist.measurements[m]/10)
|
||||
|
@ -40,6 +38,7 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
|
|||
|
||||
if (!m) return null
|
||||
|
||||
const valid = isValid()
|
||||
return (
|
||||
<div className="form-control mb-2" key={`wrap-${m}`}>
|
||||
<label className="label">
|
||||
|
@ -59,20 +58,19 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
|
|||
type="text"
|
||||
placeholder={title}
|
||||
className={`
|
||||
input input-lg input-bordered grow text-base-content
|
||||
${valid === false && 'input-error'}
|
||||
${valid === true && 'input-success'}
|
||||
border-r-0
|
||||
input input-lg input-bordered grow text-base-content border-r-0
|
||||
${isValid() === false && 'input-error'}
|
||||
${isValid() === true && 'input-success'}
|
||||
`}
|
||||
value={val}
|
||||
onChange={update}
|
||||
/>
|
||||
<span role="img" className={`bg-transparent border-y
|
||||
${valid === false && 'border-error text-neutral-content'}
|
||||
${valid === true && 'border-success text-neutral-content'}
|
||||
${valid === '' && 'border-base-200 text-base-content'}
|
||||
${isValid() === false && 'border-error text-neutral-content'}
|
||||
${isValid() === true && 'border-success text-neutral-content'}
|
||||
${isValid() === null && 'border-base-200 text-base-content'}
|
||||
`}>
|
||||
{valid === ''
|
||||
{isValid() === null
|
||||
? ''
|
||||
: valid
|
||||
? '👍'
|
||||
|
@ -82,7 +80,7 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
|
|||
<span className={`
|
||||
${valid === false && 'bg-error text-neutral-content'}
|
||||
${valid === true && 'bg-success text-neutral-content'}
|
||||
${valid === '' && 'bg-base-200 text-base-content'}
|
||||
${valid === null && 'bg-base-200 text-base-content'}
|
||||
`}>
|
||||
cm
|
||||
</span>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue