@elliemae/ds-treeview 2.3.0-alpha.1 → 2.3.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{cjs → dist/cjs}/TreeView.js +1 -3
- package/dist/cjs/TreeView.js.map +7 -0
- package/{cjs → dist/cjs}/TreeViewContext.js +2 -8
- package/dist/cjs/TreeViewContext.js.map +7 -0
- package/{cjs → dist/cjs}/config/cssClassesConstants.js +0 -0
- package/{cjs → dist/cjs}/config/cssClassesConstants.js.map +0 -0
- package/{cjs → dist/cjs}/config/useTreeview.js +14 -28
- package/dist/cjs/config/useTreeview.js.map +7 -0
- package/dist/cjs/hoc/DnDTreeContext.js +45 -0
- package/dist/cjs/hoc/DnDTreeContext.js.map +7 -0
- package/dist/cjs/hoc/SortableItemContext.js +46 -0
- package/dist/cjs/hoc/SortableItemContext.js.map +7 -0
- package/dist/cjs/hoc/WithConditionalDnDContext.js +128 -0
- package/dist/cjs/hoc/WithConditionalDnDContext.js.map +7 -0
- package/dist/cjs/hoc/WithDnDSortableItemContext.js +69 -0
- package/dist/cjs/hoc/WithDnDSortableItemContext.js.map +7 -0
- package/{cjs → dist/cjs}/index.js +0 -0
- package/{cjs → dist/cjs}/index.js.map +0 -0
- package/{cjs → dist/cjs}/parts/CheckboxSelectable.js +0 -0
- package/{cjs → dist/cjs}/parts/CheckboxSelectable.js.map +0 -0
- package/{cjs → dist/cjs}/parts/ChildrenCountDisplayer.js +0 -0
- package/{cjs → dist/cjs}/parts/ChildrenCountDisplayer.js.map +0 -0
- package/dist/cjs/parts/DnDHandle.js +57 -0
- package/dist/cjs/parts/DnDHandle.js.map +7 -0
- package/dist/cjs/parts/DropIndicator.js +80 -0
- package/dist/cjs/parts/DropIndicator.js.map +7 -0
- package/{cjs → dist/cjs}/parts/ExpandCaret.js +0 -0
- package/{cjs → dist/cjs}/parts/ExpandCaret.js.map +0 -0
- package/{cjs → dist/cjs}/parts/Icon.js +0 -0
- package/{cjs → dist/cjs}/parts/Icon.js.map +0 -0
- package/{cjs → dist/cjs}/parts/NestingSpace.js +0 -0
- package/{cjs → dist/cjs}/parts/NestingSpace.js.map +0 -0
- package/{cjs → dist/cjs}/parts/RadioSelectable.js +0 -0
- package/{cjs → dist/cjs}/parts/RadioSelectable.js.map +0 -0
- package/{cjs → dist/cjs}/parts/TreeItem.js +37 -62
- package/dist/cjs/parts/TreeItem.js.map +7 -0
- package/{cjs → dist/cjs}/parts/TreeItemText.js +0 -0
- package/{cjs → dist/cjs}/parts/TreeItemText.js.map +0 -0
- package/{cjs → dist/cjs}/parts/TreeList.js +13 -18
- package/dist/cjs/parts/TreeList.js.map +7 -0
- package/dist/cjs/plugins/dnd/TreeDndPlugin.js +35 -0
- package/dist/cjs/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/{cjs → dist/cjs}/plugins/dnd/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/dnd/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/roving/TreeRovingPlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/roving/TreeRovingPlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/roving/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/roving/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/searchable/SearchableTreePlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/searchable/SearchableTreePlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/searchable/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/searchable/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/selectable/SelectablePluginTree.js +0 -0
- package/{cjs → dist/cjs}/plugins/selectable/SelectablePluginTree.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/selectable/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/selectable/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/toolbar/TreeToolbarPlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/toolbar/TreeToolbarPlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/toolbar/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/toolbar/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/tree/TreeDataPlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/tree/TreeDataPlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/tree/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/tree/index.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/virtualization/TreeVirtualizationPlugin.js +0 -0
- package/{cjs → dist/cjs}/plugins/virtualization/TreeVirtualizationPlugin.js.map +0 -0
- package/{cjs → dist/cjs}/plugins/virtualization/index.js +0 -0
- package/{cjs → dist/cjs}/plugins/virtualization/index.js.map +0 -0
- package/{cjs → dist/cjs}/react-desc-prop-types.js +1 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/{cjs → dist/cjs}/related-components/TreeViewSearchBar.js +0 -0
- package/{cjs → dist/cjs}/related-components/TreeViewSearchBar.js.map +0 -0
- package/{cjs → dist/cjs}/sharedTypes.js +0 -0
- package/dist/cjs/sharedTypes.js.map +7 -0
- package/{cjs → dist/cjs}/utils/array-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/array-helpers.js.map +0 -0
- package/{cjs → dist/cjs}/utils/group-expands-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/group-expands-helpers.js.map +0 -0
- package/{cjs → dist/cjs}/utils/keyboard-helpers.js +7 -7
- package/dist/cjs/utils/keyboard-helpers.js.map +7 -0
- package/{cjs → dist/cjs}/utils/object-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/object-helpers.js.map +0 -0
- package/{cjs → dist/cjs}/utils/refs-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/refs-helpers.js.map +1 -1
- package/{cjs → dist/cjs}/utils/selectable-helper.js +0 -0
- package/{cjs → dist/cjs}/utils/selectable-helper.js.map +0 -0
- package/{cjs → dist/cjs}/utils/string-helpers.js +0 -0
- package/{cjs → dist/cjs}/utils/string-helpers.js.map +0 -0
- package/{cjs → dist/cjs}/utils/tree-helpers.js +21 -1
- package/{cjs → dist/cjs}/utils/tree-helpers.js.map +2 -2
- package/{cjs → dist/cjs}/utils/useInstanceRefActions.js +0 -0
- package/{cjs → dist/cjs}/utils/useInstanceRefActions.js.map +0 -0
- package/{cjs → dist/cjs}/utils/useTree.js +3 -1
- package/dist/cjs/utils/useTree.js.map +7 -0
- package/{esm → dist/esm}/TreeView.js +1 -3
- package/dist/esm/TreeView.js.map +7 -0
- package/{esm → dist/esm}/TreeViewContext.js +2 -8
- package/dist/esm/TreeViewContext.js.map +7 -0
- package/{esm → dist/esm}/config/cssClassesConstants.js +0 -0
- package/{esm → dist/esm}/config/cssClassesConstants.js.map +0 -0
- package/{esm → dist/esm}/config/useTreeview.js +15 -29
- package/dist/esm/config/useTreeview.js.map +7 -0
- package/dist/esm/hoc/DnDTreeContext.js +16 -0
- package/dist/esm/hoc/DnDTreeContext.js.map +7 -0
- package/dist/esm/hoc/SortableItemContext.js +17 -0
- package/dist/esm/hoc/SortableItemContext.js.map +7 -0
- package/dist/esm/hoc/WithConditionalDnDContext.js +99 -0
- package/dist/esm/hoc/WithConditionalDnDContext.js.map +7 -0
- package/dist/esm/hoc/WithDnDSortableItemContext.js +40 -0
- package/dist/esm/hoc/WithDnDSortableItemContext.js.map +7 -0
- package/{esm → dist/esm}/index.js +0 -0
- package/{esm → dist/esm}/index.js.map +0 -0
- package/{esm → dist/esm}/parts/CheckboxSelectable.js +0 -0
- package/{esm → dist/esm}/parts/CheckboxSelectable.js.map +0 -0
- package/{esm → dist/esm}/parts/ChildrenCountDisplayer.js +0 -0
- package/{esm → dist/esm}/parts/ChildrenCountDisplayer.js.map +0 -0
- package/dist/esm/parts/DnDHandle.js +28 -0
- package/dist/esm/parts/DnDHandle.js.map +7 -0
- package/dist/esm/parts/DropIndicator.js +51 -0
- package/dist/esm/parts/DropIndicator.js.map +7 -0
- package/{esm → dist/esm}/parts/ExpandCaret.js +0 -0
- package/{esm → dist/esm}/parts/ExpandCaret.js.map +0 -0
- package/{esm → dist/esm}/parts/Icon.js +0 -0
- package/{esm → dist/esm}/parts/Icon.js.map +0 -0
- package/{esm → dist/esm}/parts/NestingSpace.js +0 -0
- package/{esm → dist/esm}/parts/NestingSpace.js.map +0 -0
- package/{esm → dist/esm}/parts/RadioSelectable.js +0 -0
- package/{esm → dist/esm}/parts/RadioSelectable.js.map +0 -0
- package/{esm → dist/esm}/parts/TreeItem.js +37 -62
- package/dist/esm/parts/TreeItem.js.map +7 -0
- package/{esm → dist/esm}/parts/TreeItemText.js +0 -0
- package/{esm → dist/esm}/parts/TreeItemText.js.map +0 -0
- package/{esm → dist/esm}/parts/TreeList.js +12 -17
- package/dist/esm/parts/TreeList.js.map +7 -0
- package/dist/esm/plugins/dnd/TreeDndPlugin.js +6 -0
- package/dist/esm/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/{esm → dist/esm}/plugins/dnd/index.js +0 -0
- package/{esm → dist/esm}/plugins/dnd/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/index.js +0 -0
- package/{esm → dist/esm}/plugins/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/roving/TreeRovingPlugin.js +0 -0
- package/{esm → dist/esm}/plugins/roving/TreeRovingPlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/roving/index.js +0 -0
- package/{esm → dist/esm}/plugins/roving/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/searchable/SearchableTreePlugin.js +0 -0
- package/{esm → dist/esm}/plugins/searchable/SearchableTreePlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/searchable/index.js +0 -0
- package/{esm → dist/esm}/plugins/searchable/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/selectable/SelectablePluginTree.js +0 -0
- package/{esm → dist/esm}/plugins/selectable/SelectablePluginTree.js.map +0 -0
- package/{esm → dist/esm}/plugins/selectable/index.js +0 -0
- package/{esm → dist/esm}/plugins/selectable/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/toolbar/TreeToolbarPlugin.js +0 -0
- package/{esm → dist/esm}/plugins/toolbar/TreeToolbarPlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/toolbar/index.js +0 -0
- package/{esm → dist/esm}/plugins/toolbar/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/tree/TreeDataPlugin.js +0 -0
- package/{esm → dist/esm}/plugins/tree/TreeDataPlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/tree/index.js +0 -0
- package/{esm → dist/esm}/plugins/tree/index.js.map +0 -0
- package/{esm → dist/esm}/plugins/virtualization/TreeVirtualizationPlugin.js +0 -0
- package/{esm → dist/esm}/plugins/virtualization/TreeVirtualizationPlugin.js.map +0 -0
- package/{esm → dist/esm}/plugins/virtualization/index.js +0 -0
- package/{esm → dist/esm}/plugins/virtualization/index.js.map +0 -0
- package/{esm → dist/esm}/react-desc-prop-types.js +1 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/{esm → dist/esm}/related-components/TreeViewSearchBar.js +0 -0
- package/{esm → dist/esm}/related-components/TreeViewSearchBar.js.map +0 -0
- package/{esm → dist/esm}/sharedTypes.js +0 -0
- package/{esm → dist/esm}/sharedTypes.js.map +0 -0
- package/{esm → dist/esm}/utils/array-helpers.js +0 -0
- package/{esm → dist/esm}/utils/array-helpers.js.map +0 -0
- package/{esm → dist/esm}/utils/group-expands-helpers.js +0 -0
- package/{esm → dist/esm}/utils/group-expands-helpers.js.map +0 -0
- package/{esm → dist/esm}/utils/keyboard-helpers.js +7 -7
- package/dist/esm/utils/keyboard-helpers.js.map +7 -0
- package/{esm → dist/esm}/utils/object-helpers.js +0 -0
- package/{esm → dist/esm}/utils/object-helpers.js.map +0 -0
- package/{esm → dist/esm}/utils/refs-helpers.js +0 -0
- package/{esm → dist/esm}/utils/refs-helpers.js.map +1 -1
- package/{esm → dist/esm}/utils/selectable-helper.js +0 -0
- package/{esm → dist/esm}/utils/selectable-helper.js.map +0 -0
- package/{esm → dist/esm}/utils/string-helpers.js +0 -0
- package/{esm → dist/esm}/utils/string-helpers.js.map +0 -0
- package/{esm → dist/esm}/utils/tree-helpers.js +21 -1
- package/{esm → dist/esm}/utils/tree-helpers.js.map +2 -2
- package/{esm → dist/esm}/utils/useInstanceRefActions.js +0 -0
- package/{esm → dist/esm}/utils/useInstanceRefActions.js.map +0 -0
- package/{esm → dist/esm}/utils/useTree.js +4 -2
- package/dist/esm/utils/useTree.js.map +7 -0
- package/{types → dist/types}/TreeView.d.ts +0 -0
- package/{types → dist/types}/TreeViewContext.d.ts +0 -0
- package/{types → dist/types}/config/cssClassesConstants.d.ts +0 -0
- package/{types → dist/types}/config/useTreeview.d.ts +0 -0
- package/dist/types/hoc/DnDTreeContext.d.ts +14 -0
- package/dist/types/hoc/SortableItemContext.d.ts +19 -0
- package/dist/types/hoc/WithConditionalDnDContext.d.ts +4 -0
- package/dist/types/hoc/WithDnDSortableItemContext.d.ts +4 -0
- package/{types → dist/types}/index.d.ts +0 -0
- package/{types → dist/types}/parts/CheckboxSelectable.d.ts +0 -0
- package/{types → dist/types}/parts/ChildrenCountDisplayer.d.ts +0 -0
- package/dist/types/parts/DnDHandle.d.ts +6 -0
- package/dist/types/parts/DropIndicator.d.ts +10 -0
- package/{types → dist/types}/parts/ExpandCaret.d.ts +0 -0
- package/{types → dist/types}/parts/Icon.d.ts +0 -0
- package/{types → dist/types}/parts/NestingSpace.d.ts +0 -0
- package/{types → dist/types}/parts/RadioSelectable.d.ts +0 -0
- package/dist/types/parts/TreeItem.d.ts +17 -0
- package/{types → dist/types}/parts/TreeItemText.d.ts +0 -0
- package/{types → dist/types}/parts/TreeList.d.ts +0 -4
- package/dist/types/plugins/dnd/TreeDndPlugin.d.ts +1 -0
- package/{types → dist/types}/plugins/dnd/index.d.ts +0 -0
- package/{types → dist/types}/plugins/index.d.ts +0 -0
- package/{types → dist/types}/plugins/roving/TreeRovingPlugin.d.ts +0 -0
- package/{types → dist/types}/plugins/roving/index.d.ts +0 -0
- package/{types → dist/types}/plugins/searchable/SearchableTreePlugin.d.ts +0 -0
- package/{types → dist/types}/plugins/searchable/index.d.ts +0 -0
- package/{types → dist/types}/plugins/selectable/SelectablePluginTree.d.ts +0 -0
- package/{types → dist/types}/plugins/selectable/index.d.ts +0 -0
- package/{types → dist/types}/plugins/toolbar/TreeToolbarPlugin.d.ts +0 -0
- package/{types → dist/types}/plugins/toolbar/index.d.ts +0 -0
- package/{types → dist/types}/plugins/tree/TreeDataPlugin.d.ts +0 -0
- package/{types → dist/types}/plugins/tree/index.d.ts +0 -0
- package/{types → dist/types}/plugins/virtualization/TreeVirtualizationPlugin.d.ts +0 -0
- package/{types → dist/types}/plugins/virtualization/index.d.ts +0 -0
- package/{types → dist/types}/react-desc-prop-types.d.ts +17 -3
- package/{types → dist/types}/related-components/TreeViewSearchBar.d.ts +0 -0
- package/{types → dist/types}/sharedTypes.d.ts +1 -8
- package/{types → dist/types}/utils/array-helpers.d.ts +0 -0
- package/{types → dist/types}/utils/group-expands-helpers.d.ts +0 -0
- package/{types → dist/types}/utils/keyboard-helpers.d.ts +2 -1
- package/{types → dist/types}/utils/object-helpers.d.ts +0 -0
- package/{types → dist/types}/utils/refs-helpers.d.ts +1 -1
- package/{types → dist/types}/utils/selectable-helper.d.ts +0 -0
- package/{types → dist/types}/utils/string-helpers.d.ts +0 -0
- package/{types → dist/types}/utils/tree-helpers.d.ts +4 -1
- package/{types → dist/types}/utils/useInstanceRefActions.d.ts +0 -0
- package/{types → dist/types}/utils/useTree.d.ts +1 -0
- package/package.json +136 -117
- package/cjs/TreeView.js.map +0 -7
- package/cjs/TreeViewContext.js.map +0 -7
- package/cjs/config/useTreeview.js.map +0 -7
- package/cjs/parts/TreeItem.js.map +0 -7
- package/cjs/parts/TreeList.js.map +0 -7
- package/cjs/plugins/dnd/TreeDndPlugin.js +0 -59
- package/cjs/plugins/dnd/TreeDndPlugin.js.map +0 -7
- package/cjs/react-desc-prop-types.js.map +0 -7
- package/cjs/sharedTypes.js.map +0 -7
- package/cjs/utils/dnd-helpers.js +0 -146
- package/cjs/utils/dnd-helpers.js.map +0 -7
- package/cjs/utils/keyboard-helpers.js.map +0 -7
- package/cjs/utils/useDnDHelpers.js +0 -199
- package/cjs/utils/useDnDHelpers.js.map +0 -7
- package/cjs/utils/useTree.js.map +0 -7
- package/esm/TreeView.js.map +0 -7
- package/esm/TreeViewContext.js.map +0 -7
- package/esm/config/useTreeview.js.map +0 -7
- package/esm/parts/TreeItem.js.map +0 -7
- package/esm/parts/TreeList.js.map +0 -7
- package/esm/plugins/dnd/TreeDndPlugin.js +0 -30
- package/esm/plugins/dnd/TreeDndPlugin.js.map +0 -7
- package/esm/react-desc-prop-types.js.map +0 -7
- package/esm/utils/dnd-helpers.js +0 -117
- package/esm/utils/dnd-helpers.js.map +0 -7
- package/esm/utils/keyboard-helpers.js.map +0 -7
- package/esm/utils/useDnDHelpers.js +0 -170
- package/esm/utils/useDnDHelpers.js.map +0 -7
- package/esm/utils/useTree.js.map +0 -7
- package/types/parts/TreeItem.d.ts +0 -24
- package/types/plugins/dnd/TreeDndPlugin.d.ts +0 -3
- package/types/utils/dnd-helpers.d.ts +0 -39
- package/types/utils/useDnDHelpers.d.ts +0 -26
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useState, useMemo, useRef, useCallback } from 'react';\nimport { SortableElement, SortableHandle } from '@elliemae/react-sortable-hoc';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { GripperVertical } from '@elliemae/ds-icons';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const TreeListItem = aggregatedClasses('li', {\n 'data-testid': treeItemBlockName,\n role: 'treeitem',\n // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n treeItemBlockName,\n 'addons',\n // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\nconst DnDHandle = SortableHandle(({ id }: { id: DSTreeviewT.StringOrNum }) => (\n <GripperVertical\n data-testid=\"drag-handle\"\n key={`${id}-drag-handle`}\n className=\"drag-handle\"\n size=\"s\"\n onMouseDown={(e: React.MouseEvent) => {\n // prevent focusing the drag-handle to avoid borders\n if (e) {\n e.preventDefault();\n }\n }}\n tabIndex=\"0\"\n />\n));\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n virtualItemRef: React.RefObject<HTMLLIElement>;\n itemWrapperStyle?: { [key: string]: unknown };\n spaceForNestingLevel?: number;\n onMouseDragOverItem?: (opts: {\n event: React.MouseEvent<HTMLLIElement>;\n item: DSTreeviewT.Item;\n itemIndex: number;\n setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n }) => void;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n const {\n item,\n itemIndex,\n itemWrapperStyle = {},\n virtualItemRef,\n spaceForNestingLevel = 1.5,\n onMouseDragOverItem,\n } = props;\n const { id, node } = item;\n const { nodeItemRef } = node.model;\n const openFolderOnHoverTimeout = useRef<NodeJS.Timeout | null>(null);\n\n const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);\n const onItemKeyDown = useOnItemKeyDown(item);\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n relativeMouseCord,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n selectedItem,\n selectedCheckboxes,\n hoverItem,\n isDragging,\n virtualListHelpers: { scrollToIndex },\n setHoverItem,\n setSelectedItem,\n setFocusedItem,\n } = ctx;\n\n // Sortable Items needs to update\n // - the virtual list ref (for react-virtual requirement)\n // - nodeItemRef which is a prop avaiable in the TreeModel nodes\n const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n setMultipleRefs(virtualItemRef, nodeItemRef)(ref);\n };\n\n const dropPreviewClassName = useMemo(() => {\n if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';\n const { isBefore, isAfter, isValid } = relativeMouseCord;\n let className = `${DSTreeViewPrefix}-${treeItemBlockName}${isValid ? '--valid' : '--invalid'}`;\n\n if (isBefore) className += '-drop-before';\n else if (isAfter) className += '-drop-after';\n else className += '-drop-in';\n return className;\n }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);\n\n const selectedClassName = useMemo(\n () => (selectedItem?.id === item.id ? 'selected' : ''),\n [item.id, selectedItem?.id],\n );\n const hoverClassName = useMemo(\n () => (hoverItem?.id !== item.id || (withDragAndDrop && isDragging) ? '' : 'hover'),\n [hoverItem?.id, item.id, withDragAndDrop, isDragging],\n );\n const fixedHeightClassname = useMemo(() => {\n if (labelOverflow === 'truncate') {\n if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n }\n return '';\n }, [labelOverflow, rowSize]);\n\n const finalClassName = useMemo(\n () => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`,\n [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname],\n );\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onItemClick(item, e);\n setFocusedItem(item);\n setSelectedItem(item);\n const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n onItemFocus({\n itemIndex: itemVirtualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n item,\n });\n },\n [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n );\n\n return (\n <TreeListItem\n tabIndex={0}\n onMouseMove={(event) => {\n if (withDragAndDrop && onMouseDragOverItem) {\n onMouseDragOverItem({\n event,\n item,\n itemIndex,\n setIsDraggingOverThis,\n openFolderOnHoverTimeout,\n });\n }\n }}\n onMouseLeave={() => {\n if (withDragAndDrop) {\n setIsDraggingOverThis(false);\n if (openFolderOnHoverTimeout?.current) clearTimeout(openFolderOnHoverTimeout.current);\n }\n if (hoverItem?.id === item.id) {\n setHoverItem(null);\n }\n }}\n onMouseEnter={() => {\n setHoverItem(item);\n }}\n onClick={handleItemClick}\n ref={setItemRefs}\n style={{ ...itemWrapperStyle }}\n className={finalClassName}\n aria-expanded={!!item.isExpanded}\n aria-selected={!!selectedCheckboxes[item.id]}\n data-id={item.id}\n data-index={item.virtualIndex}\n onKeyDown={onItemKeyDown}\n >\n <TreeListItemAddonsWrapper>\n {withDragAndDrop ? <DnDHandle id={id} /> : null}\n {withRadioChecks ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n {withCheckboxChecks ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />\n <ExpandCaret item={item} />\n {!disableIcons ? <Icon item={item} /> : null}\n </TreeListItemAddonsWrapper>\n <TreeItemText item={item} />\n {rightAddons && (\n <TreeListItemAddonsWrapper>\n {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n </TreeListItemAddonsWrapper>\n )}\n </TreeListItem>\n );\n};\n\nexport const DragAndDropTreeItem = SortableElement(TreeItem);\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeList.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { SortableContainer } from '@elliemae/react-sortable-hoc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nimport TreeViewContext from '../TreeViewContext';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants';\nimport { TreeItem, DragAndDropTreeItem } from './TreeItem';\n\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\nexport const TreeListNoItems = aggregatedClasses('div', {\n 'data-testid': treeListNoItemsBn,\n})(treeListNoItemsBn) as unknown as React.ComponentType<React.ComponentProps<'div'>>;\n\n// React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era\n// we omit the LegacyRef typings in favor of hook-era typings\ninterface UlProps extends Omit<React.ComponentProps<'ul'>, 'ref'> {\n ref: React.MutableRefObject<HTMLUListElement | undefined> | undefined;\n}\nexport const TreeListWrapper = aggregatedClasses('ul', {\n 'data-testid': treeListBlockName,\n role: 'tree',\n})(treeListBlockName, null, ({ rowSize }: { rowSize: 'normal' | 'compact' }) => ({\n [`rowsize-${rowSize}`]: rowSize,\n})) as unknown as React.ComponentType<UlProps>;\n\nconst compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;\nconst normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;\n\ninterface PropsT {\n onMouseDragOverItem?: (opts: {\n event: React.MouseEvent<HTMLLIElement>;\n item: DSTreeviewT.Item;\n itemIndex: number;\n setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n }) => void;\n}\n\nexport const TreeList = (props: PropsT) => {\n const { onMouseDragOverItem } = props;\n const ctx = useContext(TreeViewContext);\n const {\n virtualListRef,\n virtualListHelpers,\n visibleItems,\n withDragAndDrop,\n props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n } = ctx;\n const { totalSize, virtualItems } = virtualListHelpers;\n const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n return (\n <TreeListWrapper\n ref={virtualListRef}\n className={className}\n style={{\n height: `${typeof height === 'number' ? `${height}px` : height}`,\n width: `${typeof width === 'number' ? `${width}px` : width}`,\n overflow: 'auto',\n }}\n >\n {isLoading ? (\n <div\n style={{\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <DSCircularProgressIndicator size=\"xl\" loading={isLoading} showLabel waiting={false} showTooltip={false} />\n </div>\n ) : null}\n {!isLoading && virtualItems.length === 0 ? <TreeListNoItems>{noItemsPlaceholder}</TreeListNoItems> : null}\n {!isLoading && virtualItems.length !== 0 ? (\n <div\n style={{\n height: `${totalSize}px`,\n width: '100%',\n position: 'relative',\n }}\n >\n {virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const item = visibleItems[index];\n item.virtualIndex = index;\n const { id } = item;\n\n const style = {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${start}px)`,\n };\n\n const listItemProps = {\n key: `DS-TreeView-List-Item-${id}`,\n virtualItemRef: measureRef,\n index, // this is consumed by the DnD HOC\n itemIndex: index,\n item,\n itemWrapperStyle: style,\n };\n\n if (withDragAndDrop)\n return <DragAndDropTreeItem {...listItemProps} onMouseDragOverItem={onMouseDragOverItem} />;\n return <TreeItem {...listItemProps} />;\n })}\n </div>\n ) : null}\n </TreeListWrapper>\n );\n};\ntype SortablePropsT = PropsT & {\n disableAnimation?: boolean;\n getContainer: (element: React.ReactElement<unknown>) => HTMLElement | Promise<HTMLElement>;\n};\nexport const DragAndDropTreeList = SortableContainer<SortablePropsT>(TreeList);\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AACA;AAIO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,kBAAkB,kBAAkB,OAAO;AAAA,EACtD,eAAe;AAAA,GACd;AAOI,MAAM,kBAAkB,kBAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AAAA,GACL,mBAAmB,MAAM,CAAC,EAAE,cAAkD;AAAA,GAC9E,WAAW,YAAY;AAAA;AAG1B,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYlB,MAAM,WAAW,CAAC,UAAkB;AACzC,QAAM,EAAE,wBAAwB;AAChC,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB;AAAA,MACnD;AACJ,QAAM,EAAE,WAAW,iBAAiB;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,SACE,qCAAC,iBAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAQ,GAAG,OAAO,WAAW,WAAW,GAAG,aAAa;AAAA,MACxD,OAAO,GAAG,OAAO,UAAU,WAAW,GAAG,YAAY;AAAA,MACrD,UAAU;AAAA;AAAA,KAGX,YACC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,KAGlB,qCAAC,6BAAD;AAAA,IAA6B,MAAK;AAAA,IAAK,SAAS;AAAA,IAAW,WAAS;AAAA,IAAC,SAAS;AAAA,IAAO,aAAa;AAAA,QAElG,MACH,CAAC,aAAa,aAAa,WAAW,IAAI,qCAAC,iBAAD,MAAkB,sBAAwC,MACpG,CAAC,aAAa,aAAa,WAAW,IACrC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,QAAQ,GAAG;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,KAGX,aAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,UAAU;AACrC,UAAM,OAAO,aAAa;AAC1B,SAAK,eAAe;AACpB,UAAM,EAAE,OAAO;AAEf,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW,cAAc;AAAA;AAG3B,UAAM,gBAAgB;AAAA,MACpB,KAAK,yBAAyB;AAAA,MAC9B,gBAAgB;AAAA,MAChB;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,kBAAkB;AAAA;AAGpB,QAAI;AACF,aAAO,qCAAC,qBAAD;AAAA,WAAyB;AAAA,QAAe;AAAA;AACjD,WAAO,qCAAC,UAAD;AAAA,SAAc;AAAA;AAAA,QAGvB;AAAA;AAQH,MAAM,sBAAsB,kBAAkC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useContext } from "react";
|
|
3
|
-
import { DragAndDropTreeList } from "../../parts/TreeList";
|
|
4
|
-
import { useDnDHelpers } from "../../utils/useDnDHelpers";
|
|
5
|
-
import { keyCodes } from "../../utils/dnd-helpers";
|
|
6
|
-
import TreeViewContext from "../../TreeViewContext";
|
|
7
|
-
const TreeDnD = () => {
|
|
8
|
-
const { updateBeforeSortStart, onSortStart, onMouseDragOverItem, onSortEnd } = useDnDHelpers();
|
|
9
|
-
const ctx = useContext(TreeViewContext);
|
|
10
|
-
const { virtualListRef } = ctx;
|
|
11
|
-
return /* @__PURE__ */ React2.createElement(DragAndDropTreeList, {
|
|
12
|
-
useDragHandle: true,
|
|
13
|
-
transitionDuration: 0,
|
|
14
|
-
keyboardSortingTransitionDuration: 0,
|
|
15
|
-
hideSortableGhost: false,
|
|
16
|
-
disableAnimation: true,
|
|
17
|
-
updateBeforeSortStart,
|
|
18
|
-
onSortStart,
|
|
19
|
-
onMouseDragOverItem,
|
|
20
|
-
onSortEnd,
|
|
21
|
-
getContainer: () => virtualListRef?.current,
|
|
22
|
-
keyCodes
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
const TreeDndPlugin = "tree-dnd";
|
|
26
|
-
export {
|
|
27
|
-
TreeDnD,
|
|
28
|
-
TreeDndPlugin
|
|
29
|
-
};
|
|
30
|
-
//# sourceMappingURL=TreeDndPlugin.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/dnd/TreeDndPlugin.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\n\nimport { DragAndDropTreeList } from '../../parts/TreeList';\n\nimport { useDnDHelpers } from '../../utils/useDnDHelpers';\nimport { keyCodes } from '../../utils/dnd-helpers';\n\nimport TreeViewContext from '../../TreeViewContext';\nexport const TreeDnD = () => {\n const { updateBeforeSortStart, onSortStart, onMouseDragOverItem, onSortEnd } = useDnDHelpers();\n const ctx = useContext(TreeViewContext);\n const { virtualListRef } = ctx;\n return (\n <DragAndDropTreeList\n useDragHandle\n transitionDuration={0}\n keyboardSortingTransitionDuration={0}\n hideSortableGhost={false}\n disableAnimation\n updateBeforeSortStart={updateBeforeSortStart}\n onSortStart={onSortStart}\n onMouseDragOverItem={onMouseDragOverItem}\n onSortEnd={onSortEnd}\n getContainer={() => virtualListRef?.current as HTMLUListElement}\n keyCodes={keyCodes}\n />\n );\n};\n\nexport const TreeDndPlugin = 'tree-dnd';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;AAEA;AACA;AAEA;AACO,MAAM,UAAU,MAAM;AAC3B,QAAM,EAAE,uBAAuB,aAAa,qBAAqB,cAAc;AAC/E,QAAM,MAAM,WAAW;AACvB,QAAM,EAAE,mBAAmB;AAC3B,SACE,qCAAC,qBAAD;AAAA,IACE,eAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,mCAAmC;AAAA,IACnC,mBAAmB;AAAA,IACnB,kBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,MAAM,gBAAgB;AAAA,IACpC;AAAA;AAAA;AAKC,MAAM,gBAAgB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
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
|
-
}
|
package/esm/utils/dnd-helpers.js
DELETED
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { getItemsParentNode, itemsShareSameParent } from "./tree-helpers";
|
|
3
|
-
const keyCodes = {
|
|
4
|
-
lift: [32, 13],
|
|
5
|
-
drop: [32, 13],
|
|
6
|
-
cancel: [27],
|
|
7
|
-
up: [38, 37],
|
|
8
|
-
down: [40, 39]
|
|
9
|
-
};
|
|
10
|
-
const sameParentAsHoverItemDrop = ({
|
|
11
|
-
isBefore,
|
|
12
|
-
isAfter,
|
|
13
|
-
draggedItem,
|
|
14
|
-
overItem,
|
|
15
|
-
movementDirection
|
|
16
|
-
}) => {
|
|
17
|
-
const hoveredItemNodeNestedIndex = overItem.node.getIndex();
|
|
18
|
-
let newParentNode = getItemsParentNode([overItem], true);
|
|
19
|
-
const { treeDepth: draggedItemTreeDepth } = draggedItem;
|
|
20
|
-
const { treeDepth: overItemTreeDepth } = overItem;
|
|
21
|
-
const directionOffset = draggedItemTreeDepth <= overItemTreeDepth && movementDirection === "topToBottom" ? -1 : 0;
|
|
22
|
-
let newNestedIndex;
|
|
23
|
-
if (isBefore)
|
|
24
|
-
newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;
|
|
25
|
-
else if (isAfter)
|
|
26
|
-
newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;
|
|
27
|
-
else {
|
|
28
|
-
newNestedIndex = overItem.children.length;
|
|
29
|
-
newParentNode = overItem.node;
|
|
30
|
-
}
|
|
31
|
-
if (newNestedIndex < 0)
|
|
32
|
-
newNestedIndex = 0;
|
|
33
|
-
return {
|
|
34
|
-
newNestedIndex,
|
|
35
|
-
newParentNode
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
|
-
const inferHoverItemKinshipDrop = ({
|
|
39
|
-
isBefore,
|
|
40
|
-
isAfter,
|
|
41
|
-
draggedItem,
|
|
42
|
-
overItem,
|
|
43
|
-
movementDirection
|
|
44
|
-
}) => {
|
|
45
|
-
const hoverItemModel = overItem.node.model;
|
|
46
|
-
const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;
|
|
47
|
-
if (isAfter && isGroupAndIsExpanded) {
|
|
48
|
-
return {
|
|
49
|
-
newNestedIndex: 0,
|
|
50
|
-
newParentNode: overItem.node
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
if (isBefore || isAfter && !isGroupAndIsExpanded) {
|
|
54
|
-
return sameParentAsHoverItemDrop({
|
|
55
|
-
isBefore,
|
|
56
|
-
isAfter,
|
|
57
|
-
draggedItem,
|
|
58
|
-
overItem,
|
|
59
|
-
movementDirection
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
return {
|
|
63
|
-
newNestedIndex: overItem.children.length,
|
|
64
|
-
newParentNode: overItem.node
|
|
65
|
-
};
|
|
66
|
-
};
|
|
67
|
-
const isDropValid = ({
|
|
68
|
-
isBefore,
|
|
69
|
-
isAfter,
|
|
70
|
-
draggedItem,
|
|
71
|
-
overItem,
|
|
72
|
-
restrictDragAndDrop
|
|
73
|
-
}) => {
|
|
74
|
-
const { id: movedId } = draggedItem;
|
|
75
|
-
const { id: hoverId } = overItem;
|
|
76
|
-
const isInside = !isBefore && !isAfter;
|
|
77
|
-
if (movedId === hoverId)
|
|
78
|
-
return false;
|
|
79
|
-
if (isInside && !overItem.isGroup) {
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
if (restrictDragAndDrop) {
|
|
83
|
-
if (isInside)
|
|
84
|
-
return false;
|
|
85
|
-
const sameParent = itemsShareSameParent([draggedItem, overItem]);
|
|
86
|
-
if (overItem.node.model.isExpanded && isAfter)
|
|
87
|
-
return false;
|
|
88
|
-
if (!sameParent)
|
|
89
|
-
return false;
|
|
90
|
-
}
|
|
91
|
-
return true;
|
|
92
|
-
};
|
|
93
|
-
const inferKeyboardKinshipDrop = ({
|
|
94
|
-
items,
|
|
95
|
-
newIndex
|
|
96
|
-
}) => {
|
|
97
|
-
const kinship = {};
|
|
98
|
-
const itemBefore = items[newIndex];
|
|
99
|
-
const itemBeforeModel = itemBefore.node.model;
|
|
100
|
-
const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;
|
|
101
|
-
if (isGroupAndIsExpanded) {
|
|
102
|
-
kinship.newParentNode = itemBefore.node;
|
|
103
|
-
kinship.newNestedIndex = 0;
|
|
104
|
-
} else {
|
|
105
|
-
kinship.newParentNode = getItemsParentNode([itemBefore], true);
|
|
106
|
-
kinship.newNestedIndex = itemBefore.node.getIndex();
|
|
107
|
-
}
|
|
108
|
-
return kinship;
|
|
109
|
-
};
|
|
110
|
-
export {
|
|
111
|
-
inferHoverItemKinshipDrop,
|
|
112
|
-
inferKeyboardKinshipDrop,
|
|
113
|
-
isDropValid,
|
|
114
|
-
keyCodes,
|
|
115
|
-
sameParentAsHoverItemDrop
|
|
116
|
-
};
|
|
117
|
-
//# sourceMappingURL=dnd-helpers.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
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,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/keyboard-helpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect } from 'react';\nimport TreeViewContext from '../TreeViewContext';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item) => {\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n triggerTreeRerender,\n isDragging,\n visibleItems,\n setFocusedItem,\n setSelectedItem,\n setLatestToggledItem,\n updateUserExpandedState,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n const { isGroup, isExpanded } = item;\n const onItemFocusCurry = useCallback(\n (newFocusItem: DSTreeviewT.Item) =>\n onItemFocus({\n itemIndex: newFocusItem.virtualIndex as number,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n item: newFocusItem,\n }),\n [onItemFocus, scrollToIndex],\n );\n\n const onItemKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n const { keyCode } = e;\n if (!isDragging) {\n if (keyCode !== 9) e.preventDefault(); // allow tab/shift+tab\n if (keyCode === 13 || keyCode === 32) setSelectedItem(item);\n\n if (keyCode === 37) {\n if (isGroup && isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n if (keyCode === 39) {\n if (isGroup && !isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n\n const { virtualIndex } = item;\n if (typeof virtualIndex === 'number') {\n const lastItemIndex = visibleItems.length - 1;\n if (keyCode === 38) {\n const isLoopedFocus = virtualIndex === 0;\n const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;\n const newFocusItem = visibleItems[newFocusIndex];\n scrollToIndex(newFocusIndex);\n if (isLoopedFocus) {\n // when looping the list from start to end we need to wait a bit before focusing\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n focusItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n }, 300);\n } else {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }\n }\n if (keyCode === 40) {\n const isLoopedFocus = virtualIndex === lastItemIndex;\n const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;\n const newFocusItem = visibleItems[newFocusIndex];\n scrollToIndex(newFocusIndex);\n if (isLoopedFocus) {\n // when looping the list from start to end we need to wait a bit before focusing\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n } else {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }\n }\n if (keyCode === 35) {\n if (virtualIndex !== lastItemIndex) {\n const newFocusItem = visibleItems[lastItemIndex];\n scrollToIndex(lastItemIndex);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n if (keyCode === 36) {\n if (virtualIndex !== 0) {\n const newFocusItem = visibleItems[0];\n scrollToIndex(0);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n }\n }\n },\n [\n isDragging,\n setSelectedItem,\n item,\n isGroup,\n isExpanded,\n triggerTreeRerender,\n scrollToIndex,\n setLatestToggledItem,\n visibleItems,\n setFocusedItem,\n onItemFocusCurry,\n updateUserExpandedState,\n ],\n );\n\n return onItemKeyDown;\n};\n\nexport const useGlobalKeyboardListener = (func: (e: KeyboardEvent) => void) => {\n useEffect(() => {\n document.addEventListener('keydown', func);\n return () => document.removeEventListener('keydown', func);\n }, [func]);\n};\n\nexport const useGlobalToggleAllExpandShortcut = (\n treeRoot: DSTreeviewT.Item['node'],\n triggerTreeRerender: () => void,\n setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n const memoizedToggleAllKeyboardShortcut = useCallback(\n (e: KeyboardEvent) => {\n const { shiftKey, keyCode } = e;\n if (shiftKey && keyCode === 56) {\n toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n }\n },\n [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState],\n );\n\n return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useContext, useCallback } from "react";
|
|
3
|
-
import { cloneDeep } from "lodash";
|
|
4
|
-
import TreeViewContext, { defaultRelativeMouseCoord } from "../TreeViewContext";
|
|
5
|
-
import { getNodeById, focusItem } from "./tree-helpers";
|
|
6
|
-
import { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid } from "./dnd-helpers";
|
|
7
|
-
const useDnDHelpers = () => {
|
|
8
|
-
const ctx = useContext(TreeViewContext);
|
|
9
|
-
const {
|
|
10
|
-
props: { data, onOrderChange, restrictDragAndDrop },
|
|
11
|
-
relativeMouseCord,
|
|
12
|
-
setRelativeMouseCord,
|
|
13
|
-
visibleItems,
|
|
14
|
-
isDragging,
|
|
15
|
-
setIsDragging,
|
|
16
|
-
isKeyboardDragging,
|
|
17
|
-
setIsKeyboardDragging,
|
|
18
|
-
setDraggedItem,
|
|
19
|
-
setFocusedItem,
|
|
20
|
-
triggerTreeRerender,
|
|
21
|
-
tree,
|
|
22
|
-
treeRoot,
|
|
23
|
-
draggedItem
|
|
24
|
-
} = ctx;
|
|
25
|
-
const onSortEnd = useCallback(({ oldIndex, newIndex, isKeySorting }) => {
|
|
26
|
-
const { isBefore, isAfter, item: overItem, isValid } = relativeMouseCord;
|
|
27
|
-
if (draggedItem && tree && treeRoot && overItem) {
|
|
28
|
-
let newItems = cloneDeep(data);
|
|
29
|
-
if (oldIndex === newIndex || !isValid) {
|
|
30
|
-
setIsDragging(false);
|
|
31
|
-
setDraggedItem(null);
|
|
32
|
-
triggerTreeRerender();
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
const movementDirection = newIndex > oldIndex ? "topToBottom" : "bottomToTop";
|
|
36
|
-
let newNestedIndex;
|
|
37
|
-
let newParentNode;
|
|
38
|
-
if (isKeySorting) {
|
|
39
|
-
const kinship = inferKeyboardKinshipDrop({
|
|
40
|
-
items: visibleItems,
|
|
41
|
-
newIndex
|
|
42
|
-
});
|
|
43
|
-
newNestedIndex = kinship.newNestedIndex;
|
|
44
|
-
newParentNode = kinship.newParentNode;
|
|
45
|
-
} else {
|
|
46
|
-
const kinship = inferHoverItemKinshipDrop({
|
|
47
|
-
isBefore,
|
|
48
|
-
isAfter,
|
|
49
|
-
overItem,
|
|
50
|
-
movementDirection,
|
|
51
|
-
draggedItem
|
|
52
|
-
});
|
|
53
|
-
newNestedIndex = kinship.newNestedIndex;
|
|
54
|
-
newParentNode = kinship.newParentNode;
|
|
55
|
-
}
|
|
56
|
-
const newMovedItemNode = tree.parse(draggedItem.node.model);
|
|
57
|
-
getNodeById(treeRoot, draggedItem.id).drop();
|
|
58
|
-
if (newParentNode && typeof newNestedIndex === "number") {
|
|
59
|
-
newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);
|
|
60
|
-
if (newParentNode.isRoot()) {
|
|
61
|
-
newItems = [...newParentNode.model.children];
|
|
62
|
-
} else {
|
|
63
|
-
newItems = [...treeRoot.model.children];
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
onOrderChange(newItems, data, draggedItem);
|
|
67
|
-
setIsDragging(false);
|
|
68
|
-
setDraggedItem(null);
|
|
69
|
-
triggerTreeRerender();
|
|
70
|
-
}
|
|
71
|
-
}, [
|
|
72
|
-
data,
|
|
73
|
-
draggedItem,
|
|
74
|
-
relativeMouseCord,
|
|
75
|
-
visibleItems,
|
|
76
|
-
tree,
|
|
77
|
-
treeRoot,
|
|
78
|
-
onOrderChange,
|
|
79
|
-
triggerTreeRerender,
|
|
80
|
-
setIsDragging,
|
|
81
|
-
setDraggedItem
|
|
82
|
-
]);
|
|
83
|
-
const onSortStart = useCallback(() => {
|
|
84
|
-
}, []);
|
|
85
|
-
const updateBeforeSortStart = useCallback((beforeStartArgs) => new Promise((resolve) => {
|
|
86
|
-
const { index, isKeySorting } = beforeStartArgs;
|
|
87
|
-
const item = visibleItems[index];
|
|
88
|
-
const { isExpanded } = item.node.model;
|
|
89
|
-
if (isExpanded) {
|
|
90
|
-
item.node.model.isExpanded = false;
|
|
91
|
-
triggerTreeRerender();
|
|
92
|
-
}
|
|
93
|
-
setRelativeMouseCord(defaultRelativeMouseCoord);
|
|
94
|
-
setIsKeyboardDragging(isKeySorting);
|
|
95
|
-
setIsDragging(true);
|
|
96
|
-
setDraggedItem(item);
|
|
97
|
-
focusItem(null);
|
|
98
|
-
setFocusedItem(null);
|
|
99
|
-
if (document.activeElement && typeof document.activeElement.blur === "function")
|
|
100
|
-
document.activeElement.blur();
|
|
101
|
-
resolve(true);
|
|
102
|
-
}), [
|
|
103
|
-
visibleItems,
|
|
104
|
-
setRelativeMouseCord,
|
|
105
|
-
setIsKeyboardDragging,
|
|
106
|
-
setIsDragging,
|
|
107
|
-
setDraggedItem,
|
|
108
|
-
setFocusedItem,
|
|
109
|
-
triggerTreeRerender
|
|
110
|
-
]);
|
|
111
|
-
const onMouseDragOverItem = useCallback(({
|
|
112
|
-
event,
|
|
113
|
-
item,
|
|
114
|
-
itemIndex,
|
|
115
|
-
setIsDraggingOverThis,
|
|
116
|
-
openFolderOnHoverTimeout
|
|
117
|
-
}) => {
|
|
118
|
-
const { node } = item;
|
|
119
|
-
const { nodeItemRef } = node.model;
|
|
120
|
-
if (isDragging && !isKeyboardDragging && draggedItem) {
|
|
121
|
-
const rect = nodeItemRef?.current?.getBoundingClientRect();
|
|
122
|
-
if (rect) {
|
|
123
|
-
const x = event.clientX - rect.left;
|
|
124
|
-
const y = event.clientY - rect.top;
|
|
125
|
-
const { height: elementHeight } = rect;
|
|
126
|
-
const dropBeforeMaxY = elementHeight * 0.25;
|
|
127
|
-
const dropAfterMinY = elementHeight - elementHeight * 0.25;
|
|
128
|
-
const isBefore = y < dropBeforeMaxY;
|
|
129
|
-
const isAfter = y > dropAfterMinY;
|
|
130
|
-
const isValid = isDropValid({
|
|
131
|
-
isBefore,
|
|
132
|
-
isAfter,
|
|
133
|
-
draggedItem,
|
|
134
|
-
overItem: item,
|
|
135
|
-
restrictDragAndDrop
|
|
136
|
-
});
|
|
137
|
-
setRelativeMouseCord({
|
|
138
|
-
isBefore,
|
|
139
|
-
isAfter,
|
|
140
|
-
isValid,
|
|
141
|
-
item,
|
|
142
|
-
x,
|
|
143
|
-
y,
|
|
144
|
-
relativeElementDOMRect: rect,
|
|
145
|
-
relativeElementIndex: itemIndex
|
|
146
|
-
});
|
|
147
|
-
setIsDraggingOverThis(true);
|
|
148
|
-
if (!openFolderOnHoverTimeout?.current && draggedItem?.id !== item?.id && (item.isGroup || item.children.length > 0) && !restrictDragAndDrop) {
|
|
149
|
-
openFolderOnHoverTimeout.current = setTimeout(() => {
|
|
150
|
-
item.node.model.isExpanded = true;
|
|
151
|
-
openFolderOnHoverTimeout.current = null;
|
|
152
|
-
triggerTreeRerender();
|
|
153
|
-
}, 1e3);
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
} else {
|
|
157
|
-
setRelativeMouseCord(defaultRelativeMouseCoord);
|
|
158
|
-
}
|
|
159
|
-
}, [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
|
|
160
|
-
return {
|
|
161
|
-
updateBeforeSortStart,
|
|
162
|
-
onSortStart,
|
|
163
|
-
onSortEnd,
|
|
164
|
-
onMouseDragOverItem
|
|
165
|
-
};
|
|
166
|
-
};
|
|
167
|
-
export {
|
|
168
|
-
useDnDHelpers
|
|
169
|
-
};
|
|
170
|
-
//# sourceMappingURL=useDnDHelpers.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useDnDHelpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable no-lonely-if */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useContext, useCallback } from 'react';\nimport { cloneDeep } from 'lodash';\n\nimport TreeViewContext, { defaultRelativeMouseCoord } from '../TreeViewContext';\nimport { getNodeById, focusItem } from './tree-helpers';\nimport { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid } from './dnd-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\nexport const useDnDHelpers = () => {\n const ctx = useContext(TreeViewContext);\n\n const {\n props: { data, onOrderChange, restrictDragAndDrop },\n relativeMouseCord,\n setRelativeMouseCord,\n visibleItems,\n isDragging,\n setIsDragging,\n isKeyboardDragging,\n setIsKeyboardDragging,\n setDraggedItem,\n setFocusedItem,\n triggerTreeRerender,\n tree,\n treeRoot,\n draggedItem,\n } = ctx;\n\n const onSortEnd = useCallback(\n ({ oldIndex, newIndex, isKeySorting }: { oldIndex: number; newIndex: number; isKeySorting: boolean }) => {\n const { isBefore, isAfter, item: overItem, isValid } = relativeMouseCord;\n if (draggedItem && tree && treeRoot && overItem) {\n let newItems = cloneDeep(data);\n // if dropping in same position do nothing\n // if the drop is not allowed do nothing\n if (oldIndex === newIndex || !isValid) {\n // onOrderChange(newItems, data);\n setIsDragging(false);\n setDraggedItem(null);\n triggerTreeRerender();\n return;\n }\n\n // if we are moving from topToBottom the offset changes\n const movementDirection = newIndex > oldIndex ? ('topToBottom' as const) : ('bottomToTop' as const);\n\n let newNestedIndex;\n let newParentNode;\n if (isKeySorting) {\n const kinship = inferKeyboardKinshipDrop({\n items: visibleItems,\n\n newIndex,\n });\n newNestedIndex = kinship.newNestedIndex;\n newParentNode = kinship.newParentNode;\n } else {\n const kinship = inferHoverItemKinshipDrop({\n isBefore,\n isAfter,\n overItem,\n movementDirection,\n draggedItem,\n });\n newNestedIndex = kinship.newNestedIndex;\n newParentNode = kinship.newParentNode;\n }\n\n const newMovedItemNode = tree.parse(draggedItem.node.model);\n getNodeById(treeRoot, draggedItem.id).drop();\n if (newParentNode && typeof newNestedIndex === 'number') {\n newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);\n\n if (newParentNode.isRoot()) {\n newItems = [...newParentNode.model.children];\n } else {\n newItems = [...treeRoot.model.children];\n }\n }\n\n onOrderChange(newItems, data, draggedItem);\n setIsDragging(false);\n setDraggedItem(null);\n triggerTreeRerender();\n }\n },\n [\n data,\n draggedItem,\n relativeMouseCord,\n visibleItems,\n tree,\n treeRoot,\n onOrderChange,\n triggerTreeRerender,\n setIsDragging,\n setDraggedItem,\n ],\n );\n\n const onSortStart = useCallback(\n () => {},\n // ({ node, index, collection, isKeySorting }, event) => {\n // console.log('node :>> ', node);\n // console.log('isKeySorting :>> ', isKeySorting);\n // console.log('event :>> ', event);\n // const item = collection?.[index] || visibleItems[index];\n // setIsDragging(true);\n // setDraggedItem(item);\n // },\n [],\n );\n\n const updateBeforeSortStart = useCallback(\n (beforeStartArgs: { index: number; isKeySorting: boolean }) =>\n new Promise((resolve) => {\n const { index, isKeySorting } = beforeStartArgs;\n\n const item = visibleItems[index];\n const { isExpanded } = item.node.model;\n\n if (isExpanded) {\n item.node.model.isExpanded = false;\n triggerTreeRerender();\n }\n setRelativeMouseCord(defaultRelativeMouseCoord);\n setIsKeyboardDragging(isKeySorting);\n setIsDragging(true);\n setDraggedItem(item);\n focusItem(null);\n setFocusedItem(null);\n if (document.activeElement && typeof (document.activeElement as HTMLElement).blur === 'function')\n (document.activeElement as HTMLElement).blur();\n resolve(true);\n }),\n [\n visibleItems,\n setRelativeMouseCord,\n setIsKeyboardDragging,\n setIsDragging,\n setDraggedItem,\n setFocusedItem,\n triggerTreeRerender,\n ],\n );\n\n // tracks mouse coords relative to an element to check if the drop happens\n // at the top/center/bottom of an element to choose where to move the element\n // requested in the specs\n const onMouseDragOverItem = useCallback(\n ({\n event,\n item,\n itemIndex,\n setIsDraggingOverThis,\n openFolderOnHoverTimeout,\n }: {\n event: React.MouseEvent<HTMLLIElement>;\n item: DSTreeviewT.Item;\n itemIndex: number;\n setIsDraggingOverThis: DSTreeviewInternalsT.StateSetter<boolean>;\n openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n }) => {\n const { node } = item;\n const { nodeItemRef } = node.model;\n if (isDragging && !isKeyboardDragging && draggedItem) {\n const rect = nodeItemRef?.current?.getBoundingClientRect();\n if (rect) {\n const x = event.clientX - rect.left; // x position within the element.\n const y = event.clientY - rect.top; // y position within the element.\n\n // by spec we need to track where the drop will happens\n // if drop happens on top 25% drop before\n // if drop happens on bottom of 25% drop after\n // if drop happens in the middle 50% either invalid or drop into children\n const { height: elementHeight } = rect;\n const dropBeforeMaxY = elementHeight * 0.25;\n const dropAfterMinY = elementHeight - elementHeight * 0.25;\n const isBefore = y < dropBeforeMaxY;\n const isAfter = y > dropAfterMinY;\n const isValid = isDropValid({\n isBefore,\n isAfter,\n draggedItem,\n overItem: item,\n restrictDragAndDrop,\n });\n setRelativeMouseCord({\n isBefore,\n isAfter,\n isValid,\n item,\n x,\n y,\n relativeElementDOMRect: rect,\n relativeElementIndex: itemIndex,\n });\n setIsDraggingOverThis(true);\n\n if (\n !openFolderOnHoverTimeout?.current && // only set the interval if it wasn't set already once\n draggedItem?.id !== item?.id && // don't open ghost element\n (item.isGroup || item.children.length > 0) && // only open groups\n !restrictDragAndDrop\n ) {\n openFolderOnHoverTimeout.current = setTimeout(() => {\n item.node.model.isExpanded = true;\n openFolderOnHoverTimeout.current = null;\n triggerTreeRerender();\n }, 1000);\n }\n }\n } else {\n setRelativeMouseCord(defaultRelativeMouseCoord);\n }\n },\n [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender],\n );\n\n return {\n updateBeforeSortStart,\n onSortStart,\n onSortEnd,\n onMouseDragOverItem,\n };\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/utils/useTree.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useTree.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\n\nimport { walkVisibles, enrichNodeModelInPlace } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { updateExpandedState } from './group-expands-helpers';\n\nexport const useTree = (\n data: DSTreeviewT.SimpleItem[],\n props: DSTreeviewT.Props,\n states: {\n setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n },\n) => {\n const { setExpandedGroups } = states;\n const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n // convert data into a TreeModel with extra isExpanded prop\n // root element type is an exception, children model is based on what the dev passed on\n // since root is an excepcion we must typecast\n const tree = useMemo(() => new TreeModel(), []);\n const [treeData, setTreeData] = useState({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n\n useEffect(() => {\n setTreeData({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n }, [unfrozenData]);\n\n // expose a way to rerender the tree\n // used for expand functionality\n const [rerenderItems, setRerenderItems] = useState({});\n const triggerTreeRerender = useCallback(() => {\n setRerenderItems({});\n }, []);\n\n // when re-rendering we re-parse the list\n const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n useEffect(() => {\n setTreeRoot(tree.parse(treeData));\n }, [treeData, rerenderItems, tree]);\n\n const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n const updateUserExpandedState = useCallback(() => {\n updateExpandedState(treeRoot, onExpandChange);\n }, [treeRoot, onExpandChange]);\n // we add missing properties to the received Items\n // not the best of the patterns, but it works\n // this is where we convert \"SimpleItems\" to \"Items\"\n // this was done to avoid breaking changes back in v1\n useEffect(() => {\n const parsedVisibleItems: DSTreeviewT.Item[] = [];\n const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n treeRoot.walk((node) => {\n const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n return shouldContinueWalking;\n });\n\n walkVisibles(\n treeRoot,\n (node) => {\n parsedVisibleItems.push({ ...node.model, node });\n },\n true,\n highlightOnlyQuery,\n );\n setVisibleItems(parsedVisibleItems);\n onVisibleItemsChange(parsedVisibleItems);\n\n setExpandedGroups(newExpandedHashMap);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n treeRoot,\n rerenderItems,\n searchQuery,\n highlightOnlyQuery,\n selection,\n expanded,\n setExpandedGroups,\n // onVisibleItemsChange // evaluate potential performance hit?\n ]);\n\n return {\n visibleItems,\n tree,\n treeRoot,\n rerenderItems,\n triggerTreeRerender,\n updateUserExpandedState,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAGA;AAEO,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,eAAe,QAAQ,MAAM,UAAU,OAAO,CAAC;AAKrD,QAAM,OAAO,QAAQ,MAAM,IAAI,aAAa;AAC5C,QAAM,CAAC,UAAU,eAAe,SAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA;AAGZ,YAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA;AAAA,KAEX,CAAC;AAIJ,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,qBAAiB;AAAA,KAChB;AAGH,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK,MAAM;AACpD,YAAU,MAAM;AACd,gBAAY,KAAK,MAAM;AAAA,KACtB,CAAC,UAAU,eAAe;AAE7B,QAAM,CAAC,cAAc,mBAAmB,SAA6B;AAErE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,mBAAmB;AAEvG,QAAM,0BAA0B,YAAY,MAAM;AAChD,wBAAoB,UAAU;AAAA,KAC7B,CAAC,UAAU;AAKd,YAAU,MAAM;AACd,UAAM,qBAAyC;AAC/C,UAAM,qBAAgD;AACtD,aAAS,KAAK,CAAC,SAAS;AACtB,YAAM,wBAAwB;AAC9B,6BAAuB,MAAM,aAAa,WAAW;AACrD,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,MAAM;AACtG,aAAO;AAAA;AAGT,iBACE,UACA,CAAC,SAAS;AACR,yBAAmB,KAAK,KAAK,KAAK,OAAO;AAAA,OAE3C,MACA;AAEF,oBAAgB;AAChB,yBAAqB;AAErB,sBAAkB;AAAA,KAEjB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
/// <reference types="node" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { DSTreeviewT } from '../react-desc-prop-types';
|
|
4
|
-
export declare const TreeListItem: React.ComponentType<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
|
|
5
|
-
export declare const TreeListItemAddonsWrapper: React.ComponentType<{}>;
|
|
6
|
-
interface PropsT {
|
|
7
|
-
item: DSTreeviewT.Item;
|
|
8
|
-
itemIndex: number;
|
|
9
|
-
virtualItemRef: React.RefObject<HTMLLIElement>;
|
|
10
|
-
itemWrapperStyle?: {
|
|
11
|
-
[key: string]: unknown;
|
|
12
|
-
};
|
|
13
|
-
spaceForNestingLevel?: number;
|
|
14
|
-
onMouseDragOverItem?: (opts: {
|
|
15
|
-
event: React.MouseEvent<HTMLLIElement>;
|
|
16
|
-
item: DSTreeviewT.Item;
|
|
17
|
-
itemIndex: number;
|
|
18
|
-
setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;
|
|
19
|
-
openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;
|
|
20
|
-
}) => void;
|
|
21
|
-
}
|
|
22
|
-
export declare const TreeItem: (props: PropsT) => JSX.Element;
|
|
23
|
-
export declare const DragAndDropTreeItem: React.ComponentClass<PropsT & import("@elliemae/react-sortable-hoc").SortableElementProps, any>;
|
|
24
|
-
export {};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import type { DSTreeviewT } from '../react-desc-prop-types';
|
|
2
|
-
import type { DSTreeviewInternalsT } from '../sharedTypes';
|
|
3
|
-
interface MetaInfoT {
|
|
4
|
-
isBefore: boolean;
|
|
5
|
-
isAfter: boolean;
|
|
6
|
-
draggedItem: DSTreeviewT.Item;
|
|
7
|
-
overItem: DSTreeviewT.Item;
|
|
8
|
-
}
|
|
9
|
-
interface KinshipT {
|
|
10
|
-
newParentNode: DSTreeviewT.Item['node'];
|
|
11
|
-
newNestedIndex: number;
|
|
12
|
-
}
|
|
13
|
-
export declare const keyCodes: {
|
|
14
|
-
lift: number[];
|
|
15
|
-
drop: number[];
|
|
16
|
-
cancel: number[];
|
|
17
|
-
up: number[];
|
|
18
|
-
down: number[];
|
|
19
|
-
};
|
|
20
|
-
export declare const sameParentAsHoverItemDrop: ({ isBefore, isAfter, draggedItem, overItem, movementDirection, }: MetaInfoT & {
|
|
21
|
-
movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT;
|
|
22
|
-
}) => {
|
|
23
|
-
newNestedIndex: number;
|
|
24
|
-
newParentNode: import("tree-model/types").Node<DSTreeviewT.Item>;
|
|
25
|
-
};
|
|
26
|
-
export declare const inferHoverItemKinshipDrop: ({ isBefore, isAfter, draggedItem, overItem, movementDirection, }: MetaInfoT & {
|
|
27
|
-
movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT;
|
|
28
|
-
}) => {
|
|
29
|
-
newNestedIndex: number;
|
|
30
|
-
newParentNode: import("tree-model/types").Node<DSTreeviewT.Item>;
|
|
31
|
-
};
|
|
32
|
-
export declare const isDropValid: ({ isBefore, isAfter, draggedItem, overItem, restrictDragAndDrop, }: MetaInfoT & {
|
|
33
|
-
restrictDragAndDrop: boolean;
|
|
34
|
-
}) => boolean;
|
|
35
|
-
export declare const inferKeyboardKinshipDrop: ({ items, newIndex, }: {
|
|
36
|
-
items: DSTreeviewT.Item[];
|
|
37
|
-
newIndex: number;
|
|
38
|
-
}) => Partial<KinshipT>;
|
|
39
|
-
export {};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/// <reference types="node" />
|
|
2
|
-
/// <reference types="mocha" />
|
|
3
|
-
/// <reference types="webpack-env" />
|
|
4
|
-
/// <reference types="styled-components" />
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import type { DSTreeviewT } from '../react-desc-prop-types';
|
|
7
|
-
import type { DSTreeviewInternalsT } from '../sharedTypes';
|
|
8
|
-
export declare const useDnDHelpers: () => {
|
|
9
|
-
updateBeforeSortStart: (beforeStartArgs: {
|
|
10
|
-
index: number;
|
|
11
|
-
isKeySorting: boolean;
|
|
12
|
-
}) => Promise<unknown>;
|
|
13
|
-
onSortStart: () => void;
|
|
14
|
-
onSortEnd: ({ oldIndex, newIndex, isKeySorting }: {
|
|
15
|
-
oldIndex: number;
|
|
16
|
-
newIndex: number;
|
|
17
|
-
isKeySorting: boolean;
|
|
18
|
-
}) => void;
|
|
19
|
-
onMouseDragOverItem: ({ event, item, itemIndex, setIsDraggingOverThis, openFolderOnHoverTimeout, }: {
|
|
20
|
-
event: React.MouseEvent<HTMLLIElement>;
|
|
21
|
-
item: DSTreeviewT.Item;
|
|
22
|
-
itemIndex: number;
|
|
23
|
-
setIsDraggingOverThis: DSTreeviewInternalsT.StateSetter<boolean>;
|
|
24
|
-
openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;
|
|
25
|
-
}) => void;
|
|
26
|
-
};
|