@itwin/quantity-formatting-react
Version:
React components and utilities for quantity formatting
72 lines • 3.87 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, LabeledSelect } from "@itwin/itwinui-react";
import { useTranslation } from "../../../useTranslation.js";
/** Component to set the unit of measure separator.
* @internal
*/
export function UomSeparatorSelector(props) {
const { formatProps, onFormatChange } = props;
const { translate } = useTranslation();
const separatorOptions = React.useMemo(() => {
const uomDefaultEntries = [
{ value: "", label: translate("QuantityFormat:none") },
{ value: " ", label: translate("QuantityFormat:space") },
{ value: "-", label: translate("QuantityFormat:dash") },
];
const completeListOfEntries = [];
const separator = formatProps.uomSeparator ?? "";
if (separator.length > 0) {
// if the separator is not in the default list, add it
if (undefined ===
uomDefaultEntries.find((option) => option.value === separator)) {
completeListOfEntries.push({ value: separator, label: separator });
}
}
completeListOfEntries.push(...uomDefaultEntries);
return completeListOfEntries;
}, [formatProps.uomSeparator, translate]);
return (_jsx("div", { className: "quantityFormat--formatInlineRow", children: _jsx(LabeledSelect, { label: translate("QuantityFormat:labels.labelSeparator"), options: separatorOptions, value: formatProps.uomSeparator ?? "", onChange: (value) => onFormatChange({ ...formatProps, uomSeparator: value }), size: "small", displayStyle: "inline" }) }));
}
/** Component to set the append unit label flag.
* @internal
*/
export function AppendUnitLabel(props) {
const { formatProps, onFormatChange } = props;
const { translate } = useTranslation();
const appendUnitLabelId = React.useId();
const setFormatTrait = React.useCallback((trait, setActive) => {
if (setActive) {
const newFormatProps = {
...formatProps,
formatTraits: formatProps.formatTraits
? [...formatProps.formatTraits, getTraitString(trait)]
: [getTraitString(trait)],
};
onFormatChange(newFormatProps);
}
else {
const formatTraits = formatProps.formatTraits;
if (Array.isArray(formatTraits)) {
const newFormatProps = {
...formatProps,
formatTraits: formatTraits.filter((entry) => entry !== getTraitString(trait)),
};
onFormatChange(newFormatProps);
}
else {
onFormatChange({ ...formatProps, formatTraits: [] });
}
}
}, [formatProps, onFormatChange]);
const isFormatTraitSet = React.useCallback((trait) => {
return Format.isFormatTraitSetInProps(formatProps, trait);
}, [formatProps]);
return (_jsxs("div", { className: "quantityFormat--formatInlineRow quantityFormat--appendUnitLabel", children: [_jsx(Label, { htmlFor: appendUnitLabelId, children: translate("QuantityFormat:labels.appendUnitLabel") }), _jsx(Checkbox, { id: appendUnitLabelId, checked: isFormatTraitSet(FormatTraits.ShowUnitLabel), onChange: (e) => setFormatTrait(FormatTraits.ShowUnitLabel, e.target.checked) })] }));
}
//# sourceMappingURL=FormatUnitLabel.js.map