@finos/legend-application-pure-ide/lib/components/side-bar/CreateNewDirectoryPrompt.js

Legend Pure IDE application core

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 { useRef, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { flowResult } from 'mobx';
import { useApplicationStore } from '@finos/legend-application';
import { usePureIDEStore } from '../PureIDEStoreProvider.js';
import { Dialog } from '@finos/legend-art';
const DIRECTORY_NAME_PATTERN = /^\w+$/;
const DEFAULT_DIRECTORY_NAME = 'untitled';
export const CreateNewDirectoryPrompt = observer((props) => {
    const { node } = props;
    const ideStore = usePureIDEStore();
    const applicationStore = useApplicationStore();
    const [value, setValue] = useState(DEFAULT_DIRECTORY_NAME);
    const inputRef = useRef(null);
    // validation
    const isValidValue = Boolean(value.match(DIRECTORY_NAME_PATTERN));
    const isUnique = !node.childrenIds
        ?.map((id) => ideStore.directoryTreeState.getTreeData().nodes.get(id))
        .filter((n) => n?.data.text === value).length;
    const error = !isValidValue
        ? 'Invalid directory name'
        : !isUnique
            ? 'Already existed'
            : undefined;
    // actions
    const closeModal = () => ideStore.directoryTreeState.setNodeForCreateNewDirectory(undefined);
    const onValueChange = (event) => setValue(event.target.value);
    const create = (event) => {
        event.preventDefault();
        closeModal();
        flowResult(ideStore.createNewDirectory(`${node.data.li_attr.path}/${value}`)).catch(applicationStore.alertUnhandledError);
    };
    const handleEnter = () => inputRef.current?.focus();
    return (_jsx(Dialog, { open: true, onClose: closeModal, classes: { container: 'command-modal__container' }, slotProps: {
            transition: {
                onEnter: handleEnter,
            },
            paper: {
                classes: { root: 'command-modal__inner-container' },
            },
        }, children: _jsxs("div", { className: "modal modal--dark command-modal", children: [_jsx("div", { className: "modal__title", children: "Create a new directory" }), _jsxs("div", { className: "command-modal__content", children: [_jsx("form", { className: "command-modal__content__form", onSubmit: create, children: _jsxs("div", { className: "input-group command-modal__content__input", children: [_jsx("input", { ref: inputRef, className: "input input--dark", onChange: onValueChange, value: value, spellCheck: false }), error && (_jsx("div", { className: "input-group__error-message", children: error }))] }) }), _jsx("button", { className: "command-modal__content__submit-btn btn--dark", disabled: Boolean(error), onClick: create, children: "Create" })] })] }) }));
});
//# sourceMappingURL=CreateNewDirectoryPrompt.js.map