react-bootstrap-tree-editor - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/components/BasicTreeNodeComponent.js

@@ -72,3 +72,3 @@ "use strict";
                 react_1.default.createElement(fa_1.FaHandPointRight, null))),
-            hasChildren && (react_1.default.createElement("div", { className: "d-flex justify-content-center align-items-center user-select-none cursor-pointer", style: { width: iconWidth }, onClick: handleToggleShowChildren }, expanded && hasChildren ? react_1.default.createElement(fa_1.FaAngleDown, null) : react_1.default.createElement(fa_1.FaAngleRight, { style: { opacity: !hasChildren ? 0 : 1 } }))),
+            hasChildren && (react_1.default.createElement("div", { className: "d-flex justify-content-center align-items-center user-select-none", style: { width: iconWidth, cursor: 'pointer' }, onClick: handleToggleShowChildren }, expanded && hasChildren ? react_1.default.createElement(fa_1.FaAngleDown, null) : react_1.default.createElement(fa_1.FaAngleRight, { style: { opacity: !hasChildren ? 0 : 1 } }))),
             !hasChildren && (react_1.default.createElement("div", { className: "d-flex justify-content-center align-items-center user-select-none", style: { width: iconWidth } }, showBullets && react_1.default.createElement(fa_1.FaCircle, { style: { fontSize: '30%' } }))),
@@ -75,0 +75,0 @@ react_1.default.createElement(BasicTreeNodeTitleComponent_1.BasicTreeNodeTitleComponent, { node: node, treeController: treeController, editable: editable, hovering: hovering }),

dist/components/BasicTreeNodeDropdown.js

@@ -87,3 +87,3 @@ "use strict";
             react_1.default.createElement(react_bootstrap_1.Dropdown, null,
-                react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { variant: "success", id: `dropdown-menu-${(_b = node.getData()[treeController.options.idPropertyName]) !== null && _b !== void 0 ? _b : useTreeController_1.UNDEFINED_ID}`, as: "div", className: "cursor-pointer", onMouseDown: () => handleEllipsisMouseDown(), onTouchStartCapture: () => handleEllipsisMouseDown() },
+                react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { variant: "success", id: `dropdown-menu-${(_b = node.getData()[treeController.options.idPropertyName]) !== null && _b !== void 0 ? _b : useTreeController_1.UNDEFINED_ID}`, as: "div", style: { cursor: 'pointer' }, onMouseDown: () => handleEllipsisMouseDown(), onTouchStartCapture: () => handleEllipsisMouseDown() },
                     react_1.default.createElement(fa_1.FaEllipsisV, null)),
@@ -90,0 +90,0 @@ react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, null,

dist/components/TreeEditorDemo.js

