@itwin/quantity-formatting-react
Version:
React components and utilities for quantity formatting
40 lines • 2.13 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 } from "@itwin/core-quantity";
import { Label } from "@itwin/itwinui-react";
import { DecimalSeparatorSelector } from "./misc/DecimalSeparator.js";
import { useTranslation } from "../../../useTranslation.js";
/** Component to show/edit decimal separator.
* @internal
*/
export function DecimalSeparator(props) {
const { formatProps, onChange } = props;
const { translate } = useTranslation();
const decimalSeparatorSelectorId = React.useId();
const handleDecimalSeparatorChange = React.useCallback((decimalSeparator) => {
let thousandSeparator = formatProps.thousandSeparator;
// make sure 1000 and decimal separator do not match
if (Format.isFormatTraitSetInProps(formatProps, FormatTraits.Use1000Separator)) {
switch (decimalSeparator) {
case ".":
thousandSeparator = ",";
break;
case ",":
thousandSeparator = ".";
break;
}
}
const newFormatProps = {
...formatProps,
thousandSeparator,
decimalSeparator,
};
onChange(newFormatProps);
}, [formatProps, onChange]);
return (_jsxs("div", { className: "quantityFormat--formatInlineRow", children: [_jsx(Label, { displayStyle: "inline", id: decimalSeparatorSelectorId, children: translate("QuantityFormat:labels.decimalSeparatorLabel") }), _jsx(DecimalSeparatorSelector, { separator: formatProps.decimalSeparator ?? ".", onChange: handleDecimalSeparatorChange, "aria-labelledby": decimalSeparatorSelectorId })] }));
}
//# sourceMappingURL=DecimalSeparator.js.map