@itwin/quantity-formatting-react
Version:
React components and utilities for quantity formatting
32 lines • 3.23 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Format, FormatTraits } from "@itwin/core-quantity";
import { FormatUnits } from "../internal/FormatUnits.js";
import { FormatTypeOption } from "../internal/misc/FormatType.js";
import { AppendUnitLabel, UomSeparatorSelector, } from "../internal/FormatUnitLabel.js";
import { FormatPrecision } from "../internal/FormatPrecision.js";
import { DecimalSeparator } from "../internal/DecimalSeparator.js";
import { Divider, Label, Text } from "@itwin/itwinui-react";
import { useTranslation } from "../../../useTranslation.js";
import { ShowTrailingZeros } from "../internal/ShowTrailingZeros.js";
import { SignOption } from "../internal/SignOption.js";
import { KeepDecimalPoint } from "../internal/KeepDecimalPoint.js";
import { KeepSingleZero } from "../internal/KeepSingleZero.js";
import { ZeroEmpty } from "../internal/ZeroEmpty.js";
import { ThousandsSeparatorSelector, UseThousandsSeparator, } from "../internal/ThousandsSeparator.js";
import "../FormatPanel.scss";
/** Primary children component for decimal format
* @internal
*/
export function DecimalPrimaryChildren(props) {
const { formatProps, onFormatChange, unitsProvider, persistenceUnit } = props;
const { translate } = useTranslation();
return (_jsxs("div", { className: "quantityFormat--formatPanel-primaryChildren", children: [_jsx("div", { className: "quantityFormat--formatTypeRow", children: _jsx(FormatTypeOption, { formatProps: formatProps, onChange: onFormatChange }) }), _jsx(Text, { variant: "small", isMuted: true, children: translate("QuantityFormat:labels.formatTypeSublabel") }), _jsx(Divider, { className: "quantityFormat-formatPanel-divider" }), _jsx(Label, { children: translate("QuantityFormat:labels.units") }), _jsx(FormatUnits, { unitsProvider: unitsProvider, persistenceUnit: persistenceUnit, initialFormat: formatProps, onUnitsChange: onFormatChange }), _jsx(Divider, {}), _jsx(AppendUnitLabel, { formatProps: formatProps, onFormatChange: onFormatChange }), Format.isFormatTraitSetInProps(formatProps, FormatTraits.ShowUnitLabel) && (_jsx(UomSeparatorSelector, { formatProps: formatProps, onFormatChange: onFormatChange })), _jsx(FormatPrecision, { formatProps: formatProps, onChange: onFormatChange })] }));
}
/** Secondary children component for decimal format
* @internal
*/
export function DecimalSecondaryChildren(props) {
const { formatProps, onFormatChange } = props;
return (_jsxs("div", { className: "quantityFormat--formatPanel-secondaryChildren", children: [_jsx(SignOption, { formatProps: formatProps, onChange: onFormatChange }), _jsx(DecimalSeparator, { formatProps: formatProps, onChange: onFormatChange }), _jsx(UseThousandsSeparator, { formatProps: formatProps, onChange: onFormatChange }), _jsx(ThousandsSeparatorSelector, { formatProps: formatProps, onChange: onFormatChange }), _jsx(KeepDecimalPoint, { formatProps: formatProps, onChange: onFormatChange }), _jsx(ShowTrailingZeros, { formatProps: formatProps, onChange: onFormatChange }), _jsx(KeepSingleZero, { formatProps: formatProps, onChange: onFormatChange }), _jsx(ZeroEmpty, { formatProps: formatProps, onChange: onFormatChange })] }));
}
//# sourceMappingURL=Decimal.js.map