89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
|
import React, { useState } from 'react'
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This is a single input for a measurements
|
||
|
|
* Note that it keeps local state with whatever the user types
|
||
|
|
* but will only trigger a gist update if the input is valid.
|
||
|
|
*
|
||
|
|
* m holds the measurement name. It's just so long to type
|
||
|
|
* measurement and I always have some typo in it because dyslexia.
|
||
|
|
*/
|
||
|
|
const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
|
||
|
|
const prefix = (app.site === 'org') ? '' : 'https://freesewing.org'
|
||
|
|
const title = app.t(`measurements.${m}`)
|
||
|
|
console.log('render', m)
|
||
|
|
const isValid = input => {
|
||
|
|
if (input === null || input === '') return null
|
||
|
|
return !isNaN(input)
|
||
|
|
}
|
||
|
|
|
||
|
|
const update = evt => {
|
||
|
|
setVal(evt.target.value)
|
||
|
|
const ok = isValid(evt.target.value)
|
||
|
|
console.log({ok})
|
||
|
|
if (ok) {
|
||
|
|
setValid(true)
|
||
|
|
updateMeasurements(evt.target.value, m)
|
||
|
|
} else setValid(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
const [val, setVal] = useState(gist?.measurements?.[m] || null)
|
||
|
|
const [valid, setValid] = useState(typeof gist?.measurements?.[m] === 'undefined'
|
||
|
|
? null :
|
||
|
|
isValid(gist.measurements[m])
|
||
|
|
)
|
||
|
|
|
||
|
|
if (!m) return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="form-control mb-2" key={`wrap-${m}`}>
|
||
|
|
<label className="label">
|
||
|
|
<span className="label-text font-bold text-xl">{title}</span>
|
||
|
|
<a
|
||
|
|
href={`${prefix}/docs/measurements/${m.toLowerCase()}`}
|
||
|
|
className="label-text-alt text-secondary hover:text-secondary-focus hover:underline"
|
||
|
|
title={`${app.t('docs')}: ${app.t(`measurements.${m}`)}`}
|
||
|
|
tabIndex="-1"
|
||
|
|
>
|
||
|
|
{app.t('docs')}
|
||
|
|
</a>
|
||
|
|
</label>
|
||
|
|
<label className="input-group input-group-lg">
|
||
|
|
<input
|
||
|
|
key={`input-${m}`}
|
||
|
|
type="text"
|
||
|
|
placeholder={title}
|
||
|
|
className={`
|
||
|
|
input input-lg input-bordered grow text-base-content
|
||
|
|
${valid === false && 'input-error'}
|
||
|
|
${valid === true && 'input-success'}
|
||
|
|
`}
|
||
|
|
value={val}
|
||
|
|
onChange={update}
|
||
|
|
/>
|
||
|
|
<span className={`
|
||
|
|
${valid === false && 'bg-error text-neutral-content'}
|
||
|
|
${valid === true && 'bg-success text-neutral-content'}
|
||
|
|
${valid === null && 'bg-base-200 text-base-content'}
|
||
|
|
`}>
|
||
|
|
cm
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
<label className="label">
|
||
|
|
<span className="label-text-alt">
|
||
|
|
{valid === null
|
||
|
|
? ''
|
||
|
|
: valid
|
||
|
|
? 'Looks good'
|
||
|
|
: 'Invalid'
|
||
|
|
}
|
||
|
|
{val}
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MeasurementInput
|
||
|
|
|