129 lines
4.1 KiB
JavaScript
129 lines
4.1 KiB
JavaScript
import { Chevron } from 'shared/components/navigation/primary.js'
|
|
import PctDegOption from 'shared/components/workbench/inputs/design-option-pct-deg'
|
|
import CountOption from 'shared/components/workbench/inputs/design-option-count'
|
|
import ListOption from 'shared/components/workbench/inputs/design-option-list'
|
|
import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
|
|
import { Li, Ul, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
const values = {
|
|
pct: props => {
|
|
const val = (typeof props.gist?.options?.[props.option] === 'undefined')
|
|
? props.pattern.config.options[props.option].pct/100
|
|
: props.gist.options[props.option]
|
|
return (
|
|
<span className={
|
|
val=== props.pattern.config.options[props.option].pct/100
|
|
? 'text-secondary-focus'
|
|
: 'text-accent'
|
|
}>
|
|
{formatPercentage(val)}
|
|
{props.pattern.config.options[props.option]?.toAbs
|
|
? ' | ' +formatMm(props.pattern.config.options[props.option]?.toAbs(val, props.gist))
|
|
: null
|
|
}
|
|
</span>
|
|
)
|
|
},
|
|
bool: props => {
|
|
const { t } = useTranslation(['app'])
|
|
const dflt = props.pattern.config.options[props.option].bool
|
|
const current = props.gist?.options?.[props.option]
|
|
return (
|
|
<span className={
|
|
(dflt==current || typeof current === 'undefined')
|
|
? 'text-secondary-focus'
|
|
: 'text-accent'
|
|
}>
|
|
{props.gist?.options?.[props.option]
|
|
? t('yes')
|
|
: t('no')
|
|
}
|
|
</span>
|
|
)
|
|
},
|
|
count: props => {
|
|
const dflt = props.pattern.config.options[props.option].count
|
|
const current = props.gist?.options?.[props.option]
|
|
return (dflt==current || typeof current === 'undefined')
|
|
? <span className="text-secondary-focus">{dflt}</span>
|
|
: <span className="text-accent">{current}</span>
|
|
},
|
|
list: props => {
|
|
const dflt = props.pattern.config.options[props.option].dflt
|
|
const current = props.gist?.options?.[props.option]
|
|
const prefix = `${props.option}.o.`
|
|
return (dflt==current || typeof current === 'undefined')
|
|
? <span className="text-secondary-focus">{props.t(prefix+dflt)}</span>
|
|
: <span className="text-accent">{props.t(prefix+current)}</span>
|
|
},
|
|
deg: props => {
|
|
const dflt = props.pattern.config.options[props.option].deg
|
|
const current = props.gist?.options?.[props.option]
|
|
return (dflt==current || typeof current === 'undefined')
|
|
? <span className="text-secondary-focus">{dflt}°</span>
|
|
: <span className="text-accent">{current}°</span>
|
|
},
|
|
mm: props => {
|
|
return <p>No mm val yet</p>
|
|
},
|
|
constant: props => {
|
|
return <p>No constant val yet</p>
|
|
},
|
|
}
|
|
|
|
const Tmp = props => <p>not yet</p>
|
|
|
|
const inputs = {
|
|
pct: PctDegOption,
|
|
count: CountOption,
|
|
deg: props => <PctDegOption {...props} type='deg' />,
|
|
list: ListOption,
|
|
mm: <p>Mm options are not supported. Please report this.</p>,
|
|
constant: Tmp,
|
|
}
|
|
|
|
|
|
const Option = props => {
|
|
const { t } = useTranslation([`o_${props.pattern.config.name}`])
|
|
const type = optionType(props.pattern.config.options[props.option])
|
|
const Input = inputs[type]
|
|
const Value = values[type]
|
|
|
|
const toggleBoolean = () => {
|
|
const dflt = props.pattern.config.options[props.option].bool
|
|
const current = props.gist?.options?.[props.option]
|
|
if (typeof current === 'undefined')
|
|
props.updateGist(['options', props.option], !dflt)
|
|
else props.unsetGist(['options', props.option])
|
|
}
|
|
|
|
return (type === 'bool')
|
|
? (
|
|
<Li>
|
|
<SumButton onClick={toggleBoolean}>
|
|
<SumDiv>
|
|
<Deg />
|
|
<span>{t(`${props.option}.t`) }</span>
|
|
</SumDiv>
|
|
<Value type={type} {...props} t={t} />
|
|
</SumButton>
|
|
</Li>
|
|
) : (
|
|
<Li>
|
|
<Details>
|
|
<Summary>
|
|
<SumDiv>
|
|
<Deg />
|
|
<span>{t(`${props.option}.t`)}</span>
|
|
</SumDiv>
|
|
<Value type={type} {...props} t={t} />
|
|
<Chevron w={6} m={3}/>
|
|
</Summary>
|
|
<Input {...props} ot={t} />
|
|
</Details>
|
|
</Li>
|
|
)
|
|
}
|
|
|
|
export default Option
|