@itwin/quantity-formatting-react
Version:
React components and utilities for quantity formatting
56 lines • 2.95 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 { Button, ButtonGroup, Label } from "@itwin/itwinui-react";
import { useTranslation } from "../../../useTranslation.js";
/** Component to provide preset station base factor and offset size combinations.
* Provides quick selection for common station configurations.
* @internal
*/
export function StationBaseFactorPreset(props) {
const { formatProps, onChange } = props;
const { translate } = useTranslation();
const currentBaseFactor = formatProps.stationBaseFactor ?? 1;
const currentOffsetSize = formatProps.stationOffsetSize ?? 2;
// Determine which preset is currently active
const activePreset = React.useMemo(() => {
if (currentOffsetSize === 2 && currentBaseFactor === 1)
return "100";
if (currentOffsetSize === 2 && currentBaseFactor === 5)
return "500";
if (currentOffsetSize === 3 && currentBaseFactor === 1)
return "1000";
return undefined;
}, [currentOffsetSize, currentBaseFactor]);
const handlePresetChange = React.useCallback((preset) => {
let newOffsetSize;
let newBaseFactor;
switch (preset) {
case "100":
newOffsetSize = 2;
newBaseFactor = 1;
break;
case "500":
newOffsetSize = 2;
newBaseFactor = 5;
break;
case "1000":
newOffsetSize = 3;
newBaseFactor = 1;
break;
default:
return;
}
const newFormatProps = {
...formatProps,
stationOffsetSize: newOffsetSize,
stationBaseFactor: newBaseFactor,
};
onChange(newFormatProps);
}, [formatProps, onChange]);
return (_jsxs("div", { className: "quantityFormat--formatInlineRow", children: [_jsx(Label, { displayStyle: "inline", children: translate("QuantityFormat:labels.stationPresetLabel") }), _jsxs(ButtonGroup, { children: [_jsx(Button, { onClick: () => handlePresetChange("100"), styleType: activePreset === "100" ? "cta" : "default", size: "small", children: "100" }), _jsx(Button, { onClick: () => handlePresetChange("500"), styleType: activePreset === "500" ? "cta" : "default", size: "small", children: "500" }), _jsx(Button, { onClick: () => handlePresetChange("1000"), styleType: activePreset === "1000" ? "cta" : "default", size: "small", children: "1000" })] })] }));
}
//# sourceMappingURL=StationBaseFactorPreset.js.map