631ea8a50d
When using toAbs for all but the most trivial cases, one needs access to the options. Unlike measurements which are always there, options aren't always set since they are only set when they differ from the default. This would shift a lot of responsibility on the pattern designer who would have to check whether an option is set, and if it's not use the default which in turn depends on what type of an option it is (and it's pct for example you have to remember to divide it by 100 and so on). This feels footgun-y so instead I've added a `mergeOptions` method that merges the options passed by the user with the defaults from the pattern config so that you have a simple object with all option values. This should get passed to `toAbs()` as the 3rd parameter.
55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
import { formatMm, formatPercentage } from 'shared/utils.mjs'
|
|
import { ListValue, HighlightedValue, PlainValue, BoolValue } from '../shared/values'
|
|
import { mergeOptions } from '@freesewing/core'
|
|
|
|
/** Displays the current percentatge value, and the absolute value if configured */
|
|
export const PctOptionValue = ({ config, current, settings, changed, patternConfig }) => {
|
|
const val = changed ? current : config.pct / 100
|
|
|
|
return (
|
|
<HighlightedValue changed={changed}>
|
|
{formatPercentage(val)}
|
|
{config.toAbs && settings.measurements
|
|
? ` | ${formatMm(
|
|
config.toAbs(val, settings, mergeOptions(settings, patternConfig.options))
|
|
)}`
|
|
: null}
|
|
</HighlightedValue>
|
|
)
|
|
}
|
|
|
|
/** Displays a count value*/
|
|
export const CountOptionValue = ({ config, current, changed }) => (
|
|
<PlainValue {...{ current, changed, dflt: config.count }} />
|
|
)
|
|
|
|
/** Displays a list option value */
|
|
export const ListOptionValue = (props) => (
|
|
<ListValue {...props} t={(input) => props.t(`${props.name}.o.${input}`)} />
|
|
)
|
|
|
|
/** Displays a degree value */
|
|
export const DegOptionValue = ({ config, current, changed }) => (
|
|
<HighlightedValue changed={changed}> {changed ? current : config.deg}°</HighlightedValue>
|
|
)
|
|
|
|
/** Displays the MmOptions are not supported */
|
|
export const MmOptionValue = () => (
|
|
<span className="text-error">FIXME: No Mm Options are not supported</span>
|
|
)
|
|
|
|
/** Displays that constant values are not implemented in the front end */
|
|
export const ConstantOptionValue = () => (
|
|
<span className="text-error">FIXME: No ConstantOptionvalue implemented</span>
|
|
)
|
|
|
|
// Facilitate lookup of the value component
|
|
export const values = {
|
|
bool: BoolValue,
|
|
constant: ConstantOptionValue,
|
|
count: CountOptionValue,
|
|
deg: DegOptionValue,
|
|
list: ListOptionValue,
|
|
mm: MmOptionValue,
|
|
pct: PctOptionValue,
|
|
}
|