UNPKG

@itwin/quantity-formatting-react

Version:

React components and utilities for quantity formatting

32 lines 3.23 kB
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