@elliemae/ds-treeview 2.2.1 → 2.3.0-alpha.4
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/TreeView.js +47 -31
- package/cjs/TreeView.js.map +7 -0
- package/cjs/TreeViewContext.js +55 -43
- package/cjs/TreeViewContext.js.map +7 -0
- package/cjs/config/cssClassesConstants.js +41 -13
- package/cjs/config/cssClassesConstants.js.map +7 -0
- package/cjs/config/useTreeview.js +102 -88
- package/cjs/config/useTreeview.js.map +7 -0
- package/cjs/hoc/DnDTreeContext.js +45 -0
- package/cjs/hoc/DnDTreeContext.js.map +7 -0
- package/cjs/hoc/SortableItemContext.js +46 -0
- package/cjs/hoc/SortableItemContext.js.map +7 -0
- package/cjs/hoc/WithConditionalDnDContext.js +128 -0
- package/cjs/hoc/WithConditionalDnDContext.js.map +7 -0
- package/cjs/hoc/WithDnDSortableItemContext.js +69 -0
- package/cjs/hoc/WithDnDSortableItemContext.js.map +7 -0
- package/cjs/index.js +37 -27
- package/cjs/index.js.map +7 -0
- package/cjs/parts/CheckboxSelectable.js +70 -59
- package/cjs/parts/CheckboxSelectable.js.map +7 -0
- package/cjs/parts/ChildrenCountDisplayer.js +45 -28
- package/cjs/parts/ChildrenCountDisplayer.js.map +7 -0
- package/cjs/parts/DnDHandle.js +57 -0
- package/cjs/parts/DnDHandle.js.map +7 -0
- package/cjs/parts/DropIndicator.js +80 -0
- package/cjs/parts/DropIndicator.js.map +7 -0
- package/cjs/parts/ExpandCaret.js +85 -83
- package/cjs/parts/ExpandCaret.js.map +7 -0
- package/cjs/parts/Icon.js +46 -31
- package/cjs/parts/Icon.js.map +7 -0
- package/cjs/parts/NestingSpace.js +43 -35
- package/cjs/parts/NestingSpace.js.map +7 -0
- package/cjs/parts/RadioSelectable.js +52 -37
- package/cjs/parts/RadioSelectable.js.map +7 -0
- package/cjs/parts/TreeItem.js +121 -165
- package/cjs/parts/TreeItem.js.map +7 -0
- package/cjs/parts/TreeItemText.js +88 -95
- package/cjs/parts/TreeItemText.js.map +7 -0
- package/cjs/parts/TreeList.js +114 -132
- package/cjs/parts/TreeList.js.map +7 -0
- package/cjs/plugins/dnd/TreeDndPlugin.js +34 -43
- package/cjs/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/cjs/plugins/dnd/index.js +28 -10
- package/cjs/plugins/dnd/index.js.map +7 -0
- package/cjs/plugins/index.js +34 -22
- package/cjs/plugins/index.js.map +7 -0
- package/cjs/plugins/roving/TreeRovingPlugin.js +35 -7
- package/cjs/plugins/roving/TreeRovingPlugin.js.map +7 -0
- package/cjs/plugins/roving/index.js +28 -9
- package/cjs/plugins/roving/index.js.map +7 -0
- package/cjs/plugins/searchable/SearchableTreePlugin.js +35 -7
- package/cjs/plugins/searchable/SearchableTreePlugin.js.map +7 -0
- package/cjs/plugins/searchable/index.js +28 -9
- package/cjs/plugins/searchable/index.js.map +7 -0
- package/cjs/plugins/selectable/SelectablePluginTree.js +35 -7
- package/cjs/plugins/selectable/SelectablePluginTree.js.map +7 -0
- package/cjs/plugins/selectable/index.js +28 -9
- package/cjs/plugins/selectable/index.js.map +7 -0
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js +35 -7
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
- package/cjs/plugins/toolbar/index.js +28 -9
- package/cjs/plugins/toolbar/index.js.map +7 -0
- package/cjs/plugins/tree/TreeDataPlugin.js +35 -7
- package/cjs/plugins/tree/TreeDataPlugin.js.map +7 -0
- package/cjs/plugins/tree/index.js +28 -9
- package/cjs/plugins/tree/index.js.map +7 -0
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js +35 -7
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
- package/cjs/plugins/virtualization/index.js +28 -9
- package/cjs/plugins/virtualization/index.js.map +7 -0
- package/cjs/react-desc-prop-types.js +83 -53
- package/cjs/react-desc-prop-types.js.map +7 -0
- package/cjs/related-components/TreeViewSearchBar.js +42 -40
- package/cjs/related-components/TreeViewSearchBar.js.map +7 -0
- package/cjs/sharedTypes.js +27 -2
- package/cjs/sharedTypes.js.map +7 -0
- package/cjs/utils/array-helpers.js +35 -11
- package/cjs/utils/array-helpers.js.map +7 -0
- package/cjs/utils/group-expands-helpers.js +86 -59
- package/cjs/utils/group-expands-helpers.js.map +7 -0
- package/cjs/utils/keyboard-helpers.js +86 -90
- package/cjs/utils/keyboard-helpers.js.map +7 -0
- package/cjs/utils/object-helpers.js +43 -36
- package/cjs/utils/object-helpers.js.map +7 -0
- package/cjs/utils/refs-helpers.js +43 -22
- package/cjs/utils/refs-helpers.js.map +7 -0
- package/cjs/utils/selectable-helper.js +61 -53
- package/cjs/utils/selectable-helper.js.map +7 -0
- package/cjs/utils/string-helpers.js +35 -7
- package/cjs/utils/string-helpers.js.map +7 -0
- package/cjs/utils/tree-helpers.js +125 -135
- package/cjs/utils/tree-helpers.js.map +7 -0
- package/cjs/utils/useInstanceRefActions.js +54 -43
- package/cjs/utils/useInstanceRefActions.js.map +7 -0
- package/cjs/utils/useTree.js +78 -78
- package/cjs/utils/useTree.js.map +7 -0
- package/esm/TreeView.js +16 -20
- package/esm/TreeView.js.map +7 -0
- package/esm/TreeViewContext.js +26 -37
- package/esm/TreeViewContext.js.map +7 -0
- package/esm/config/cssClassesConstants.js +12 -6
- package/esm/config/cssClassesConstants.js.map +7 -0
- package/esm/config/useTreeview.js +59 -66
- package/esm/config/useTreeview.js.map +7 -0
- package/esm/hoc/DnDTreeContext.js +16 -0
- package/esm/hoc/DnDTreeContext.js.map +7 -0
- package/esm/hoc/SortableItemContext.js +17 -0
- package/esm/hoc/SortableItemContext.js.map +7 -0
- package/esm/hoc/WithConditionalDnDContext.js +99 -0
- package/esm/hoc/WithConditionalDnDContext.js.map +7 -0
- package/esm/hoc/WithDnDSortableItemContext.js +40 -0
- package/esm/hoc/WithDnDSortableItemContext.js.map +7 -0
- package/esm/index.js +8 -9
- package/esm/index.js.map +7 -0
- package/esm/parts/CheckboxSelectable.js +36 -46
- package/esm/parts/CheckboxSelectable.js.map +7 -0
- package/esm/parts/ChildrenCountDisplayer.js +16 -20
- package/esm/parts/ChildrenCountDisplayer.js.map +7 -0
- package/esm/parts/DnDHandle.js +28 -0
- package/esm/parts/DnDHandle.js.map +7 -0
- package/esm/parts/DropIndicator.js +51 -0
- package/esm/parts/DropIndicator.js.map +7 -0
- package/esm/parts/ExpandCaret.js +54 -72
- package/esm/parts/ExpandCaret.js.map +7 -0
- package/esm/parts/Icon.js +16 -22
- package/esm/parts/Icon.js.map +7 -0
- package/esm/parts/NestingSpace.js +14 -27
- package/esm/parts/NestingSpace.js.map +7 -0
- package/esm/parts/RadioSelectable.js +20 -28
- package/esm/parts/RadioSelectable.js.map +7 -0
- package/esm/parts/TreeItem.js +89 -150
- package/esm/parts/TreeItem.js.map +7 -0
- package/esm/parts/TreeItemText.js +58 -85
- package/esm/parts/TreeItemText.js.map +7 -0
- package/esm/parts/TreeList.js +86 -120
- package/esm/parts/TreeList.js.map +7 -0
- package/esm/plugins/dnd/TreeDndPlugin.js +5 -34
- package/esm/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/esm/plugins/dnd/index.js +3 -1
- package/esm/plugins/dnd/index.js.map +7 -0
- package/esm/plugins/index.js +9 -7
- package/esm/plugins/index.js.map +7 -0
- package/esm/plugins/roving/TreeRovingPlugin.js +6 -3
- package/esm/plugins/roving/TreeRovingPlugin.js.map +7 -0
- package/esm/plugins/roving/index.js +3 -1
- package/esm/plugins/roving/index.js.map +7 -0
- package/esm/plugins/searchable/SearchableTreePlugin.js +6 -3
- package/esm/plugins/searchable/SearchableTreePlugin.js.map +7 -0
- package/esm/plugins/searchable/index.js +3 -1
- package/esm/plugins/searchable/index.js.map +7 -0
- package/esm/plugins/selectable/SelectablePluginTree.js +6 -3
- package/esm/plugins/selectable/SelectablePluginTree.js.map +7 -0
- package/esm/plugins/selectable/index.js +3 -1
- package/esm/plugins/selectable/index.js.map +7 -0
- package/esm/plugins/toolbar/TreeToolbarPlugin.js +6 -3
- package/esm/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
- package/esm/plugins/toolbar/index.js +3 -1
- package/esm/plugins/toolbar/index.js.map +7 -0
- package/esm/plugins/tree/TreeDataPlugin.js +6 -3
- package/esm/plugins/tree/TreeDataPlugin.js.map +7 -0
- package/esm/plugins/tree/index.js +3 -1
- package/esm/plugins/tree/index.js.map +7 -0
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js +6 -3
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
- package/esm/plugins/virtualization/index.js +3 -1
- package/esm/plugins/virtualization/index.js.map +7 -0
- package/esm/react-desc-prop-types.js +48 -43
- package/esm/react-desc-prop-types.js.map +7 -0
- package/esm/related-components/TreeViewSearchBar.js +13 -32
- package/esm/related-components/TreeViewSearchBar.js.map +7 -0
- package/esm/sharedTypes.js +2 -1
- package/esm/sharedTypes.js.map +7 -0
- package/esm/utils/array-helpers.js +6 -6
- package/esm/utils/array-helpers.js.map +7 -0
- package/esm/utils/group-expands-helpers.js +56 -46
- package/esm/utils/group-expands-helpers.js.map +7 -0
- package/esm/utils/keyboard-helpers.js +47 -74
- package/esm/utils/keyboard-helpers.js.map +7 -0
- package/esm/utils/object-helpers.js +14 -31
- package/esm/utils/object-helpers.js.map +7 -0
- package/esm/utils/refs-helpers.js +15 -19
- package/esm/utils/refs-helpers.js.map +7 -0
- package/esm/utils/selectable-helper.js +32 -43
- package/esm/utils/selectable-helper.js.map +7 -0
- package/esm/utils/string-helpers.js +6 -3
- package/esm/utils/string-helpers.js.map +7 -0
- package/esm/utils/tree-helpers.js +94 -119
- package/esm/utils/tree-helpers.js.map +7 -0
- package/esm/utils/useInstanceRefActions.js +21 -35
- package/esm/utils/useInstanceRefActions.js.map +7 -0
- package/esm/utils/useTree.js +37 -57
- package/esm/utils/useTree.js.map +7 -0
- package/package.json +34 -18
- package/types/hoc/DnDTreeContext.d.ts +14 -0
- package/types/hoc/SortableItemContext.d.ts +19 -0
- package/types/hoc/WithConditionalDnDContext.d.ts +4 -0
- package/types/hoc/WithDnDSortableItemContext.d.ts +4 -0
- package/types/parts/DnDHandle.d.ts +6 -0
- package/types/parts/DropIndicator.d.ts +10 -0
- package/types/parts/TreeItem.d.ts +4 -11
- package/types/parts/TreeList.d.ts +0 -4
- package/types/plugins/dnd/TreeDndPlugin.d.ts +0 -2
- package/types/react-desc-prop-types.d.ts +17 -3
- package/types/sharedTypes.d.ts +1 -8
- package/types/utils/keyboard-helpers.d.ts +2 -1
- package/types/utils/refs-helpers.d.ts +1 -1
- package/types/utils/tree-helpers.d.ts +4 -1
- package/types/utils/useTree.d.ts +1 -0
- package/cjs/utils/dnd-helpers.js +0 -140
- package/cjs/utils/useDnDHelpers.js +0 -220
- package/esm/utils/dnd-helpers.js +0 -132
- package/esm/utils/useDnDHelpers.js +0 -216
- package/types/utils/dnd-helpers.d.ts +0 -39
- package/types/utils/useDnDHelpers.d.ts +0 -26
|
@@ -1,51 +1,56 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
/* eslint-disable max-lines */
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { PropTypes } from "react-desc";
|
|
4
3
|
const TreeViewPropTypes = {
|
|
5
4
|
data: PropTypes.arrayOf(PropTypes.shape({
|
|
6
5
|
children: PropTypes.arrayOf(PropTypes.object),
|
|
7
6
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
8
|
-
isGroup: PropTypes.oneOfType([PropTypes.oneOf([
|
|
7
|
+
isGroup: PropTypes.oneOfType([PropTypes.oneOf([void 0, null]), PropTypes.bool]),
|
|
9
8
|
name: PropTypes.string,
|
|
10
9
|
node: PropTypes.object
|
|
11
|
-
})).description(
|
|
12
|
-
plugins: PropTypes.arrayOf(PropTypes.string).description(
|
|
13
|
-
selection: PropTypes.object.description(
|
|
14
|
-
expanded: PropTypes.object.description(
|
|
10
|
+
})).description("data to populate tree view").isRequired,
|
|
11
|
+
plugins: PropTypes.arrayOf(PropTypes.string).description("list of enabled plugins").defaultValue([]),
|
|
12
|
+
selection: PropTypes.object.description("pre selected items").defaultValue({}),
|
|
13
|
+
expanded: PropTypes.object.description("control what items are expanded").defaultValue(void 0),
|
|
15
14
|
instanceRef: PropTypes.shape({
|
|
16
|
-
current: PropTypes.oneOfType([
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
15
|
+
current: PropTypes.oneOfType([
|
|
16
|
+
PropTypes.oneOf([null, void 0]),
|
|
17
|
+
PropTypes.shape({
|
|
18
|
+
actions: PropTypes.shape({
|
|
19
|
+
toggleExpandAll: PropTypes.func,
|
|
20
|
+
scrollTo: PropTypes.func
|
|
21
|
+
}).description("").isRequired
|
|
22
|
+
})
|
|
23
|
+
])
|
|
24
|
+
}).description("instance ref"),
|
|
25
|
+
isItemDisabled: PropTypes.func.description("Function that receives an item, and returns whether that item should be disabled").defaultValue("() => false"),
|
|
26
|
+
disableIcons: PropTypes.bool.description("disable icons").defaultValue(false),
|
|
27
|
+
fluid: PropTypes.bool.description("whether is fluid or not").defaultValue(false),
|
|
28
|
+
isMultiSelect: PropTypes.bool.description("whether the tree view is multi select or not").defaultValue(false),
|
|
29
|
+
isSingleSelect: PropTypes.bool.description("wheter the tree view is single select or not").defaultValue(false),
|
|
30
|
+
isLoading: PropTypes.bool.description("wheter the tree should show the loading state or not").defaultValue(false),
|
|
31
|
+
getIsDropValid: PropTypes.func.description("Function that returns true if the drop is valid and false if it's not").defaultValue("() => true"),
|
|
32
|
+
restrictDragAndDrop: PropTypes.bool.description("whether to restrict DnD functionality or not").defaultValue(false),
|
|
33
|
+
showChildrenAmount: PropTypes.bool.description("whether to show the amount of children or not").defaultValue(false),
|
|
34
|
+
sortable: PropTypes.bool.description("whether the sortable functionality is active or not").defaultValue(false),
|
|
35
|
+
onItemClick: PropTypes.func.description("function executed when clicking on an item").defaultValue("() => {}"),
|
|
36
|
+
onItemFocus: PropTypes.func.description("function executed when focusing on an item").defaultValue("() => {}"),
|
|
37
|
+
onVisibleItemsChange: PropTypes.func.description("function executed when the visible items change").defaultValue("() => {}"),
|
|
38
|
+
onOrderChange: PropTypes.func.description("function executed when the items order changes").defaultValue("() => {}"),
|
|
39
|
+
onSelectionChange: PropTypes.func.description("function executed when the selection changes").defaultValue("() => {}"),
|
|
40
|
+
onExpandChange: PropTypes.func.description("function executed when expanding an item").defaultValue("() => {}"),
|
|
41
|
+
onInstanceRefInitialized: PropTypes.func.description("function executed when instanceRef has terminated instanciation").defaultValue("() => {}"),
|
|
42
|
+
rowSize: PropTypes.oneOf(["normal", "compact"]).description("size of the row").defaultValue("normal"),
|
|
43
|
+
labelOverflow: PropTypes.oneOf(["wrap", "wrap-all", "truncate"]).description("label truncation preference").defaultValue("wrap"),
|
|
44
|
+
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("components width").defaultValue("100%"),
|
|
45
|
+
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("components height").defaultValue("100%"),
|
|
46
|
+
groupIcon: PropTypes.node.description("icon for groups"),
|
|
47
|
+
itemIcon: PropTypes.node.description("icon for items"),
|
|
48
|
+
searchQuery: PropTypes.string.description("search query value"),
|
|
49
|
+
noItemsPlaceholder: PropTypes.string.description("message to be shown when there are no items in the treeview to be displayed").defaultValue("No items found"),
|
|
50
|
+
name: PropTypes.string.description("property key to identifier for items labels").defaultValue("name"),
|
|
51
|
+
highlightOnlyQuery: PropTypes.bool.description("whether to highlight results or not").defaultValue(false)
|
|
49
52
|
};
|
|
50
|
-
|
|
51
|
-
|
|
53
|
+
export {
|
|
54
|
+
TreeViewPropTypes
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes } from 'react-desc';\nimport TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nexport declare namespace DSTreeviewT {\n export type StringOrNum = string | number;\n export type SelectionState = boolean | 'mixed';\n export type SelectionItems = Record<StringOrNum, SelectionState>;\n export type ScrollToFunc = ReturnType<typeof useVirtual>['scrollToIndex'];\n export type ScrollToItemOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ScrollToItemFunc = (options: ScrollToItemOptions) => void;\n export type ExpandedItems = Record<StringOrNum, true>; // { [id]:true } -> e.g. {1:true; 2:true} // false are not listed\n export interface SimpleItem {\n [key: string]: unknown;\n name: string;\n children?: SimpleItem[];\n id: StringOrNum;\n }\n\n export interface Item extends SimpleItem {\n children: Item[];\n treeDepth?: number;\n virtualIndex?: number;\n isChecked?: boolean | 'mixed';\n isGroup?: boolean;\n isExpanded?: boolean;\n childrenMatchesSearchQuery?: boolean;\n matchesSearchQuery?: boolean;\n nodeItemRef?: React.RefObject<HTMLLIElement>;\n model: TreeModel.Node<Item>['model'];\n node: TreeModel.Node<Item> & { parent?: TreeModel.Node<Item> };\n nodePath: TreeModel.Node<Item>[];\n }\n\n export interface DndItem {\n uid: string;\n depth: number;\n realIndex: number;\n childrenCount: number;\n parentId: string | null;\n original: SimpleItem;\n }\n\n export interface Actions {\n toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;\n scrollTo: DSTreeviewT.ScrollToFunc;\n setSelectedItemByVirtualIndex: (index: number) => void;\n setFocusedItemByVirtualIndex: (\n index: number,\n scrollOpts: DSTreeviewT.ScrollToItemOptions & { withScroll?: boolean },\n ) => void;\n }\n export interface InstanceRef {\n actions: Actions;\n }\n\n export interface DefaultProps {\n plugins: string[];\n selection: SelectionItems;\n instanceRef: React.MutableRefObject<InstanceRef>;\n isItemDisabled: (item: Item) => boolean;\n disableIcons: boolean;\n fluid: boolean;\n isMultiSelect: boolean;\n isSingleSelect: boolean;\n getIsDropValid: (\n active: DndItem,\n over: DndItem,\n dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside',\n ) => boolean;\n restrictDragAndDrop: boolean;\n showChildrenAmount: boolean;\n sortable: boolean;\n isLoading: boolean;\n highlightOnlyQuery: boolean;\n onItemClick: (item: Item, e: React.MouseEvent<HTMLLIElement>) => void;\n onItemFocus: (meta: { scrollToItem: ScrollToItemFunc; itemIndex: number; item: Item }) => void;\n onVisibleItemsChange: (newVisibleItems: Item[]) => void;\n onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;\n onSelectionChange: (\n selection: SelectionItems,\n item: Item,\n meta: { scrollToItem: ScrollToItemFunc; itemIndex: number },\n ) => void;\n onExpandChange: (expandedHashmap: ExpandedItems, itemToggled: Item | null | undefined) => void;\n onInstanceRefInitialized: (instanceRef: React.MutableRefObject<InstanceRef>) => void;\n rowSize: 'normal' | 'compact';\n labelOverflow: 'wrap' | 'wrap-all' | 'truncate';\n noItemsPlaceholder: string;\n nameKey: string;\n width: StringOrNum;\n height: StringOrNum;\n groupIcon: JSX.Element | null;\n itemIcon: JSX.Element | null;\n searchQuery: string;\n }\n export interface PropsOptional {\n expanded: ExpandedItems;\n rightAddons: ((item: Item) => React.ReactNode | React.ReactNode[]) | JSX.Element;\n }\n export interface PropsRequired {\n data: Item[];\n }\n export interface Props extends DefaultProps, PropsOptional, PropsRequired {}\n}\n\nexport const TreeViewPropTypes = {\n data: PropTypes.arrayOf(\n PropTypes.shape({\n children: PropTypes.arrayOf(PropTypes.object),\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n isGroup: PropTypes.oneOfType([PropTypes.oneOf([undefined, null]), PropTypes.bool]),\n name: PropTypes.string,\n node: PropTypes.object,\n }),\n ).description('data to populate tree view').isRequired,\n plugins: PropTypes.arrayOf(PropTypes.string).description('list of enabled plugins').defaultValue([]),\n selection: PropTypes.object.description('pre selected items').defaultValue({}),\n expanded: PropTypes.object.description('control what items are expanded').defaultValue(undefined),\n instanceRef: PropTypes.shape({\n current: PropTypes.oneOfType([\n PropTypes.oneOf([null, undefined]),\n PropTypes.shape({\n actions: PropTypes.shape({\n toggleExpandAll: PropTypes.func,\n scrollTo: PropTypes.func,\n }).description('').isRequired,\n }),\n ]),\n }).description('instance ref'),\n isItemDisabled: PropTypes.func\n .description('Function that receives an item, and returns whether that item should be disabled')\n .defaultValue('() => false'),\n disableIcons: PropTypes.bool.description('disable icons').defaultValue(false),\n fluid: PropTypes.bool.description('whether is fluid or not').defaultValue(false),\n isMultiSelect: PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),\n isSingleSelect: PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),\n isLoading: PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),\n getIsDropValid: PropTypes.func\n .description(\"Function that returns true if the drop is valid and false if it's not\")\n .defaultValue('() => true'),\n restrictDragAndDrop: PropTypes.bool.description('whether to restrict DnD functionality or not').defaultValue(false),\n showChildrenAmount: PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),\n sortable: PropTypes.bool.description('whether the sortable functionality is active or not').defaultValue(false),\n onItemClick: PropTypes.func.description('function executed when clicking on an item').defaultValue('() => {}'),\n onItemFocus: PropTypes.func.description('function executed when focusing on an item').defaultValue('() => {}'),\n onVisibleItemsChange: PropTypes.func\n .description('function executed when the visible items change')\n .defaultValue('() => {}'),\n onOrderChange: PropTypes.func.description('function executed when the items order changes').defaultValue('() => {}'),\n onSelectionChange: PropTypes.func\n .description('function executed when the selection changes')\n .defaultValue('() => {}'),\n onExpandChange: PropTypes.func.description('function executed when expanding an item').defaultValue('() => {}'),\n onInstanceRefInitialized: PropTypes.func\n .description('function executed when instanceRef has terminated instanciation')\n .defaultValue('() => {}'),\n rowSize: PropTypes.oneOf(['normal', 'compact']).description('size of the row').defaultValue('normal'),\n labelOverflow: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate'])\n .description('label truncation preference')\n .defaultValue('wrap'),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('components width').defaultValue('100%'),\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('components height')\n .defaultValue('100%'),\n groupIcon: PropTypes.node.description('icon for groups'),\n itemIcon: PropTypes.node.description('icon for items'),\n searchQuery: PropTypes.string.description('search query value'),\n noItemsPlaceholder: PropTypes.string\n .description('message to be shown when there are no items in the treeview to be displayed')\n .defaultValue('No items found'),\n name: PropTypes.string.description('property key to identifier for items labels').defaultValue('name'),\n highlightOnlyQuery: PropTypes.bool.description('whether to highlight results or not').defaultValue(false),\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAyGO,MAAM,oBAAoB;AAAA,EAC/B,MAAM,UAAU,QACd,UAAU,MAAM;AAAA,IACd,UAAU,UAAU,QAAQ,UAAU;AAAA,IACtC,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACrD,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,CAAC,QAAW,QAAQ,UAAU;AAAA,IAC5E,MAAM,UAAU;AAAA,IAChB,MAAM,UAAU;AAAA,MAElB,YAAY,8BAA8B;AAAA,EAC5C,SAAS,UAAU,QAAQ,UAAU,QAAQ,YAAY,2BAA2B,aAAa;AAAA,EACjG,WAAW,UAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EAC3E,UAAU,UAAU,OAAO,YAAY,mCAAmC,aAAa;AAAA,EACvF,aAAa,UAAU,MAAM;AAAA,IAC3B,SAAS,UAAU,UAAU;AAAA,MAC3B,UAAU,MAAM,CAAC,MAAM;AAAA,MACvB,UAAU,MAAM;AAAA,QACd,SAAS,UAAU,MAAM;AAAA,UACvB,iBAAiB,UAAU;AAAA,UAC3B,UAAU,UAAU;AAAA,WACnB,YAAY,IAAI;AAAA;AAAA;AAAA,KAGtB,YAAY;AAAA,EACf,gBAAgB,UAAU,KACvB,YAAY,oFACZ,aAAa;AAAA,EAChB,cAAc,UAAU,KAAK,YAAY,iBAAiB,aAAa;AAAA,EACvE,OAAO,UAAU,KAAK,YAAY,2BAA2B,aAAa;AAAA,EAC1E,eAAe,UAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACvG,gBAAgB,UAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACxG,WAAW,UAAU,KAAK,YAAY,wDAAwD,aAAa;AAAA,EAC3G,gBAAgB,UAAU,KACvB,YAAY,yEACZ,aAAa;AAAA,EAChB,qBAAqB,UAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EAC7G,oBAAoB,UAAU,KAAK,YAAY,iDAAiD,aAAa;AAAA,EAC7G,UAAU,UAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACzG,aAAa,UAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EACnG,aAAa,UAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EACnG,sBAAsB,UAAU,KAC7B,YAAY,mDACZ,aAAa;AAAA,EAChB,eAAe,UAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EACzG,mBAAmB,UAAU,KAC1B,YAAY,gDACZ,aAAa;AAAA,EAChB,gBAAgB,UAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EACpG,0BAA0B,UAAU,KACjC,YAAY,mEACZ,aAAa;AAAA,EAChB,SAAS,UAAU,MAAM,CAAC,UAAU,YAAY,YAAY,mBAAmB,aAAa;AAAA,EAC5F,eAAe,UAAU,MAAM,CAAC,QAAQ,YAAY,aACjD,YAAY,+BACZ,aAAa;AAAA,EAChB,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY,oBAAoB,aAAa;AAAA,EAC9G,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SACtD,YAAY,qBACZ,aAAa;AAAA,EAChB,WAAW,UAAU,KAAK,YAAY;AAAA,EACtC,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,aAAa,UAAU,OAAO,YAAY;AAAA,EAC1C,oBAAoB,UAAU,OAC3B,YAAY,+EACZ,aAAa;AAAA,EAChB,MAAM,UAAU,OAAO,YAAY,+CAA+C,aAAa;AAAA,EAC/F,oBAAoB,UAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,40 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { DSNavSearchBox } from
|
|
4
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { DSNavSearchBox } from "@elliemae/ds-form";
|
|
5
4
|
function TreeViewSearchBar(props) {
|
|
6
|
-
const {
|
|
7
|
-
|
|
5
|
+
const { handleChange, onNext, onPrevious, onClear, currentResultIndex, totalResults, value } = props;
|
|
6
|
+
return /* @__PURE__ */ React2.createElement(DSNavSearchBox, {
|
|
7
|
+
onChange: (v) => {
|
|
8
|
+
handleChange({ target: { value: v } });
|
|
9
|
+
},
|
|
8
10
|
onNext,
|
|
9
11
|
onPrevious,
|
|
10
12
|
onClear,
|
|
11
13
|
currentResultIndex,
|
|
12
14
|
totalResults,
|
|
13
15
|
value
|
|
14
|
-
} = props;
|
|
15
|
-
return /*#__PURE__*/_jsx(DSNavSearchBox, {
|
|
16
|
-
onChange: v => {
|
|
17
|
-
handleChange({
|
|
18
|
-
target: {
|
|
19
|
-
value: v
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
},
|
|
23
|
-
onNext: onNext,
|
|
24
|
-
onPrevious: onPrevious,
|
|
25
|
-
onClear: onClear,
|
|
26
|
-
currentResultIndex: currentResultIndex,
|
|
27
|
-
totalResults: totalResults,
|
|
28
|
-
value: value
|
|
29
16
|
});
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
// onClear: PropTypes.func.isRequired,
|
|
36
|
-
// currentResultIndex: PropTypes.number.isRequired,
|
|
37
|
-
// totalResults: PropTypes.number.isRequired,
|
|
38
|
-
// };
|
|
39
|
-
|
|
40
|
-
export { TreeViewSearchBar };
|
|
17
|
+
}
|
|
18
|
+
export {
|
|
19
|
+
TreeViewSearchBar
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=TreeViewSearchBar.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/related-components/TreeViewSearchBar.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\n\ninterface PropsT {\n handleChange: (opt: { target: { value: string } }) => void;\n onNext: () => void;\n onPrevious: () => void;\n onClear: () => void;\n currentResultIndex: number;\n totalResults: number;\n value: string;\n}\n\nexport function TreeViewSearchBar(props: PropsT) {\n const { handleChange, onNext, onPrevious, onClear, currentResultIndex, totalResults, value } = props;\n\n return (\n <DSNavSearchBox\n onChange={(v: string) => {\n handleChange({ target: { value: v } });\n }}\n onNext={onNext}\n onPrevious={onPrevious}\n onClear={onClear}\n currentResultIndex={currentResultIndex}\n totalResults={totalResults}\n value={value}\n />\n );\n}\n\n// TreeViewSearchBar.propTypes = {\n// value: PropTypes.string.isRequired,\n// handleChange: PropTypes.func.isRequired,\n// onNext: PropTypes.func.isRequired,\n// onPrevious: PropTypes.func.isRequired,\n// onClear: PropTypes.func.isRequired,\n// currentResultIndex: PropTypes.number.isRequired,\n// totalResults: PropTypes.number.isRequired,\n// };\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AAYO,2BAA2B,OAAe;AAC/C,QAAM,EAAE,cAAc,QAAQ,YAAY,SAAS,oBAAoB,cAAc,UAAU;AAE/F,SACE,qCAAC,gBAAD;AAAA,IACE,UAAU,CAAC,MAAc;AACvB,mBAAa,EAAE,QAAQ,EAAE,OAAO;AAAA;AAAA,IAElC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/sharedTypes.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//# sourceMappingURL=sharedTypes.js.map
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
// https://github.com/sindresorhus/array-move/blob/master/index.js
|
|
1
|
+
import * as React from "react";
|
|
4
2
|
const arrayMoveMutate = (array, from, to) => {
|
|
5
3
|
const startIndex = from < 0 ? array.length + from : from;
|
|
6
|
-
|
|
7
4
|
if (startIndex >= 0 && startIndex < array.length) {
|
|
8
5
|
const endIndex = to < 0 ? array.length + to : to;
|
|
9
6
|
const [item] = array.splice(from, 1);
|
|
@@ -15,5 +12,8 @@ const arrayMove = (array, from, to) => {
|
|
|
15
12
|
arrayMoveMutate(newArray, from, to);
|
|
16
13
|
return newArray;
|
|
17
14
|
};
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
export {
|
|
16
|
+
arrayMove,
|
|
17
|
+
arrayMoveMutate
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=array-helpers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/array-helpers.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// https://github.com/sindresorhus/array-move/blob/master/index.js\nexport const arrayMoveMutate = (array: unknown[], from: number, to: number) => {\n const startIndex = from < 0 ? array.length + from : from;\n\n if (startIndex >= 0 && startIndex < array.length) {\n const endIndex = to < 0 ? array.length + to : to;\n\n const [item] = array.splice(from, 1);\n array.splice(endIndex, 0, item);\n }\n};\n\nexport const arrayMove = (array: unknown[], from: number, to: number) => {\n const newArray = [...array];\n arrayMoveMutate(newArray, from, to);\n return newArray;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCO,MAAM,kBAAkB,CAAC,OAAkB,MAAc,OAAe;AAC7E,QAAM,aAAa,OAAO,IAAI,MAAM,SAAS,OAAO;AAEpD,MAAI,cAAc,KAAK,aAAa,MAAM,QAAQ;AAChD,UAAM,WAAW,KAAK,IAAI,MAAM,SAAS,KAAK;AAE9C,UAAM,CAAC,QAAQ,MAAM,OAAO,MAAM;AAClC,UAAM,OAAO,UAAU,GAAG;AAAA;AAAA;AAIvB,MAAM,YAAY,CAAC,OAAkB,MAAc,OAAe;AACvE,QAAM,WAAW,CAAC,GAAG;AACrB,kBAAgB,UAAU,MAAM;AAChC,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,99 +1,109 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
/* eslint-disable max-params */
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useCallback, useEffect } from "react";
|
|
4
3
|
const updateExpandedState = (treeRoot, onExpandChange) => {
|
|
5
4
|
const shouldContinueWalking = true;
|
|
6
|
-
const newExpandedHashMap = {
|
|
7
|
-
|
|
8
|
-
};
|
|
9
|
-
treeRoot.walk(node => {
|
|
5
|
+
const newExpandedHashMap = { __ds_tree_root: true };
|
|
6
|
+
treeRoot.walk((node) => {
|
|
10
7
|
if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {
|
|
11
8
|
newExpandedHashMap[node.model.id] = true;
|
|
12
9
|
}
|
|
13
|
-
|
|
14
10
|
return shouldContinueWalking;
|
|
15
11
|
});
|
|
16
|
-
if (onExpandChange)
|
|
12
|
+
if (onExpandChange)
|
|
13
|
+
onExpandChange(newExpandedHashMap, null);
|
|
17
14
|
};
|
|
18
|
-
const toggleItemExpand =
|
|
19
|
-
|
|
15
|
+
const toggleItemExpand = (itemToToggle, triggerTreeRerender, updateUserExpandedState, scrollTo = () => {
|
|
16
|
+
}) => {
|
|
20
17
|
const {
|
|
21
18
|
node: {
|
|
22
|
-
model: {
|
|
23
|
-
isExpanded
|
|
24
|
-
}
|
|
19
|
+
model: { isExpanded }
|
|
25
20
|
},
|
|
26
21
|
virtualIndex
|
|
27
22
|
} = itemToToggle;
|
|
28
|
-
|
|
29
23
|
if (itemToToggle.node.model.isGroup) {
|
|
30
24
|
itemToToggle.node.model.isExpanded = !isExpanded;
|
|
31
25
|
triggerTreeRerender();
|
|
32
26
|
updateUserExpandedState();
|
|
33
27
|
setTimeout(() => {
|
|
34
|
-
if (typeof virtualIndex ===
|
|
35
|
-
align:
|
|
36
|
-
});
|
|
28
|
+
if (typeof virtualIndex === "number")
|
|
29
|
+
scrollTo(virtualIndex, { align: "start" });
|
|
37
30
|
});
|
|
38
31
|
}
|
|
39
32
|
};
|
|
40
|
-
const expandItemModel = modelToExpand => {
|
|
41
|
-
if (modelToExpand.isGroup)
|
|
33
|
+
const expandItemModel = (modelToExpand) => {
|
|
34
|
+
if (modelToExpand.isGroup)
|
|
35
|
+
modelToExpand.isExpanded = true;
|
|
42
36
|
};
|
|
43
|
-
const collapseItemModel = modelToCollapse => {
|
|
44
|
-
if (modelToCollapse.isGroup)
|
|
37
|
+
const collapseItemModel = (modelToCollapse) => {
|
|
38
|
+
if (modelToCollapse.isGroup)
|
|
39
|
+
modelToCollapse.isExpanded = false;
|
|
45
40
|
};
|
|
46
41
|
const expandAll = (treeRoot, triggerTreeRerender) => {
|
|
47
42
|
const shouldContinueWalking = true;
|
|
48
|
-
treeRoot.walk(node => {
|
|
49
|
-
if (!node.isRoot())
|
|
43
|
+
treeRoot.walk((node) => {
|
|
44
|
+
if (!node.isRoot())
|
|
45
|
+
expandItemModel(node.model);
|
|
50
46
|
return shouldContinueWalking;
|
|
51
47
|
});
|
|
52
48
|
triggerTreeRerender();
|
|
53
49
|
};
|
|
54
50
|
const collapseAll = (treeRoot, triggerTreeRerender) => {
|
|
55
|
-
const shouldContinueWalking = true;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
const shouldContinueWalking = true;
|
|
52
|
+
treeRoot.walk((node) => {
|
|
53
|
+
if (!node.isRoot())
|
|
54
|
+
collapseItemModel(node.model);
|
|
59
55
|
return shouldContinueWalking;
|
|
60
56
|
});
|
|
61
57
|
triggerTreeRerender();
|
|
62
58
|
};
|
|
63
|
-
const getToggleExpandShouldExpand = treeRoot => {
|
|
59
|
+
const getToggleExpandShouldExpand = (treeRoot) => {
|
|
64
60
|
let shouldExpand = false;
|
|
65
|
-
const shouldContinueWalking = true;
|
|
66
|
-
|
|
67
|
-
treeRoot.walk(node => {
|
|
61
|
+
const shouldContinueWalking = true;
|
|
62
|
+
treeRoot.walk((node) => {
|
|
68
63
|
if (!node.isRoot()) {
|
|
69
64
|
if (!node.model.isExpanded && node.model.isGroup) {
|
|
70
|
-
shouldExpand = true;
|
|
71
|
-
|
|
65
|
+
shouldExpand = true;
|
|
72
66
|
return shouldContinueWalking;
|
|
73
67
|
}
|
|
74
68
|
}
|
|
75
|
-
|
|
76
69
|
return shouldContinueWalking;
|
|
77
70
|
});
|
|
78
71
|
return shouldExpand;
|
|
79
72
|
};
|
|
80
73
|
const toggleExpandAllHelper = (isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
|
|
81
|
-
if (isExpand === true)
|
|
74
|
+
if (isExpand === true)
|
|
75
|
+
expandAll(treeRoot, triggerTreeRerender);
|
|
76
|
+
else if (isExpand === false)
|
|
77
|
+
collapseAll(treeRoot, triggerTreeRerender);
|
|
78
|
+
else {
|
|
82
79
|
const shouldExpand = getToggleExpandShouldExpand(treeRoot);
|
|
83
|
-
if (shouldExpand === true)
|
|
80
|
+
if (shouldExpand === true)
|
|
81
|
+
expandAll(treeRoot, triggerTreeRerender);
|
|
82
|
+
else
|
|
83
|
+
collapseAll(treeRoot, triggerTreeRerender);
|
|
84
84
|
}
|
|
85
85
|
setLatestToggledItem(null);
|
|
86
86
|
updateUserExpandedState();
|
|
87
87
|
};
|
|
88
|
-
const useNotifyExpandedChange = (propsWithDefaults,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
const notifyExpandedChange = useCallback(expandedGroupHashmap => propsWithDefaults === null || propsWithDefaults === void 0 ? void 0 : propsWithDefaults.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
|
|
88
|
+
const useNotifyExpandedChange = (propsWithDefaults, {
|
|
89
|
+
latestToggledItem,
|
|
90
|
+
expandedGroups
|
|
91
|
+
}) => {
|
|
92
|
+
const notifyExpandedChange = useCallback((expandedGroupHashmap) => propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
|
|
94
93
|
useEffect(() => {
|
|
95
|
-
if (!propsWithDefaults.expanded)
|
|
94
|
+
if (!propsWithDefaults.expanded)
|
|
95
|
+
notifyExpandedChange(expandedGroups);
|
|
96
96
|
}, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);
|
|
97
97
|
};
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
export {
|
|
99
|
+
collapseAll,
|
|
100
|
+
collapseItemModel,
|
|
101
|
+
expandAll,
|
|
102
|
+
expandItemModel,
|
|
103
|
+
getToggleExpandShouldExpand,
|
|
104
|
+
toggleExpandAllHelper,
|
|
105
|
+
toggleItemExpand,
|
|
106
|
+
updateExpandedState,
|
|
107
|
+
useNotifyExpandedChange
|
|
108
|
+
};
|
|
109
|
+
//# sourceMappingURL=group-expands-helpers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/group-expands-helpers.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { useCallback, useEffect } from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\nexport const updateExpandedState = (\n treeRoot: DSTreeviewT.Item['node'],\n onExpandChange: DSTreeviewT.Props['onExpandChange'] | null | undefined,\n) => {\n const shouldContinueWalking = true;\n const newExpandedHashMap: DSTreeviewT.ExpandedItems = { __ds_tree_root: true };\n treeRoot.walk((node) => {\n if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {\n newExpandedHashMap[node.model.id] = true;\n }\n return shouldContinueWalking;\n });\n if (onExpandChange) onExpandChange(newExpandedHashMap, null);\n};\n\nexport const toggleItemExpand = (\n itemToToggle: DSTreeviewT.Item,\n triggerTreeRerender: () => void,\n updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n scrollTo: DSTreeviewT.ScrollToFunc = () => {},\n) => {\n const {\n node: {\n model: { isExpanded },\n },\n virtualIndex,\n } = itemToToggle;\n if (itemToToggle.node.model.isGroup) {\n itemToToggle.node.model.isExpanded = !isExpanded;\n triggerTreeRerender();\n updateUserExpandedState();\n setTimeout(() => {\n if (typeof virtualIndex === 'number') scrollTo(virtualIndex, { align: 'start' });\n });\n }\n};\n\nexport const expandItemModel = (modelToExpand: DSTreeviewT.Item['model']) => {\n if (modelToExpand.isGroup) modelToExpand.isExpanded = true;\n};\n\nexport const collapseItemModel = (modelToCollapse: DSTreeviewT.Item['model']) => {\n if (modelToCollapse.isGroup) modelToCollapse.isExpanded = false;\n};\n\nexport const expandAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n const shouldContinueWalking = true;\n treeRoot.walk((node) => {\n if (!node.isRoot()) expandItemModel(node.model);\n return shouldContinueWalking;\n });\n triggerTreeRerender();\n};\n\nexport const collapseAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n treeRoot.walk((node) => {\n if (!node.isRoot()) collapseItemModel(node.model);\n return shouldContinueWalking;\n });\n triggerTreeRerender();\n};\n\nexport const getToggleExpandShouldExpand = (treeRoot: DSTreeviewT.Item['node']) => {\n let shouldExpand = false;\n const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n treeRoot.walk((node) => {\n if (!node.isRoot()) {\n if (!node.model.isExpanded && node.model.isGroup) {\n shouldExpand = true;\n // eslint-disable-next-line no-useless-return\n return shouldContinueWalking;\n }\n }\n return shouldContinueWalking;\n });\n return shouldExpand;\n};\n\nexport const toggleExpandAllHelper = (\n isExpand: boolean | 'toggle',\n treeRoot: DSTreeviewT.Item['node'],\n triggerTreeRerender: () => void,\n setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n if (isExpand === true) expandAll(treeRoot, triggerTreeRerender);\n else if (isExpand === false) collapseAll(treeRoot, triggerTreeRerender);\n else {\n const shouldExpand = getToggleExpandShouldExpand(treeRoot);\n if (shouldExpand === true) expandAll(treeRoot, triggerTreeRerender);\n else collapseAll(treeRoot, triggerTreeRerender);\n }\n setLatestToggledItem(null);\n updateUserExpandedState();\n};\n\nexport const useNotifyExpandedChange = (\n propsWithDefaults: DSTreeviewT.Props,\n {\n latestToggledItem,\n expandedGroups,\n }: {\n latestToggledItem?: DSTreeviewInternalsT.CTX['latestToggledItem'];\n expandedGroups?: DSTreeviewInternalsT.CTX['expandedGroups'];\n },\n) => {\n const notifyExpandedChange = useCallback(\n (expandedGroupHashmap?: DSTreeviewInternalsT.CTX['expandedGroups']) =>\n propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem),\n [propsWithDefaults, latestToggledItem],\n );\n\n useEffect(() => {\n if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);\n }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAIO,MAAM,sBAAsB,CACjC,UACA,mBACG;AACH,QAAM,wBAAwB;AAC9B,QAAM,qBAAgD,EAAE,gBAAgB;AACxE,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,YAAY,KAAK,MAAM,WAAW,KAAK,MAAM,YAAY;AACjE,yBAAmB,KAAK,MAAM,MAAM;AAAA;AAEtC,WAAO;AAAA;AAET,MAAI;AAAgB,mBAAe,oBAAoB;AAAA;AAGlD,MAAM,mBAAmB,CAC9B,cACA,qBACA,yBACA,WAAqC,MAAM;AAAA,MACxC;AACH,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,OAAO,EAAE;AAAA;AAAA,IAEX;AAAA,MACE;AACJ,MAAI,aAAa,KAAK,MAAM,SAAS;AACnC,iBAAa,KAAK,MAAM,aAAa,CAAC;AACtC;AACA;AACA,eAAW,MAAM;AACf,UAAI,OAAO,iBAAiB;AAAU,iBAAS,cAAc,EAAE,OAAO;AAAA;AAAA;AAAA;AAKrE,MAAM,kBAAkB,CAAC,kBAA6C;AAC3E,MAAI,cAAc;AAAS,kBAAc,aAAa;AAAA;AAGjD,MAAM,oBAAoB,CAAC,oBAA+C;AAC/E,MAAI,gBAAgB;AAAS,oBAAgB,aAAa;AAAA;AAGrD,MAAM,YAAY,CAAC,UAAoC,wBAAoC;AAChG,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK;AAAU,sBAAgB,KAAK;AACzC,WAAO;AAAA;AAET;AAAA;AAGK,MAAM,cAAc,CAAC,UAAoC,wBAAoC;AAClG,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK;AAAU,wBAAkB,KAAK;AAC3C,WAAO;AAAA;AAET;AAAA;AAGK,MAAM,8BAA8B,CAAC,aAAuC;AACjF,MAAI,eAAe;AACnB,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,UAAU;AAClB,UAAI,CAAC,KAAK,MAAM,cAAc,KAAK,MAAM,SAAS;AAChD,uBAAe;AAEf,eAAO;AAAA;AAAA;AAGX,WAAO;AAAA;AAET,SAAO;AAAA;AAGF,MAAM,wBAAwB,CACnC,UACA,UACA,qBACA,sBACA,4BACG;AACH,MAAI,aAAa;AAAM,cAAU,UAAU;AAAA,WAClC,aAAa;AAAO,gBAAY,UAAU;AAAA,OAC9C;AACH,UAAM,eAAe,4BAA4B;AACjD,QAAI,iBAAiB;AAAM,gBAAU,UAAU;AAAA;AAC1C,kBAAY,UAAU;AAAA;AAE7B,uBAAqB;AACrB;AAAA;AAGK,MAAM,0BAA0B,CACrC,mBACA;AAAA,EACE;AAAA,EACA;AAAA,MAKC;AACH,QAAM,uBAAuB,YAC3B,CAAC,yBACC,mBAAmB,eAAe,wBAAwB,IAAI,oBAChE,CAAC,mBAAmB;AAGtB,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB;AAAU,2BAAqB;AAAA,KACrD,CAAC,gBAAgB,sBAAsB,kBAAkB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,90 +1,55 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
// 9 tab
|
|
8
|
-
// 13 enter
|
|
9
|
-
// 32 space
|
|
10
|
-
// 37 left arrow
|
|
11
|
-
// 38 up arrow
|
|
12
|
-
// 39 right arrow
|
|
13
|
-
// 40 down arrow
|
|
14
|
-
// 35 end
|
|
15
|
-
// 36 home
|
|
16
|
-
// 56 number 8
|
|
17
|
-
// 106 (NumPad) *
|
|
18
|
-
const useOnItemKeyDown = item => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useCallback, useContext, useEffect } from "react";
|
|
3
|
+
import TreeViewContext from "../TreeViewContext";
|
|
4
|
+
import { focusItem } from "./tree-helpers";
|
|
5
|
+
import { toggleExpandAllHelper, toggleItemExpand } from "./group-expands-helpers";
|
|
6
|
+
const useOnItemKeyDown = (item, draggableProps) => {
|
|
19
7
|
const ctx = useContext(TreeViewContext);
|
|
20
8
|
const {
|
|
21
|
-
props: {
|
|
22
|
-
onItemFocus
|
|
23
|
-
},
|
|
9
|
+
props: { onItemFocus },
|
|
24
10
|
triggerTreeRerender,
|
|
25
|
-
isDragging,
|
|
26
11
|
visibleItems,
|
|
27
12
|
setFocusedItem,
|
|
28
13
|
setSelectedItem,
|
|
29
14
|
setLatestToggledItem,
|
|
30
15
|
updateUserExpandedState,
|
|
31
|
-
virtualListHelpers: {
|
|
32
|
-
scrollToIndex
|
|
33
|
-
}
|
|
16
|
+
virtualListHelpers: { scrollToIndex }
|
|
34
17
|
} = ctx;
|
|
35
|
-
const {
|
|
36
|
-
|
|
37
|
-
isExpanded
|
|
38
|
-
} = item;
|
|
39
|
-
const onItemFocusCurry = useCallback(newFocusItem => onItemFocus({
|
|
18
|
+
const { isGroup, isExpanded } = item;
|
|
19
|
+
const onItemFocusCurry = useCallback((newFocusItem) => onItemFocus({
|
|
40
20
|
itemIndex: newFocusItem.virtualIndex,
|
|
41
|
-
scrollToItem:
|
|
42
|
-
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
|
|
43
|
-
align: 'start'
|
|
44
|
-
};
|
|
45
|
-
return scrollToIndex(newFocusItem.virtualIndex, opts);
|
|
46
|
-
},
|
|
21
|
+
scrollToItem: (opts = { align: "start" }) => scrollToIndex(newFocusItem.virtualIndex, opts),
|
|
47
22
|
item: newFocusItem
|
|
48
23
|
}), [onItemFocus, scrollToIndex]);
|
|
49
|
-
const onItemKeyDown = useCallback(e => {
|
|
50
|
-
const {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
if (keyCode === 13 || keyCode === 32) setSelectedItem(item);
|
|
58
|
-
|
|
24
|
+
const onItemKeyDown = useCallback((e) => {
|
|
25
|
+
const { keyCode } = e;
|
|
26
|
+
if (!(draggableProps && draggableProps.active)) {
|
|
27
|
+
if (keyCode !== 9)
|
|
28
|
+
e.preventDefault();
|
|
29
|
+
if ((keyCode === 13 || keyCode === 32) && e.target.tagName === "LI") {
|
|
30
|
+
setSelectedItem(item);
|
|
31
|
+
}
|
|
59
32
|
if (keyCode === 37) {
|
|
60
33
|
if (isGroup && isExpanded) {
|
|
61
34
|
toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
|
|
62
35
|
setLatestToggledItem(item);
|
|
63
36
|
}
|
|
64
37
|
}
|
|
65
|
-
|
|
66
38
|
if (keyCode === 39) {
|
|
67
39
|
if (isGroup && !isExpanded) {
|
|
68
40
|
toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
|
|
69
41
|
setLatestToggledItem(item);
|
|
70
42
|
}
|
|
71
43
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
virtualIndex
|
|
75
|
-
} = item;
|
|
76
|
-
|
|
77
|
-
if (typeof virtualIndex === 'number') {
|
|
44
|
+
const { virtualIndex } = item;
|
|
45
|
+
if (typeof virtualIndex === "number") {
|
|
78
46
|
const lastItemIndex = visibleItems.length - 1;
|
|
79
|
-
|
|
80
47
|
if (keyCode === 38) {
|
|
81
48
|
const isLoopedFocus = virtualIndex === 0;
|
|
82
49
|
const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;
|
|
83
50
|
const newFocusItem = visibleItems[newFocusIndex];
|
|
84
51
|
scrollToIndex(newFocusIndex);
|
|
85
|
-
|
|
86
52
|
if (isLoopedFocus) {
|
|
87
|
-
// when looping the list from start to end we need to wait a bit before focusing
|
|
88
53
|
setTimeout(() => {
|
|
89
54
|
setFocusedItem(newFocusItem);
|
|
90
55
|
focusItem(newFocusItem);
|
|
@@ -96,15 +61,12 @@ const useOnItemKeyDown = item => {
|
|
|
96
61
|
focusItem(newFocusItem);
|
|
97
62
|
}
|
|
98
63
|
}
|
|
99
|
-
|
|
100
64
|
if (keyCode === 40) {
|
|
101
65
|
const isLoopedFocus = virtualIndex === lastItemIndex;
|
|
102
66
|
const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;
|
|
103
67
|
const newFocusItem = visibleItems[newFocusIndex];
|
|
104
68
|
scrollToIndex(newFocusIndex);
|
|
105
|
-
|
|
106
69
|
if (isLoopedFocus) {
|
|
107
|
-
// when looping the list from start to end we need to wait a bit before focusing
|
|
108
70
|
setTimeout(() => {
|
|
109
71
|
setFocusedItem(newFocusItem);
|
|
110
72
|
onItemFocusCurry(newFocusItem);
|
|
@@ -116,7 +78,6 @@ const useOnItemKeyDown = item => {
|
|
|
116
78
|
focusItem(newFocusItem);
|
|
117
79
|
}
|
|
118
80
|
}
|
|
119
|
-
|
|
120
81
|
if (keyCode === 35) {
|
|
121
82
|
if (virtualIndex !== lastItemIndex) {
|
|
122
83
|
const newFocusItem = visibleItems[lastItemIndex];
|
|
@@ -128,7 +89,6 @@ const useOnItemKeyDown = item => {
|
|
|
128
89
|
}, 300);
|
|
129
90
|
}
|
|
130
91
|
}
|
|
131
|
-
|
|
132
92
|
if (keyCode === 36) {
|
|
133
93
|
if (virtualIndex !== 0) {
|
|
134
94
|
const newFocusItem = visibleItems[0];
|
|
@@ -142,27 +102,40 @@ const useOnItemKeyDown = item => {
|
|
|
142
102
|
}
|
|
143
103
|
}
|
|
144
104
|
}
|
|
145
|
-
}, [
|
|
105
|
+
}, [
|
|
106
|
+
draggableProps,
|
|
107
|
+
setSelectedItem,
|
|
108
|
+
item,
|
|
109
|
+
isGroup,
|
|
110
|
+
isExpanded,
|
|
111
|
+
triggerTreeRerender,
|
|
112
|
+
updateUserExpandedState,
|
|
113
|
+
scrollToIndex,
|
|
114
|
+
setLatestToggledItem,
|
|
115
|
+
visibleItems,
|
|
116
|
+
setFocusedItem,
|
|
117
|
+
onItemFocusCurry
|
|
118
|
+
]);
|
|
146
119
|
return onItemKeyDown;
|
|
147
120
|
};
|
|
148
|
-
const useGlobalKeyboardListener = func => {
|
|
121
|
+
const useGlobalKeyboardListener = (func) => {
|
|
149
122
|
useEffect(() => {
|
|
150
|
-
document.addEventListener(
|
|
151
|
-
return () => document.removeEventListener(
|
|
123
|
+
document.addEventListener("keydown", func);
|
|
124
|
+
return () => document.removeEventListener("keydown", func);
|
|
152
125
|
}, [func]);
|
|
153
126
|
};
|
|
154
127
|
const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
|
|
155
|
-
const memoizedToggleAllKeyboardShortcut = useCallback(e => {
|
|
156
|
-
const {
|
|
157
|
-
shiftKey,
|
|
158
|
-
keyCode
|
|
159
|
-
} = e;
|
|
160
|
-
|
|
128
|
+
const memoizedToggleAllKeyboardShortcut = useCallback((e) => {
|
|
129
|
+
const { shiftKey, keyCode } = e;
|
|
161
130
|
if (shiftKey && keyCode === 56) {
|
|
162
|
-
toggleExpandAllHelper(
|
|
131
|
+
toggleExpandAllHelper("toggle", treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
|
|
163
132
|
}
|
|
164
133
|
}, [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState]);
|
|
165
134
|
return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);
|
|
166
135
|
};
|
|
167
|
-
|
|
168
|
-
|
|
136
|
+
export {
|
|
137
|
+
useGlobalKeyboardListener,
|
|
138
|
+
useGlobalToggleAllExpandShortcut,
|
|
139
|
+
useOnItemKeyDown
|
|
140
|
+
};
|
|
141
|
+
//# sourceMappingURL=keyboard-helpers.js.map
|