136 lines
4 KiB
JavaScript
136 lines
4 KiB
JavaScript
import { useState } from 'react'
|
|
import { ClearIcon, EditIcon } from 'shared/components/icons.mjs'
|
|
import { formatMm, round } from 'shared/utils.mjs'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
const EditOption = (props) => (
|
|
<div className="form-control mb-2 w-full">
|
|
<label className="label">
|
|
<span className="label-text text-base-content">
|
|
{props.min}
|
|
{props.suffix}
|
|
</span>
|
|
<span className="label-text font-bold text-base-content">
|
|
{props.value}
|
|
{props.suffix}
|
|
</span>
|
|
<span className="label-text text-base-content">
|
|
{props.max}
|
|
{props.suffix}
|
|
</span>
|
|
</label>
|
|
<label className="input-group input-group-sm">
|
|
<input
|
|
type="number"
|
|
className={`
|
|
input input-sm input-bordered grow text-base-content
|
|
`}
|
|
value={props.value}
|
|
onChange={props.handleChange}
|
|
/>
|
|
<span className="text-base-content font-bold">{props.suffix}</span>
|
|
</label>
|
|
</div>
|
|
)
|
|
|
|
export const DesignOptionPctDeg = (props) => {
|
|
const { t } = useTranslation(['app'])
|
|
const suffix = props.type === 'deg' ? '°' : '%'
|
|
const factor = props.type === 'deg' ? 1 : 100
|
|
const { max, min } = props.design.patternConfig.options[props.option]
|
|
const dflt = props.design.patternConfig.options[props.option][props.type || 'pct']
|
|
const val =
|
|
typeof props.gist?.options?.[props.option] === 'undefined'
|
|
? dflt
|
|
: props.gist.options[props.option] * factor
|
|
|
|
const [value, setValue] = useState(val)
|
|
const [editOption, setEditOption] = useState(false)
|
|
|
|
const handleChange = (evt) => {
|
|
const newVal = evt.target.value
|
|
setValue(newVal)
|
|
props.updateGist(['options', props.option], newVal / factor)
|
|
}
|
|
const reset = () => {
|
|
setValue(dflt)
|
|
props.unsetGist(['options', props.option])
|
|
}
|
|
|
|
return (
|
|
<div className="py-4 mx-6 border-l-2 pl-2">
|
|
<p className="m-0 p-0 px-2 mb-2 text-base-content opacity-60 italic">
|
|
{props.ot(`${props.option}.d`)}
|
|
</p>
|
|
<div className="flex flex-row justify-between">
|
|
{editOption ? (
|
|
<EditOption
|
|
value={value}
|
|
handleChange={handleChange}
|
|
min={min}
|
|
max={max}
|
|
setEditOption={setEditOption}
|
|
t={t}
|
|
suffix={suffix}
|
|
/>
|
|
) : (
|
|
<>
|
|
<span className="opacity-50">
|
|
{round(min)}
|
|
{suffix}
|
|
</span>
|
|
<span className={`font-bold ${val === dflt ? 'text-secondary' : 'text-accent'}`}>
|
|
{round(val)}
|
|
{suffix}
|
|
</span>
|
|
<span className="opacity-50">
|
|
{round(max)}
|
|
{suffix}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<input
|
|
type="range"
|
|
max={max}
|
|
min={min}
|
|
step={0.1}
|
|
value={value}
|
|
onChange={handleChange}
|
|
className={`
|
|
range range-sm mt-1
|
|
${val === dflt ? 'range-secondary' : 'range-accent'}
|
|
`}
|
|
/>
|
|
<div className="flex flex-row justify-between">
|
|
<span className={val === dflt ? 'text-secondary' : 'text-accent'}>
|
|
{props.design.patternConfig.options[props.option]?.toAbs && props.gist.measurements
|
|
? formatMm(
|
|
props.design.patternConfig.options[props.option].toAbs(value / 100, props.gist)
|
|
)
|
|
: ' '}
|
|
</span>
|
|
<div>
|
|
<button
|
|
title={t('reset')}
|
|
className="btn btn-ghost btn-xs text-accent"
|
|
disabled={val === dflt}
|
|
onClick={reset}
|
|
>
|
|
<ClearIcon />
|
|
</button>
|
|
<button
|
|
title={t('editThing', { thing: suffix })}
|
|
className={`
|
|
btn btn-ghost btn-xs hover:text-secondary-focus
|
|
${editOption ? 'text-accent' : 'text-secondary'}
|
|
`}
|
|
onClick={() => setEditOption(!editOption)}
|
|
>
|
|
<EditIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|