feat(lab): Added tests/sampling
This commit is contained in:
Joost De Cock
parent
a8e453d2de
commit
a706e3cac2
9 changed files with 127 additions and 149 deletions
|
|
@ -5,7 +5,7 @@ import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbenc
|
|||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
const DesignOptions = props => {
|
||||
const { t } = useTranslation(['app'])
|
||||
const { t } = useTranslation(['workbench'])
|
||||
|
||||
return (
|
||||
<Details open>
|
||||
|
|
|
|||
|
|
@ -1,129 +1,66 @@
|
|||
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 { linkClasses } from 'shared/components/navigation/primary.js'
|
||||
import { Li, Ul, Details, Summary, 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 SumButton = props => (
|
||||
<button className={`
|
||||
flex flex-row
|
||||
px-2
|
||||
w-full justify-between
|
||||
text-left
|
||||
text-base-content
|
||||
sm:text-neutral-content
|
||||
hover:cursor-pointer
|
||||
items-center
|
||||
mr-4
|
||||
`} onClick={props.onClick}>{props.children}</button>
|
||||
)
|
||||
const SumDiv = (props) => (
|
||||
<div className={`
|
||||
grow pl-2 border-l-2
|
||||
${linkClasses}
|
||||
hover:cursor-resize
|
||||
hover:border-secondary
|
||||
sm:hover:border-secondary-focus
|
||||
text-base-content sm:text-neutral-content
|
||||
${props.active && 'border-secondary-focus'}
|
||||
|
||||
`}>{props.children}</div>
|
||||
)
|
||||
|
||||
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 { t } = useTranslation([`o_${props.pattern.config.name}`, 'workbench'])
|
||||
const active = (
|
||||
props.gist.sample?.type === 'option' &&
|
||||
props.gist.sample?.option === props.option
|
||||
)
|
||||
|
||||
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>
|
||||
)
|
||||
return (
|
||||
<Li>
|
||||
<SumButton onClick={() => props.updateGist(
|
||||
['sample'],
|
||||
{
|
||||
type: 'option',
|
||||
option: props.option
|
||||
}
|
||||
)}>
|
||||
<SumDiv active={active}>
|
||||
<span className={`
|
||||
text-3xl inline-block p-0 leading-3 px-2
|
||||
${active
|
||||
? 'text-secondary sm:text-secondary-focus translate-y-1 font-bold'
|
||||
: 'translate-y-3'
|
||||
}`}
|
||||
>
|
||||
{active ? <span>•</span> : <span>°</span>}
|
||||
</span>
|
||||
<span className={active ? 'text-secondary font-bold' : ''}>
|
||||
{t(`o_${props.pattern.config.name}:${props.option}.t`)}
|
||||
</span>
|
||||
</SumDiv>
|
||||
</SumButton>
|
||||
</Li>
|
||||
)
|
||||
}
|
||||
|
||||
export default Option
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ const View = props => {
|
|||
<span className={`
|
||||
text-3xl mr-2 inline-block p-0 leading-3
|
||||
${entry.name === props.gist?._state?.view
|
||||
? 'text-secondary sm:text-secondary-focus translate-y-1'
|
||||
? 'text-secondary sm:text-secondary-focus translate-y-1 font-bold'
|
||||
: 'translate-y-3'
|
||||
}
|
||||
`}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue