@elliemae/ds-treeview 2.2.0-alpha.1 → 2.2.0-alpha.2
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 +49 -31
- package/cjs/TreeView.js.map +7 -0
- package/cjs/TreeViewContext.js +53 -35
- 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 +108 -80
- package/cjs/config/useTreeview.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/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 +128 -147
- 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 +117 -130
- package/cjs/parts/TreeList.js.map +7 -0
- package/cjs/plugins/dnd/TreeDndPlugin.js +51 -36
- 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 +82 -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/dnd-helpers.js +90 -84
- package/cjs/utils/dnd-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 +84 -88
- 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 +105 -135
- package/cjs/utils/tree-helpers.js.map +7 -0
- package/cjs/utils/useDnDHelpers.js +97 -118
- package/cjs/utils/useDnDHelpers.js.map +7 -0
- package/cjs/utils/useInstanceRefActions.js +54 -43
- package/cjs/utils/useInstanceRefActions.js.map +7 -0
- package/cjs/utils/useTree.js +76 -78
- package/cjs/utils/useTree.js.map +7 -0
- package/esm/TreeView.js +18 -20
- package/esm/TreeView.js.map +7 -0
- package/esm/TreeViewContext.js +24 -29
- 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 +61 -54
- package/esm/config/useTreeview.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/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 +91 -127
- 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 +88 -117
- package/esm/parts/TreeList.js.map +7 -0
- package/esm/plugins/dnd/TreeDndPlugin.js +21 -26
- 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 +47 -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/dnd-helpers.js +58 -73
- package/esm/utils/dnd-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 +45 -72
- 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 +74 -119
- package/esm/utils/tree-helpers.js.map +7 -0
- package/esm/utils/useDnDHelpers.js +60 -106
- package/esm/utils/useDnDHelpers.js.map +7 -0
- package/esm/utils/useInstanceRefActions.js +21 -35
- package/esm/utils/useInstanceRefActions.js.map +7 -0
- package/esm/utils/useTree.js +35 -57
- package/esm/utils/useTree.js.map +7 -0
- package/package.json +10 -10
|
@@ -1,51 +1,55 @@
|
|
|
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
|
+
restrictDragAndDrop: PropTypes.bool.description("whether to restrict DnD functionality or not").defaultValue(false),
|
|
32
|
+
showChildrenAmount: PropTypes.bool.description("whether to show the amount of children or not").defaultValue(false),
|
|
33
|
+
sortable: PropTypes.bool.description("whether the sortable functionality is active or not").defaultValue(false),
|
|
34
|
+
onItemClick: PropTypes.func.description("function executed when clicking on an item").defaultValue("() => {}"),
|
|
35
|
+
onItemFocus: PropTypes.func.description("function executed when focusing on an item").defaultValue("() => {}"),
|
|
36
|
+
onVisibleItemsChange: PropTypes.func.description("function executed when the visible items change").defaultValue("() => {}"),
|
|
37
|
+
onOrderChange: PropTypes.func.description("function executed when the items order changes").defaultValue("() => {}"),
|
|
38
|
+
onSelectionChange: PropTypes.func.description("function executed when the selection changes").defaultValue("() => {}"),
|
|
39
|
+
onExpandChange: PropTypes.func.description("function executed when expanding an item").defaultValue("() => {}"),
|
|
40
|
+
onInstanceRefInitialized: PropTypes.func.description("function executed when instanceRef has terminated instanciation").defaultValue("() => {}"),
|
|
41
|
+
rowSize: PropTypes.oneOf(["normal", "compact"]).description("size of the row").defaultValue("normal"),
|
|
42
|
+
labelOverflow: PropTypes.oneOf(["wrap", "wrap-all", "truncate"]).description("label truncation preference").defaultValue("wrap"),
|
|
43
|
+
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("components width").defaultValue("100%"),
|
|
44
|
+
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("components height").defaultValue("100%"),
|
|
45
|
+
groupIcon: PropTypes.node.description("icon for groups"),
|
|
46
|
+
itemIcon: PropTypes.node.description("icon for items"),
|
|
47
|
+
searchQuery: PropTypes.string.description("search query value"),
|
|
48
|
+
noItemsPlaceholder: PropTypes.string.description("message to be shown when there are no items in the treeview to be displayed").defaultValue("No items found"),
|
|
49
|
+
name: PropTypes.string.description("property key to identifier for items labels").defaultValue("name"),
|
|
50
|
+
highlightOnlyQuery: PropTypes.bool.description("whether to highlight results or not").defaultValue(false)
|
|
49
51
|
};
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
export {
|
|
53
|
+
TreeViewPropTypes
|
|
54
|
+
};
|
|
55
|
+
//# 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 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>;\n nodePath: TreeModel.Node<Item>[];\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 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: Item[], oldData: Item[], draggedItem: Item) => 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 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;AA0FO,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,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
|
+
}
|
package/esm/utils/dnd-helpers.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
/* eslint-disable max-lines */
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { getItemsParentNode, itemsShareSameParent } from "./tree-helpers";
|
|
4
3
|
const keyCodes = {
|
|
5
4
|
lift: [32, 13],
|
|
6
5
|
drop: [32, 13],
|
|
@@ -8,58 +7,49 @@ const keyCodes = {
|
|
|
8
7
|
up: [38, 37],
|
|
9
8
|
down: [40, 39]
|
|
10
9
|
};
|
|
11
|
-
const sameParentAsHoverItemDrop =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} = _ref;
|
|
10
|
+
const sameParentAsHoverItemDrop = ({
|
|
11
|
+
isBefore,
|
|
12
|
+
isAfter,
|
|
13
|
+
draggedItem,
|
|
14
|
+
overItem,
|
|
15
|
+
movementDirection
|
|
16
|
+
}) => {
|
|
19
17
|
const hoveredItemNodeNestedIndex = overItem.node.getIndex();
|
|
20
18
|
let newParentNode = getItemsParentNode([overItem], true);
|
|
21
|
-
const {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
const {
|
|
25
|
-
treeDepth: overItemTreeDepth
|
|
26
|
-
} = overItem;
|
|
27
|
-
const directionOffset = // we don't apply the offset for direction
|
|
28
|
-
// if moving from less nested to more nested
|
|
29
|
-
// or moving bottom to top
|
|
30
|
-
// the offset is required when moving elemnts down in their nest level
|
|
31
|
-
draggedItemTreeDepth <= overItemTreeDepth && movementDirection === 'topToBottom' ? -1 : 0;
|
|
19
|
+
const { treeDepth: draggedItemTreeDepth } = draggedItem;
|
|
20
|
+
const { treeDepth: overItemTreeDepth } = overItem;
|
|
21
|
+
const directionOffset = draggedItemTreeDepth <= overItemTreeDepth && movementDirection === "topToBottom" ? -1 : 0;
|
|
32
22
|
let newNestedIndex;
|
|
33
|
-
if (isBefore)
|
|
34
|
-
newNestedIndex =
|
|
35
|
-
|
|
23
|
+
if (isBefore)
|
|
24
|
+
newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;
|
|
25
|
+
else if (isAfter)
|
|
26
|
+
newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;
|
|
27
|
+
else {
|
|
28
|
+
newNestedIndex = overItem.children.length;
|
|
36
29
|
newParentNode = overItem.node;
|
|
37
30
|
}
|
|
38
|
-
if (newNestedIndex < 0)
|
|
31
|
+
if (newNestedIndex < 0)
|
|
32
|
+
newNestedIndex = 0;
|
|
39
33
|
return {
|
|
40
34
|
newNestedIndex,
|
|
41
35
|
newParentNode
|
|
42
36
|
};
|
|
43
37
|
};
|
|
44
|
-
const inferHoverItemKinshipDrop =
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
} = _ref2;
|
|
38
|
+
const inferHoverItemKinshipDrop = ({
|
|
39
|
+
isBefore,
|
|
40
|
+
isAfter,
|
|
41
|
+
draggedItem,
|
|
42
|
+
overItem,
|
|
43
|
+
movementDirection
|
|
44
|
+
}) => {
|
|
52
45
|
const hoverItemModel = overItem.node.model;
|
|
53
46
|
const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;
|
|
54
|
-
|
|
55
47
|
if (isAfter && isGroupAndIsExpanded) {
|
|
56
48
|
return {
|
|
57
49
|
newNestedIndex: 0,
|
|
58
|
-
// append after the group, so basically as first child
|
|
59
50
|
newParentNode: overItem.node
|
|
60
51
|
};
|
|
61
52
|
}
|
|
62
|
-
|
|
63
53
|
if (isBefore || isAfter && !isGroupAndIsExpanded) {
|
|
64
54
|
return sameParentAsHoverItemDrop({
|
|
65
55
|
isBefore,
|
|
@@ -68,56 +58,46 @@ const inferHoverItemKinshipDrop = _ref2 => {
|
|
|
68
58
|
overItem,
|
|
69
59
|
movementDirection
|
|
70
60
|
});
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
|
|
61
|
+
}
|
|
74
62
|
return {
|
|
75
63
|
newNestedIndex: overItem.children.length,
|
|
76
|
-
// append as last child of the group
|
|
77
64
|
newParentNode: overItem.node
|
|
78
65
|
};
|
|
79
66
|
};
|
|
80
|
-
const isDropValid =
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
} =
|
|
88
|
-
const {
|
|
89
|
-
id: movedId
|
|
90
|
-
} = draggedItem;
|
|
91
|
-
const {
|
|
92
|
-
id: hoverId
|
|
93
|
-
} = overItem;
|
|
67
|
+
const isDropValid = ({
|
|
68
|
+
isBefore,
|
|
69
|
+
isAfter,
|
|
70
|
+
draggedItem,
|
|
71
|
+
overItem,
|
|
72
|
+
restrictDragAndDrop
|
|
73
|
+
}) => {
|
|
74
|
+
const { id: movedId } = draggedItem;
|
|
75
|
+
const { id: hoverId } = overItem;
|
|
94
76
|
const isInside = !isBefore && !isAfter;
|
|
95
|
-
if (movedId === hoverId)
|
|
96
|
-
|
|
77
|
+
if (movedId === hoverId)
|
|
78
|
+
return false;
|
|
97
79
|
if (isInside && !overItem.isGroup) {
|
|
98
|
-
return false;
|
|
80
|
+
return false;
|
|
99
81
|
}
|
|
100
|
-
|
|
101
82
|
if (restrictDragAndDrop) {
|
|
102
|
-
if (isInside)
|
|
103
|
-
|
|
83
|
+
if (isInside)
|
|
84
|
+
return false;
|
|
104
85
|
const sameParent = itemsShareSameParent([draggedItem, overItem]);
|
|
105
|
-
if (overItem.node.model.isExpanded && isAfter)
|
|
106
|
-
|
|
86
|
+
if (overItem.node.model.isExpanded && isAfter)
|
|
87
|
+
return false;
|
|
88
|
+
if (!sameParent)
|
|
89
|
+
return false;
|
|
107
90
|
}
|
|
108
|
-
|
|
109
91
|
return true;
|
|
110
92
|
};
|
|
111
|
-
const inferKeyboardKinshipDrop =
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
} = _ref4;
|
|
93
|
+
const inferKeyboardKinshipDrop = ({
|
|
94
|
+
items,
|
|
95
|
+
newIndex
|
|
96
|
+
}) => {
|
|
116
97
|
const kinship = {};
|
|
117
98
|
const itemBefore = items[newIndex];
|
|
118
99
|
const itemBeforeModel = itemBefore.node.model;
|
|
119
100
|
const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;
|
|
120
|
-
|
|
121
101
|
if (isGroupAndIsExpanded) {
|
|
122
102
|
kinship.newParentNode = itemBefore.node;
|
|
123
103
|
kinship.newNestedIndex = 0;
|
|
@@ -125,8 +105,13 @@ const inferKeyboardKinshipDrop = _ref4 => {
|
|
|
125
105
|
kinship.newParentNode = getItemsParentNode([itemBefore], true);
|
|
126
106
|
kinship.newNestedIndex = itemBefore.node.getIndex();
|
|
127
107
|
}
|
|
128
|
-
|
|
129
108
|
return kinship;
|
|
130
109
|
};
|
|
131
|
-
|
|
132
|
-
|
|
110
|
+
export {
|
|
111
|
+
inferHoverItemKinshipDrop,
|
|
112
|
+
inferKeyboardKinshipDrop,
|
|
113
|
+
isDropValid,
|
|
114
|
+
keyCodes,
|
|
115
|
+
sameParentAsHoverItemDrop
|
|
116
|
+
};
|
|
117
|
+
//# sourceMappingURL=dnd-helpers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/dnd-helpers.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { getItemsParentNode, itemsShareSameParent } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface MetaInfoT {\n isBefore: boolean;\n isAfter: boolean;\n draggedItem: DSTreeviewT.Item;\n overItem: DSTreeviewT.Item;\n}\ninterface KinshipT {\n newParentNode: DSTreeviewT.Item['node'];\n newNestedIndex: number;\n}\n\nexport const keyCodes = {\n lift: [32, 13],\n drop: [32, 13],\n cancel: [27],\n up: [38, 37],\n down: [40, 39],\n};\n\nexport const sameParentAsHoverItemDrop = ({\n isBefore,\n isAfter,\n\n draggedItem,\n overItem,\n movementDirection,\n}: MetaInfoT & { movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT }) => {\n const hoveredItemNodeNestedIndex = overItem.node.getIndex();\n let newParentNode = getItemsParentNode([overItem], true);\n\n const { treeDepth: draggedItemTreeDepth } = draggedItem;\n const { treeDepth: overItemTreeDepth } = overItem;\n const directionOffset =\n // we don't apply the offset for direction\n // if moving from less nested to more nested\n // or moving bottom to top\n // the offset is required when moving elemnts down in their nest level\n (draggedItemTreeDepth as number) <= (overItemTreeDepth as number) && movementDirection === 'topToBottom' ? -1 : 0;\n let newNestedIndex;\n\n if (isBefore) newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;\n else if (isAfter) newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;\n else {\n newNestedIndex = overItem.children.length; // append as last child of the group\n newParentNode = overItem.node;\n }\n if (newNestedIndex < 0) newNestedIndex = 0;\n return {\n newNestedIndex,\n newParentNode,\n };\n};\n\nexport const inferHoverItemKinshipDrop = ({\n isBefore,\n isAfter,\n\n draggedItem,\n overItem,\n movementDirection,\n}: MetaInfoT & { movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT }) => {\n const hoverItemModel = overItem.node.model;\n const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;\n\n if (isAfter && isGroupAndIsExpanded) {\n return {\n newNestedIndex: 0, // append after the group, so basically as first child\n newParentNode: overItem.node,\n };\n }\n\n if (isBefore || (isAfter && !isGroupAndIsExpanded)) {\n return sameParentAsHoverItemDrop({\n isBefore,\n isAfter,\n draggedItem,\n overItem,\n movementDirection,\n });\n }\n\n // drop inside\n return {\n newNestedIndex: overItem.children.length, // append as last child of the group\n newParentNode: overItem.node,\n };\n};\n\nexport const isDropValid = ({\n isBefore,\n isAfter,\n\n draggedItem,\n overItem,\n\n restrictDragAndDrop,\n}: MetaInfoT & { restrictDragAndDrop: boolean }) => {\n const { id: movedId } = draggedItem;\n const { id: hoverId } = overItem;\n const isInside = !isBefore && !isAfter;\n\n if (movedId === hoverId) return false;\n\n if (isInside && !overItem.isGroup) {\n return false; // we can't drop inside an item that isn't a group\n }\n\n if (restrictDragAndDrop) {\n if (isInside) return false; // in this mode we can't drop inside another element\n const sameParent = itemsShareSameParent([draggedItem, overItem]);\n if (overItem.node.model.isExpanded && isAfter) return false;\n if (!sameParent) return false;\n }\n\n return true;\n};\n\nexport const inferKeyboardKinshipDrop = ({\n items,\n\n newIndex,\n}: {\n items: DSTreeviewT.Item[];\n newIndex: number;\n}) => {\n const kinship: Partial<KinshipT> = {};\n\n const itemBefore = items[newIndex];\n\n const itemBeforeModel = itemBefore.node.model;\n const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;\n\n if (isGroupAndIsExpanded) {\n kinship.newParentNode = itemBefore.node;\n kinship.newNestedIndex = 0;\n } else {\n kinship.newParentNode = getItemsParentNode([itemBefore], true);\n kinship.newNestedIndex = itemBefore.node.getIndex();\n }\n\n return kinship;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAeO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,IAAI;AAAA,EACX,MAAM,CAAC,IAAI;AAAA,EACX,QAAQ,CAAC;AAAA,EACT,IAAI,CAAC,IAAI;AAAA,EACT,MAAM,CAAC,IAAI;AAAA;AAGN,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,MACmF;AACnF,QAAM,6BAA6B,SAAS,KAAK;AACjD,MAAI,gBAAgB,mBAAmB,CAAC,WAAW;AAEnD,QAAM,EAAE,WAAW,yBAAyB;AAC5C,QAAM,EAAE,WAAW,sBAAsB;AACzC,QAAM,kBAKH,wBAAoC,qBAAgC,sBAAsB,gBAAgB,KAAK;AAClH,MAAI;AAEJ,MAAI;AAAU,qBAAiB,6BAA6B;AAAA,WACnD;AAAS,qBAAiB,6BAA6B,IAAI;AAAA,OAC/D;AACH,qBAAiB,SAAS,SAAS;AACnC,oBAAgB,SAAS;AAAA;AAE3B,MAAI,iBAAiB;AAAG,qBAAiB;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,MACmF;AACnF,QAAM,iBAAiB,SAAS,KAAK;AACrC,QAAM,uBAAuB,eAAe,cAAc,eAAe,SAAS,SAAS;AAE3F,MAAI,WAAW,sBAAsB;AACnC,WAAO;AAAA,MACL,gBAAgB;AAAA,MAChB,eAAe,SAAS;AAAA;AAAA;AAI5B,MAAI,YAAa,WAAW,CAAC,sBAAuB;AAClD,WAAO,0BAA0B;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAKJ,SAAO;AAAA,IACL,gBAAgB,SAAS,SAAS;AAAA,IAClC,eAAe,SAAS;AAAA;AAAA;AAIrB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,MACkD;AAClD,QAAM,EAAE,IAAI,YAAY;AACxB,QAAM,EAAE,IAAI,YAAY;AACxB,QAAM,WAAW,CAAC,YAAY,CAAC;AAE/B,MAAI,YAAY;AAAS,WAAO;AAEhC,MAAI,YAAY,CAAC,SAAS,SAAS;AACjC,WAAO;AAAA;AAGT,MAAI,qBAAqB;AACvB,QAAI;AAAU,aAAO;AACrB,UAAM,aAAa,qBAAqB,CAAC,aAAa;AACtD,QAAI,SAAS,KAAK,MAAM,cAAc;AAAS,aAAO;AACtD,QAAI,CAAC;AAAY,aAAO;AAAA;AAG1B,SAAO;AAAA;AAGF,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EAEA;AAAA,MAII;AACJ,QAAM,UAA6B;AAEnC,QAAM,aAAa,MAAM;AAEzB,QAAM,kBAAkB,WAAW,KAAK;AACxC,QAAM,uBAAuB,gBAAgB,cAAc,gBAAgB,SAAS,SAAS;AAE7F,MAAI,sBAAsB;AACxB,YAAQ,gBAAgB,WAAW;AACnC,YAAQ,iBAAiB;AAAA,SACpB;AACL,YAAQ,gBAAgB,mBAAmB,CAAC,aAAa;AACzD,YAAQ,iBAAiB,WAAW,KAAK;AAAA;AAG3C,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
|
+
}
|