@itwin/presentation-components
Version:
React components based on iTwin.js Presentation library
100 lines • 4.64 kB
JavaScript
;
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.useQuantityValueInput = useQuantityValueInput;
const react_1 = require("react");
const core_bentley_1 = require("@itwin/core-bentley");
const core_frontend_1 = require("@itwin/core-frontend");
const presentation_common_1 = require("@itwin/presentation-common");
const Utils_js_1 = require("./Utils.js");
const PLACEHOLDER_RAW_VALUE = 12.34;
/**
* Custom hook that manages state for quantity values input.
* @internal
*/
function useQuantityValueInput({ initialRawValue, schemaContext, koqName }) {
const initialRawValueRef = (0, react_1.useRef)(initialRawValue);
const [{ quantityValue, placeholder }, setState] = (0, react_1.useState)(() => ({
quantityValue: {
rawValue: initialRawValueRef.current,
formattedValue: "",
roundingError: undefined,
},
placeholder: "",
}));
const { formatter, parser } = useFormatterAndParser(koqName, schemaContext);
(0, react_1.useEffect)(() => {
if (!formatter || !parser) {
return;
}
setState((prev) => {
const newPlaceholder = formatter.applyFormatting(initialRawValueRef.current ?? PLACEHOLDER_RAW_VALUE);
const newFormattedValue = prev.quantityValue.rawValue !== undefined ? formatter.applyFormatting(prev.quantityValue.rawValue) : "";
const roundingError = (0, Utils_js_1.getPersistenceUnitRoundingError)(newFormattedValue, parser);
return {
...prev,
quantityValue: {
...prev.quantityValue,
formattedValue: newFormattedValue,
roundingError,
},
placeholder: newPlaceholder,
};
});
}, [formatter, parser]);
const onChange = (e) => {
(0, core_bentley_1.assert)(parser !== undefined); // input should be disabled if parser is `undefined`
const newValue = e.currentTarget.value;
const parseResult = parser.parseToQuantityValue(newValue);
const roundingError = (0, Utils_js_1.getPersistenceUnitRoundingError)(newValue, parser);
setState((prev) => ({
...prev,
quantityValue: {
formattedValue: newValue,
rawValue: parseResult.ok ? parseResult.value : undefined,
roundingError: parseResult.ok ? roundingError : undefined,
},
}));
};
return {
quantityValue,
inputProps: {
onChange,
placeholder,
value: quantityValue.formattedValue,
disabled: !formatter || !parser,
},
};
}
function useFormatterAndParser(koqName, schemaContext) {
const [state, setState] = (0, react_1.useState)();
(0, react_1.useEffect)(() => {
const findFormatterAndParser = async () => {
// eslint-disable-next-line @typescript-eslint/no-deprecated
const koqFormatter = new presentation_common_1.KoqPropertyValueFormatter(schemaContext, undefined, core_frontend_1.IModelApp.formatsProvider);
const formatterSpec = await koqFormatter.getFormatterSpec({ koqName, unitSystem: core_frontend_1.IModelApp.quantityFormatter.activeUnitSystem });
const parserSpec = await koqFormatter.getParserSpec({ koqName, unitSystem: core_frontend_1.IModelApp.quantityFormatter.activeUnitSystem });
if (formatterSpec && parserSpec) {
setState({ formatterSpec, parserSpec });
return;
}
setState(undefined);
};
void findFormatterAndParser();
const listeners = [core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(findFormatterAndParser)];
if (core_frontend_1.IModelApp.formatsProvider) {
listeners.push(core_frontend_1.IModelApp.formatsProvider.onFormatsChanged.addListener(findFormatterAndParser));
}
return () => {
listeners.forEach((listener) => listener());
};
}, [koqName, schemaContext]);
return {
formatter: state?.formatterSpec,
parser: state?.parserSpec,
};
}
//# sourceMappingURL=UseQuantityValueInput.js.map