@itwin/presentation-components
Version:
React components based on iTwin.js Presentation library
90 lines • 4.41 kB
JavaScript
import { jsx as _jsx } 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 { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import { PropertyValueFormat, } from "@itwin/appui-abstract";
import { assert } from "@itwin/core-bentley";
import { Input } from "@itwin/itwinui-react";
import { useSchemaMetadataContext } from "../../common/SchemaMetadataContext.js";
import { NumericPropertyInput } from "./NumericPropertyInput.js";
import { useQuantityValueInput } from "./UseQuantityValueInput.js";
/** @internal */
export const QuantityPropertyEditorInput = forwardRef((props, ref) => {
const schemaMetadataContext = useSchemaMetadataContext();
if (
// eslint-disable-next-line @typescript-eslint/no-deprecated
(!props.propertyRecord.property.kindOfQuantityName && !props.propertyRecord.property.quantityType) ||
!schemaMetadataContext) {
return _jsx(NumericPropertyInput, { ...props, ref: ref });
}
// eslint-disable-next-line @typescript-eslint/no-deprecated
const koqName = props.propertyRecord.property.kindOfQuantityName ?? props.propertyRecord.property.quantityType;
assert(koqName !== undefined);
const initialValue = props.propertyRecord.value?.value;
return (_jsx(QuantityPropertyValueInput, { ...props, ref: ref, koqName: koqName, schemaContext: schemaMetadataContext.schemaContext, initialRawValue: initialValue }));
});
QuantityPropertyEditorInput.displayName = "QuantityPropertyEditorInput";
const QuantityPropertyValueInput = forwardRef(({ propertyRecord, onCommit, koqName, schemaContext, initialRawValue, setFocus, onCancel }, ref) => {
const property = propertyRecord.property;
const { quantityValue, inputProps } = useQuantityValueInput({
koqName,
schemaContext,
initialRawValue,
constraints: property.constraints,
});
const [isEditing, setEditing] = useState(false);
const value = isEditing ? quantityValue.highPrecisionFormattedValue : quantityValue.defaultFormattedValue;
const inputRef = useRef(null);
useImperativeHandle(ref, () => ({
getValue: () => ({
valueFormat: PropertyValueFormat.Primitive,
value: quantityValue.rawValue,
displayValue: quantityValue.defaultFormattedValue,
roundingError: quantityValue.roundingError,
}),
htmlElement: inputRef.current,
}), [quantityValue.defaultFormattedValue, quantityValue.rawValue, quantityValue.roundingError]);
const onBlur = () => {
onCommit &&
onCommit({
propertyRecord,
newValue: {
valueFormat: PropertyValueFormat.Primitive,
value: quantityValue.rawValue,
displayValue: quantityValue.defaultFormattedValue,
roundingError: quantityValue.roundingError,
},
});
};
useEffect(() => {
if (setFocus && !inputProps.disabled) {
inputRef.current && inputRef.current.focus();
}
}, [inputProps.disabled, setFocus]);
const handleKeyDown = (e) => {
if (e.key === "Escape") {
onCancel?.();
}
if (e.key === "Enter") {
inputRef.current?.blur();
e.stopPropagation();
}
};
return (_jsx(Input, { ...inputProps, value: value, size: "small", disabled: propertyRecord.isReadonly || inputProps.disabled, ref: inputRef, onBlur: () => {
onBlur();
setEditing(false);
}, onFocus: () => {
setEditing(true);
requestAnimationFrame(() => {
if (quantityValue.highPrecisionFormattedValue === inputProps.placeholder) {
inputRef.current?.setSelectionRange(0, 0);
return;
}
inputRef.current?.setSelectionRange(0, 9999);
});
}, onKeyDown: handleKeyDown }));
});
QuantityPropertyValueInput.displayName = "QuantityPropertyValueInput";
//# sourceMappingURL=QuantityPropertyEditorInput.js.map