@finos/legend-application-studio
Version:
Legend Studio application core
60 lines • 2.96 kB
JavaScript
import { jsx as _jsx } 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 React, { useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { NonBlockingDialog, createFilter, CustomSelectorInput, Modal, } from '@finos/legend-art';
import { useEditorStore } from './EditorStoreProvider.js';
function QuickInputDialog(props) {
const { quickInputState } = props;
const editorStore = useEditorStore();
const applicationStore = editorStore.applicationStore;
const { placeholder, options, getSearchValue, onSelect, customization } = quickInputState;
const inputRef = useRef(null);
const close = () => editorStore.setQuickInputState(undefined);
const filterOption = createFilter({
ignoreCase: true,
ignoreAccents: false,
stringify: (option) => getSearchValue({ label: option.label, value: option.data.value }),
});
const onChange = (value) => {
onSelect(value);
close();
};
const handleEnter = () => {
inputRef.current?.focus();
};
// TODO: include title and properly style it like vscode quick input
return (_jsx(NonBlockingDialog, { open: true, onClose: close, onClickAway: close, classes: { container: 'search-modal__container' }, slotProps: {
transition: {
onEnter: handleEnter,
},
paper: {
classes: { root: 'search-modal__inner-container' },
},
}, children: _jsx(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "search-modal", children: _jsx("div", { className: "quick-input", children: _jsx(CustomSelectorInput, { inputRef: inputRef, className: "quick-input__input", options: options, onChange: onChange, filterOption: filterOption, placeholder: placeholder, escapeClearsValue: true, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled, menuIsOpen: true, optionCustomization: {
rowHeight: customization?.rowHeight,
} }) }) }) }));
}
export const QuickInput = observer(() => {
const editorStore = useEditorStore();
if (!editorStore.quickInputState) {
return null;
}
return _jsx(QuickInputDialog, { quickInputState: editorStore.quickInputState });
});
//# sourceMappingURL=QuickInput.js.map