@elliemae/ds-treeview 2.3.0-alpha.2 → 2.3.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{cjs → dist/cjs}/TreeView.js +1 -3
- package/dist/cjs/TreeView.js.map +7 -0
- package/{cjs → dist/cjs}/TreeViewContext.js +2 -8
- package/dist/cjs/TreeViewContext.js.map +7 -0
- package/{cjs → dist/cjs}/config/cssClassesConstants.js +0 -0
- package/{cjs → dist/cjs}/config/cssClassesConstants.js.map +0 -0
- package/{cjs → dist/cjs}/config/useTreeview.js +14 -28
- package/dist/cjs/config/useTreeview.js.map +7 -0
- package/dist/cjs/hoc/DnDTreeContext.js +45 -0
- package/dist/cjs/hoc/DnDTreeContext.js.map +7 -0
- package/dist/cjs/hoc/SortableItemContext.js +46 -0
- package/dist/cjs/hoc/SortableItemContext.js.map +7 -0
- package/dist/cjs/hoc/WithConditionalDnDContext.js +128 -0
- package/dist/cjs/hoc/WithConditionalDnDContext.js.map +7 -0
- package/dist/cjs/hoc/WithDnDSortableItemContext.js +69 -0
- package/dist/cjs/hoc/WithDnDSortableItemContext.js.map +7 -0
- package/{cjs → dist/cjs}/index.js +0 -0
- package/{cjs → dist/cjs}/index.js.map +0 -0
- package/{cjs → dist/cjs}/parts/CheckboxSelectable.js +0 -0
- package/{cjs → dist/cjs}/parts/CheckboxSelectable.js.map +0 -0
- package/{cjs → dist/cjs}/parts/ChildrenCountDisplayer.js +0 -0
- package/{cjs → dist/cjs}/parts/ChildrenCountDisplayer.js.map +0 -0
- package/dist/cjs/parts/DnDHandle.js +57 -0
- package/dist/cjs/parts/DnDHandle.js.map +7 -0
- package/dist/cjs/parts/DropIndicator.js +80 -0
- package/dist/cjs/parts/DropIndicator.js.map +7 -0
- package/{cjs → dist/cjs}/parts/ExpandCaret.js +0 -0
- package/{cjs → dist/cjs}/parts/ExpandCaret.js.map +0 -0
- package/{cjs → dist/cjs}/parts/Icon.js +0 -0
- package/{cjs → dist/cjs}/parts/Icon.js.map +0 -0
- package/{cjs → dist/cjs}/parts/NestingSpace.js +0 -0
- package/{cjs → dist/cjs}/parts/NestingSpace.js.map +0 -0
- package/{cjs → dist/cjs}/parts/RadioSelectable.js +0 -0
- package/{cjs → dist/cjs}/parts/RadioSelectable.js.map +0 -0
- package/{cjs → dist/cjs}/parts/TreeItem.js +37 -62
- package/dist/cjs/parts/TreeItem.js.map +7 -0
- package/{cjs → dist/cjs}/parts/TreeItemText.js +0 -0
- package/{cjs → dist/cjs}/parts/TreeItemText.js.map +0 -0
- package/{cjs → dist/cjs}/parts/TreeList.js +13 -18
- package/dist/cjs/parts/TreeList.js.map +7 -0
- package/dist/cjs/plugins/dnd/TreeDndPlugin.js +35 -0
- package/dist/cjs/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/{cjs → dist/cjs}/plugins/dnd/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/dnd/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/roving/TreeRovingPlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/roving/TreeRovingPlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/roving/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/roving/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/searchable/SearchableTreePlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/searchable/SearchableTreePlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/searchable/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/searchable/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/selectable/SelectablePluginTree.js +0 -0
- package/{cjs → dist/cjs}/plugins/selectable/SelectablePluginTree.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/selectable/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/selectable/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/toolbar/TreeToolbarPlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/toolbar/TreeToolbarPlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/toolbar/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/toolbar/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/tree/TreeDataPlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/tree/TreeDataPlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/tree/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/tree/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/virtualization/TreeVirtualizationPlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/virtualization/TreeVirtualizationPlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/virtualization/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/virtualization/index.js.map +0 -0
- package/{cjs → dist/cjs}/react-desc-prop-types.js +1 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/{cjs → dist/cjs}/related-components/TreeViewSearchBar.js +0 -0
- package/{cjs → dist/cjs}/related-components/TreeViewSearchBar.js.map +0 -0
- package/{cjs → dist/cjs}/sharedTypes.js +0 -0
- package/dist/cjs/sharedTypes.js.map +7 -0
- package/{cjs → dist/cjs}/utils/array-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/array-helpers.js.map +0 -0
- package/{cjs → dist/cjs}/utils/group-expands-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/group-expands-helpers.js.map +0 -0
- package/{cjs → dist/cjs}/utils/keyboard-helpers.js +7 -7
- package/dist/cjs/utils/keyboard-helpers.js.map +7 -0
- package/{cjs → dist/cjs}/utils/object-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/object-helpers.js.map +0 -0
- package/{cjs → dist/cjs}/utils/refs-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/refs-helpers.js.map +1 -1
- package/{cjs → dist/cjs}/utils/selectable-helper.js +0 -0
- package/{cjs → dist/cjs}/utils/selectable-helper.js.map +0 -0
- package/{cjs → dist/cjs}/utils/string-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/string-helpers.js.map +0 -0
- package/{cjs → dist/cjs}/utils/tree-helpers.js +21 -1
- package/{cjs → dist/cjs}/utils/tree-helpers.js.map +2 -2
- package/{cjs → dist/cjs}/utils/useInstanceRefActions.js +0 -0
- package/{cjs → dist/cjs}/utils/useInstanceRefActions.js.map +0 -0
- package/{cjs → dist/cjs}/utils/useTree.js +3 -1
- package/dist/cjs/utils/useTree.js.map +7 -0
- package/{esm → dist/esm}/TreeView.js +1 -3
- package/dist/esm/TreeView.js.map +7 -0
- package/{esm → dist/esm}/TreeViewContext.js +2 -8
- package/dist/esm/TreeViewContext.js.map +7 -0
- package/{esm → dist/esm}/config/cssClassesConstants.js +0 -0
- package/{esm → dist/esm}/config/cssClassesConstants.js.map +0 -0
- package/{esm → dist/esm}/config/useTreeview.js +15 -29
- package/dist/esm/config/useTreeview.js.map +7 -0
- package/dist/esm/hoc/DnDTreeContext.js +16 -0
- package/dist/esm/hoc/DnDTreeContext.js.map +7 -0
- package/dist/esm/hoc/SortableItemContext.js +17 -0
- package/dist/esm/hoc/SortableItemContext.js.map +7 -0
- package/dist/esm/hoc/WithConditionalDnDContext.js +99 -0
- package/dist/esm/hoc/WithConditionalDnDContext.js.map +7 -0
- package/dist/esm/hoc/WithDnDSortableItemContext.js +40 -0
- package/dist/esm/hoc/WithDnDSortableItemContext.js.map +7 -0
- package/{esm → dist/esm}/index.js +0 -0
- package/{esm → dist/esm}/index.js.map +0 -0
- package/{esm → dist/esm}/parts/CheckboxSelectable.js +0 -0
- package/{esm → dist/esm}/parts/CheckboxSelectable.js.map +0 -0
- package/{esm → dist/esm}/parts/ChildrenCountDisplayer.js +0 -0
- package/{esm → dist/esm}/parts/ChildrenCountDisplayer.js.map +0 -0
- package/dist/esm/parts/DnDHandle.js +28 -0
- package/dist/esm/parts/DnDHandle.js.map +7 -0
- package/dist/esm/parts/DropIndicator.js +51 -0
- package/dist/esm/parts/DropIndicator.js.map +7 -0
- package/{esm → dist/esm}/parts/ExpandCaret.js +0 -0
- package/{esm → dist/esm}/parts/ExpandCaret.js.map +0 -0
- package/{esm → dist/esm}/parts/Icon.js +0 -0
- package/{esm → dist/esm}/parts/Icon.js.map +0 -0
- package/{esm → dist/esm}/parts/NestingSpace.js +0 -0
- package/{esm → dist/esm}/parts/NestingSpace.js.map +0 -0
- package/{esm → dist/esm}/parts/RadioSelectable.js +0 -0
- package/{esm → dist/esm}/parts/RadioSelectable.js.map +0 -0
- package/{esm → dist/esm}/parts/TreeItem.js +37 -62
- package/dist/esm/parts/TreeItem.js.map +7 -0
- package/{esm → dist/esm}/parts/TreeItemText.js +0 -0
- package/{esm → dist/esm}/parts/TreeItemText.js.map +0 -0
- package/{esm → dist/esm}/parts/TreeList.js +12 -17
- package/dist/esm/parts/TreeList.js.map +7 -0
- package/dist/esm/plugins/dnd/TreeDndPlugin.js +6 -0
- package/dist/esm/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/{esm → dist/esm}/plugins/dnd/index.js +0 -0
- package/{esm → dist/esm}/plugins/dnd/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/index.js +0 -0
- package/{esm → dist/esm}/plugins/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/roving/TreeRovingPlugin.js +0 -0
- package/{esm → dist/esm}/plugins/roving/TreeRovingPlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/roving/index.js +0 -0
- package/{esm → dist/esm}/plugins/roving/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/searchable/SearchableTreePlugin.js +0 -0
- package/{esm → dist/esm}/plugins/searchable/SearchableTreePlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/searchable/index.js +0 -0
- package/{esm → dist/esm}/plugins/searchable/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/selectable/SelectablePluginTree.js +0 -0
- package/{esm → dist/esm}/plugins/selectable/SelectablePluginTree.js.map +0 -0
- package/{esm → dist/esm}/plugins/selectable/index.js +0 -0
- package/{esm → dist/esm}/plugins/selectable/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/toolbar/TreeToolbarPlugin.js +0 -0
- package/{esm → dist/esm}/plugins/toolbar/TreeToolbarPlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/toolbar/index.js +0 -0
- package/{esm → dist/esm}/plugins/toolbar/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/tree/TreeDataPlugin.js +0 -0
- package/{esm → dist/esm}/plugins/tree/TreeDataPlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/tree/index.js +0 -0
- package/{esm → dist/esm}/plugins/tree/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/virtualization/TreeVirtualizationPlugin.js +0 -0
- package/{esm → dist/esm}/plugins/virtualization/TreeVirtualizationPlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/virtualization/index.js +0 -0
- package/{esm → dist/esm}/plugins/virtualization/index.js.map +0 -0
- package/{esm → dist/esm}/react-desc-prop-types.js +1 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/{esm → dist/esm}/related-components/TreeViewSearchBar.js +0 -0
- package/{esm → dist/esm}/related-components/TreeViewSearchBar.js.map +0 -0
- package/{esm → dist/esm}/sharedTypes.js +0 -0
- package/{esm → dist/esm}/sharedTypes.js.map +0 -0
- package/{esm → dist/esm}/utils/array-helpers.js +0 -0
- package/{esm → dist/esm}/utils/array-helpers.js.map +0 -0
- package/{esm → dist/esm}/utils/group-expands-helpers.js +0 -0
- package/{esm → dist/esm}/utils/group-expands-helpers.js.map +0 -0
- package/{esm → dist/esm}/utils/keyboard-helpers.js +7 -7
- package/dist/esm/utils/keyboard-helpers.js.map +7 -0
- package/{esm → dist/esm}/utils/object-helpers.js +0 -0
- package/{esm → dist/esm}/utils/object-helpers.js.map +0 -0
- package/{esm → dist/esm}/utils/refs-helpers.js +0 -0
- package/{esm → dist/esm}/utils/refs-helpers.js.map +1 -1
- package/{esm → dist/esm}/utils/selectable-helper.js +0 -0
- package/{esm → dist/esm}/utils/selectable-helper.js.map +0 -0
- package/{esm → dist/esm}/utils/string-helpers.js +0 -0
- package/{esm → dist/esm}/utils/string-helpers.js.map +0 -0
- package/{esm → dist/esm}/utils/tree-helpers.js +21 -1
- package/{esm → dist/esm}/utils/tree-helpers.js.map +2 -2
- package/{esm → dist/esm}/utils/useInstanceRefActions.js +0 -0
- package/{esm → dist/esm}/utils/useInstanceRefActions.js.map +0 -0
- package/{esm → dist/esm}/utils/useTree.js +4 -2
- package/dist/esm/utils/useTree.js.map +7 -0
- package/package.json +136 -117
- package/cjs/TreeView.js.map +0 -7
- package/cjs/TreeViewContext.js.map +0 -7
- package/cjs/config/useTreeview.js.map +0 -7
- package/cjs/parts/TreeItem.js.map +0 -7
- package/cjs/parts/TreeList.js.map +0 -7
- package/cjs/plugins/dnd/TreeDndPlugin.js +0 -59
- package/cjs/plugins/dnd/TreeDndPlugin.js.map +0 -7
- package/cjs/react-desc-prop-types.js.map +0 -7
- package/cjs/sharedTypes.js.map +0 -7
- package/cjs/utils/dnd-helpers.js +0 -146
- package/cjs/utils/dnd-helpers.js.map +0 -7
- package/cjs/utils/keyboard-helpers.js.map +0 -7
- package/cjs/utils/useDnDHelpers.js +0 -199
- package/cjs/utils/useDnDHelpers.js.map +0 -7
- package/cjs/utils/useTree.js.map +0 -7
- package/esm/TreeView.js.map +0 -7
- package/esm/TreeViewContext.js.map +0 -7
- package/esm/config/useTreeview.js.map +0 -7
- package/esm/parts/TreeItem.js.map +0 -7
- package/esm/parts/TreeList.js.map +0 -7
- package/esm/plugins/dnd/TreeDndPlugin.js +0 -30
- package/esm/plugins/dnd/TreeDndPlugin.js.map +0 -7
- package/esm/react-desc-prop-types.js.map +0 -7
- package/esm/utils/dnd-helpers.js +0 -117
- package/esm/utils/dnd-helpers.js.map +0 -7
- package/esm/utils/keyboard-helpers.js.map +0 -7
- package/esm/utils/useDnDHelpers.js +0 -170
- package/esm/utils/useDnDHelpers.js.map +0 -7
- package/esm/utils/useTree.js.map +0 -7
- package/types/TreeView.d.ts +0 -13
- package/types/TreeViewContext.d.ts +0 -17
- package/types/config/cssClassesConstants.d.ts +0 -4
- package/types/config/useTreeview.d.ts +0 -7
- package/types/index.d.ts +0 -3
- package/types/parts/CheckboxSelectable.d.ts +0 -8
- package/types/parts/ChildrenCountDisplayer.d.ts +0 -7
- package/types/parts/ExpandCaret.d.ts +0 -7
- package/types/parts/Icon.d.ts +0 -7
- package/types/parts/NestingSpace.d.ts +0 -8
- package/types/parts/RadioSelectable.d.ts +0 -8
- package/types/parts/TreeItem.d.ts +0 -24
- package/types/parts/TreeItemText.d.ts +0 -7
- package/types/parts/TreeList.d.ts +0 -24
- package/types/plugins/dnd/TreeDndPlugin.d.ts +0 -3
- package/types/plugins/dnd/index.d.ts +0 -1
- package/types/plugins/index.d.ts +0 -7
- package/types/plugins/roving/TreeRovingPlugin.d.ts +0 -1
- package/types/plugins/roving/index.d.ts +0 -1
- package/types/plugins/searchable/SearchableTreePlugin.d.ts +0 -1
- package/types/plugins/searchable/index.d.ts +0 -1
- package/types/plugins/selectable/SelectablePluginTree.d.ts +0 -1
- package/types/plugins/selectable/index.d.ts +0 -1
- package/types/plugins/toolbar/TreeToolbarPlugin.d.ts +0 -1
- package/types/plugins/toolbar/index.d.ts +0 -1
- package/types/plugins/tree/TreeDataPlugin.d.ts +0 -1
- package/types/plugins/tree/index.d.ts +0 -1
- package/types/plugins/virtualization/TreeVirtualizationPlugin.d.ts +0 -1
- package/types/plugins/virtualization/index.d.ts +0 -1
- package/types/react-desc-prop-types.d.ts +0 -196
- package/types/related-components/TreeViewSearchBar.d.ts +0 -16
- package/types/sharedTypes.d.ts +0 -54
- package/types/utils/array-helpers.d.ts +0 -2
- package/types/utils/dnd-helpers.d.ts +0 -39
- package/types/utils/group-expands-helpers.d.ts +0 -14
- package/types/utils/keyboard-helpers.d.ts +0 -5
- package/types/utils/object-helpers.d.ts +0 -6
- package/types/utils/refs-helpers.d.ts +0 -4
- package/types/utils/selectable-helper.d.ts +0 -7
- package/types/utils/string-helpers.d.ts +0 -1
- package/types/utils/tree-helpers.d.ts +0 -25
- package/types/utils/useDnDHelpers.d.ts +0 -26
- package/types/utils/useInstanceRefActions.d.ts +0 -3
- package/types/utils/useTree.d.ts +0 -13
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/sharedTypes.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nimport type { SetStateAction } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\n\nexport declare namespace DSTreeviewInternalsT {\n export type GenericFunc<T extends unknown[]> = (..._args: T) => void;\n export type DnDMovementDirectionT = 'topToBottom' | 'bottomToTop';\n export interface MouseCoord {\n isBefore: boolean;\n isAfter: boolean;\n isValid: boolean;\n item: DSTreeviewT.Item | null;\n x: number | null;\n y: number | null;\n relativeElementDOMRect: DOMRect | null;\n relativeElementIndex: number | null;\n }\n\n export type StateSetter<T = unknown> = React.Dispatch<SetStateAction<T>>;\n\n export interface CTX {\n props: DSTreeviewT.Props;\n visibleItems: DSTreeviewT.Item[];\n flattenedItems: DSTreeviewT.DndItem[];\n withRadioChecks: boolean;\n withCheckboxChecks: boolean;\n withDragAndDrop: boolean;\n triggerTreeRerender: () => void;\n tree?: TreeModel;\n treeRoot?: TreeModel.Node<DSTreeviewT.Item>;\n virtualListHelpers: ReturnType<typeof useVirtual>;\n virtualListRef?: React.MutableRefObject<HTMLUListElement | undefined>;\n uniqueTreeViewUUID: string;\n selectedItem: DSTreeviewT.Item | null;\n setSelectedItem: StateSetter<DSTreeviewT.Item | null>;\n focusedItem: DSTreeviewT.Item | null;\n setFocusedItem: StateSetter<DSTreeviewT.Item | null>;\n selectedCheckboxes: DSTreeviewT.SelectionItems;\n setSelectedCheckboxes: StateSetter<DSTreeviewT.SelectionItems>;\n expandedGroups: DSTreeviewT.ExpandedItems;\n setExpandedGroups: StateSetter<DSTreeviewT.ExpandedItems>;\n latestToggledItem?: DSTreeviewT.Item | null | undefined; // item -> if toggle all -> should be undefined\n setLatestToggledItem: StateSetter<DSTreeviewT.Item | null>;\n hoverItem: DSTreeviewT.Item | null;\n setHoverItem: StateSetter<DSTreeviewT.Item | null>;\n handleExpandGroup: (\n itemToToggle: DSTreeviewT.Item,\n triggerTreeRerender: () => void,\n updateUserExpandedState: () => void,\n scrollTo?: DSTreeviewT.ScrollToFunc,\n e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => void;\n updateUserExpandedState: () => void;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -36,12 +36,11 @@ var import_react = require("react");
|
|
|
36
36
|
var import_TreeViewContext = __toESM(require("../TreeViewContext"));
|
|
37
37
|
var import_tree_helpers = require("./tree-helpers");
|
|
38
38
|
var import_group_expands_helpers = require("./group-expands-helpers");
|
|
39
|
-
const useOnItemKeyDown = (item) => {
|
|
39
|
+
const useOnItemKeyDown = (item, draggableProps) => {
|
|
40
40
|
const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
|
|
41
41
|
const {
|
|
42
42
|
props: { onItemFocus },
|
|
43
43
|
triggerTreeRerender,
|
|
44
|
-
isDragging,
|
|
45
44
|
visibleItems,
|
|
46
45
|
setFocusedItem,
|
|
47
46
|
setSelectedItem,
|
|
@@ -57,11 +56,12 @@ const useOnItemKeyDown = (item) => {
|
|
|
57
56
|
}), [onItemFocus, scrollToIndex]);
|
|
58
57
|
const onItemKeyDown = (0, import_react.useCallback)((e) => {
|
|
59
58
|
const { keyCode } = e;
|
|
60
|
-
if (!
|
|
59
|
+
if (!(draggableProps && draggableProps.active)) {
|
|
61
60
|
if (keyCode !== 9)
|
|
62
61
|
e.preventDefault();
|
|
63
|
-
if (keyCode === 13 || keyCode === 32)
|
|
62
|
+
if ((keyCode === 13 || keyCode === 32) && e.target.tagName === "LI") {
|
|
64
63
|
setSelectedItem(item);
|
|
64
|
+
}
|
|
65
65
|
if (keyCode === 37) {
|
|
66
66
|
if (isGroup && isExpanded) {
|
|
67
67
|
(0, import_group_expands_helpers.toggleItemExpand)(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
|
|
@@ -136,18 +136,18 @@ const useOnItemKeyDown = (item) => {
|
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
}, [
|
|
139
|
-
|
|
139
|
+
draggableProps,
|
|
140
140
|
setSelectedItem,
|
|
141
141
|
item,
|
|
142
142
|
isGroup,
|
|
143
143
|
isExpanded,
|
|
144
144
|
triggerTreeRerender,
|
|
145
|
+
updateUserExpandedState,
|
|
145
146
|
scrollToIndex,
|
|
146
147
|
setLatestToggledItem,
|
|
147
148
|
visibleItems,
|
|
148
149
|
setFocusedItem,
|
|
149
|
-
onItemFocusCurry
|
|
150
|
-
updateUserExpandedState
|
|
150
|
+
onItemFocusCurry
|
|
151
151
|
]);
|
|
152
152
|
return onItemKeyDown;
|
|
153
153
|
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/keyboard-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect } from 'react';\nimport TreeViewContext from '../TreeViewContext';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { SortableItemContextType } from '../hoc/SortableItemContext';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => {\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n triggerTreeRerender,\n visibleItems,\n setFocusedItem,\n setSelectedItem,\n setLatestToggledItem,\n updateUserExpandedState,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n const { isGroup, isExpanded } = item;\n const onItemFocusCurry = useCallback(\n (newFocusItem: DSTreeviewT.Item) =>\n onItemFocus({\n itemIndex: newFocusItem.virtualIndex as number,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n item: newFocusItem,\n }),\n [onItemFocus, scrollToIndex],\n );\n\n const onItemKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n const { keyCode } = e;\n if (!(draggableProps && draggableProps.active)) {\n if (keyCode !== 9) e.preventDefault(); // allow tab/shift+tab\n if ((keyCode === 13 || keyCode === 32) && (e.target as HTMLElement).tagName === 'LI') {\n setSelectedItem(item);\n }\n\n if (keyCode === 37) {\n if (isGroup && isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n if (keyCode === 39) {\n if (isGroup && !isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n\n const { virtualIndex } = item;\n if (typeof virtualIndex === 'number') {\n const lastItemIndex = visibleItems.length - 1;\n if (keyCode === 38) {\n const isLoopedFocus = virtualIndex === 0;\n const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;\n const newFocusItem = visibleItems[newFocusIndex];\n scrollToIndex(newFocusIndex);\n if (isLoopedFocus) {\n // when looping the list from start to end we need to wait a bit before focusing\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n focusItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n }, 300);\n } else {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }\n }\n if (keyCode === 40) {\n const isLoopedFocus = virtualIndex === lastItemIndex;\n const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;\n const newFocusItem = visibleItems[newFocusIndex];\n scrollToIndex(newFocusIndex);\n if (isLoopedFocus) {\n // when looping the list from start to end we need to wait a bit before focusing\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n } else {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }\n }\n if (keyCode === 35) {\n if (virtualIndex !== lastItemIndex) {\n const newFocusItem = visibleItems[lastItemIndex];\n scrollToIndex(lastItemIndex);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n if (keyCode === 36) {\n if (virtualIndex !== 0) {\n const newFocusItem = visibleItems[0];\n scrollToIndex(0);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n }\n }\n },\n [\n draggableProps,\n setSelectedItem,\n item,\n isGroup,\n isExpanded,\n triggerTreeRerender,\n updateUserExpandedState,\n scrollToIndex,\n setLatestToggledItem,\n visibleItems,\n setFocusedItem,\n onItemFocusCurry,\n ],\n );\n\n return onItemKeyDown;\n};\n\nexport const useGlobalKeyboardListener = (func: (e: KeyboardEvent) => void) => {\n useEffect(() => {\n document.addEventListener('keydown', func);\n return () => document.removeEventListener('keydown', func);\n }, [func]);\n};\n\nexport const useGlobalToggleAllExpandShortcut = (\n treeRoot: DSTreeviewT.Item['node'],\n triggerTreeRerender: () => void,\n setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n const memoizedToggleAllKeyboardShortcut = useCallback(\n (e: KeyboardEvent) => {\n const { shiftKey, keyCode } = e;\n if (shiftKey && keyCode === 56) {\n toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n }\n },\n [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState],\n );\n\n return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/refs-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["// allow multiple refs to be set to point to the same DOM element\ntype GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void);\nexport const setMultipleRefs = (...refs: GenericMergeableRef[]): ((ref: HTMLElement) => void) => {\n const filteredRefs = refs.filter(Boolean);\n if (!filteredRefs.length) return () => {};\n if (filteredRefs.length === 0) return () => {};\n\n return (newRef) => {\n filteredRefs.forEach((refToBeUpdated) => {\n if (typeof refToBeUpdated === 'function') {\n refToBeUpdated(newRef);\n } else if (refToBeUpdated) {\n refToBeUpdated.current = newRef;\n }\n });\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["// allow multiple refs to be set to point to the same DOM element\ntype GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void) | false;\nexport const setMultipleRefs = (...refs: GenericMergeableRef[]): ((ref: HTMLElement) => void) => {\n const filteredRefs = refs.filter(Boolean);\n if (!filteredRefs.length) return () => {};\n if (filteredRefs.length === 0) return () => {};\n\n return (newRef) => {\n filteredRefs.forEach((refToBeUpdated) => {\n if (typeof refToBeUpdated === 'function') {\n refToBeUpdated(newRef);\n } else if (refToBeUpdated) {\n refToBeUpdated.current = newRef;\n }\n });\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,kBAAkB,IAAI,SAA8D;AAC/F,QAAM,eAAe,KAAK,OAAO;AACjC,MAAI,CAAC,aAAa;AAAQ,WAAO,MAAM;AAAA;AACvC,MAAI,aAAa,WAAW;AAAG,WAAO,MAAM;AAAA;AAE5C,SAAO,CAAC,WAAW;AACjB,iBAAa,QAAQ,CAAC,mBAAmB;AACvC,UAAI,OAAO,mBAAmB,YAAY;AACxC,uBAAe;AAAA,iBACN,gBAAgB;AACzB,uBAAe,UAAU;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -29,6 +29,7 @@ var tree_helpers_exports = {};
|
|
|
29
29
|
__export(tree_helpers_exports, {
|
|
30
30
|
cloneNode: () => cloneNode,
|
|
31
31
|
enrichNodeModelInPlace: () => enrichNodeModelInPlace,
|
|
32
|
+
flattenTreeForDnD: () => flattenTreeForDnD,
|
|
32
33
|
focusItem: () => focusItem,
|
|
33
34
|
getChildrenMatchesSearchQuery: () => getChildrenMatchesSearchQuery,
|
|
34
35
|
getItemsParentNode: () => getItemsParentNode,
|
|
@@ -132,7 +133,7 @@ const enrichNodeModelInPlace = (node, searchQuery = "", selection = null, expand
|
|
|
132
133
|
if (!node.model.nodeItemRef) {
|
|
133
134
|
node.model.nodeItemRef = (0, import_react.createRef)();
|
|
134
135
|
}
|
|
135
|
-
if (typeof node.model.isGroup !== "boolean" && node.model?.children?.length > 0) {
|
|
136
|
+
if (typeof node.model.isGroup !== "boolean" && (node.model?.children?.length ?? 0) > 0) {
|
|
136
137
|
node.model.isGroup = true;
|
|
137
138
|
}
|
|
138
139
|
if (node.model.isGroup && node.model.id !== "__ds_tree_root") {
|
|
@@ -160,5 +161,24 @@ const enrichNodeModelInPlace = (node, searchQuery = "", selection = null, expand
|
|
|
160
161
|
const focusItem = (item) => {
|
|
161
162
|
item?.nodeItemRef?.current?.focus();
|
|
162
163
|
};
|
|
164
|
+
const flattenTreeForDnD = (data, shouldDescend = () => true) => {
|
|
165
|
+
const flattenedTree = [];
|
|
166
|
+
let index = 0;
|
|
167
|
+
const doit = (node, depth = 0, parentId = null) => {
|
|
168
|
+
flattenedTree.push({
|
|
169
|
+
uid: node.id.toString(),
|
|
170
|
+
depth,
|
|
171
|
+
realIndex: index,
|
|
172
|
+
childrenCount: node.children?.length ?? 0,
|
|
173
|
+
parentId: parentId !== null ? parentId.toString() : null,
|
|
174
|
+
original: node
|
|
175
|
+
});
|
|
176
|
+
index += 1;
|
|
177
|
+
if (shouldDescend(node))
|
|
178
|
+
node.children?.forEach((child) => doit(child, depth + 1, node.id.toString()));
|
|
179
|
+
};
|
|
180
|
+
data.forEach((datum) => doit(datum));
|
|
181
|
+
return flattenedTree;
|
|
182
|
+
};
|
|
163
183
|
module.exports = __toCommonJS(tree_helpers_exports);
|
|
164
184
|
//# sourceMappingURL=tree-helpers.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/tree-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { createRef } from 'react';\nimport type TreeModel from 'tree-model';\nimport { standardizeSearchQueryString } from './string-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const walkVisibles = (\n node: DSTreeviewT.Item['node'],\n callback: (node: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n highlightOnlyQuery = false,\n) => {\n const { children, model } = node;\n const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;\n\n const shouldSkipBecauseIsRoot = skipRoot && name === '__root';\n const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);\n\n if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);\n\n const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);\n });\n }\n};\n\nexport const walkParents = (\n nodePath: DSTreeviewT.Item['nodePath'],\n callback: (currParent: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n) => {\n const parents = [...nodePath].reverse();\n parents.shift(); // remove current node from the parents array\n if (skipRoot) parents.pop(); // remove the root from the parents if skipping root\n parents.forEach(callback);\n};\n\ntype RecursiveCallbackT = (childNode: DSTreeviewT.Item['node'], cb?: RecursiveCallbackT, isFirst?: boolean) => void;\nexport const walkAllNodeChildren = (node: DSTreeviewT.Item['node'], callback: RecursiveCallbackT, isFirst = true) => {\n const { children = [] } = node;\n const shouldWalkChildren = children.length;\n\n if (!isFirst) callback(node);\n\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkAllNodeChildren(childNode, callback, false);\n });\n }\n};\n\nexport const getNodeById = (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => {\n const nodes = treeRoot.all((node) => (node as unknown as DSTreeviewT.Item).model.id === id);\n return nodes[0];\n};\n\nexport const cloneNode = (tree: TreeModel, node: DSTreeviewT.Item) => tree.parse(node.model);\n\nexport const itemsShareSameParent = (items: DSTreeviewT.Item[] = []) => {\n if (items.length === 0) throw new Error('Received empty items for comparison');\n if (items.length === 1) return true;\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n\n return items.every((item) => {\n // undefined nodes count as having the same parent\n if (!item) return true;\n const itemPath = item.node.getPath();\n const itemDirectParent = itemPath[itemPath.length - 2];\n return directParentNode === itemDirectParent;\n });\n};\n\nexport const getItemsParentNode = (items: DSTreeviewT.Item[] = [], skipSameParentCheck = false) => {\n if (items.length === 0) throw new Error(\"Received empty items, can't retrieve parent\");\n\n // in case we already know the items compared shares the same parent\n if (!skipSameParentCheck)\n if (!itemsShareSameParent(items))\n // if we don't know (default, we don't) check if they share the parent\n throw new Error(\"Received items don't share the same parent, can't retrieve parent\");\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n return directParentNode as unknown as DSTreeviewT.Item['node'];\n};\n\nexport const getNodeMatchesSearchQuery = (node: DSTreeviewT.Item['node'], searchQuery = '') => {\n const standardizedName = standardizeSearchQueryString(node.model.name);\n const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);\n return standardizedName.includes(standardizedSearchQuery);\n};\n\nexport const getChildrenMatchesSearchQuery = (parentNode: DSTreeviewT.Item['node'], searchQuery = '') => {\n let anyChildMatch = false;\n walkAllNodeChildren(parentNode, (node) => {\n if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;\n });\n return anyChildMatch;\n};\n\n/**\n * Mutate in place a node from tree-model normalizing object properties like \"isGroup\" even if user didn't specify it explicitly,\n * after execution the node will have \"nodePath\" \"treeDepth\" \"nodeItemRef\" \"isGroup\" \"isExpanded\"\n * (optionally, based on the provided arguments) \"matchesSearchQuery\" \"childrenMatchesSearchQuery\" \"isChecked\"\n *\n * @param {Object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props\n * @param {string} [searchQuery=''] - optional string used to parse \"matchesSearchQuery\"/\"childrenMatchesSearchQuery\" properties\n * @param {Object} [selection=null] - optional selection hashmap used to parse \"isChecked\" properties\n * @param {Object} [expanded=null] - optional expanded hashmap used to parse \"isExpanded\" properties\n */\nexport const enrichNodeModelInPlace = (\n node: TreeModel.Node<DSTreeviewT.SimpleItem>,\n searchQuery = '',\n selection: DSTreeviewT.SelectionItems | null = null,\n expanded: DSTreeviewT.ExpandedItems | null = null,\n) => {\n const path = node.getPath();\n const depth = path.length - 1;\n node.model.nodePath = path;\n node.model.treeDepth = depth;\n\n if (!node.model.nodeItemRef) {\n node.model.nodeItemRef = createRef();\n }\n\n // if a node has children but was not marked as isGroup, force-mark as group\n // this is useful to avoid having to always check both the flag and the children.length...\n if (typeof node.model.isGroup !== 'boolean' && node.model?.children?.length > 0) {\n node.model.isGroup = true;\n }\n\n if (node.model.isGroup && node.model.id !== '__ds_tree_root') {\n if (expanded) node.model.isExpanded = !!expanded[node.model.id];\n else if (typeof node.model.isExpanded !== 'boolean') {\n node.model.isExpanded = false;\n }\n }\n\n node.model.matchesSearchQuery = true;\n node.model.childrenMatchesSearchQuery = false;\n const partiallyEnrichedNode = node as unknown as TreeModel.Node<DSTreeviewT.Item>;\n if (searchQuery) {\n partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);\n\n if (partiallyEnrichedNode.model.isGroup === true) {\n partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(\n partiallyEnrichedNode,\n searchQuery,\n );\n if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;\n }\n }\n if (selection && selection[partiallyEnrichedNode.model.id]) {\n partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];\n }\n};\n\nexport const focusItem = (item: DSTreeviewT.Item | null) => {\n item?.nodeItemRef?.current?.focus();\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { createRef } from 'react';\nimport type TreeModel from 'tree-model';\nimport { standardizeSearchQueryString } from './string-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const walkVisibles = (\n node: DSTreeviewT.Item['node'],\n callback: (node: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n highlightOnlyQuery = false,\n) => {\n const { children, model } = node;\n const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;\n\n const shouldSkipBecauseIsRoot = skipRoot && name === '__root';\n const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);\n\n if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);\n\n const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);\n });\n }\n};\n\nexport const walkParents = (\n nodePath: DSTreeviewT.Item['nodePath'],\n callback: (currParent: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n) => {\n const parents = [...nodePath].reverse();\n parents.shift(); // remove current node from the parents array\n if (skipRoot) parents.pop(); // remove the root from the parents if skipping root\n parents.forEach(callback);\n};\n\ntype RecursiveCallbackT = (childNode: DSTreeviewT.Item['node'], cb?: RecursiveCallbackT, isFirst?: boolean) => void;\nexport const walkAllNodeChildren = (node: DSTreeviewT.Item['node'], callback: RecursiveCallbackT, isFirst = true) => {\n const { children = [] } = node;\n const shouldWalkChildren = children.length;\n\n if (!isFirst) callback(node);\n\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkAllNodeChildren(childNode, callback, false);\n });\n }\n};\n\nexport const getNodeById = (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => {\n const nodes = treeRoot.all((node) => (node as unknown as DSTreeviewT.Item).model.id === id);\n return nodes[0];\n};\n\nexport const cloneNode = (tree: TreeModel, node: DSTreeviewT.Item) => tree.parse(node.model);\n\nexport const itemsShareSameParent = (items: DSTreeviewT.Item[] = []) => {\n if (items.length === 0) throw new Error('Received empty items for comparison');\n if (items.length === 1) return true;\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n\n return items.every((item) => {\n // undefined nodes count as having the same parent\n if (!item) return true;\n const itemPath = item.node.getPath();\n const itemDirectParent = itemPath[itemPath.length - 2];\n return directParentNode === itemDirectParent;\n });\n};\n\nexport const getItemsParentNode = (items: DSTreeviewT.Item[] = [], skipSameParentCheck = false) => {\n if (items.length === 0) throw new Error(\"Received empty items, can't retrieve parent\");\n\n // in case we already know the items compared shares the same parent\n if (!skipSameParentCheck)\n if (!itemsShareSameParent(items))\n // if we don't know (default, we don't) check if they share the parent\n throw new Error(\"Received items don't share the same parent, can't retrieve parent\");\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n return directParentNode as unknown as DSTreeviewT.Item['node'];\n};\n\nexport const getNodeMatchesSearchQuery = (node: DSTreeviewT.Item['node'], searchQuery = '') => {\n const standardizedName = standardizeSearchQueryString(node.model.name);\n const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);\n return standardizedName.includes(standardizedSearchQuery);\n};\n\nexport const getChildrenMatchesSearchQuery = (parentNode: DSTreeviewT.Item['node'], searchQuery = '') => {\n let anyChildMatch = false;\n walkAllNodeChildren(parentNode, (node) => {\n if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;\n });\n return anyChildMatch;\n};\n\n/**\n * Mutate in place a node from tree-model normalizing object properties like \"isGroup\" even if user didn't specify it explicitly,\n * after execution the node will have \"nodePath\" \"treeDepth\" \"nodeItemRef\" \"isGroup\" \"isExpanded\"\n * (optionally, based on the provided arguments) \"matchesSearchQuery\" \"childrenMatchesSearchQuery\" \"isChecked\"\n *\n * @param {Object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props\n * @param {string} [searchQuery=''] - optional string used to parse \"matchesSearchQuery\"/\"childrenMatchesSearchQuery\" properties\n * @param {Object} [selection=null] - optional selection hashmap used to parse \"isChecked\" properties\n * @param {Object} [expanded=null] - optional expanded hashmap used to parse \"isExpanded\" properties\n */\nexport const enrichNodeModelInPlace = (\n node: TreeModel.Node<DSTreeviewT.SimpleItem>,\n searchQuery = '',\n selection: DSTreeviewT.SelectionItems | null = null,\n expanded: DSTreeviewT.ExpandedItems | null = null,\n) => {\n const path = node.getPath();\n const depth = path.length - 1;\n node.model.nodePath = path;\n node.model.treeDepth = depth;\n\n if (!node.model.nodeItemRef) {\n node.model.nodeItemRef = createRef();\n }\n\n // if a node has children but was not marked as isGroup, force-mark as group\n // this is useful to avoid having to always check both the flag and the children.length...\n if (typeof node.model.isGroup !== 'boolean' && (node.model?.children?.length ?? 0) > 0) {\n node.model.isGroup = true;\n }\n\n if (node.model.isGroup && node.model.id !== '__ds_tree_root') {\n if (expanded) node.model.isExpanded = !!expanded[node.model.id];\n else if (typeof node.model.isExpanded !== 'boolean') {\n node.model.isExpanded = false;\n }\n }\n\n node.model.matchesSearchQuery = true;\n node.model.childrenMatchesSearchQuery = false;\n const partiallyEnrichedNode = node as unknown as TreeModel.Node<DSTreeviewT.Item>;\n if (searchQuery) {\n partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);\n\n if (partiallyEnrichedNode.model.isGroup === true) {\n partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(\n partiallyEnrichedNode,\n searchQuery,\n );\n if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;\n }\n }\n if (selection && selection[partiallyEnrichedNode.model.id]) {\n partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];\n }\n};\n\nexport const focusItem = (item: DSTreeviewT.Item | null) => {\n item?.nodeItemRef?.current?.focus();\n};\n\nexport const flattenTreeForDnD = (\n data: DSTreeviewT.SimpleItem[],\n shouldDescend: (datum: DSTreeviewT.SimpleItem) => boolean = () => true,\n) => {\n const flattenedTree: DSTreeviewT.DndItem[] = [];\n let index = 0;\n const doit = (node: DSTreeviewT.SimpleItem, depth = 0, parentId: DSTreeviewT.StringOrNum | null = null) => {\n flattenedTree.push({\n uid: node.id.toString(),\n depth,\n realIndex: index,\n childrenCount: node.children?.length ?? 0,\n parentId: parentId !== null ? parentId.toString() : null,\n original: node,\n });\n index += 1;\n if (shouldDescend(node)) node.children?.forEach((child) => doit(child, depth + 1, node.id.toString()));\n };\n\n data.forEach((datum) => doit(datum));\n return flattenedTree;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
File without changes
|
|
File without changes
|
|
@@ -69,8 +69,8 @@ const useTree = (data, props, states) => {
|
|
|
69
69
|
(0, import_react.useEffect)(() => {
|
|
70
70
|
const parsedVisibleItems = [];
|
|
71
71
|
const newExpandedHashMap = {};
|
|
72
|
+
const shouldContinueWalking = true;
|
|
72
73
|
treeRoot.walk((node) => {
|
|
73
|
-
const shouldContinueWalking = true;
|
|
74
74
|
(0, import_tree_helpers.enrichNodeModelInPlace)(node, searchQuery, selection, expanded);
|
|
75
75
|
if (node.model.id && node.model.isGroup && node.model.isExpanded)
|
|
76
76
|
newExpandedHashMap[node.model.id] = true;
|
|
@@ -91,8 +91,10 @@ const useTree = (data, props, states) => {
|
|
|
91
91
|
expanded,
|
|
92
92
|
setExpandedGroups
|
|
93
93
|
]);
|
|
94
|
+
const flattenedItems = (0, import_react.useMemo)(() => (0, import_tree_helpers.flattenTreeForDnD)(data), [data]);
|
|
94
95
|
return {
|
|
95
96
|
visibleItems,
|
|
97
|
+
flattenedItems,
|
|
96
98
|
tree,
|
|
97
99
|
treeRoot,
|
|
98
100
|
rerenderItems,
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/useTree.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\n\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { updateExpandedState } from './group-expands-helpers';\n\nexport const useTree = (\n data: DSTreeviewT.SimpleItem[],\n props: DSTreeviewT.Props,\n states: {\n setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n },\n) => {\n const { setExpandedGroups } = states;\n const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n // convert data into a TreeModel with extra isExpanded prop\n // root element type is an exception, children model is based on what the dev passed on\n // since root is an excepcion we must typecast\n const tree = useMemo(() => new TreeModel(), []);\n const [treeData, setTreeData] = useState({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n\n useEffect(() => {\n setTreeData({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n }, [unfrozenData]);\n\n // expose a way to rerender the tree\n // used for expand functionality\n const [rerenderItems, setRerenderItems] = useState({});\n const triggerTreeRerender = useCallback(() => {\n setRerenderItems({});\n }, []);\n\n // when re-rendering we re-parse the list\n const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n useEffect(() => {\n setTreeRoot(tree.parse(treeData));\n }, [treeData, rerenderItems, tree]);\n\n const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n const updateUserExpandedState = useCallback(() => {\n updateExpandedState(treeRoot, onExpandChange);\n }, [treeRoot, onExpandChange]);\n // we add missing properties to the received Items\n // not the best of the patterns, but it works\n // this is where we convert \"SimpleItems\" to \"Items\"\n // this was done to avoid breaking changes back in v1\n useEffect(() => {\n const parsedVisibleItems: DSTreeviewT.Item[] = [];\n const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n treeRoot.walk((node) => {\n enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n return shouldContinueWalking;\n });\n\n walkVisibles(\n treeRoot,\n (node) => {\n parsedVisibleItems.push({ ...node.model, node });\n },\n true,\n highlightOnlyQuery,\n );\n setVisibleItems(parsedVisibleItems);\n onVisibleItemsChange(parsedVisibleItems);\n\n setExpandedGroups(newExpandedHashMap);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n treeRoot,\n rerenderItems,\n searchQuery,\n highlightOnlyQuery,\n selection,\n expanded,\n setExpandedGroups,\n // onVisibleItemsChange // evaluate potential performance hit?\n ]);\n\n const flattenedItems = useMemo(() => flattenTreeForDnD(data), [data]);\n\n return {\n visibleItems,\n flattenedItems,\n tree,\n treeRoot,\n rerenderItems,\n triggerTreeRerender,\n updateUserExpandedState,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0D;AAC1D,wBAAsB;AACtB,oBAA0B;AAE1B,0BAAwE;AAGxE,mCAAoC;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,eAAe,0BAAQ,MAAM,6BAAU,OAAO,CAAC;AAKrD,QAAM,OAAO,0BAAQ,MAAM,IAAI,6BAAa;AAC5C,QAAM,CAAC,UAAU,eAAe,2BAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA;AAGZ,8BAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA;AAAA,KAEX,CAAC;AAIJ,QAAM,CAAC,eAAe,oBAAoB,2BAAS;AACnD,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,qBAAiB;AAAA,KAChB;AAGH,QAAM,CAAC,UAAU,eAAe,2BAAS,KAAK,MAAM;AACpD,8BAAU,MAAM;AACd,gBAAY,KAAK,MAAM;AAAA,KACtB,CAAC,UAAU,eAAe;AAE7B,QAAM,CAAC,cAAc,mBAAmB,2BAA6B;AAErE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,mBAAmB;AAEvG,QAAM,0BAA0B,8BAAY,MAAM;AAChD,0DAAoB,UAAU;AAAA,KAC7B,CAAC,UAAU;AAKd,8BAAU,MAAM;AACd,UAAM,qBAAyC;AAC/C,UAAM,qBAAgD;AACtD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,sDAAuB,MAAM,aAAa,WAAW;AACrD,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,MAAM;AACtG,aAAO;AAAA;AAGT,0CACE,UACA,CAAC,SAAS;AACR,yBAAmB,KAAK,KAAK,KAAK,OAAO;AAAA,OAE3C,MACA;AAEF,oBAAgB;AAChB,yBAAqB;AAErB,sBAAkB;AAAA,KAEjB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,iBAAiB,0BAAQ,MAAM,2CAAkB,OAAO,CAAC;AAE/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -3,15 +3,13 @@ import React2 from "react";
|
|
|
3
3
|
import { describe } from "react-desc";
|
|
4
4
|
import { TreeViewPropTypes } from "./react-desc-prop-types";
|
|
5
5
|
import TreeViewContext from "./TreeViewContext";
|
|
6
|
-
import { TreeDnD, TreeDndPlugin } from "./plugins/dnd";
|
|
7
6
|
import { useTreeview } from "./config/useTreeview";
|
|
8
7
|
import { TreeList } from "./parts/TreeList";
|
|
9
8
|
function TreeView(props) {
|
|
10
|
-
const { plugins } = props;
|
|
11
9
|
const { ctx } = useTreeview(props);
|
|
12
10
|
return /* @__PURE__ */ React2.createElement(TreeViewContext.Provider, {
|
|
13
11
|
value: ctx
|
|
14
|
-
},
|
|
12
|
+
}, /* @__PURE__ */ React2.createElement(TreeList, null));
|
|
15
13
|
}
|
|
16
14
|
TreeView.propTypes = TreeViewPropTypes;
|
|
17
15
|
const TreeViewWithSchema = describe(TreeView);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeView.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\n\nimport { describe } from 'react-desc';\nimport { TreeViewPropTypes } from './react-desc-prop-types';\nimport TreeViewContext from './TreeViewContext';\nimport { useTreeview } from './config/useTreeview';\nimport { TreeList } from './parts/TreeList';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nexport function TreeView(props: DSTreeviewT.Props) {\n const { ctx } = useTreeview(props);\n\n return (\n <TreeViewContext.Provider value={ctx}>\n <TreeList />\n </TreeViewContext.Provider>\n );\n}\n\nTreeView.propTypes = TreeViewPropTypes as WeakValidationMap<unknown>;\nconst TreeViewWithSchema = describe(TreeView);\nTreeViewWithSchema.propTypes = TreeViewPropTypes;\n\nexport { TreeViewWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AACA;AACA;AACA;AACA;AAEO,kBAAkB,OAA0B;AACjD,QAAM,EAAE,QAAQ,YAAY;AAE5B,SACE,qCAAC,gBAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC/B,qCAAC,UAAD;AAAA;AAKN,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -11,6 +11,7 @@ const defaultProps = {
|
|
|
11
11
|
fluid: false,
|
|
12
12
|
isMultiSelect: false,
|
|
13
13
|
isSingleSelect: false,
|
|
14
|
+
getIsDropValid: () => true,
|
|
14
15
|
restrictDragAndDrop: false,
|
|
15
16
|
showChildrenAmount: false,
|
|
16
17
|
sortable: false,
|
|
@@ -46,11 +47,10 @@ const defaultRelativeMouseCoord = {
|
|
|
46
47
|
const defaultContext = {
|
|
47
48
|
props: defaultProps,
|
|
48
49
|
visibleItems: [],
|
|
50
|
+
flattenedItems: [],
|
|
49
51
|
withRadioChecks: false,
|
|
50
52
|
withCheckboxChecks: false,
|
|
51
53
|
withDragAndDrop: false,
|
|
52
|
-
relativeMouseCord: defaultRelativeMouseCoord,
|
|
53
|
-
setRelativeMouseCord: noop,
|
|
54
54
|
triggerTreeRerender: noop,
|
|
55
55
|
tree: void 0,
|
|
56
56
|
treeRoot: void 0,
|
|
@@ -61,12 +61,6 @@ const defaultContext = {
|
|
|
61
61
|
scrollToIndex: noop
|
|
62
62
|
},
|
|
63
63
|
virtualListRef: void 0,
|
|
64
|
-
isDragging: false,
|
|
65
|
-
setIsDragging: noop,
|
|
66
|
-
isKeyboardDragging: false,
|
|
67
|
-
setIsKeyboardDragging: noop,
|
|
68
|
-
draggedItem: null,
|
|
69
|
-
setDraggedItem: noop,
|
|
70
64
|
uniqueTreeViewUUID: "",
|
|
71
65
|
selectedItem: null,
|
|
72
66
|
setSelectedItem: noop,
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeViewContext.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n plugins: [],\n selection: {},\n instanceRef: createRef(),\n isItemDisabled: () => false,\n disableIcons: false,\n fluid: false,\n isMultiSelect: false,\n isSingleSelect: false,\n getIsDropValid: () => true,\n restrictDragAndDrop: false,\n showChildrenAmount: false,\n sortable: false,\n isLoading: false,\n highlightOnlyQuery: false,\n onItemClick: noop,\n onItemFocus: noop,\n onVisibleItemsChange: noop,\n onOrderChange: noop,\n onSelectionChange: noop,\n onExpandChange: noop,\n onInstanceRefInitialized: noop,\n rowSize: 'normal',\n labelOverflow: 'wrap',\n noItemsPlaceholder: 'No items found',\n nameKey: 'name',\n width: '100%',\n height: '100%',\n groupIcon: null,\n itemIcon: null,\n searchQuery: '',\n // workaround on the typings over the fact that\n // when we instantiate the context we can't have all the props\n // we only have a part of them but the final typings will include missing props\n // this is safe to do because\n // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n isBefore: false,\n isAfter: false,\n isValid: true,\n item: null,\n x: null,\n y: null,\n relativeElementDOMRect: null,\n relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n props: defaultProps,\n visibleItems: [],\n flattenedItems: [],\n withRadioChecks: false,\n withCheckboxChecks: false,\n withDragAndDrop: false,\n triggerTreeRerender: noop,\n tree: undefined,\n treeRoot: undefined,\n virtualListHelpers: {\n virtualItems: [],\n totalSize: 0,\n scrollToOffset: noop,\n scrollToIndex: noop,\n },\n virtualListRef: undefined,\n uniqueTreeViewUUID: '',\n selectedItem: null,\n setSelectedItem: noop,\n focusedItem: null,\n setFocusedItem: noop,\n selectedCheckboxes: {},\n setSelectedCheckboxes: noop,\n expandedGroups: {},\n setExpandedGroups: noop,\n latestToggledItem: null,\n setLatestToggledItem: noop,\n hoverItem: null,\n setHoverItem: noop,\n handleExpandGroup: noop,\n updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAKA,iBAAsC,OAAgB;AAAA;AAE/C,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB,MAAM;AAAA,EACtB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA;AAQR,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AAAA;AAGxB,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA;AAAA,EAEjB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAAA;AAI3B,MAAM,kBAAkB,cAAc;AAEtC,IAAO,0BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
File without changes
|
|
File without changes
|
|
@@ -4,7 +4,7 @@ import { useVirtual } from "react-virtual";
|
|
|
4
4
|
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { v4 as uuidv4 } from "uuid";
|
|
6
6
|
import { TreeViewPropTypes } from "../react-desc-prop-types";
|
|
7
|
-
import {
|
|
7
|
+
import { defaultProps } from "../TreeViewContext";
|
|
8
8
|
import { TreeDndPlugin } from "../plugins/dnd";
|
|
9
9
|
import { useTree } from "../utils/useTree";
|
|
10
10
|
import { useNotifyExpandedChange, toggleItemExpand } from "../utils/group-expands-helpers";
|
|
@@ -36,11 +36,7 @@ const useTreeview = (props) => {
|
|
|
36
36
|
selection,
|
|
37
37
|
onInstanceRefInitialized
|
|
38
38
|
} = propsWithDefault;
|
|
39
|
-
const [isDragging, setIsDragging] = useState(false);
|
|
40
|
-
const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
|
|
41
|
-
const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
|
|
42
39
|
const [uniqueTreeViewUUID] = useState(uuidv4());
|
|
43
|
-
const [draggedItem, setDraggedItem] = useState(null);
|
|
44
40
|
const [hoverItem, setHoverItem] = useState(null);
|
|
45
41
|
const [latestToggledItem, setLatestToggledItem] = useState(null);
|
|
46
42
|
const [selectedItem, setSelectedItem] = useState(null);
|
|
@@ -49,7 +45,7 @@ const useTreeview = (props) => {
|
|
|
49
45
|
...selection
|
|
50
46
|
});
|
|
51
47
|
const [expandedGroups, setExpandedGroups] = useState({});
|
|
52
|
-
const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(data, propsWithDefault, {
|
|
48
|
+
const { visibleItems, flattenedItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(data, propsWithDefault, {
|
|
53
49
|
setExpandedGroups
|
|
54
50
|
});
|
|
55
51
|
const virtualListRef = useRef();
|
|
@@ -64,20 +60,13 @@ const useTreeview = (props) => {
|
|
|
64
60
|
const handleExpandGroup = useCallback(toggleItemExpand, []);
|
|
65
61
|
const ctx = useMemo(() => ({
|
|
66
62
|
props: propsWithDefault,
|
|
67
|
-
setRelativeMouseCord,
|
|
68
|
-
relativeMouseCord,
|
|
69
63
|
virtualListHelpers,
|
|
70
64
|
virtualListRef,
|
|
71
65
|
tree,
|
|
72
66
|
treeRoot,
|
|
73
67
|
visibleItems,
|
|
68
|
+
flattenedItems,
|
|
74
69
|
triggerTreeRerender,
|
|
75
|
-
isDragging,
|
|
76
|
-
setIsDragging,
|
|
77
|
-
isKeyboardDragging,
|
|
78
|
-
setIsKeyboardDragging,
|
|
79
|
-
draggedItem,
|
|
80
|
-
setDraggedItem,
|
|
81
70
|
withRadioChecks,
|
|
82
71
|
withCheckboxChecks,
|
|
83
72
|
withDragAndDrop,
|
|
@@ -97,27 +86,24 @@ const useTreeview = (props) => {
|
|
|
97
86
|
handleExpandGroup,
|
|
98
87
|
updateUserExpandedState
|
|
99
88
|
}), [
|
|
100
|
-
draggedItem,
|
|
101
|
-
expandedGroups,
|
|
102
|
-
focusedItem,
|
|
103
|
-
handleExpandGroup,
|
|
104
|
-
hoverItem,
|
|
105
|
-
isDragging,
|
|
106
|
-
isKeyboardDragging,
|
|
107
|
-
latestToggledItem,
|
|
108
89
|
propsWithDefault,
|
|
109
|
-
|
|
110
|
-
selectedCheckboxes,
|
|
111
|
-
selectedItem,
|
|
90
|
+
virtualListHelpers,
|
|
112
91
|
tree,
|
|
113
92
|
treeRoot,
|
|
114
|
-
triggerTreeRerender,
|
|
115
|
-
uniqueTreeViewUUID,
|
|
116
|
-
virtualListHelpers,
|
|
117
93
|
visibleItems,
|
|
94
|
+
flattenedItems,
|
|
95
|
+
triggerTreeRerender,
|
|
96
|
+
withRadioChecks,
|
|
118
97
|
withCheckboxChecks,
|
|
119
98
|
withDragAndDrop,
|
|
120
|
-
|
|
99
|
+
uniqueTreeViewUUID,
|
|
100
|
+
selectedCheckboxes,
|
|
101
|
+
selectedItem,
|
|
102
|
+
expandedGroups,
|
|
103
|
+
latestToggledItem,
|
|
104
|
+
focusedItem,
|
|
105
|
+
hoverItem,
|
|
106
|
+
handleExpandGroup,
|
|
121
107
|
updateUserExpandedState
|
|
122
108
|
]);
|
|
123
109
|
if (instanceRef)
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTreeview.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TreeViewPropTypes } from '../react-desc-prop-types';\nimport { defaultProps } from '../TreeViewContext';\nimport { TreeDndPlugin } from '../plugins/dnd';\nimport { useTree } from '../utils/useTree';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ntype UseTreeviewT = (props: DSTreeviewT.Props) => { ctx: DSTreeviewInternalsT.CTX };\n\nexport const useTreeview: UseTreeviewT = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSTreeviewT.Props>(props, defaultProps);\n useValidateTypescriptPropTypes<DSTreeviewT.Props>(propsWithDefault, TreeViewPropTypes);\n const defaultActions = {\n actions: {\n toggleExpandAll: () => {},\n scrollTo: () => {},\n setSelectedItemByVirtualIndex: () => {},\n setFocusedItemByVirtualIndex: () => {},\n },\n } as unknown as DSTreeviewT.InstanceRef;\n const treeRef = useRef(defaultActions);\n const {\n data,\n plugins,\n onOrderChange,\n isMultiSelect,\n isSingleSelect,\n instanceRef,\n selection,\n onInstanceRefInitialized,\n } = propsWithDefault;\n const [uniqueTreeViewUUID] = useState(uuidv4());\n const [hoverItem, setHoverItem] = useState<DSTreeviewT.Item | null>(null);\n const [latestToggledItem, setLatestToggledItem] = useState<DSTreeviewT.Item | null>(null);\n const [selectedItem, setSelectedItem] = useState<DSTreeviewT.Item | null>(null);\n const [focusedItem, setFocusedItem] = useState<DSTreeviewT.Item | null>(null);\n const [selectedCheckboxes, setSelectedCheckboxes] = useState({\n ...selection,\n });\n const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n const { visibleItems, flattenedItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(\n data,\n propsWithDefault,\n {\n setExpandedGroups,\n },\n );\n\n const virtualListRef = useRef<HTMLUListElement>();\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n\n const virtualListHelpers = useVirtual({\n size: visibleItems.length,\n parentRef: virtualListRef,\n overscan: 15,\n });\n\n const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);\n const withRadioChecks = isSingleSelect && !isMultiSelect;\n const withCheckboxChecks = !isSingleSelect && isMultiSelect;\n\n const handleExpandGroup = useCallback(toggleItemExpand, []);\n\n const ctx: DSTreeviewInternalsT.CTX = useMemo(\n () => ({\n props: propsWithDefault,\n virtualListHelpers,\n virtualListRef,\n tree,\n treeRoot,\n visibleItems,\n flattenedItems,\n triggerTreeRerender,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n uniqueTreeViewUUID,\n selectedCheckboxes,\n setSelectedCheckboxes,\n selectedItem,\n setSelectedItem,\n expandedGroups,\n setExpandedGroups,\n latestToggledItem,\n setLatestToggledItem,\n focusedItem,\n setFocusedItem,\n hoverItem,\n setHoverItem,\n handleExpandGroup,\n updateUserExpandedState,\n }),\n [\n propsWithDefault,\n virtualListHelpers,\n tree,\n treeRoot,\n visibleItems,\n flattenedItems,\n triggerTreeRerender,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n uniqueTreeViewUUID,\n selectedCheckboxes,\n selectedItem,\n expandedGroups,\n latestToggledItem,\n focusedItem,\n hoverItem,\n handleExpandGroup,\n updateUserExpandedState,\n ],\n );\n // this hooks can't use the context because the context provider doesn't wrap this\n // as such we manually pass the second parameter as fit\n if (instanceRef) instanceRef.current = treeRef.current;\n useInstanceRefActions(treeRef.current, ctx);\n useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n useNotifyExpandedChange(propsWithDefault, ctx);\n\n // this is an horrible hack.\n // this is required because there is no \"on rendered\" react-way to check if every children has finished rendering\n // this should be working for now, in the future we may want to review this for a better solution\n useEffect(() => {\n setTimeout(() => onInstanceRefInitialized(treeRef), 100);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return useMemo(() => ({ ctx }), [ctx]);\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAMO,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO;AAChF,iCAAkD,kBAAkB;AACpE,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,iBAAiB,MAAM;AAAA;AAAA,MACvB,UAAU,MAAM;AAAA;AAAA,MAChB,+BAA+B,MAAM;AAAA;AAAA,MACrC,8BAA8B,MAAM;AAAA;AAAA;AAAA;AAGxC,QAAM,UAAU,OAAO;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,CAAC,sBAAsB,SAAS;AACtC,QAAM,CAAC,WAAW,gBAAgB,SAAkC;AACpE,QAAM,CAAC,mBAAmB,wBAAwB,SAAkC;AACpF,QAAM,CAAC,cAAc,mBAAmB,SAAkC;AAC1E,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAAA,OACxD;AAAA;AAEL,QAAM,CAAC,gBAAgB,qBAAqB,SAAoC;AAChF,QAAM,EAAE,cAAc,gBAAgB,MAAM,UAAU,qBAAqB,4BAA4B,QACrG,MACA,kBACA;AAAA,IACE;AAAA;AAIJ,QAAM,iBAAiB;AAIvB,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,aAAa;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA;AAGZ,QAAM,kBAAkB,CAAC,CAAE,UAAS,SAAS,kBAAkB;AAC/D,QAAM,kBAAkB,kBAAkB,CAAC;AAC3C,QAAM,qBAAqB,CAAC,kBAAkB;AAE9C,QAAM,oBAAoB,YAAY,kBAAkB;AAExD,QAAM,MAAgC,QACpC,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKJ,MAAI;AAAa,gBAAY,UAAU,QAAQ;AAC/C,wBAAsB,QAAQ,SAAS;AACvC,mCAAiC,UAAU,qBAAqB,sBAAsB;AACtF,0BAAwB,kBAAkB;AAK1C,YAAU,MAAM;AACd,eAAW,MAAM,yBAAyB,UAAU;AAAA,KAEnD;AAEH,SAAO,QAAQ,MAAO,GAAE,QAAQ,CAAC;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { createContext } from "react";
|
|
3
|
+
import { DropIndicatorPosition } from "./SortableItemContext";
|
|
4
|
+
const DnDTreeContext = createContext({
|
|
5
|
+
depth: void 0,
|
|
6
|
+
activeIndex: void 0,
|
|
7
|
+
visibleItems: void 0,
|
|
8
|
+
dropIndicatorPosition: DropIndicatorPosition.None,
|
|
9
|
+
lastActiveId: void 0,
|
|
10
|
+
setLastActiveId: void 0,
|
|
11
|
+
isDropValid: false
|
|
12
|
+
});
|
|
13
|
+
export {
|
|
14
|
+
DnDTreeContext
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=DnDTreeContext.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/DnDTreeContext.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport { DropIndicatorPosition } from './SortableItemContext';\n\ntype DnDTreeContextType = {\n depth: number | undefined;\n activeIndex: number | undefined;\n visibleItems: DSTreeviewT.Item[] | undefined;\n dropIndicatorPosition: DropIndicatorPosition;\n lastActiveId: string | undefined;\n setLastActiveId: React.Dispatch<React.SetStateAction<string>> | undefined;\n isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({\n depth: undefined,\n activeIndex: undefined,\n visibleItems: undefined,\n dropIndicatorPosition: DropIndicatorPosition.None,\n lastActiveId: undefined,\n setLastActiveId: undefined,\n isDropValid: false,\n});\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AAYO,MAAM,iBAAiB,cAAkC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB,sBAAsB;AAAA,EAC7C,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { createContext } from "react";
|
|
3
|
+
var DropIndicatorPosition = /* @__PURE__ */ ((DropIndicatorPosition2) => {
|
|
4
|
+
DropIndicatorPosition2[DropIndicatorPosition2["None"] = 0] = "None";
|
|
5
|
+
DropIndicatorPosition2[DropIndicatorPosition2["Before"] = 1] = "Before";
|
|
6
|
+
DropIndicatorPosition2[DropIndicatorPosition2["After"] = 2] = "After";
|
|
7
|
+
DropIndicatorPosition2[DropIndicatorPosition2["Inside"] = 3] = "Inside";
|
|
8
|
+
return DropIndicatorPosition2;
|
|
9
|
+
})(DropIndicatorPosition || {});
|
|
10
|
+
const SortableItemContext = createContext({
|
|
11
|
+
draggableProps: false
|
|
12
|
+
});
|
|
13
|
+
export {
|
|
14
|
+
DropIndicatorPosition,
|
|
15
|
+
SortableItemContext
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=SortableItemContext.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/SortableItemContext.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useSortable } from '@dnd-kit/sortable';\nimport { createContext } from 'react';\n\nexport enum DropIndicatorPosition {\n None = 0,\n Before = 1,\n After = 2,\n Inside = 3,\n}\n\nexport type SortableItemContextType = {\n draggableProps:\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPosition;\n shouldShowDropIndicatorPosition: boolean;\n lastActiveId?: string;\n setLastActiveId?: React.Dispatch<React.SetStateAction<string>>;\n isDropValid: boolean;\n });\n};\n\n/** Context for cross component communication */\nexport const SortableItemContext = createContext<SortableItemContextType>({\n draggableProps: false,\n});\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAEO,IAAK,wBAAL,kBAAK,2BAAL;AACL,0DAAO,KAAP;AACA,4DAAS,KAAT;AACA,2DAAQ,KAAR;AACA,4DAAS,KAAT;AAJU;AAAA;AAoBL,MAAM,sBAAsB,cAAuC;AAAA,EACxE,gBAAgB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|