@itwin/presentation-components
Version:
React components based on iTwin.js Presentation library
82 lines • 5.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NavigationPropertyTargetSelector = void 0;
exports.ReadonlyNavigationPropertyTarget = ReadonlyNavigationPropertyTarget;
const jsx_runtime_1 = require("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.
*--------------------------------------------------------------------------------------------*/
require("./NavigationPropertyTargetSelector.scss");
const react_1 = require("react");
const appui_abstract_1 = require("@itwin/appui-abstract");
const components_react_1 = require("@itwin/components-react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const presentation_common_1 = require("@itwin/presentation-common");
const Utils_js_1 = require("../../common/Utils.js");
const ItemsLoader_js_1 = require("./ItemsLoader.js");
const UseNavigationPropertyTargetsLoader_js_1 = require("./UseNavigationPropertyTargetsLoader.js");
/** @internal */
exports.NavigationPropertyTargetSelector = (0, react_1.forwardRef)((props, ref) => {
const { imodel, getNavigationPropertyInfo, propertyRecord, onCommit } = props;
const [selectedTarget, setSelectedTarget] = (0, react_1.useState)(() => getNavigationTargetFromPropertyRecord(propertyRecord));
const [searchInput, setSearchInput] = (0, react_1.useState)();
const targetsRuleset = (0, UseNavigationPropertyTargetsLoader_js_1.useNavigationPropertyTargetsRuleset)(getNavigationPropertyInfo, propertyRecord.property);
const { selectOptions, loadedOptions, isLoading } = (0, UseNavigationPropertyTargetsLoader_js_1.useNavigationPropertyTargetsLoader)({
imodel,
ruleset: targetsRuleset,
filterText: searchInput,
initialSelectedTarget: selectedTarget?.label.displayValue,
});
const divRef = (0, react_1.useRef)(null);
const emptyContent = (0, react_1.useMemo)(() => {
return isLoading ? (0, Utils_js_1.translate)("navigation-property-editor.loading-target-instances") : (0, Utils_js_1.translate)("navigation-property-editor.no-target-instances");
}, [isLoading]);
const onChange = (0, react_1.useCallback)((newValue) => {
const newSelectedTarget = loadedOptions.find((loadedOption) => loadedOption.label.displayValue === newValue);
setSelectedTarget(newSelectedTarget);
newSelectedTarget && onCommit && onCommit({ propertyRecord, newValue: getPropertyValue(newSelectedTarget) });
}, [loadedOptions, onCommit, propertyRecord]);
(0, react_1.useImperativeHandle)(ref, () => ({
getValue: () => getPropertyValue(selectedTarget),
htmlElement: divRef.current,
}), [selectedTarget]);
(0, react_1.useEffect)(() => {
setSelectedTarget(getNavigationTargetFromPropertyRecord(propertyRecord));
}, [propertyRecord]);
if (!targetsRuleset) {
return (0, jsx_runtime_1.jsx)(ReadonlyNavigationPropertyTarget, { record: props.propertyRecord });
}
return ((0, jsx_runtime_1.jsx)(itwinui_react_1.ComboBox, { multiple: false, enableVirtualization: true, options: selectOptions, onChange: onChange, filterFunction: (options, inputValue) => {
const filteredOptions = options
.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()) && option.value !== ItemsLoader_js_1.FILTER_WARNING_OPTION.value)
.slice(0, ItemsLoader_js_1.VALUE_BATCH_SIZE);
if (filteredOptions.length >= ItemsLoader_js_1.VALUE_BATCH_SIZE) {
filteredOptions.push(ItemsLoader_js_1.FILTER_WARNING_OPTION);
}
return filteredOptions;
}, emptyStateMessage: emptyContent, value: selectedTarget?.label.displayValue, inputProps: {
placeholder: (0, Utils_js_1.translate)("navigation-property-editor.select-target-instance"),
size: "small",
onChange: (e) => {
setSearchInput(e.target.value);
},
} }));
});
exports.NavigationPropertyTargetSelector.displayName = "NavigationPropertyTargetSelector";
/** @internal */
function ReadonlyNavigationPropertyTarget(props) {
const { record } = props;
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: components_react_1.PropertyValueRendererManager.defaultManager.render(record) });
}
function getPropertyValue(target) {
return { valueFormat: appui_abstract_1.PropertyValueFormat.Primitive, value: target?.key, displayValue: target?.label.displayValue };
}
function getNavigationTargetFromPropertyRecord(record) {
const value = record.value;
if (value.valueFormat !== appui_abstract_1.PropertyValueFormat.Primitive || !value.value || !value.displayValue) {
return undefined;
}
return { key: value.value, label: presentation_common_1.LabelDefinition.fromLabelString(value.displayValue) };
}
//# sourceMappingURL=NavigationPropertyTargetSelector.js.map