@finos/legend-studio
Version:
60 lines • 4.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) 2020-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useState, useRef, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { compareLabelFn, DropdownMenu, NonBlockingDialog, createFilter, CustomSelectorInput, MoreHorizontalIcon, CaretDownIcon, } from '@finos/legend-art';
import { getElementTypeIcon } from '../../shared/ElementIconUtils.js';
import { useEditorStore } from '../EditorStoreProvider.js';
import { buildElementOption, } from '@finos/legend-application';
export const ProjectSearchCommand = observer(() => {
const editorStore = useEditorStore();
const selectorRef = useRef(null);
const closeModal = () => editorStore.searchElementCommandState.close();
const types = editorStore.getSupportedElementTypes();
const [elementType, setElementType] = useState();
const changeType = (type) => () => setElementType(type);
const options = editorStore.graphManagerState.graph.allOwnElements
.filter((element) => !elementType ||
editorStore.graphState.getPackageableElementType(element) ===
elementType)
.map(buildElementOption)
.sort(compareLabelFn);
const filterOption = createFilter({
ignoreCase: true,
ignoreAccents: false,
stringify: (option) => option.value.path,
});
const openElement = (val) => {
if (val?.value) {
closeModal();
// NOTE: since it takes time to close the modal, this will prevent any auto-focus effort when we open a new element
// to fail as the focus is still trapped in this modal, we need to use `setTimeout` here
setTimeout(() => editorStore.openElement(val.value), 0);
}
};
const handleEnter = () => {
setElementType(undefined);
selectorRef.current?.focus();
};
useEffect(() => {
selectorRef.current?.focus();
}, [elementType]);
return (_jsx(NonBlockingDialog, { nonModalDialogState: editorStore.searchElementCommandState, onClose: closeModal, TransitionProps: {
onEnter: handleEnter,
}, onClickAway: closeModal, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsx("div", { className: "modal search-modal", children: _jsxs("div", { className: "project-search-command", children: [_jsx(DropdownMenu, { content: _jsxs("div", { className: "project-search-command__options", children: [_jsx("div", { className: "project-search-command__option", onClick: changeType(undefined), children: _jsx(MoreHorizontalIcon, {}) }), types.map((type) => (_jsx("div", { className: "project-search-command__option", onClick: changeType(type), children: getElementTypeIcon(editorStore, type) }, type)))] }), children: _jsxs("button", { className: "project-search-command__type", tabIndex: -1, title: "Choose Element Type...", children: [_jsx("div", { className: "project-search-command__type__label", children: elementType ? (getElementTypeIcon(editorStore, elementType)) : (_jsx(MoreHorizontalIcon, {})) }), _jsx("div", { className: "project-search-command__type__selector", children: _jsx(CaretDownIcon, {}) })] }) }), _jsx(CustomSelectorInput, { ref: selectorRef, className: "project-search-command__input", options: options, onChange: openElement, filterOption: filterOption, placeholder: `Search ${elementType ? elementType.toLowerCase() : 'elements'} by path`, escapeClearsValue: true })] }) }) }));
});
//# sourceMappingURL=ProjectSearchCommand.js.map