@itwin/quantity-formatting-react
Version:
React components and utilities for quantity formatting
72 lines • 4.04 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 "./FormatPanel.scss";
import * as React from "react";
import { Button, ButtonGroup, Flex } from "@itwin/itwinui-react";
import { useTranslation } from "../../useTranslation.js";
import { FormatPanel } from "./FormatPanel.js";
import { FormatSample } from "./FormatSample.js";
/** Quantity Format Panel that uses the new FormatPanel structure
* @beta
*/
export function QuantityFormatPanel(props) {
const { formatDefinition, unitsProvider, onFormatChange, showSample = true, } = props;
const { translate } = useTranslation();
// Clone the formatDefinition to work with internally
const [clonedFormatDefinition, setClonedFormatDefinition] = React.useState(() => ({ ...formatDefinition }));
const [saveEnabled, setSaveEnabled] = React.useState(false);
const [persistenceUnit, setPersistenceUnit] = React.useState(undefined);
// Update the cloned format definition when the prop changes
React.useEffect(() => {
setClonedFormatDefinition({ ...formatDefinition });
setSaveEnabled(false);
}, [formatDefinition]);
// Generate persistenceUnit from first composite unit
React.useEffect(() => {
let disposed = false;
const loadPersistenceUnit = async () => {
if (clonedFormatDefinition.composite &&
clonedFormatDefinition.composite.units &&
clonedFormatDefinition.composite.units.length > 0) {
const firstUnitName = clonedFormatDefinition.composite.units[0].name;
try {
const unit = await unitsProvider.findUnitByName(firstUnitName);
if (disposed)
return;
setPersistenceUnit(unit);
}
catch {
if (disposed)
return;
setPersistenceUnit(undefined);
}
}
else {
if (disposed)
return;
setPersistenceUnit(undefined);
}
};
void loadPersistenceUnit();
return () => {
disposed = true;
};
}, [clonedFormatDefinition.composite, unitsProvider]);
const handleOnFormatChanged = React.useCallback(async (newProps) => {
setClonedFormatDefinition(newProps);
setSaveEnabled(true);
}, []);
const handleSave = React.useCallback(() => {
onFormatChange && onFormatChange(clonedFormatDefinition);
setSaveEnabled(false);
}, [onFormatChange, clonedFormatDefinition]);
const handleClear = React.useCallback(() => {
setClonedFormatDefinition({ ...formatDefinition });
setSaveEnabled(false);
}, [formatDefinition]);
return (_jsxs("div", { className: "components-quantityFormat-quantityPanel", children: [showSample && (_jsx(FormatSample, { formatProps: clonedFormatDefinition, unitsProvider: unitsProvider, persistenceUnit: persistenceUnit, initialMagnitude: props.initialMagnitude ?? 1234.5678 })), _jsx(FormatPanel, { formatProps: clonedFormatDefinition, unitsProvider: unitsProvider, onFormatChange: handleOnFormatChanged, persistenceUnit: persistenceUnit }), _jsx(Flex, { justifyContent: "flex-end", gap: "xs", children: _jsxs(ButtonGroup, { children: [_jsx(Button, { styleType: "default", onClick: handleClear, disabled: !saveEnabled, children: translate("QuantityFormat:labels.clear") }), _jsx(Button, { styleType: "high-visibility", onClick: handleSave, disabled: !saveEnabled, children: translate("QuantityFormat:labels.save") })] }) })] }));
}
//# sourceMappingURL=QuantityFormatPanel.js.map