@neo4j-ndl/react/lib/esm/next/tree-view/stories/tree-view-actions.story.js

React implementation of Neo4j Design System

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
 *
 *  Copyright (c) "Neo4j"
 *  Neo4j Sweden AB [http://neo4j.com]
 *
 *  This file is part of Neo4j.
 *
 *  Neo4j is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
import { Menu } from '@neo4j-ndl/react';
import { DocumentIconOutline, FolderIconSolid } from '@neo4j-ndl/react/icons';
import { TreeView } from '@neo4j-ndl/react/next';
import { useState } from 'react';
const Component = () => {
    const [expanded, setExpanded] = useState({});
    const [selected, setSelected] = useState(null);
    const toggle = (key) => setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
    return (_jsxs(TreeView, { ariaLabel: "Project files", children: [_jsxs(TreeView.Item, { title: "src", hasChildren: true, isExpanded: expanded['src'], onExpandedChange: () => toggle('src'), isSelected: selected === 'src', onSelectedChange: () => setSelected('src'), leadingVisual: _jsx(FolderIconSolid, {}), actionMenuItems: _jsxs(_Fragment, { children: [_jsx(Menu.Item, { title: "New File", onClick: () => alert('New file in src') }), _jsx(Menu.Item, { title: "Rename", onClick: () => alert('Rename src') }), _jsx(Menu.Item, { title: "Delete", onClick: () => alert('Delete src') })] }), children: [_jsx(TreeView.Item, { title: "index.ts", isSelected: selected === 'index', onSelectedChange: () => setSelected('index'), leadingVisual: _jsx(DocumentIconOutline, {}), actionMenuItems: _jsxs(_Fragment, { children: [_jsx(Menu.Item, { title: "Open", onClick: () => alert('Open index.ts') }), _jsx(Menu.Item, { title: "Rename", onClick: () => alert('Rename index.ts') }), _jsx(Menu.Item, { title: "Delete", onClick: () => alert('Delete index.ts') })] }) }), _jsx(TreeView.Item, { title: "utils.ts", isSelected: selected === 'utils', onSelectedChange: () => setSelected('utils'), leadingVisual: _jsx(DocumentIconOutline, {}), actionMenuItems: _jsxs(_Fragment, { children: [_jsx(Menu.Item, { title: "Open", onClick: () => alert('Open utils.ts') }), _jsx(Menu.Item, { title: "Rename", onClick: () => alert('Rename utils.ts') }), _jsx(Menu.Item, { title: "Delete", onClick: () => alert('Delete utils.ts') })] }) })] }), _jsxs(TreeView.Item, { title: "tests", hasChildren: true, isExpanded: expanded['tests'], onExpandedChange: () => toggle('tests'), isSelected: selected === 'tests', onSelectedChange: () => setSelected('tests'), leadingVisual: _jsx(FolderIconSolid, {}), actionMenuItems: _jsxs(_Fragment, { children: [_jsx(Menu.Item, { title: "Run Tests", onClick: () => alert('Run all tests') }), _jsx(Menu.Item, { title: "New Test", onClick: () => alert('New test in tests') }), _jsx(Menu.Item, { title: "Delete", onClick: () => alert('Delete tests') })] }), children: [_jsx(TreeView.Item, { title: "index.test.ts", isSelected: selected === 'index-test', onSelectedChange: () => setSelected('index-test'), leadingVisual: _jsx(DocumentIconOutline, {}), actionMenuItems: _jsxs(_Fragment, { children: [_jsx(Menu.Item, { title: "Run", onClick: () => alert('Run index.test.ts') }), _jsx(Menu.Item, { title: "Rename", onClick: () => alert('Rename index.test.ts') }), _jsx(Menu.Item, { title: "Delete", onClick: () => alert('Delete index.test.ts') })] }) }), _jsx(TreeView.Item, { title: "utils.test.ts", isSelected: selected === 'utils-test', onSelectedChange: () => setSelected('utils-test'), leadingVisual: _jsx(DocumentIconOutline, {}), actionMenuItems: _jsxs(_Fragment, { children: [_jsx(Menu.Item, { title: "Run", onClick: () => alert('Run utils.test.ts') }), _jsx(Menu.Item, { title: "Rename", onClick: () => alert('Rename utils.test.ts') }), _jsx(Menu.Item, { title: "Delete", onClick: () => alert('Delete utils.test.ts') })] }) })] }), _jsx(TreeView.Item, { title: "README.md", isSelected: selected === 'readme', onSelectedChange: () => setSelected('readme'), leadingVisual: _jsx(DocumentIconOutline, {}), actionMenuItems: _jsxs(_Fragment, { children: [_jsx(Menu.Item, { title: "Open", onClick: () => alert('Open README.md') }), _jsx(Menu.Item, { title: "Rename", onClick: () => alert('Rename README.md') }), _jsx(Menu.Item, { title: "Delete", onClick: () => alert('Delete README.md') })] }) })] }));
};
export default Component;
//# sourceMappingURL=tree-view-actions.story.js.map