@@ -39,2 +39,3 @@ "use strict";
 const TreeEditorDemo = () => {
+    const [showAlert, setShowAlert] = React.useState(true);
     const [treeEditingEnabled, setTreeEditingEnabled] = React.useState(true);
@@ -96,64 +97,73 @@ const treeOptions = TreeControllerOptions_1.defaultTreeControllerOptions;
                 React.createElement("div", { className: "d-flex flex-column gap-3" },
-                    React.createElement("div", { className: "d-flex flex-column gap-3" },
-                        React.createElement(react_bootstrap_1.Alert, { variant: "primary" },
-                            React.createElement("p", null,
-                                "This is a demo of",
-                                ' ',
-                                React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor" }, "react-bootstrap-tree-editor"),
-                                ", built on ",
-                                React.createElement("a", { href: "https://react-bootstrap.netlify.app/" }, "react-bootstrap"),
-                                " and powered by",
-                                ' ',
-                                React.createElement("a", { href: "https://github.com/justinmahar/versatile-tree" }, "versatile-tree"),
-                                "."),
-                            React.createElement("p", null, "You will likely want to customize this further, but this demo serves as a good starting point should you be interested in using this project."),
-                            React.createElement("p", null,
-                                "A few handy things you can try out:",
-                                React.createElement("ul", null,
-                                    React.createElement("li", null,
-                                        React.createElement("span", { className: "fw-bold" }, "Edit/View Modes"),
-                                        " - Switch from Edit to View mode using the toggle switch."),
-                                    React.createElement("li", null,
-                                        React.createElement("span", { className: "fw-bold" }, "Keyboard Editing"),
-                                        " - Use Enter to insert items below, Shift+Enter to insert inside. Customizable shortcuts are available for moving items."),
-                                    React.createElement("li", null,
-                                        React.createElement("span", { className: "fw-bold" }, "Actions Dropdown"),
-                                        " - Click the ellipsis ",
-                                        React.createElement(fa_1.FaEllipsisV, null),
-                                        " to view actions and their associated shortcuts."),
-                                    React.createElement("li", null,
-                                        React.createElement("span", { className: "fw-bold" }, "Deletion & Recovery"),
-                                        " - Delete items from the tree and recover them if deleted on accident."),
-                                    React.createElement("li", null,
-                                        React.createElement("span", { className: "fw-bold" }, "Searching"),
-                                        " - Full tree searching, including auto node expansion on matches. Try searching for \"dragon\"."))),
-                            React.createElement("p", null,
-                                "You can",
-                                ' ',
-                                React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor/blob/master/src/components/TreeEditorDemo.tsx" }, "view the source here"),
-                                "."),
-                            React.createElement("p", { className: "mb-0" },
-                                "If this project helps you, please",
-                                ' ',
-                                React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor" }, "star it on GitHub"),
-                                " and consider",
-                                ' ',
-                                React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor#donate" }, "buying me a coffee"),
-                                " if you're feeling appreciative! \u2615\uFE0F")),
-                        React.createElement("div", { className: "d-flex justify-content-between align-items-center gap-2" },
-                            React.createElement("h4", { className: "mb-0" }, "Tree Editor"),
-                            React.createElement("div", { className: "d-flex align-items-center gap-1" },
-                                React.createElement(react_bootstrap_1.OverlayTrigger, { placement: "left", delay: { show: 0, hide: 0 }, overlay: React.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-editing" },
-                                        "Switch to ",
-                                        !treeEditingEnabled ? 'Edit' : 'View',
-                                        " mode. (Ctrl+Shift+E)") },
-                                    React.createElement(react_bootstrap_1.Form.Check, { type: "switch", label: React.createElement(react_bootstrap_1.Badge, { bg: treeEditingEnabled ? 'primary' : 'dark' }, treeEditingEnabled ? 'Edit' : 'View'), className: "user-select-none", id: "toggle-switch-editing", checked: !!treeEditingEnabled, onChange: (e) => setTreeEditingEnabled(e.target.checked) })))),
-                        React.createElement(react_bootstrap_1.Form.Group, { controlId: "search-group" },
-                            React.createElement(react_bootstrap_1.Form.Control, { type: "text", placeholder: "Search", value: enteredSearch, onChange: (e) => setEnteredSearch(e.target.value), onFocus: handleSearchFocus })),
-                        enteredSearch && (React.createElement("div", null,
-                            "Showing ",
-                            React.createElement(react_bootstrap_1.Badge, { bg: "dark" }, treeController.filters.filteredNodes.length),
-                            " result",
-                            treeController.filters.filteredNodes.length !== 1 && 's')),
-                        React.createElement(BasicTreeNodeComponent_1.BasicTreeNodeComponent, { node: treeController.tree, treeController: treeController, editable: !!treeEditingEnabled, shortcuts: shortcuts, showBullets: !treeEditingEnabled, showPointer: false })))))));
+                    showAlert && (React.createElement(react_bootstrap_1.Alert, { variant: "primary", dismissible: true, onClose: () => setShowAlert(false) },
+                        React.createElement("p", null,
+                            "This is a demo of",
+                            ' ',
+                            React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor" }, "react-bootstrap-tree-editor"),
+                            ", built on ",
+                            React.createElement("a", { href: "https://react-bootstrap.netlify.app/" }, "react-bootstrap"),
+                            " and powered by",
+                            ' ',
+                            React.createElement("a", { href: "https://github.com/justinmahar/versatile-tree" }, "versatile-tree"),
+                            "."),
+                        React.createElement("p", null, "You will likely want to customize this further, but this demo serves as a good starting point should you be interested in using this project."),
+                        React.createElement("p", null,
+                            "A few handy things you can try out:",
+                            React.createElement("ul", null,
+                                React.createElement("li", null,
+                                    React.createElement("span", { className: "fw-bold" }, "Edit/View Modes"),
+                                    " - Switch from Edit to View mode using the toggle switch."),
+                                React.createElement("li", null,
+                                    React.createElement("span", { className: "fw-bold" }, "Keyboard Editing"),
+                                    " - Use Enter to insert items below, Shift+Enter to insert inside. Customizable shortcuts are available for moving items."),
+                                React.createElement("li", null,
+                                    React.createElement("span", { className: "fw-bold" }, "Actions Dropdown"),
+                                    " - Click the ellipsis ",
+                                    React.createElement(fa_1.FaEllipsisV, null),
+                                    " to view actions and their associated shortcuts."),
+                                React.createElement("li", null,
+                                    React.createElement("span", { className: "fw-bold" }, "Deletion & Recovery"),
+                                    " - Delete items from the tree and recover them if deleted on accident."),
+                                React.createElement("li", null,
+                                    React.createElement("span", { className: "fw-bold" }, "Searching"),
+                                    " - Full tree searching, including auto node expansion on matches. Try searching for \"dragon\"."))),
+                        React.createElement("p", null,
+                            "You can",
+                            ' ',
+                            React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor/blob/master/src/components/TreeEditorDemo.tsx" }, "view the source here"),
+                            "."),
+                        React.createElement("p", { className: "mb-0" },
+                            "If this project helps you, please",
+                            ' ',
+                            React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor" }, "star it on GitHub"),
+                            " and consider",
+                            ' ',
+                            React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor#donate" }, "buying me a coffee"),
+                            " if you're feeling appreciative! \u2615\uFE0F"))),
+                    React.createElement("div", { className: "d-flex justify-content-between align-items-center gap-2" },
+                        React.createElement("h4", { className: "mb-0" },
+                            "Tree Editor",
+                            !showAlert && (React.createElement(fa_1.FaQuestionCircle, { className: "ms-2 text-primary", style: { fontSize: '50%', cursor: 'pointer' }, onClick: () => setShowAlert(true) }))),
+                        React.createElement("div", { className: "d-flex align-items-center gap-1" },
+                            React.createElement(react_bootstrap_1.OverlayTrigger, { placement: "left", delay: { show: 0, hide: 0 }, overlay: React.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-editing" },
+                                    "Switch to ",
+                                    !treeEditingEnabled ? 'Edit' : 'View',
+                                    " mode. (Ctrl+Shift+E)") },
+                                React.createElement(react_bootstrap_1.Form.Check, { type: "switch", label: React.createElement(react_bootstrap_1.Badge, { bg: treeEditingEnabled ? 'primary' : 'dark' }, treeEditingEnabled ? 'Edit' : 'View'), className: "user-select-none", id: "toggle-switch-editing", checked: !!treeEditingEnabled, onChange: (e) => setTreeEditingEnabled(e.target.checked) })))),
+                    React.createElement(react_bootstrap_1.Form.Group, { controlId: "search-group" },
+                        React.createElement(react_bootstrap_1.Form.Control, { type: "text", placeholder: "Search", value: enteredSearch, onChange: (e) => setEnteredSearch(e.target.value), onFocus: handleSearchFocus })),
+                    enteredSearch && (React.createElement("div", null,
+                        "Showing ",
+                        React.createElement(react_bootstrap_1.Badge, { bg: "dark" }, treeController.filters.filteredNodes.length),
+                        " result",
+                        treeController.filters.filteredNodes.length !== 1 && 's')),
+                    React.createElement(BasicTreeNodeComponent_1.BasicTreeNodeComponent, { node: treeController.tree, treeController: treeController, editable: !!treeEditingEnabled, shortcuts: shortcuts, showBullets: !treeEditingEnabled, showPointer: false }),
+                    React.createElement("p", { className: "mt-5 text-center text-muted" },
+                        "Found it helpful?",
+                        ' ',
+                        React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor" }, "Star it on GitHub"),
+                        " \u2B50\uFE0F or",
+                        ' ',
+                        React.createElement("a", { href: "https://github.com/justinmahar/react-bootstrap-tree-editor#donate" }, "buy me a coffee"),
+                        " \u2615\uFE0F if you're feeling appreciative!"))))));
 };
@@ -160,0 +170,0 @@ exports.TreeEditorDemo = TreeEditorDemo;

package.json

 {
   "name": "react-bootstrap-tree-editor",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "Justin Mahar <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "An interactive tree editor built on react-bootstrap.",

No alert changes

Improved metrics

Total package byte prevSize

285670

0.22%

Lines of code

1744

0.58%

No dependency changes