@elliemae/ds-treeview 3.16.0 → 3.16.1
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/dist/cjs/TreeView.js +8 -4
- package/dist/cjs/TreeView.js.map +2 -2
- package/dist/cjs/TreeViewContext.js +9 -0
- package/dist/cjs/TreeViewContext.js.map +2 -2
- package/dist/cjs/config/cssClassesConstants.js +4 -0
- package/dist/cjs/config/cssClassesConstants.js.map +1 -1
- package/dist/cjs/config/useTreeview.js +11 -7
- package/dist/cjs/config/useTreeview.js.map +2 -2
- package/dist/cjs/hoc/DnDTreeContext.js +5 -1
- package/dist/cjs/hoc/DnDTreeContext.js.map +2 -2
- package/dist/cjs/hoc/SortableItemContext.js +4 -0
- package/dist/cjs/hoc/SortableItemContext.js.map +1 -1
- package/dist/cjs/hoc/WithConditionalDnDContext.js +9 -5
- package/dist/cjs/hoc/WithConditionalDnDContext.js.map +2 -2
- package/dist/cjs/hoc/WithDnDSortableItemContext.js +7 -3
- package/dist/cjs/hoc/WithDnDSortableItemContext.js.map +2 -2
- package/dist/cjs/index.js +7 -3
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/parts/CheckboxSelectable.js +7 -3
- package/dist/cjs/parts/CheckboxSelectable.js.map +2 -2
- package/dist/cjs/parts/ChildrenCountDisplayer.js +5 -1
- package/dist/cjs/parts/ChildrenCountDisplayer.js.map +2 -2
- package/dist/cjs/parts/DnDHandle.js +5 -1
- package/dist/cjs/parts/DnDHandle.js.map +2 -2
- package/dist/cjs/parts/DropIndicator.js +5 -1
- package/dist/cjs/parts/DropIndicator.js.map +2 -2
- package/dist/cjs/parts/ExpandCaret.js +7 -3
- package/dist/cjs/parts/ExpandCaret.js.map +2 -2
- package/dist/cjs/parts/Icon.js +9 -1
- package/dist/cjs/parts/Icon.js.map +2 -2
- package/dist/cjs/parts/NestingSpace.js +4 -0
- package/dist/cjs/parts/NestingSpace.js.map +2 -2
- package/dist/cjs/parts/RadioSelectable.js +5 -1
- package/dist/cjs/parts/RadioSelectable.js.map +2 -2
- package/dist/cjs/parts/TreeItem.js +20 -14
- package/dist/cjs/parts/TreeItem.js.map +2 -2
- package/dist/cjs/parts/TreeItemText.js +7 -3
- package/dist/cjs/parts/TreeItemText.js.map +2 -2
- package/dist/cjs/parts/TreeList.js +10 -5
- package/dist/cjs/parts/TreeList.js.map +2 -2
- package/dist/cjs/plugins/dnd/TreeDndPlugin.js +4 -0
- package/dist/cjs/plugins/dnd/TreeDndPlugin.js.map +1 -1
- package/dist/cjs/plugins/dnd/index.js +5 -1
- package/dist/cjs/plugins/dnd/index.js.map +2 -2
- package/dist/cjs/plugins/index.js +5 -1
- package/dist/cjs/plugins/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +4 -0
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/related-components/TreeViewSearchBar.js +4 -0
- package/dist/cjs/related-components/TreeViewSearchBar.js.map +1 -1
- package/dist/cjs/sharedTypes.js +4 -0
- package/dist/cjs/sharedTypes.js.map +2 -2
- package/dist/cjs/utils/array-helpers.js +4 -0
- package/dist/cjs/utils/array-helpers.js.map +1 -1
- package/dist/cjs/utils/group-expands-helpers.js +4 -0
- package/dist/cjs/utils/group-expands-helpers.js.map +2 -2
- package/dist/cjs/utils/keyboard-helpers.js +7 -3
- package/dist/cjs/utils/keyboard-helpers.js.map +2 -2
- package/dist/cjs/utils/object-helpers.js +4 -0
- package/dist/cjs/utils/object-helpers.js.map +1 -1
- package/dist/cjs/utils/refs-helpers.js +4 -0
- package/dist/cjs/utils/refs-helpers.js.map +1 -1
- package/dist/cjs/utils/selectable-helper.js +5 -1
- package/dist/cjs/utils/selectable-helper.js.map +2 -2
- package/dist/cjs/utils/string-helpers.js +4 -0
- package/dist/cjs/utils/string-helpers.js.map +1 -1
- package/dist/cjs/utils/tree-helpers.js +5 -1
- package/dist/cjs/utils/tree-helpers.js.map +2 -2
- package/dist/cjs/utils/useInstanceRefActions.js +6 -2
- package/dist/cjs/utils/useInstanceRefActions.js.map +2 -2
- package/dist/cjs/utils/useTree.js +7 -2
- package/dist/cjs/utils/useTree.js.map +2 -2
- package/dist/esm/TreeView.js +4 -4
- package/dist/esm/TreeView.js.map +1 -1
- package/dist/esm/TreeViewContext.js +5 -0
- package/dist/esm/TreeViewContext.js.map +2 -2
- package/dist/esm/config/useTreeview.js +7 -7
- package/dist/esm/config/useTreeview.js.map +1 -1
- package/dist/esm/hoc/DnDTreeContext.js +1 -1
- package/dist/esm/hoc/DnDTreeContext.js.map +1 -1
- package/dist/esm/hoc/WithConditionalDnDContext.js +5 -5
- package/dist/esm/hoc/WithConditionalDnDContext.js.map +2 -2
- package/dist/esm/hoc/WithDnDSortableItemContext.js +3 -3
- package/dist/esm/hoc/WithDnDSortableItemContext.js.map +1 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/dist/esm/parts/CheckboxSelectable.js +3 -3
- package/dist/esm/parts/CheckboxSelectable.js.map +2 -2
- package/dist/esm/parts/ChildrenCountDisplayer.js +1 -1
- package/dist/esm/parts/ChildrenCountDisplayer.js.map +2 -2
- package/dist/esm/parts/DnDHandle.js +1 -1
- package/dist/esm/parts/DnDHandle.js.map +1 -1
- package/dist/esm/parts/DropIndicator.js +1 -1
- package/dist/esm/parts/DropIndicator.js.map +2 -2
- package/dist/esm/parts/ExpandCaret.js +3 -3
- package/dist/esm/parts/ExpandCaret.js.map +1 -1
- package/dist/esm/parts/Icon.js +5 -1
- package/dist/esm/parts/Icon.js.map +2 -2
- package/dist/esm/parts/NestingSpace.js.map +1 -1
- package/dist/esm/parts/RadioSelectable.js +1 -1
- package/dist/esm/parts/RadioSelectable.js.map +2 -2
- package/dist/esm/parts/TreeItem.js +16 -14
- package/dist/esm/parts/TreeItem.js.map +2 -2
- package/dist/esm/parts/TreeItemText.js +3 -3
- package/dist/esm/parts/TreeItemText.js.map +2 -2
- package/dist/esm/parts/TreeList.js +6 -5
- package/dist/esm/parts/TreeList.js.map +2 -2
- package/dist/esm/plugins/dnd/index.js +1 -1
- package/dist/esm/plugins/dnd/index.js.map +1 -1
- package/dist/esm/plugins/index.js +1 -1
- package/dist/esm/plugins/index.js.map +1 -1
- package/dist/esm/utils/group-expands-helpers.js.map +2 -2
- package/dist/esm/utils/keyboard-helpers.js +3 -3
- package/dist/esm/utils/keyboard-helpers.js.map +2 -2
- package/dist/esm/utils/object-helpers.js.map +1 -1
- package/dist/esm/utils/selectable-helper.js +1 -1
- package/dist/esm/utils/selectable-helper.js.map +2 -2
- package/dist/esm/utils/tree-helpers.js +1 -1
- package/dist/esm/utils/tree-helpers.js.map +2 -2
- package/dist/esm/utils/useInstanceRefActions.js +2 -2
- package/dist/esm/utils/useInstanceRefActions.js.map +2 -2
- package/dist/esm/utils/useTree.js +3 -2
- package/dist/esm/utils/useTree.js.map +2 -2
- package/dist/types/TreeView.d.ts +2 -2
- package/dist/types/TreeViewContext.d.ts +2 -2
- package/dist/types/config/useTreeview.d.ts +2 -2
- package/dist/types/hoc/DnDTreeContext.d.ts +2 -2
- package/dist/types/index.d.ts +3 -3
- package/dist/types/parts/CheckboxSelectable.d.ts +1 -1
- package/dist/types/parts/ChildrenCountDisplayer.d.ts +1 -1
- package/dist/types/parts/DnDHandle.d.ts +1 -1
- package/dist/types/parts/DropIndicator.d.ts +1 -1
- package/dist/types/parts/ExpandCaret.d.ts +1 -1
- package/dist/types/parts/Icon.d.ts +1 -1
- package/dist/types/parts/NestingSpace.d.ts +1 -1
- package/dist/types/parts/RadioSelectable.d.ts +1 -1
- package/dist/types/parts/TreeItem.d.ts +1 -1
- package/dist/types/parts/TreeItemText.d.ts +1 -1
- package/dist/types/parts/TreeList.d.ts +1 -1
- package/dist/types/plugins/dnd/index.d.ts +1 -1
- package/dist/types/plugins/index.d.ts +1 -1
- package/dist/types/sharedTypes.d.ts +1 -1
- package/dist/types/utils/group-expands-helpers.d.ts +2 -2
- package/dist/types/utils/keyboard-helpers.d.ts +3 -3
- package/dist/types/utils/selectable-helper.d.ts +1 -1
- package/dist/types/utils/tree-helpers.d.ts +1 -1
- package/dist/types/utils/useInstanceRefActions.d.ts +2 -2
- package/dist/types/utils/useTree.d.ts +2 -2
- package/package.json +13 -13
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\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';\nimport { DnDHandle } from './DnDHandle';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext';\nimport DropIndicator from './DropIndicator';\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\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n isDragOverlay?: boolean;\n virtualItemRef?: React.RefObject<HTMLLIElement>;\n itemWrapperStyle?: { [key: string]: unknown };\n spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n const {\n item,\n itemIndex,\n itemWrapperStyle = {},\n virtualItemRef,\n spaceForNestingLevel = 1.5,\n isDragOverlay = false,\n } = props;\n const { id, node, children } = item;\n const { nodeItemRef } = node.model;\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n const ctx = useContext(TreeViewContext);\n const {\n props: {\n disableIcons,\n rightAddons,\n onItemClick,\n onItemActivate,\n onItemFocus,\n rowSize,\n labelOverflow,\n nameKey,\n showChildrenAmount,\n },\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n selectedItem,\n selectedCheckboxes,\n hoverItem,\n virtualListHelpers: { scrollToIndex },\n setHoverItem,\n setSelectedItem,\n setFocusedItem,\n } = ctx;\n const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\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 // - the drag and drop node reference\n const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n setMultipleRefs(\n virtualItemRef,\n !isDragOverlay && nodeItemRef,\n !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n )(ref);\n };\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n const isDragging = draggableProps && draggableProps.isDragging;\n\n const isDropValid = draggableProps && draggableProps.isDropValid;\n\n const dropPreviewClassName = useMemo(() => {\n if (isDropIndicatorPositionInside) {\n const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n return className;\n }\n return '';\n }, [isDropIndicatorPositionInside, isDropValid]);\n\n const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n const selectedClassName = useMemo(\n () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n [isDragOverlay, item.id, selectedItem?.id],\n );\n const hoverClassName = useMemo(\n () => (!isDragOverlay && hoverItem?.id === item.id && !isDragging ? 'hover' : ''),\n [isDragOverlay, hoverItem?.id, item.id, 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 isDraggingClassname = useMemo(() => {\n if (isDragging) return `${DSTreeViewPrefix}-${treeItemBlockName}--dragging`;\n return '';\n }, [isDragging]);\n\n const finalClassName = useMemo(\n () =>\n `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`,\n [\n dropPreviewClassName,\n fixedHeightClassname,\n selectedClassName,\n hoverClassName,\n dragOverlayClassName,\n isDraggingClassname,\n ],\n );\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onItemClick(item, e);\n setFocusedItem(item);\n setSelectedItem(item);\n onItemActivate(item, e);\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 [onItemClick, item, setFocusedItem, setSelectedItem, onItemActivate, onItemFocus, scrollToIndex],\n );\n\n const childrenLength = useMemo(() => children?.length ?? 0, [children]);\n\n const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ''}`;\n\n return (\n <TreeListItem\n tabIndex={0}\n onMouseLeave={() => {\n if (hoverItem?.id === item.id) {\n setHoverItem(null);\n }\n }}\n onMouseEnter={() => {\n setHoverItem(item);\n }}\n onClick={handleItemClick}\n onBlur={() => setFocusedItem(null)}\n ref={setItemRefs}\n style={{ ...itemWrapperStyle }}\n className={finalClassName}\n aria-expanded={!!item.isExpanded}\n aria-selected={!!selectedCheckboxes[item.id]}\n aria-label={ariaLabel}\n data-id={item.id}\n data-index={item.virtualIndex}\n onKeyDown={onItemKeyDown}\n >\n <TreeListItemAddonsWrapper>\n {withDragAndDrop ? <DnDHandle id={id} isDragOverlay={isDragOverlay} /> : null}\n {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n {!isDragOverlay && <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 <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n </TreeListItem>\n );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+LjB,SACqB,KADrB;AA5LN,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,OAAO,wBAAwB;AAC/B,OAAO,qBAAqB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB,yBAAyB;AAEpD,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB,2BAA2B;AAC3D,OAAO,mBAAmB;AAEnB,MAAM,eAAe,kBAAkB,MAAM;AAAA,EAClD,eAAe;AAAA,EACf,MAAM;AAER,CAAC,EAAE,iBAAiB;AAEb,MAAM,4BAA4B,kBAAkB,KAAK;AAAA,EAC9D;AAAA,EACA;AAEF;AAUO,MAAM,WAAW,CAAC,UAA+B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA,uBAAuB;AAAA,IACvB,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,EAAE,IAAI,MAAM,SAAS,IAAI;AAC/B,QAAM,EAAE,YAAY,IAAI,KAAK;AAE7B,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,gBAAgB,iBAAiB,MAAM,cAAc;AAE3D,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,gBAAgB,KAAK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport RadioSelectable from './RadioSelectable.js';\nimport CheckboxSelectable from './CheckboxSelectable.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { setMultipleRefs } from '../utils/refs-helpers.js';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers.js';\nimport { NestingSpace } from './NestingSpace.js';\nimport { Icon } from './Icon.js';\nimport { ExpandCaret } from './ExpandCaret.js';\nimport { TreeItemText } from './TreeItemText.js';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport { DnDHandle } from './DnDHandle.js';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext.js';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext.js';\nimport DropIndicator from './DropIndicator.js';\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\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n isDragOverlay?: boolean;\n virtualItemRef?: React.RefObject<HTMLLIElement>;\n itemWrapperStyle?: { [key: string]: unknown };\n spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n const {\n item,\n itemIndex,\n itemWrapperStyle = {},\n virtualItemRef,\n spaceForNestingLevel = 1.5,\n isDragOverlay = false,\n } = props;\n const { id, node, children } = item;\n const { nodeItemRef } = node.model;\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n const ctx = useContext(TreeViewContext);\n const {\n props: {\n disableIcons,\n rightAddons,\n onItemClick,\n onItemActivate,\n onItemFocus,\n rowSize,\n labelOverflow,\n nameKey,\n showChildrenAmount,\n },\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n selectedItem,\n selectedCheckboxes,\n hoverItem,\n virtualListHelpers: { scrollToIndex },\n setHoverItem,\n setSelectedItem,\n setFocusedItem,\n } = ctx;\n const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\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 // - the drag and drop node reference\n const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n setMultipleRefs(\n virtualItemRef,\n !isDragOverlay && nodeItemRef,\n !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n )(ref);\n };\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n const isDragging = draggableProps && draggableProps.isDragging;\n\n const isDropValid = draggableProps && draggableProps.isDropValid;\n\n const dropPreviewClassName = useMemo(() => {\n if (isDropIndicatorPositionInside) {\n const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n return className;\n }\n return '';\n }, [isDropIndicatorPositionInside, isDropValid]);\n\n const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n const selectedClassName = useMemo(\n () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n [isDragOverlay, item.id, selectedItem?.id],\n );\n const hoverClassName = useMemo(\n () => (!isDragOverlay && hoverItem?.id === item.id && !isDragging ? 'hover' : ''),\n [isDragOverlay, hoverItem?.id, item.id, 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 isDraggingClassname = useMemo(() => {\n if (isDragging) return `${DSTreeViewPrefix}-${treeItemBlockName}--dragging`;\n return '';\n }, [isDragging]);\n\n const finalClassName = useMemo(\n () =>\n `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`,\n [\n dropPreviewClassName,\n fixedHeightClassname,\n selectedClassName,\n hoverClassName,\n dragOverlayClassName,\n isDraggingClassname,\n ],\n );\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onItemClick(item, e);\n setFocusedItem(item);\n setSelectedItem(item);\n onItemActivate(item, e);\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 [onItemClick, item, setFocusedItem, setSelectedItem, onItemActivate, onItemFocus, scrollToIndex],\n );\n\n const childrenLength = useMemo(() => children?.length ?? 0, [children]);\n\n const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ''}`;\n\n return (\n <TreeListItem\n tabIndex={0}\n onMouseLeave={() => {\n if (hoverItem?.id === item.id) {\n setHoverItem(null);\n }\n }}\n onMouseEnter={() => {\n setHoverItem(item);\n }}\n onClick={handleItemClick}\n onBlur={() => setFocusedItem(null)}\n ref={setItemRefs}\n style={{ ...itemWrapperStyle }}\n className={finalClassName}\n aria-expanded={!!item.isExpanded}\n aria-selected={!!selectedCheckboxes[item.id]}\n aria-label={ariaLabel}\n data-id={item.id}\n data-index={item.virtualIndex}\n onKeyDown={onItemKeyDown}\n >\n <TreeListItemAddonsWrapper>\n {withDragAndDrop ? <DnDHandle id={id} isDragOverlay={isDragOverlay} /> : null}\n {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n {!isDragOverlay && <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 <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n </TreeListItem>\n );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,9 @@ import { useMemo, useContext } from "react";
|
|
|
4
4
|
import Highlighter from "react-highlight-words";
|
|
5
5
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
6
6
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
7
|
-
import { ChildrenCountDisplayer } from "./ChildrenCountDisplayer";
|
|
8
|
-
import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
|
|
9
|
-
import TreeViewContext from "../TreeViewContext";
|
|
7
|
+
import { ChildrenCountDisplayer } from "./ChildrenCountDisplayer.js";
|
|
8
|
+
import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants.js";
|
|
9
|
+
import TreeViewContext from "../TreeViewContext.js";
|
|
10
10
|
const ItemContent = aggregatedClasses("div")(`${treeItemBlockName}-content`);
|
|
11
11
|
const ItemValue = aggregatedClasses("span")(treeItemBlockName, "value");
|
|
12
12
|
const classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeItemText.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useContext } from 'react';\nimport Highlighter from 'react-highlight-words';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChildrenCountDisplayer } from './ChildrenCountDisplayer';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`) as unknown as React.ComponentType<\n React.ComponentProps<'div'>\n>;\nconst ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value') as unknown as React.ComponentType<\n React.ComponentProps<'span'>\n>;\n\n// const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;\nconst classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;\nconst classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`;\n\n// eslint-disable-next-line react/prop-types\nconst CustomHighlight = ({ children }: { children: React.ReactNode }) => (\n <mark className=\"tree-text-highlight\" data-testid=\"tree-text-highlight\">\n {children}\n </mark>\n);\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\nexport const TreeItemText = (props: PropsT): JSX.Element => {\n const { item } = props;\n const ctx = useContext(TreeViewContext);\n const {\n props: { searchQuery, showChildrenAmount, labelOverflow, nameKey },\n } = ctx;\n\n const Text = useMemo(() => {\n const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\n if (searchQuery) {\n if (labelOverflow === 'truncate') {\n return (\n <SimpleTruncatedTooltipText\n value={\n <>\n <Highlighter\n autoEscape\n highlightTag={CustomHighlight}\n searchWords={[searchQuery]}\n textToHighlight={itemLabelText}\n />\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n }\n />\n );\n }\n return (\n <>\n <Highlighter\n autoEscape\n highlightTag={CustomHighlight}\n searchWords={[searchQuery]}\n textToHighlight={itemLabelText}\n />\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n );\n }\n if (labelOverflow === 'truncate') {\n return (\n <SimpleTruncatedTooltipText\n value={\n <>\n {itemLabelText}\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n }\n />\n );\n }\n return (\n <>\n {itemLabelText}\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n );\n }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);\n\n let className = '';\n if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;\n if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;\n\n return (\n <ItemContent data-testid={`${treeItemBlockName}-content`}>\n <ItemValue className={className}>{Text}</ItemValue>\n </ItemContent>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuBrB,SAqBY,UArBZ,KAqBY,YArBZ;AAtBF,SAAgB,SAAS,kBAAkB;AAC3C,OAAO,iBAAiB;AACxB,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB,yBAAyB;AACpD,OAAO,qBAAqB;AAG5B,MAAM,cAAc,kBAAkB,KAAK,EAAE,GAAG,2BAA2B;AAG3E,MAAM,YAAY,kBAAkB,MAAM,EAAE,mBAAmB,OAAO;AAKtE,MAAM,2BAA2B,GAAG,oBAAoB;AACxD,MAAM,4BAA4B,GAAG,oBAAoB;AAGzD,MAAM,kBAAkB,CAAC,EAAE,SAAS,MAClC,oBAAC,UAAK,WAAU,uBAAsB,eAAY,uBAC/C,UACH;AAKK,MAAM,eAAe,CAAC,UAA+B;AAC1D,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,oBAAoB,eAAe,QAAQ;AAAA,EACnE,IAAI;AAEJ,QAAM,OAAO,QAAQ,MAAM;AACzB,UAAM,gBAAgB,KAAK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useContext } from 'react';\nimport Highlighter from 'react-highlight-words';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChildrenCountDisplayer } from './ChildrenCountDisplayer.js';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nconst ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`) as unknown as React.ComponentType<\n React.ComponentProps<'div'>\n>;\nconst ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value') as unknown as React.ComponentType<\n React.ComponentProps<'span'>\n>;\n\n// const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;\nconst classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;\nconst classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`;\n\n// eslint-disable-next-line react/prop-types\nconst CustomHighlight = ({ children }: { children: React.ReactNode }) => (\n <mark className=\"tree-text-highlight\" data-testid=\"tree-text-highlight\">\n {children}\n </mark>\n);\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\nexport const TreeItemText = (props: PropsT): JSX.Element => {\n const { item } = props;\n const ctx = useContext(TreeViewContext);\n const {\n props: { searchQuery, showChildrenAmount, labelOverflow, nameKey },\n } = ctx;\n\n const Text = useMemo(() => {\n const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\n if (searchQuery) {\n if (labelOverflow === 'truncate') {\n return (\n <SimpleTruncatedTooltipText\n value={\n <>\n <Highlighter\n autoEscape\n highlightTag={CustomHighlight}\n searchWords={[searchQuery]}\n textToHighlight={itemLabelText}\n />\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n }\n />\n );\n }\n return (\n <>\n <Highlighter\n autoEscape\n highlightTag={CustomHighlight}\n searchWords={[searchQuery]}\n textToHighlight={itemLabelText}\n />\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n );\n }\n if (labelOverflow === 'truncate') {\n return (\n <SimpleTruncatedTooltipText\n value={\n <>\n {itemLabelText}\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n }\n />\n );\n }\n return (\n <>\n {itemLabelText}\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n );\n }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);\n\n let className = '';\n if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;\n if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;\n\n return (\n <ItemContent data-testid={`${treeItemBlockName}-content`}>\n <ItemValue className={className}>{Text}</ItemValue>\n </ItemContent>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuBrB,SAqBY,UArBZ,KAqBY,YArBZ;AAtBF,SAAgB,SAAS,kBAAkB;AAC3C,OAAO,iBAAiB;AACxB,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB,yBAAyB;AACpD,OAAO,qBAAqB;AAG5B,MAAM,cAAc,kBAAkB,KAAK,EAAE,GAAG,2BAA2B;AAG3E,MAAM,YAAY,kBAAkB,MAAM,EAAE,mBAAmB,OAAO;AAKtE,MAAM,2BAA2B,GAAG,oBAAoB;AACxD,MAAM,4BAA4B,GAAG,oBAAoB;AAGzD,MAAM,kBAAkB,CAAC,EAAE,SAAS,MAClC,oBAAC,UAAK,WAAU,uBAAsB,eAAY,uBAC/C,UACH;AAKK,MAAM,eAAe,CAAC,UAA+B;AAC1D,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,oBAAoB,eAAe,QAAQ;AAAA,EACnE,IAAI;AAEJ,QAAM,OAAO,QAAQ,MAAM;AACzB,UAAM,gBAAgB,KAAK,OAAO;AAClC,QAAI,aAAa;AACf,UAAI,kBAAkB,YAAY;AAChC,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OACE,iCACE;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,YAAU;AAAA,kBACV,cAAc;AAAA,kBACd,aAAa,CAAC,WAAW;AAAA,kBACzB,iBAAiB;AAAA;AAAA,cACnB;AAAA,cACC,qBAAqB,oBAAC,0BAAuB,MAAY,IAAK;AAAA,eACjE;AAAA;AAAA,QAEJ;AAAA,MAEJ;AACA,aACE,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,YAAU;AAAA,YACV,cAAc;AAAA,YACd,aAAa,CAAC,WAAW;AAAA,YACzB,iBAAiB;AAAA;AAAA,QACnB;AAAA,QACC,qBAAqB,oBAAC,0BAAuB,MAAY,IAAK;AAAA,SACjE;AAAA,IAEJ;AACA,QAAI,kBAAkB,YAAY;AAChC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OACE,iCACG;AAAA;AAAA,YACA,qBAAqB,oBAAC,0BAAuB,MAAY,IAAK;AAAA,aACjE;AAAA;AAAA,MAEJ;AAAA,IAEJ;AACA,WACE,iCACG;AAAA;AAAA,MACA,qBAAqB,oBAAC,0BAAuB,MAAY,IAAK;AAAA,OACjE;AAAA,EAEJ,GAAG,CAAC,MAAM,aAAa,SAAS,oBAAoB,aAAa,CAAC;AAElE,MAAI,YAAY;AAChB,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAClD,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAElD,SACE,oBAAC,eAAY,eAAa,GAAG,6BAC3B,8BAAC,aAAU,WAAuB,gBAAK,GACzC;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,11 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useContext } from "react";
|
|
4
4
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
5
5
|
import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
|
|
6
|
-
import TreeViewContext from "../TreeViewContext";
|
|
7
|
-
import { DSTreeViewPrefix, treeListBlockName } from "../config/cssClassesConstants";
|
|
8
|
-
import TreeItem from "./TreeItem";
|
|
9
|
-
import { withConditionalDnDRowContext } from "../hoc/WithConditionalDnDContext";
|
|
10
|
-
import { DnDTreeContext } from "../hoc/DnDTreeContext";
|
|
6
|
+
import TreeViewContext from "../TreeViewContext.js";
|
|
7
|
+
import { DSTreeViewPrefix, treeListBlockName } from "../config/cssClassesConstants.js";
|
|
8
|
+
import TreeItem from "./TreeItem.js";
|
|
9
|
+
import { withConditionalDnDRowContext } from "../hoc/WithConditionalDnDContext.js";
|
|
10
|
+
import { DnDTreeContext } from "../hoc/DnDTreeContext.js";
|
|
11
11
|
const treeListNoItemsBn = `${treeListBlockName}-no-items`;
|
|
12
12
|
const TreeListNoItems = aggregatedClasses("div", {
|
|
13
13
|
"data-testid": treeListNoItemsBn
|
|
@@ -81,6 +81,7 @@ const TreeListComp = () => {
|
|
|
81
81
|
key: `DS-TreeView-List-Item-${id}`,
|
|
82
82
|
virtualItemRef: measureRef,
|
|
83
83
|
index,
|
|
84
|
+
// this is consumed by the DnD HOC
|
|
84
85
|
itemIndex: index,
|
|
85
86
|
item,
|
|
86
87
|
itemWrapperStyle: style
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport TreeViewContext from '../TreeViewContext';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants';\nimport TreeItem from './TreeItem';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext';\nimport { DnDTreeContext } from '../hoc/DnDTreeContext';\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\nconst TreeListComp: React.ComponentType<PropsT> = () => {\n const ctx = useContext(TreeViewContext);\n const {\n virtualListRef,\n virtualListHelpers,\n visibleItems: flattenedVisibleItems,\n props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n } = ctx;\n const { totalSize, virtualItems } = virtualListHelpers;\n const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n const { visibleItems } = useContext(DnDTreeContext);\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 || flattenedVisibleItems)[index];\n if (!item) return null;\n item.virtualIndex = index;\n const { id } = item;\n\n const style = {\n position: 'absolute',\n top: `${start}px`,\n left: 0,\n width: '100%',\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 return <TreeItem {...listItemProps} />;\n })}\n </div>\n ) : null}\n </TreeListWrapper>\n );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuDnB,SAmBM,KAnBN;AAtDJ,SAAgB,kBAAkB;AAClC,SAAS,yBAAyB;AAClC,SAAS,mCAAmC;AAC5C,OAAO,qBAAqB;AAC5B,SAAS,kBAAkB,yBAAyB;AACpD,OAAO,cAAc;AAErB,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAExB,MAAM,oBAAoB,GAAG;AAC7B,MAAM,kBAAkB,kBAAkB,OAAO;AAAA,EACtD,eAAe;AACjB,CAAC,EAAE,iBAAiB;AAOb,MAAM,kBAAkB,kBAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AACR,CAAC,EAAE,mBAAmB,MAAM,CAAC,EAAE,QAAQ,OAA0C;AAAA,EAC/E,CAAC,WAAW,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants.js';\nimport TreeItem from './TreeItem.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext.js';\nimport { DnDTreeContext } from '../hoc/DnDTreeContext.js';\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\nconst TreeListComp: React.ComponentType<PropsT> = () => {\n const ctx = useContext(TreeViewContext);\n const {\n virtualListRef,\n virtualListHelpers,\n visibleItems: flattenedVisibleItems,\n props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n } = ctx;\n const { totalSize, virtualItems } = virtualListHelpers;\n const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n const { visibleItems } = useContext(DnDTreeContext);\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 || flattenedVisibleItems)[index];\n if (!item) return null;\n item.virtualIndex = index;\n const { id } = item;\n\n const style = {\n position: 'absolute',\n top: `${start}px`,\n left: 0,\n width: '100%',\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 return <TreeItem {...listItemProps} />;\n })}\n </div>\n ) : null}\n </TreeListWrapper>\n );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuDnB,SAmBM,KAnBN;AAtDJ,SAAgB,kBAAkB;AAClC,SAAS,yBAAyB;AAClC,SAAS,mCAAmC;AAC5C,OAAO,qBAAqB;AAC5B,SAAS,kBAAkB,yBAAyB;AACpD,OAAO,cAAc;AAErB,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAExB,MAAM,oBAAoB,GAAG;AAC7B,MAAM,kBAAkB,kBAAkB,OAAO;AAAA,EACtD,eAAe;AACjB,CAAC,EAAE,iBAAiB;AAOb,MAAM,kBAAkB,kBAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AACR,CAAC,EAAE,mBAAmB,MAAM,CAAC,EAAE,QAAQ,OAA0C;AAAA,EAC/E,CAAC,WAAW,SAAS,GAAG;AAC1B,EAAE;AAEF,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYzB,MAAM,eAA4C,MAAM;AACtD,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB,UAAU;AAAA,EACjE,IAAI;AACJ,QAAM,EAAE,WAAW,aAAa,IAAI;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,QAAM,EAAE,aAAa,IAAI,WAAW,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,QACL,QAAQ,GAAG,OAAO,WAAW,WAAW,GAAG,aAAa;AAAA,QACxD,OAAO,GAAG,OAAO,UAAU,WAAW,GAAG,YAAY;AAAA,QACrD,UAAU;AAAA,MACZ;AAAA,MAEC;AAAA,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAClB;AAAA,YAEA,8BAAC,+BAA4B,MAAK,MAAK,SAAS,WAAW,WAAS,MAAC,SAAS,OAAO,aAAa,OAAO;AAAA;AAAA,QAC3G,IACE;AAAA,QACH,CAAC,aAAa,aAAa,WAAW,IAAI,oBAAC,mBAAiB,8BAAmB,IAAqB;AAAA,QACpG,CAAC,aAAa,aAAa,WAAW,IACrC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ,GAAG;AAAA,cACX,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YAEC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,oBAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,oBAAM,QAAQ,gBAAgB,uBAAuB,KAAK;AAC1D,kBAAI,CAAC;AAAM,uBAAO;AAClB,mBAAK,eAAe;AACpB,oBAAM,EAAE,GAAG,IAAI;AAEf,oBAAM,QAAQ;AAAA,gBACZ,UAAU;AAAA,gBACV,KAAK,GAAG;AAAA,gBACR,MAAM;AAAA,gBACN,OAAO;AAAA,cACT;AAEA,oBAAM,gBAAgB;AAAA,gBACpB,KAAK,yBAAyB;AAAA,gBAC9B,gBAAgB;AAAA,gBAChB;AAAA;AAAA,gBACA,WAAW;AAAA,gBACX;AAAA,gBACA,kBAAkB;AAAA,cACpB;AAEA,qBAAO,oBAAC,YAAU,GAAG,eAAe;AAAA,YACtC,CAAC;AAAA;AAAA,QACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEO,MAAM,WAAW,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/dnd/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeDndPlugin';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeDndPlugin.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/plugins/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './dnd';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './dnd/index.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 updateUserExpandedState();\n triggerTreeRerender();\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,YAAY,WAAW;ACCvB,SAAS,aAAa,iBAAiB;AAIhC,MAAM,sBAAsB,CACjC,UACA,mBACG;AACH,QAAM,wBAAwB;AAC9B,QAAM,qBAAgD,EAAE,gBAAgB,KAAK;AAC7E,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,OAAO,KAAK,KAAK,MAAM,WAAW,KAAK,MAAM,YAAY;AACjE,yBAAmB,KAAK,MAAM,
|
|
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.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\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 updateUserExpandedState();\n triggerTreeRerender();\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,YAAY,WAAW;ACCvB,SAAS,aAAa,iBAAiB;AAIhC,MAAM,sBAAsB,CACjC,UACA,mBACG;AACH,QAAM,wBAAwB;AAC9B,QAAM,qBAAgD,EAAE,gBAAgB,KAAK;AAC7E,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,OAAO,KAAK,KAAK,MAAM,WAAW,KAAK,MAAM,YAAY;AACjE,yBAAmB,KAAK,MAAM,EAAE,IAAI;AAAA,IACtC;AACA,WAAO;AAAA,EACT,CAAC;AACD,MAAI;AAAgB,mBAAe,oBAAoB,IAAI;AAC7D;AAEO,MAAM,mBAAmB,CAC9B,cACA,qBACA,yBACA,WAAqC,MAAM;AAAC,MACzC;AACH,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,OAAO,EAAE,WAAW;AAAA,IACtB;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,aAAa,KAAK,MAAM,SAAS;AACnC,iBAAa,KAAK,MAAM,aAAa,CAAC;AACtC,4BAAwB;AACxB,wBAAoB;AACpB,eAAW,MAAM;AACf,UAAI,OAAO,iBAAiB;AAAU,iBAAS,cAAc,EAAE,OAAO,QAAQ,CAAC;AAAA,IACjF,CAAC;AAAA,EACH;AACF;AAEO,MAAM,kBAAkB,CAAC,kBAA6C;AAC3E,MAAI,cAAc;AAAS,kBAAc,aAAa;AACxD;AAEO,MAAM,oBAAoB,CAAC,oBAA+C;AAC/E,MAAI,gBAAgB;AAAS,oBAAgB,aAAa;AAC5D;AAEO,MAAM,YAAY,CAAC,UAAoC,wBAAoC;AAChG,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,OAAO;AAAG,sBAAgB,KAAK,KAAK;AAC9C,WAAO;AAAA,EACT,CAAC;AACD,sBAAoB;AACtB;AAEO,MAAM,cAAc,CAAC,UAAoC,wBAAoC;AAClG,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,OAAO;AAAG,wBAAkB,KAAK,KAAK;AAChD,WAAO;AAAA,EACT,CAAC;AACD,sBAAoB;AACtB;AAEO,MAAM,8BAA8B,CAAC,aAAuC;AACjF,MAAI,eAAe;AACnB,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,OAAO,GAAG;AAClB,UAAI,CAAC,KAAK,MAAM,cAAc,KAAK,MAAM,SAAS;AAChD,uBAAe;AAEf,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT,CAAC;AACD,SAAO;AACT;AAEO,MAAM,wBAAwB,CACnC,UACA,UACA,qBACA,sBACA,4BACG;AACH,MAAI,aAAa;AAAM,cAAU,UAAU,mBAAmB;AAAA,WACrD,aAAa;AAAO,gBAAY,UAAU,mBAAmB;AAAA,OACjE;AACH,UAAM,eAAe,4BAA4B,QAAQ;AACzD,QAAI,iBAAiB;AAAM,gBAAU,UAAU,mBAAmB;AAAA;AAC7D,kBAAY,UAAU,mBAAmB;AAAA,EAChD;AACA,uBAAqB,IAAI;AACzB,0BAAwB;AAC1B;AAEO,MAAM,0BAA0B,CACrC,mBACA;AAAA,EACE;AAAA,EACA;AACF,MAIG;AACH,QAAM,uBAAuB;AAAA,IAC3B,CAAC,yBACC,mBAAmB,eAAe,wBAAwB,CAAC,GAAG,iBAAiB;AAAA,IACjF,CAAC,mBAAmB,iBAAiB;AAAA,EACvC;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB;AAAU,2BAAqB,cAAc;AAAA,EACtE,GAAG,CAAC,gBAAgB,sBAAsB,kBAAkB,QAAQ,CAAC;AACvE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { useCallback, useContext, useEffect } from "react";
|
|
3
|
-
import TreeViewContext from "../TreeViewContext";
|
|
4
|
-
import { focusItem } from "./tree-helpers";
|
|
5
|
-
import { toggleExpandAllHelper, toggleItemExpand } from "./group-expands-helpers";
|
|
3
|
+
import TreeViewContext from "../TreeViewContext.js";
|
|
4
|
+
import { focusItem } from "./tree-helpers.js";
|
|
5
|
+
import { toggleExpandAllHelper, toggleItemExpand } from "./group-expands-helpers.js";
|
|
6
6
|
const useOnItemKeyDown = (item, draggableProps) => {
|
|
7
7
|
const ctx = useContext(TreeViewContext);
|
|
8
8
|
const {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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';\nimport type { SortableItemContextType } from '../hoc/SortableItemContext';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => {\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus, onItemActivate },\n triggerTreeRerender,\n visibleItems,\n setFocusedItem,\n setSelectedItem,\n setLatestToggledItem,\n updateUserExpandedState,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n const { isGroup, isExpanded } = item;\n const onItemFocusCurry = useCallback(\n (newFocusItem: DSTreeviewT.Item) =>\n onItemFocus({\n itemIndex: newFocusItem.virtualIndex as number,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n item: newFocusItem,\n }),\n [onItemFocus, scrollToIndex],\n );\n\n const onItemKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n const { key } = e;\n if (!(draggableProps && draggableProps.active)) {\n if (key !== 'Tab') e.preventDefault(); // allow tab/shift+tab\n if ([' ', 'Space', 'Enter'].includes(key) && (e.target as HTMLElement).tagName === 'LI') {\n setSelectedItem(item);\n onItemActivate(item, e);\n }\n\n if (key === 'ArrowLeft') {\n if (isGroup && isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n if (key === 'ArrowRight') {\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 (key === 'ArrowUp') {\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 (key === 'ArrowDown') {\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 (key === 'End') {\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 (key === 'Home') {\n if (virtualIndex !== 0) {\n const newFocusItem = visibleItems[0];\n scrollToIndex(0);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n }\n }\n },\n [\n draggableProps,\n item,\n setSelectedItem,\n onItemActivate,\n isGroup,\n isExpanded,\n triggerTreeRerender,\n updateUserExpandedState,\n scrollToIndex,\n setLatestToggledItem,\n visibleItems,\n setFocusedItem,\n onItemFocusCurry,\n ],\n );\n\n return onItemKeyDown;\n};\n\nexport const useGlobalKeyboardListener = (func: (e: KeyboardEvent) => void) => {\n useEffect(() => {\n document.addEventListener('keydown', func);\n return () => document.removeEventListener('keydown', func);\n }, [func]);\n};\n\nexport const useGlobalToggleAllExpandShortcut = (\n treeRoot: DSTreeviewT.Item['node'],\n triggerTreeRerender: () => void,\n setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n const memoizedToggleAllKeyboardShortcut = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === '*') {\n toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n }\n },\n [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState],\n );\n\n return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,YAAY,iBAAiB;AACnD,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB,wBAAwB;AAkBjD,MAAM,mBAAmB,CAAC,MAAwB,mBAA8D;AACrH,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,EACtC,IAAI;AACJ,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,mBAAmB;AAAA,IACvB,CAAC,iBACC,YAAY;AAAA,MACV,WAAW,aAAa;AAAA,MACxB,cAAc,CAAC,OAAO,EAAE,OAAO,QAAQ,MAAM,cAAc,aAAa,cAAwB,IAAI;AAAA,MACpG,MAAM;AAAA,IACR,CAAC;AAAA,IACH,CAAC,aAAa,aAAa;AAAA,EAC7B;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0C;AACzC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,EAAE,kBAAkB,eAAe,SAAS;AAC9C,YAAI,QAAQ;AAAO,YAAE,eAAe;AACpC,YAAI,CAAC,KAAK,SAAS,OAAO,EAAE,SAAS,GAAG,KAAM,EAAE,OAAuB,YAAY,MAAM;AACvF,0BAAgB,IAAI;AACpB,yBAAe,MAAM,CAAC;AAAA,QACxB;AAEA,YAAI,QAAQ,aAAa;AACvB,cAAI,WAAW,YAAY;AACzB,6BAAiB,MAAM,qBAAqB,yBAAyB,aAAa;AAClF,iCAAqB,IAAI;AAAA,UAC3B;AAAA,QACF;AACA,YAAI,QAAQ,cAAc;AACxB,cAAI,WAAW,CAAC,YAAY;AAC1B,6BAAiB,MAAM,qBAAqB,yBAAyB,aAAa;AAClF,iCAAqB,IAAI;AAAA,UAC3B;AAAA,QACF;AAEA,cAAM,EAAE,aAAa,IAAI;AACzB,YAAI,OAAO,iBAAiB,UAAU;AACpC,gBAAM,gBAAgB,aAAa,SAAS;AAC5C,cAAI,QAAQ,WAAW;AACrB,kBAAM,gBAAgB,iBAAiB;AACvC,kBAAM,gBAAgB,gBAAgB,gBAAgB,eAAe;AACrE,kBAAM,eAAe,aAAa;
|
|
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.js';\nimport { focusItem } from './tree-helpers.js';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\nimport type { SortableItemContextType } from '../hoc/SortableItemContext.js';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => {\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus, onItemActivate },\n triggerTreeRerender,\n visibleItems,\n setFocusedItem,\n setSelectedItem,\n setLatestToggledItem,\n updateUserExpandedState,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n const { isGroup, isExpanded } = item;\n const onItemFocusCurry = useCallback(\n (newFocusItem: DSTreeviewT.Item) =>\n onItemFocus({\n itemIndex: newFocusItem.virtualIndex as number,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n item: newFocusItem,\n }),\n [onItemFocus, scrollToIndex],\n );\n\n const onItemKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n const { key } = e;\n if (!(draggableProps && draggableProps.active)) {\n if (key !== 'Tab') e.preventDefault(); // allow tab/shift+tab\n if ([' ', 'Space', 'Enter'].includes(key) && (e.target as HTMLElement).tagName === 'LI') {\n setSelectedItem(item);\n onItemActivate(item, e);\n }\n\n if (key === 'ArrowLeft') {\n if (isGroup && isExpanded) {\n toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n setLatestToggledItem(item);\n }\n }\n if (key === 'ArrowRight') {\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 (key === 'ArrowUp') {\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 (key === 'ArrowDown') {\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 (key === 'End') {\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 (key === 'Home') {\n if (virtualIndex !== 0) {\n const newFocusItem = visibleItems[0];\n scrollToIndex(0);\n setTimeout(() => {\n setFocusedItem(newFocusItem);\n onItemFocusCurry(newFocusItem);\n focusItem(newFocusItem);\n }, 300);\n }\n }\n }\n }\n },\n [\n draggableProps,\n item,\n setSelectedItem,\n onItemActivate,\n isGroup,\n isExpanded,\n triggerTreeRerender,\n updateUserExpandedState,\n scrollToIndex,\n setLatestToggledItem,\n visibleItems,\n setFocusedItem,\n onItemFocusCurry,\n ],\n );\n\n return onItemKeyDown;\n};\n\nexport const useGlobalKeyboardListener = (func: (e: KeyboardEvent) => void) => {\n useEffect(() => {\n document.addEventListener('keydown', func);\n return () => document.removeEventListener('keydown', func);\n }, [func]);\n};\n\nexport const useGlobalToggleAllExpandShortcut = (\n treeRoot: DSTreeviewT.Item['node'],\n triggerTreeRerender: () => void,\n setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n const memoizedToggleAllKeyboardShortcut = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === '*') {\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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/object-helpers.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-sequences */\n/* eslint-disable no-return-assign */\n/* eslint-disable no-restricted-syntax */\n/* eslint-disable guard-for-in */\n\nfunction isObjectADate(o: string | number | unknown[] | Date | null | undefined | Record<string, unknown>): o is Date {\n return o?.constructor?.name === 'Date';\n}\nfunction isObjectAnArray(\n o: string | number | unknown[] | Date | null | undefined | Record<string, unknown>,\n): o is unknown[] {\n return Array.isArray(o);\n}\nfunction isObjectAString(\n o: string | number | unknown[] | Date | null | undefined | Record<string, unknown>,\n): o is Record<string, unknown> {\n return typeof o === 'object';\n}\n\nexport const unfreeze = (o: string | number | unknown[] | Date | null | undefined | Record<string, unknown>) => {\n let oo: string | number | unknown[] | Date | null | undefined | Record<string, unknown>;\n if (o === null) {\n oo = null;\n } else if (o === undefined) {\n oo = undefined;\n } else if (isObjectADate(o)) {\n oo = new Date(o);\n } else if (isObjectAnArray(o)) {\n oo = [];\n o.forEach((v) => {\n (oo as unknown[]).push(v);\n });\n } else if (isObjectAString(o)) {\n oo = String(o);\n } else if (isObjectAString(o)) {\n oo = {};\n for (const property in o) {\n oo[property] = o[property];\n }\n } else {\n oo = o;\n }\n return oo;\n};\n\ntype GenericItemT<T = unknown> = { [key: string]: T };\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function filterObject<T = unknown>(obj: GenericItemT<T>, predicate: (val: T) => boolean) {\n return Object.keys(obj).reduce<GenericItemT<T>>((res, key) => {\n if (predicate(obj[key])) res[key] = obj[key];\n return res;\n }, {} as GenericItemT<T>);\n}\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,cAAc,GAA+F;AACpH,SAAO,GAAG,aAAa,SAAS;AAClC;AACA,SAAS,gBACP,GACgB;AAChB,SAAO,MAAM,QAAQ,CAAC;AACxB;AACA,SAAS,gBACP,GAC8B;AAC9B,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,WAAW,CAAC,MAAuF;AAC9G,MAAI;AACJ,MAAI,MAAM,MAAM;AACd,SAAK;AAAA,EACP,WAAW,MAAM,QAAW;AAC1B,SAAK;AAAA,EACP,WAAW,cAAc,CAAC,GAAG;AAC3B,SAAK,IAAI,KAAK,CAAC;AAAA,EACjB,WAAW,gBAAgB,CAAC,GAAG;AAC7B,SAAK,CAAC;AACN,MAAE,QAAQ,CAAC,MAAM;AACf,MAAC,GAAiB,KAAK,CAAC;AAAA,IAC1B,CAAC;AAAA,EACH,WAAW,gBAAgB,CAAC,GAAG;AAC7B,SAAK,OAAO,CAAC;AAAA,EACf,WAAW,gBAAgB,CAAC,GAAG;AAC7B,SAAK,CAAC;AACN,eAAW,YAAY,GAAG;AACxB,SAAG,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,cAAc,GAA+F;AACpH,SAAO,GAAG,aAAa,SAAS;AAClC;AACA,SAAS,gBACP,GACgB;AAChB,SAAO,MAAM,QAAQ,CAAC;AACxB;AACA,SAAS,gBACP,GAC8B;AAC9B,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,WAAW,CAAC,MAAuF;AAC9G,MAAI;AACJ,MAAI,MAAM,MAAM;AACd,SAAK;AAAA,EACP,WAAW,MAAM,QAAW;AAC1B,SAAK;AAAA,EACP,WAAW,cAAc,CAAC,GAAG;AAC3B,SAAK,IAAI,KAAK,CAAC;AAAA,EACjB,WAAW,gBAAgB,CAAC,GAAG;AAC7B,SAAK,CAAC;AACN,MAAE,QAAQ,CAAC,MAAM;AACf,MAAC,GAAiB,KAAK,CAAC;AAAA,IAC1B,CAAC;AAAA,EACH,WAAW,gBAAgB,CAAC,GAAG;AAC7B,SAAK,OAAO,CAAC;AAAA,EACf,WAAW,gBAAgB,CAAC,GAAG;AAC7B,SAAK,CAAC;AACN,eAAW,YAAY,GAAG;AACxB,SAAG,QAAQ,IAAI,EAAE,QAAQ;AAAA,IAC3B;AAAA,EACF,OAAO;AACL,SAAK;AAAA,EACP;AACA,SAAO;AACT;AAIO,SAAS,aAA0B,KAAsB,WAAgC;AAC9F,SAAO,OAAO,KAAK,GAAG,EAAE,OAAwB,CAAC,KAAK,QAAQ;AAC5D,QAAI,UAAU,IAAI,GAAG,CAAC;AAAG,UAAI,GAAG,IAAI,IAAI,GAAG;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,CAAoB;AAC1B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { walkParents, walkAllNodeChildren } from "./tree-helpers";
|
|
2
|
+
import { walkParents, walkAllNodeChildren } from "./tree-helpers.js";
|
|
3
3
|
const getGroupCheckState = (node) => {
|
|
4
4
|
let childAllChecked = true;
|
|
5
5
|
let anyChildChecked = false;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/selectable-helper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { walkParents, walkAllNodeChildren } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const getGroupCheckState = (node: DSTreeviewT.Item['node']) => {\n let childAllChecked = true;\n let anyChildChecked = false;\n walkAllNodeChildren(node, (childNode) => {\n const {\n model: { isChecked },\n } = childNode;\n if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;\n else childAllChecked = false;\n });\n\n if (childAllChecked) return true;\n if (anyChildChecked) return 'mixed';\n return false;\n};\n\nexport const selectCheckboxItemModelParentsTillRoot = (\n modelToCheck: DSTreeviewT.Item,\n triggerTreeRerender: (() => void) | null = null,\n) => {\n const newSelections: DSTreeviewT.SelectionItems = {};\n const { nodePath } = modelToCheck;\n walkParents(nodePath, (parentNode) => {\n const nextState = getGroupCheckState(parentNode);\n parentNode.model.isChecked = nextState;\n newSelections[parentNode.model.id] = nextState;\n });\n if (triggerTreeRerender) triggerTreeRerender();\n return newSelections;\n};\n\nexport const toggleCheckboxItem = (itemToSelect: DSTreeviewT.Item, triggerTreeRerender: (() => void) | null = null) => {\n const {\n node: {\n model: { id, isChecked, children = [] },\n },\n } = itemToSelect;\n\n const newSelections: DSTreeviewT.SelectionItems = {};\n // 'mixed' -> true -> false -> true [...->false -> true]\n const nextState = isChecked === 'mixed' ? true : !isChecked;\n itemToSelect.node.model.isChecked = nextState;\n newSelections[id] = nextState;\n\n if (children.length > 0 && (nextState === true || nextState === false)) {\n walkAllNodeChildren(itemToSelect.node, (childNode) => {\n childNode.model.isChecked = nextState;\n newSelections[childNode.model.id] = nextState;\n });\n }\n\n const parentsNewSelections = selectCheckboxItemModelParentsTillRoot(itemToSelect);\n\n if (triggerTreeRerender) triggerTreeRerender();\n return { ...parentsNewSelections, ...newSelections };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,2BAA2B;AAG1C,MAAM,qBAAqB,CAAC,SAAmC;AACpE,MAAI,kBAAkB;AACtB,MAAI,kBAAkB;AACtB,sBAAoB,MAAM,CAAC,cAAc;AACvC,UAAM;AAAA,MACJ,OAAO,EAAE,UAAU;AAAA,IACrB,IAAI;AACJ,QAAI,cAAc,WAAW,cAAc;AAAM,wBAAkB;AAAA;AAC9D,wBAAkB;AAAA,EACzB,CAAC;AAED,MAAI;AAAiB,WAAO;AAC5B,MAAI;AAAiB,WAAO;AAC5B,SAAO;AACT;AAEO,MAAM,yCAAyC,CACpD,cACA,sBAA2C,SACxC;AACH,QAAM,gBAA4C,CAAC;AACnD,QAAM,EAAE,SAAS,IAAI;AACrB,cAAY,UAAU,CAAC,eAAe;AACpC,UAAM,YAAY,mBAAmB,UAAU;AAC/C,eAAW,MAAM,YAAY;AAC7B,kBAAc,WAAW,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { walkParents, walkAllNodeChildren } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nexport const getGroupCheckState = (node: DSTreeviewT.Item['node']) => {\n let childAllChecked = true;\n let anyChildChecked = false;\n walkAllNodeChildren(node, (childNode) => {\n const {\n model: { isChecked },\n } = childNode;\n if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;\n else childAllChecked = false;\n });\n\n if (childAllChecked) return true;\n if (anyChildChecked) return 'mixed';\n return false;\n};\n\nexport const selectCheckboxItemModelParentsTillRoot = (\n modelToCheck: DSTreeviewT.Item,\n triggerTreeRerender: (() => void) | null = null,\n) => {\n const newSelections: DSTreeviewT.SelectionItems = {};\n const { nodePath } = modelToCheck;\n walkParents(nodePath, (parentNode) => {\n const nextState = getGroupCheckState(parentNode);\n parentNode.model.isChecked = nextState;\n newSelections[parentNode.model.id] = nextState;\n });\n if (triggerTreeRerender) triggerTreeRerender();\n return newSelections;\n};\n\nexport const toggleCheckboxItem = (itemToSelect: DSTreeviewT.Item, triggerTreeRerender: (() => void) | null = null) => {\n const {\n node: {\n model: { id, isChecked, children = [] },\n },\n } = itemToSelect;\n\n const newSelections: DSTreeviewT.SelectionItems = {};\n // 'mixed' -> true -> false -> true [...->false -> true]\n const nextState = isChecked === 'mixed' ? true : !isChecked;\n itemToSelect.node.model.isChecked = nextState;\n newSelections[id] = nextState;\n\n if (children.length > 0 && (nextState === true || nextState === false)) {\n walkAllNodeChildren(itemToSelect.node, (childNode) => {\n childNode.model.isChecked = nextState;\n newSelections[childNode.model.id] = nextState;\n });\n }\n\n const parentsNewSelections = selectCheckboxItemModelParentsTillRoot(itemToSelect);\n\n if (triggerTreeRerender) triggerTreeRerender();\n return { ...parentsNewSelections, ...newSelections };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,2BAA2B;AAG1C,MAAM,qBAAqB,CAAC,SAAmC;AACpE,MAAI,kBAAkB;AACtB,MAAI,kBAAkB;AACtB,sBAAoB,MAAM,CAAC,cAAc;AACvC,UAAM;AAAA,MACJ,OAAO,EAAE,UAAU;AAAA,IACrB,IAAI;AACJ,QAAI,cAAc,WAAW,cAAc;AAAM,wBAAkB;AAAA;AAC9D,wBAAkB;AAAA,EACzB,CAAC;AAED,MAAI;AAAiB,WAAO;AAC5B,MAAI;AAAiB,WAAO;AAC5B,SAAO;AACT;AAEO,MAAM,yCAAyC,CACpD,cACA,sBAA2C,SACxC;AACH,QAAM,gBAA4C,CAAC;AACnD,QAAM,EAAE,SAAS,IAAI;AACrB,cAAY,UAAU,CAAC,eAAe;AACpC,UAAM,YAAY,mBAAmB,UAAU;AAC/C,eAAW,MAAM,YAAY;AAC7B,kBAAc,WAAW,MAAM,EAAE,IAAI;AAAA,EACvC,CAAC;AACD,MAAI;AAAqB,wBAAoB;AAC7C,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,cAAgC,sBAA2C,SAAS;AACrH,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,OAAO,EAAE,IAAI,WAAW,WAAW,CAAC,EAAE;AAAA,IACxC;AAAA,EACF,IAAI;AAEJ,QAAM,gBAA4C,CAAC;AAEnD,QAAM,YAAY,cAAc,UAAU,OAAO,CAAC;AAClD,eAAa,KAAK,MAAM,YAAY;AACpC,gBAAc,EAAE,IAAI;AAEpB,MAAI,SAAS,SAAS,MAAM,cAAc,QAAQ,cAAc,QAAQ;AACtE,wBAAoB,aAAa,MAAM,CAAC,cAAc;AACpD,gBAAU,MAAM,YAAY;AAC5B,oBAAc,UAAU,MAAM,EAAE,IAAI;AAAA,IACtC,CAAC;AAAA,EACH;AAEA,QAAM,uBAAuB,uCAAuC,YAAY;AAEhF,MAAI;AAAqB,wBAAoB;AAC7C,SAAO,EAAE,GAAG,sBAAsB,GAAG,cAAc;AACrD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { createRef } from "react";
|
|
3
|
-
import { standardizeSearchQueryString } from "./string-helpers";
|
|
3
|
+
import { standardizeSearchQueryString } from "./string-helpers.js";
|
|
4
4
|
const walkVisibles = (node, callback, skipRoot = true, highlightOnlyQuery = false) => {
|
|
5
5
|
const { children, model } = node;
|
|
6
6
|
const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/tree-helpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { createRef } from 'react';\nimport type TreeModel from 'tree-model';\nimport { standardizeSearchQueryString } from './string-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const walkVisibles = (\n node: DSTreeviewT.Item['node'],\n callback: (node: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n highlightOnlyQuery = false,\n) => {\n const { children, model } = node;\n const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;\n\n const shouldSkipBecauseIsRoot = skipRoot && name === '__root';\n const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);\n\n if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);\n\n const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);\n });\n }\n};\n\nexport const walkParents = (\n nodePath: DSTreeviewT.Item['nodePath'],\n callback: (currParent: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n) => {\n const parents = [...nodePath].reverse();\n parents.shift(); // remove current node from the parents array\n if (skipRoot) parents.pop(); // remove the root from the parents if skipping root\n parents.forEach(callback);\n};\n\ntype RecursiveCallbackT = (childNode: DSTreeviewT.Item['node'], cb?: RecursiveCallbackT, isFirst?: boolean) => void;\nexport const walkAllNodeChildren = (node: DSTreeviewT.Item['node'], callback: RecursiveCallbackT, isFirst = true) => {\n const { children = [] } = node;\n const shouldWalkChildren = children.length;\n\n if (!isFirst) callback(node);\n\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkAllNodeChildren(childNode, callback, false);\n });\n }\n};\n\nexport const getNodeById = (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => {\n const nodes = treeRoot.all((node) => (node as unknown as DSTreeviewT.Item).model.id === id);\n return nodes[0];\n};\n\nexport const cloneNode = (tree: TreeModel, node: DSTreeviewT.Item) => tree.parse(node.model);\n\nexport const itemsShareSameParent = (items: DSTreeviewT.Item[] = []) => {\n if (items.length === 0) throw new Error('Received empty items for comparison');\n if (items.length === 1) return true;\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n\n return items.every((item) => {\n // undefined nodes count as having the same parent\n if (!item) return true;\n const itemPath = item.node.getPath();\n const itemDirectParent = itemPath[itemPath.length - 2];\n return directParentNode === itemDirectParent;\n });\n};\n\nexport const getItemsParentNode = (items: DSTreeviewT.Item[] = [], skipSameParentCheck = false) => {\n if (items.length === 0) throw new Error(\"Received empty items, can't retrieve parent\");\n\n // in case we already know the items compared shares the same parent\n if (!skipSameParentCheck)\n if (!itemsShareSameParent(items))\n // if we don't know (default, we don't) check if they share the parent\n throw new Error(\"Received items don't share the same parent, can't retrieve parent\");\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n return directParentNode as unknown as DSTreeviewT.Item['node'];\n};\n\nexport const getNodeMatchesSearchQuery = (node: DSTreeviewT.Item['node'], searchQuery = '') => {\n const standardizedName = standardizeSearchQueryString(node.model.name);\n const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);\n return standardizedName.includes(standardizedSearchQuery);\n};\n\nexport const getChildrenMatchesSearchQuery = (parentNode: DSTreeviewT.Item['node'], searchQuery = '') => {\n let anyChildMatch = false;\n walkAllNodeChildren(parentNode, (node) => {\n if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;\n });\n return anyChildMatch;\n};\n\n/**\n * Mutate in place a node from tree-model normalizing object properties like \"isGroup\" even if user didn't specify it explicitly,\n * after execution the node will have \"nodePath\" \"treeDepth\" \"nodeItemRef\" \"isGroup\" \"isExpanded\"\n * (optionally, based on the provided arguments) \"matchesSearchQuery\" \"childrenMatchesSearchQuery\" \"isChecked\"\n *\n * @param {object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props\n * @param {string} [searchQuery=''] - optional string used to parse \"matchesSearchQuery\"/\"childrenMatchesSearchQuery\" properties\n * @param {object} [selection=null] - optional selection hashmap used to parse \"isChecked\" properties\n * @param {object} [expanded=null] - optional expanded hashmap used to parse \"isExpanded\" properties\n */\nexport const enrichNodeModelInPlace = (\n node: TreeModel.Node<DSTreeviewT.SimpleItem>,\n searchQuery = '',\n selection: DSTreeviewT.SelectionItems | null = null,\n expanded: DSTreeviewT.ExpandedItems | null = null,\n) => {\n const path = node.getPath();\n const depth = path.length - 1;\n node.model.nodePath = path;\n node.model.treeDepth = depth;\n\n if (!node.model.nodeItemRef) {\n node.model.nodeItemRef = createRef();\n }\n\n // if a node has children but was not marked as isGroup, force-mark as group\n // this is useful to avoid having to always check both the flag and the children.length...\n if (typeof node.model.isGroup !== 'boolean' && (node.model?.children?.length ?? 0) > 0) {\n node.model.isGroup = true;\n }\n\n if (node.model.isGroup && node.model.id !== '__ds_tree_root') {\n if (expanded) node.model.isExpanded = !!expanded[node.model.id];\n else if (typeof node.model.isExpanded !== 'boolean') {\n node.model.isExpanded = false;\n }\n }\n\n node.model.matchesSearchQuery = true;\n node.model.childrenMatchesSearchQuery = false;\n const partiallyEnrichedNode = node as unknown as TreeModel.Node<DSTreeviewT.Item>;\n if (searchQuery) {\n partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);\n\n if (partiallyEnrichedNode.model.isGroup === true) {\n partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(\n partiallyEnrichedNode,\n searchQuery,\n );\n if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;\n }\n }\n if (selection && selection[partiallyEnrichedNode.model.id]) {\n partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];\n }\n};\n\nexport const focusItem = (item: DSTreeviewT.Item | null) => {\n item?.nodeItemRef?.current?.focus();\n};\n\nexport const flattenTreeForDnD = (\n data: TreeModel.Node<DSTreeviewT.Item>,\n shouldDescend: (datum: TreeModel.Node<DSTreeviewT.Item>) => boolean = () => true,\n) => {\n const flattenedTree: DSTreeviewT.DndItem[] = [];\n let index = 0;\n const doit = (node: TreeModel.Node<DSTreeviewT.Item>, depth = 0, parentId: DSTreeviewT.StringOrNum | null = null) => {\n flattenedTree.push({\n uid: node.model.id.toString(),\n depth,\n realIndex: index,\n childrenCount: node.children?.length ?? 0,\n parentId: parentId !== null ? parentId.toString() : null,\n original: { ...node, ...node.model, node },\n });\n index += 1;\n if (shouldDescend(node)) node.children?.forEach((child) => doit(child, depth + 1, node.model.id.toString()));\n };\n\n data.children.forEach((node) => doit(node));\n return flattenedTree;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,iBAAiB;AAE1B,SAAS,oCAAoC;AAGtC,MAAM,eAAe,CAC1B,MACA,UACA,WAAW,MACX,qBAAqB,UAClB;AACH,QAAM,EAAE,UAAU,MAAM,IAAI;AAC5B,QAAM,EAAE,MAAM,YAAY,4BAA4B,mBAAmB,IAAI;AAE7E,QAAM,0BAA0B,YAAY,SAAS;AACrD,QAAM,0BAA0B,CAAC,EAAE,sBAAsB,8BAA8B;AAEvF,MAAI,CAAC,2BAA2B;AAAyB,aAAS,IAAI;AAEtE,QAAM,qBAAqB,CAAC,EAAE,SAAS,SAAS,KAAK,cAAc;AACnE,MAAI,oBAAoB;AACtB,aAAS,QAAQ,CAAC,cAAc;AAC9B,mBAAa,WAAW,UAAU,UAAU,kBAAkB;AAAA,IAChE,CAAC;AAAA,EACH;AACF;AAEO,MAAM,cAAc,CACzB,UACA,UACA,WAAW,SACR;AACH,QAAM,UAAU,CAAC,GAAG,QAAQ,EAAE,QAAQ;AACtC,UAAQ,MAAM;AACd,MAAI;AAAU,YAAQ,IAAI;AAC1B,UAAQ,QAAQ,QAAQ;AAC1B;AAGO,MAAM,sBAAsB,CAAC,MAAgC,UAA8B,UAAU,SAAS;AACnH,QAAM,EAAE,WAAW,CAAC,EAAE,IAAI;AAC1B,QAAM,qBAAqB,SAAS;AAEpC,MAAI,CAAC;AAAS,aAAS,IAAI;AAE3B,MAAI,oBAAoB;AACtB,aAAS,QAAQ,CAAC,cAAc;AAC9B,0BAAoB,WAAW,UAAU,KAAK;AAAA,IAChD,CAAC;AAAA,EACH;AACF;AAEO,MAAM,cAAc,CAAC,UAAoC,OAAgC;AAC9F,QAAM,QAAQ,SAAS,IAAI,CAAC,SAAU,KAAqC,MAAM,OAAO,EAAE;AAC1F,SAAO,MAAM;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { createRef } from 'react';\nimport type TreeModel from 'tree-model';\nimport { standardizeSearchQueryString } from './string-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nexport const walkVisibles = (\n node: DSTreeviewT.Item['node'],\n callback: (node: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n highlightOnlyQuery = false,\n) => {\n const { children, model } = node;\n const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;\n\n const shouldSkipBecauseIsRoot = skipRoot && name === '__root';\n const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);\n\n if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);\n\n const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);\n });\n }\n};\n\nexport const walkParents = (\n nodePath: DSTreeviewT.Item['nodePath'],\n callback: (currParent: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n) => {\n const parents = [...nodePath].reverse();\n parents.shift(); // remove current node from the parents array\n if (skipRoot) parents.pop(); // remove the root from the parents if skipping root\n parents.forEach(callback);\n};\n\ntype RecursiveCallbackT = (childNode: DSTreeviewT.Item['node'], cb?: RecursiveCallbackT, isFirst?: boolean) => void;\nexport const walkAllNodeChildren = (node: DSTreeviewT.Item['node'], callback: RecursiveCallbackT, isFirst = true) => {\n const { children = [] } = node;\n const shouldWalkChildren = children.length;\n\n if (!isFirst) callback(node);\n\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkAllNodeChildren(childNode, callback, false);\n });\n }\n};\n\nexport const getNodeById = (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => {\n const nodes = treeRoot.all((node) => (node as unknown as DSTreeviewT.Item).model.id === id);\n return nodes[0];\n};\n\nexport const cloneNode = (tree: TreeModel, node: DSTreeviewT.Item) => tree.parse(node.model);\n\nexport const itemsShareSameParent = (items: DSTreeviewT.Item[] = []) => {\n if (items.length === 0) throw new Error('Received empty items for comparison');\n if (items.length === 1) return true;\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n\n return items.every((item) => {\n // undefined nodes count as having the same parent\n if (!item) return true;\n const itemPath = item.node.getPath();\n const itemDirectParent = itemPath[itemPath.length - 2];\n return directParentNode === itemDirectParent;\n });\n};\n\nexport const getItemsParentNode = (items: DSTreeviewT.Item[] = [], skipSameParentCheck = false) => {\n if (items.length === 0) throw new Error(\"Received empty items, can't retrieve parent\");\n\n // in case we already know the items compared shares the same parent\n if (!skipSameParentCheck)\n if (!itemsShareSameParent(items))\n // if we don't know (default, we don't) check if they share the parent\n throw new Error(\"Received items don't share the same parent, can't retrieve parent\");\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n return directParentNode as unknown as DSTreeviewT.Item['node'];\n};\n\nexport const getNodeMatchesSearchQuery = (node: DSTreeviewT.Item['node'], searchQuery = '') => {\n const standardizedName = standardizeSearchQueryString(node.model.name);\n const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);\n return standardizedName.includes(standardizedSearchQuery);\n};\n\nexport const getChildrenMatchesSearchQuery = (parentNode: DSTreeviewT.Item['node'], searchQuery = '') => {\n let anyChildMatch = false;\n walkAllNodeChildren(parentNode, (node) => {\n if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;\n });\n return anyChildMatch;\n};\n\n/**\n * Mutate in place a node from tree-model normalizing object properties like \"isGroup\" even if user didn't specify it explicitly,\n * after execution the node will have \"nodePath\" \"treeDepth\" \"nodeItemRef\" \"isGroup\" \"isExpanded\"\n * (optionally, based on the provided arguments) \"matchesSearchQuery\" \"childrenMatchesSearchQuery\" \"isChecked\"\n *\n * @param {object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props\n * @param {string} [searchQuery=''] - optional string used to parse \"matchesSearchQuery\"/\"childrenMatchesSearchQuery\" properties\n * @param {object} [selection=null] - optional selection hashmap used to parse \"isChecked\" properties\n * @param {object} [expanded=null] - optional expanded hashmap used to parse \"isExpanded\" properties\n */\nexport const enrichNodeModelInPlace = (\n node: TreeModel.Node<DSTreeviewT.SimpleItem>,\n searchQuery = '',\n selection: DSTreeviewT.SelectionItems | null = null,\n expanded: DSTreeviewT.ExpandedItems | null = null,\n) => {\n const path = node.getPath();\n const depth = path.length - 1;\n node.model.nodePath = path;\n node.model.treeDepth = depth;\n\n if (!node.model.nodeItemRef) {\n node.model.nodeItemRef = createRef();\n }\n\n // if a node has children but was not marked as isGroup, force-mark as group\n // this is useful to avoid having to always check both the flag and the children.length...\n if (typeof node.model.isGroup !== 'boolean' && (node.model?.children?.length ?? 0) > 0) {\n node.model.isGroup = true;\n }\n\n if (node.model.isGroup && node.model.id !== '__ds_tree_root') {\n if (expanded) node.model.isExpanded = !!expanded[node.model.id];\n else if (typeof node.model.isExpanded !== 'boolean') {\n node.model.isExpanded = false;\n }\n }\n\n node.model.matchesSearchQuery = true;\n node.model.childrenMatchesSearchQuery = false;\n const partiallyEnrichedNode = node as unknown as TreeModel.Node<DSTreeviewT.Item>;\n if (searchQuery) {\n partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);\n\n if (partiallyEnrichedNode.model.isGroup === true) {\n partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(\n partiallyEnrichedNode,\n searchQuery,\n );\n if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;\n }\n }\n if (selection && selection[partiallyEnrichedNode.model.id]) {\n partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];\n }\n};\n\nexport const focusItem = (item: DSTreeviewT.Item | null) => {\n item?.nodeItemRef?.current?.focus();\n};\n\nexport const flattenTreeForDnD = (\n data: TreeModel.Node<DSTreeviewT.Item>,\n shouldDescend: (datum: TreeModel.Node<DSTreeviewT.Item>) => boolean = () => true,\n) => {\n const flattenedTree: DSTreeviewT.DndItem[] = [];\n let index = 0;\n const doit = (node: TreeModel.Node<DSTreeviewT.Item>, depth = 0, parentId: DSTreeviewT.StringOrNum | null = null) => {\n flattenedTree.push({\n uid: node.model.id.toString(),\n depth,\n realIndex: index,\n childrenCount: node.children?.length ?? 0,\n parentId: parentId !== null ? parentId.toString() : null,\n original: { ...node, ...node.model, node },\n });\n index += 1;\n if (shouldDescend(node)) node.children?.forEach((child) => doit(child, depth + 1, node.model.id.toString()));\n };\n\n data.children.forEach((node) => doit(node));\n return flattenedTree;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { useEffect, useMemo, useState, useRef, useCallback } from "react";
|
|
3
|
-
import { focusItem } from "./tree-helpers";
|
|
4
|
-
import { toggleExpandAllHelper } from "./group-expands-helpers";
|
|
3
|
+
import { focusItem } from "./tree-helpers.js";
|
|
4
|
+
import { toggleExpandAllHelper } from "./group-expands-helpers.js";
|
|
5
5
|
const useInstanceRefActions = ({ actions }, ctx) => {
|
|
6
6
|
const {
|
|
7
7
|
props: { onItemFocus, onItemActivate },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useInstanceRefActions.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface PromisesRefT {\n expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n const {\n props: { onItemFocus, onItemActivate },\n virtualListHelpers,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n updateUserExpandedState,\n setSelectedItem,\n setFocusedItem,\n setLatestToggledItem,\n } = ctx;\n const { current: promises } = useRef<PromisesRefT>({});\n const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n useEffect(() => {\n if (expandPromise && promises.expandResolve) {\n promises.expandResolve(visibleItems);\n promises.expandResolve = null;\n setPromise(null);\n }\n }, [visibleItems, expandPromise, promises]);\n\n actions.toggleExpandAll = useCallback(\n (isExpand) => {\n const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n promises.expandResolve = resolve;\n if (treeRoot)\n toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n });\n setPromise(p);\n return p;\n },\n [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n );\n actions.scrollTo = useCallback(\n (indx, opts = { align: 'start' }) => {\n if (scrollToIndex) scrollToIndex(indx, opts);\n },\n [scrollToIndex],\n );\n\n actions.setSelectedItemByVirtualIndex = useCallback(\n (index) => {\n const itemByIndex = visibleItems[index];\n setSelectedItem(itemByIndex);\n onItemActivate(itemByIndex);\n },\n [visibleItems, setSelectedItem, onItemActivate],\n );\n\n actions.setFocusedItemByVirtualIndex = useCallback(\n (index, opts = { align: 'start', withScroll: false }) => {\n const itemByIndex = visibleItems[index];\n const onItemFocusParams = {\n itemIndex: itemByIndex.virtualIndex as number,\n scrollToItem: () => scrollToIndex(index, opts),\n item: itemByIndex,\n };\n\n if (opts.withScroll && scrollToIndex) {\n scrollToIndex(index, opts);\n setTimeout(() => {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }, 300);\n } else {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }\n },\n [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n );\n\n return actions;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,UAAU,QAAQ,mBAAmB;AAClE,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,SAAS,IAAI,OAAqB,CAAC,CAAC;AACrD,QAAM,EAAE,cAAc,IAAI,QAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAChF,QAAM,CAAC,eAAe,UAAU,IAAI,SAAyD;AAE7F,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS,eAAe;AAC3C,eAAS,cAAc,YAAY;AACnC,eAAS,gBAAgB;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,cAAc,eAAe,QAAQ,CAAC;AAE1C,UAAQ,kBAAkB;AAAA,IACxB,CAAC,aAAa;AACZ,YAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,iBAAS,gBAAgB;AACzB,YAAI;AACF,gCAAsB,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,MAChH,CAAC;AACD,iBAAW,CAAC;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,EACzF;AACA,UAAQ,WAAW;AAAA,IACjB,CAAC,MAAM,OAAO,EAAE,OAAO,QAAQ,MAAM;AACnC,UAAI;AAAe,sBAAc,MAAM,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,UAAQ,gCAAgC;AAAA,IACtC,CAAC,UAAU;AACT,YAAM,cAAc,aAAa;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers.js';\nimport { toggleExpandAllHelper } from './group-expands-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\n\ninterface PromisesRefT {\n expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n const {\n props: { onItemFocus, onItemActivate },\n virtualListHelpers,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n updateUserExpandedState,\n setSelectedItem,\n setFocusedItem,\n setLatestToggledItem,\n } = ctx;\n const { current: promises } = useRef<PromisesRefT>({});\n const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n useEffect(() => {\n if (expandPromise && promises.expandResolve) {\n promises.expandResolve(visibleItems);\n promises.expandResolve = null;\n setPromise(null);\n }\n }, [visibleItems, expandPromise, promises]);\n\n actions.toggleExpandAll = useCallback(\n (isExpand) => {\n const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n promises.expandResolve = resolve;\n if (treeRoot)\n toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n });\n setPromise(p);\n return p;\n },\n [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n );\n actions.scrollTo = useCallback(\n (indx, opts = { align: 'start' }) => {\n if (scrollToIndex) scrollToIndex(indx, opts);\n },\n [scrollToIndex],\n );\n\n actions.setSelectedItemByVirtualIndex = useCallback(\n (index) => {\n const itemByIndex = visibleItems[index];\n setSelectedItem(itemByIndex);\n onItemActivate(itemByIndex);\n },\n [visibleItems, setSelectedItem, onItemActivate],\n );\n\n actions.setFocusedItemByVirtualIndex = useCallback(\n (index, opts = { align: 'start', withScroll: false }) => {\n const itemByIndex = visibleItems[index];\n const onItemFocusParams = {\n itemIndex: itemByIndex.virtualIndex as number,\n scrollToItem: () => scrollToIndex(index, opts),\n item: itemByIndex,\n };\n\n if (opts.withScroll && scrollToIndex) {\n scrollToIndex(index, opts);\n setTimeout(() => {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }, 300);\n } else {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }\n },\n [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n );\n\n return actions;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,UAAU,QAAQ,mBAAmB;AAClE,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,SAAS,IAAI,OAAqB,CAAC,CAAC;AACrD,QAAM,EAAE,cAAc,IAAI,QAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAChF,QAAM,CAAC,eAAe,UAAU,IAAI,SAAyD;AAE7F,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS,eAAe;AAC3C,eAAS,cAAc,YAAY;AACnC,eAAS,gBAAgB;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,cAAc,eAAe,QAAQ,CAAC;AAE1C,UAAQ,kBAAkB;AAAA,IACxB,CAAC,aAAa;AACZ,YAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,iBAAS,gBAAgB;AACzB,YAAI;AACF,gCAAsB,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,MAChH,CAAC;AACD,iBAAW,CAAC;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,EACzF;AACA,UAAQ,WAAW;AAAA,IACjB,CAAC,MAAM,OAAO,EAAE,OAAO,QAAQ,MAAM;AACnC,UAAI;AAAe,sBAAc,MAAM,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,UAAQ,gCAAgC;AAAA,IACtC,CAAC,UAAU;AACT,YAAM,cAAc,aAAa,KAAK;AACtC,sBAAgB,WAAW;AAC3B,qBAAe,WAAW;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,UAAQ,+BAA+B;AAAA,IACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,MAAM,MAAM;AACvD,YAAM,cAAc,aAAa,KAAK;AACtC,YAAM,oBAAoB;AAAA,QACxB,WAAW,YAAY;AAAA,QACvB,cAAc,MAAM,cAAc,OAAO,IAAI;AAAA,QAC7C,MAAM;AAAA,MACR;AAEA,UAAI,KAAK,cAAc,eAAe;AACpC,sBAAc,OAAO,IAAI;AACzB,mBAAW,MAAM;AACf,yBAAe,WAAW;AAC1B,oBAAU,WAAW;AACrB,sBAAY,iBAAiB;AAAA,QAC/B,GAAG,GAAG;AAAA,MACR,OAAO;AACL,uBAAe,WAAW;AAC1B,kBAAU,WAAW;AACrB,oBAAY,iBAAiB;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe,gBAAgB,WAAW;AAAA,EAC3D;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,8 +2,8 @@ import * as React from "react";
|
|
|
2
2
|
import { useState, useCallback, useMemo, useEffect } from "react";
|
|
3
3
|
import TreeModel from "tree-model";
|
|
4
4
|
import { cloneDeep } from "lodash";
|
|
5
|
-
import { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from "./tree-helpers";
|
|
6
|
-
import { updateExpandedState } from "./group-expands-helpers";
|
|
5
|
+
import { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from "./tree-helpers.js";
|
|
6
|
+
import { updateExpandedState } from "./group-expands-helpers.js";
|
|
7
7
|
const useTree = (data, props, states) => {
|
|
8
8
|
const { setExpandedGroups } = states;
|
|
9
9
|
const unfrozenData = useMemo(() => cloneDeep(data), [data]);
|
|
@@ -64,6 +64,7 @@ const useTree = (data, props, states) => {
|
|
|
64
64
|
selection,
|
|
65
65
|
expanded,
|
|
66
66
|
setExpandedGroups
|
|
67
|
+
// onVisibleItemsChange // evaluate potential performance hit?
|
|
67
68
|
]);
|
|
68
69
|
const flattenedItems = useMemo(() => flattenTreeForDnD(treeRoot), [treeRoot]);
|
|
69
70
|
return {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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';\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { updateExpandedState } from './group-expands-helpers';\n\nexport const useTree = (\n data: DSTreeviewT.SimpleItem[],\n props: DSTreeviewT.Props,\n states: {\n setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n },\n) => {\n const { setExpandedGroups } = states;\n const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n // convert data into a TreeModel with extra isExpanded prop\n // root element type is an exception, children model is based on what the dev passed on\n // since root is an excepcion we must typecast\n const tree = useMemo(() => new TreeModel(), []);\n const [treeData, setTreeData] = useState({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n\n useEffect(() => {\n setTreeData({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n }, [unfrozenData]);\n\n // expose a way to rerender the tree\n // used for expand functionality\n const [rerenderItems, setRerenderItems] = useState({});\n const triggerTreeRerender = useCallback(() => {\n setRerenderItems({});\n }, []);\n\n // when re-rendering we re-parse the list\n const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n useEffect(() => {\n setTreeRoot(tree.parse(treeData));\n }, [treeData, rerenderItems, tree]);\n\n const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n const updateUserExpandedState = useCallback(() => {\n updateExpandedState(treeRoot, onExpandChange);\n }, [treeRoot, onExpandChange]);\n // we add missing properties to the received Items\n // not the best of the patterns, but it works\n // this is where we convert \"SimpleItems\" to \"Items\"\n // this was done to avoid breaking changes back in v1\n useEffect(() => {\n const parsedVisibleItems: DSTreeviewT.Item[] = [];\n const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n treeRoot.walk((node) => {\n enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n return shouldContinueWalking;\n });\n\n walkVisibles(\n treeRoot,\n (node) => {\n parsedVisibleItems.push({ ...node.model, node });\n },\n true,\n highlightOnlyQuery,\n );\n setVisibleItems(parsedVisibleItems);\n onVisibleItemsChange(parsedVisibleItems);\n\n setExpandedGroups(newExpandedHashMap);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n treeRoot,\n rerenderItems,\n searchQuery,\n highlightOnlyQuery,\n selection,\n expanded,\n setExpandedGroups,\n // onVisibleItemsChange // evaluate potential performance hit?\n ]);\n\n const flattenedItems = useMemo(() => flattenTreeForDnD(treeRoot), [treeRoot]);\n\n return {\n visibleItems,\n flattenedItems,\n tree,\n treeRoot,\n rerenderItems,\n triggerTreeRerender,\n updateUserExpandedState,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,aAAa,SAAS,iBAAiB;AAC1D,OAAO,eAAe;AACtB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,wBAAwB,yBAAyB;AAGxE,SAAS,2BAA2B;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,eAAe,QAAQ,MAAM,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC;AAK1D,QAAM,OAAO,QAAQ,MAAM,IAAI,UAAU,GAAG,CAAC,CAAC;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAgC;AAEhC,YAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ,CAAgC;AAAA,EAClC,GAAG,CAAC,YAAY,CAAC;AAIjB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,CAAC;AACrD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,qBAAiB,CAAC,CAAC;AAAA,EACrB,GAAG,CAAC,CAAC;AAGL,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK,MAAM,QAAQ,CAAC;AAC7D,YAAU,MAAM;AACd,gBAAY,KAAK,MAAM,QAAQ,CAAC;AAAA,EAClC,GAAG,CAAC,UAAU,eAAe,IAAI,CAAC;AAElC,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6B,CAAC,CAAC;AAEvE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,eAAe,IAAI;AAEvG,QAAM,0BAA0B,YAAY,MAAM;AAChD,wBAAoB,UAAU,cAAc;AAAA,EAC9C,GAAG,CAAC,UAAU,cAAc,CAAC;AAK7B,YAAU,MAAM;AACd,UAAM,qBAAyC,CAAC;AAChD,UAAM,qBAAgD,CAAC;AACvD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,6BAAuB,MAAM,aAAa,WAAW,QAAQ;AAC7D,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,
|
|
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';\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\nimport { updateExpandedState } from './group-expands-helpers.js';\n\nexport const useTree = (\n data: DSTreeviewT.SimpleItem[],\n props: DSTreeviewT.Props,\n states: {\n setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n },\n) => {\n const { setExpandedGroups } = states;\n const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n // convert data into a TreeModel with extra isExpanded prop\n // root element type is an exception, children model is based on what the dev passed on\n // since root is an excepcion we must typecast\n const tree = useMemo(() => new TreeModel(), []);\n const [treeData, setTreeData] = useState({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n\n useEffect(() => {\n setTreeData({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n }, [unfrozenData]);\n\n // expose a way to rerender the tree\n // used for expand functionality\n const [rerenderItems, setRerenderItems] = useState({});\n const triggerTreeRerender = useCallback(() => {\n setRerenderItems({});\n }, []);\n\n // when re-rendering we re-parse the list\n const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n useEffect(() => {\n setTreeRoot(tree.parse(treeData));\n }, [treeData, rerenderItems, tree]);\n\n const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n const updateUserExpandedState = useCallback(() => {\n updateExpandedState(treeRoot, onExpandChange);\n }, [treeRoot, onExpandChange]);\n // we add missing properties to the received Items\n // not the best of the patterns, but it works\n // this is where we convert \"SimpleItems\" to \"Items\"\n // this was done to avoid breaking changes back in v1\n useEffect(() => {\n const parsedVisibleItems: DSTreeviewT.Item[] = [];\n const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n treeRoot.walk((node) => {\n enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n return shouldContinueWalking;\n });\n\n walkVisibles(\n treeRoot,\n (node) => {\n parsedVisibleItems.push({ ...node.model, node });\n },\n true,\n highlightOnlyQuery,\n );\n setVisibleItems(parsedVisibleItems);\n onVisibleItemsChange(parsedVisibleItems);\n\n setExpandedGroups(newExpandedHashMap);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n treeRoot,\n rerenderItems,\n searchQuery,\n highlightOnlyQuery,\n selection,\n expanded,\n setExpandedGroups,\n // onVisibleItemsChange // evaluate potential performance hit?\n ]);\n\n const flattenedItems = useMemo(() => flattenTreeForDnD(treeRoot), [treeRoot]);\n\n return {\n visibleItems,\n flattenedItems,\n tree,\n treeRoot,\n rerenderItems,\n triggerTreeRerender,\n updateUserExpandedState,\n };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,aAAa,SAAS,iBAAiB;AAC1D,OAAO,eAAe;AACtB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,wBAAwB,yBAAyB;AAGxE,SAAS,2BAA2B;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,eAAe,QAAQ,MAAM,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC;AAK1D,QAAM,OAAO,QAAQ,MAAM,IAAI,UAAU,GAAG,CAAC,CAAC;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAgC;AAEhC,YAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ,CAAgC;AAAA,EAClC,GAAG,CAAC,YAAY,CAAC;AAIjB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,CAAC;AACrD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,qBAAiB,CAAC,CAAC;AAAA,EACrB,GAAG,CAAC,CAAC;AAGL,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK,MAAM,QAAQ,CAAC;AAC7D,YAAU,MAAM;AACd,gBAAY,KAAK,MAAM,QAAQ,CAAC;AAAA,EAClC,GAAG,CAAC,UAAU,eAAe,IAAI,CAAC;AAElC,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6B,CAAC,CAAC;AAEvE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,eAAe,IAAI;AAEvG,QAAM,0BAA0B,YAAY,MAAM;AAChD,wBAAoB,UAAU,cAAc;AAAA,EAC9C,GAAG,CAAC,UAAU,cAAc,CAAC;AAK7B,YAAU,MAAM;AACd,UAAM,qBAAyC,CAAC;AAChD,UAAM,qBAAgD,CAAC;AACvD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,6BAAuB,MAAM,aAAa,WAAW,QAAQ;AAC7D,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,EAAE,IAAI;AACtG,aAAO;AAAA,IACT,CAAC;AAED;AAAA,MACE;AAAA,MACA,CAAC,SAAS;AACR,2BAAmB,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,CAAC;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,oBAAgB,kBAAkB;AAClC,yBAAqB,kBAAkB;AAEvC,sBAAkB,kBAAkB;AAAA,EAEtC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,CAAC;AAED,QAAM,iBAAiB,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/TreeView.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { DSTreeviewT } from './react-desc-prop-types';
|
|
1
|
+
import type { DSTreeviewT } from './react-desc-prop-types.js';
|
|
2
2
|
export declare const TreeView: {
|
|
3
3
|
(props: DSTreeviewT.Props): JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
6
|
-
declare const TreeViewWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSTreeviewT.Props>;
|
|
6
|
+
declare const TreeViewWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSTreeviewT.Props>;
|
|
7
7
|
export { TreeViewWithSchema };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { DSTreeviewT } from './react-desc-prop-types';
|
|
3
|
-
import type { DSTreeviewInternalsT } from './sharedTypes';
|
|
2
|
+
import type { DSTreeviewT } from './react-desc-prop-types.js';
|
|
3
|
+
import type { DSTreeviewInternalsT } from './sharedTypes.js';
|
|
4
4
|
export declare const defaultProps: DSTreeviewT.Props;
|
|
5
5
|
export declare const defaultRelativeMouseCoord: {
|
|
6
6
|
isBefore: boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { DSTreeviewT } from '../react-desc-prop-types';
|
|
2
|
-
import type { DSTreeviewInternalsT } from '../sharedTypes';
|
|
1
|
+
import type { DSTreeviewT } from '../react-desc-prop-types.js';
|
|
2
|
+
import type { DSTreeviewInternalsT } from '../sharedTypes.js';
|
|
3
3
|
type UseTreeviewT = (props: DSTreeviewT.Props) => {
|
|
4
4
|
ctx: DSTreeviewInternalsT.CTX;
|
|
5
5
|
};
|