@itwin/quantity-formatting-react
Version:
React components and utilities for quantity formatting
48 lines • 2.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
import { Format, FormatTraits, getTraitString } from "@itwin/core-quantity";
import { Checkbox, Label } from "@itwin/itwinui-react";
import { useTranslation } from "../../../useTranslation.js";
/** Component to show/edit Fraction Dash format trait.
* @internal
*/
export function FractionDash(props) {
const { formatProps, onChange } = props;
const { translate } = useTranslation();
const fractionDashId = React.useId();
const setFormatTrait = React.useCallback((trait, setActive) => {
const traitStr = getTraitString(trait);
let formatTraits = [traitStr];
if (setActive) {
// setting trait
if (formatProps.formatTraits) {
const traits = Array.isArray(formatProps.formatTraits)
? formatProps.formatTraits
: formatProps.formatTraits.split(/,|;|\|/);
formatTraits = [...traits, traitStr];
}
}
else {
// clearing trait
if (formatProps.formatTraits) {
const traits = Array.isArray(formatProps.formatTraits)
? formatProps.formatTraits
: formatProps.formatTraits.split(/,|;|\|/);
formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);
}
}
onChange({ ...formatProps, formatTraits });
}, [formatProps, onChange]);
const handleUseFractionDashChange = React.useCallback((e) => {
setFormatTrait(FormatTraits.FractionDash, e.target.checked);
}, [setFormatTrait]);
const isFormatTraitSet = React.useCallback((trait) => {
return Format.isFormatTraitSetInProps(formatProps, trait);
}, [formatProps]);
return (_jsxs("div", { className: "quantityFormat--formatInlineRow", children: [_jsx(Label, { displayStyle: "inline", htmlFor: fractionDashId, children: translate("QuantityFormat:labels.fractionDashLabel") }), _jsx(Checkbox, { id: fractionDashId, checked: isFormatTraitSet(FormatTraits.FractionDash), onChange: (e) => setFormatTrait(FormatTraits.FractionDash, e.target.checked) })] }));
}
//# sourceMappingURL=FractionDash.js.map