69 lines
2 KiB
JavaScript
69 lines
2 KiB
JavaScript
import { useState } from 'react'
|
|
import ClearIcon from 'shared/components/icons/clear.js'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
const DesignOptionList = props => {
|
|
const { t } = useTranslation([`o_${props.design.config.data.name}`])
|
|
const { dflt, list, doNotTranslate=false } = props.design.config.options[props.option]
|
|
const val = (typeof props.gist?.options?.[props.option] === 'undefined')
|
|
? dflt
|
|
: props.gist.options[props.option]
|
|
|
|
const [value, setValue] = useState(val)
|
|
|
|
const handleChange = (newVal) => {
|
|
if (newVal === dflt) reset()
|
|
else {
|
|
setValue(newVal)
|
|
props.updateGist(['options', props.option], newVal)
|
|
}
|
|
}
|
|
const reset = () => {
|
|
setValue(dflt)
|
|
props.unsetGist(['options', props.option])
|
|
}
|
|
|
|
return (
|
|
<div className="py-4 mx-6 border-l-2 pl-2">
|
|
<div className="flex flex-row">
|
|
<div className="grow">
|
|
{list.map(choice => (
|
|
<button key={choice}
|
|
onClick={() => handleChange(choice)}
|
|
className={`
|
|
mr-1 mb-1 text-left text-lg w-full
|
|
${choice === value
|
|
? choice === dflt
|
|
? 'text-secondary'
|
|
: 'text-accent'
|
|
: 'text-base-content'
|
|
}
|
|
`}
|
|
>
|
|
<span className={`
|
|
text-3xl mr-2 inline-block p-0 leading-3
|
|
translate-y-3
|
|
`}>
|
|
<>°</>
|
|
</span>
|
|
{doNotTranslate
|
|
? choice
|
|
: props.ot(`o_${props.design.config.data.name}:${props.option}.o.${choice}`)
|
|
}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button
|
|
title={t('reset')}
|
|
className=""
|
|
disabled={val === dflt}
|
|
onClick={reset}
|
|
>
|
|
<span className={val===dflt ? 'text-base' : 'text-accent'}><ClearIcon /></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DesignOptionList
|