@itwin/quantity-formatting-react
Version:
React components and utilities for quantity formatting
79 lines • 4.9 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { useTranslation } from "../../../useTranslation.js";
import { SvgHelpCircularHollow } from "@itwin/itwinui-icons-react";
import { Checkbox, IconButton, Input, Label, LabeledSelect, } from "@itwin/itwinui-react";
import { getUnitName } from "./misc/UnitDescr.js";
/**
* Non-exported component for selecting azimuth base unit.
*/
function AzimuthBaseUnitSelector(props) {
const { currentUnit, unitsProvider, onChange } = props;
const { translate } = useTranslation();
const [unitOptions, setUnitOptions] = React.useState([
{ value: currentUnit, label: currentUnit },
]);
React.useEffect(() => {
let disposed = false;
const loadUnitOptions = async () => {
try {
// Find the current unit to get its phenomenon (family)
const baseUnit = await unitsProvider.findUnitByName(currentUnit);
if (baseUnit) {
// Get all units in the same family
const familyUnits = await unitsProvider.getUnitsByFamily(baseUnit.phenomenon);
const options = familyUnits
.map((unit) => ({
value: unit.name,
label: getUnitName(unit.name),
}))
.sort((a, b) => a.label.localeCompare(b.label));
if (disposed)
return;
setUnitOptions(options);
}
}
catch (error) {
// Fallback to current unit if there's an error
console.warn("Failed to load unit family:", error);
setUnitOptions([{ value: currentUnit, label: currentUnit }]);
}
};
void loadUnitOptions();
return () => {
disposed = true;
};
}, [currentUnit, unitsProvider]);
return (_jsx("div", { className: "quantityFormat--formatInlineRow", children: _jsx(LabeledSelect, { label: _jsxs(_Fragment, { children: [translate("QuantityFormat:labels.azimuthBaseUnit"), _jsx(IconButton, { size: "small", styleType: "borderless", label: translate("QuantityFormat:azimuthType.baseUnitTooltip"), children: _jsx(SvgHelpCircularHollow, {}) })] }), value: currentUnit, options: unitOptions, onChange: (value) => onChange(value), size: "small", displayStyle: "inline" }) }));
}
/**
* Component used to customize Azimuth options of a Format ().
* @alpha
*/
export function AzimuthOptions(props) {
const { formatProps, onChange, unitsProvider } = props;
const { translate } = useTranslation();
const baseInputId = React.useId();
const ccwCheckboxId = React.useId();
const handleAzimuthBaseChange = React.useCallback((value) => {
const newFormatProps = { ...formatProps, azimuthBase: value };
onChange(newFormatProps);
}, [formatProps, onChange]);
/** Disable commas and letters */
const onKeyDown = (event) => {
const isLetter = /^[a-zA-Z]$/.test(event.key);
if (event.key === "," || isLetter) {
event.preventDefault();
}
};
const handleInputChange = React.useCallback((e) => {
const numValue = Number(e.target.value);
if (isNaN(numValue)) {
e.preventDefault();
return;
}
handleAzimuthBaseChange(numValue);
}, [handleAzimuthBaseChange]);
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "quantityFormat--formatInlineRow", children: [_jsx(Label, { htmlFor: ccwCheckboxId, displayStyle: "inline", children: translate("QuantityFormat:labels.azimuthCounterClockwise") }), _jsx(IconButton, { size: "small", styleType: "borderless", label: translate("QuantityFormat:azimuthType.ccwFlagTooltip"), children: _jsx(SvgHelpCircularHollow, {}) }), _jsx(Checkbox, { id: ccwCheckboxId, checked: formatProps.azimuthCounterClockwise ?? false, onChange: (event) => onChange({ ...formatProps, azimuthCounterClockwise: event.target.checked }) })] }), _jsx(AzimuthBaseUnitSelector, { currentUnit: formatProps.azimuthBaseUnit ?? "Units.ARC_DEG", unitsProvider: unitsProvider, onChange: (value) => onChange({ ...formatProps, azimuthBaseUnit: value }) }), _jsxs("div", { className: "quantityFormat--formatInlineRow", children: [_jsx(Label, { htmlFor: baseInputId, displayStyle: "inline", children: translate("QuantityFormat:labels.azimuthBase") }), _jsx(IconButton, { size: "small", styleType: "borderless", label: translate("QuantityFormat:azimuthType.baseTooltip"), children: _jsx(SvgHelpCircularHollow, {}) }), _jsx(Input, { id: baseInputId, type: "number", value: formatProps.azimuthBase?.toString() ?? "0", onKeyDown: onKeyDown, onChange: handleInputChange, size: "small" })] })] }));
}
//# sourceMappingURL=AzimuthOptions.js.map