@elliemae/ds-treeview 3.0.0-next.78 → 3.0.0-next.79
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.
|
@@ -139,7 +139,8 @@ const TreeItem = (props) => {
|
|
|
139
139
|
item
|
|
140
140
|
});
|
|
141
141
|
}, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
|
|
142
|
-
const
|
|
142
|
+
const childrenLength = (0, import_react.useMemo)(() => children?.length ?? 0, [children]);
|
|
143
|
+
const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ""}`;
|
|
143
144
|
return /* @__PURE__ */ import_react.default.createElement(TreeListItem, {
|
|
144
145
|
tabIndex: 0,
|
|
145
146
|
onMouseLeave: () => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TreeItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\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: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow, nameKey, showChildrenAmount },\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 const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n onItemFocus({\n itemIndex: itemVirtualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n item,\n });\n },\n [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n );\n\n const ariaLabel = `${itemLabelText}${showChildrenAmount &&
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\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: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow, nameKey, showChildrenAmount },\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 const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n onItemFocus({\n itemIndex: itemVirtualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n item,\n });\n },\n [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n );\n\n 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -113,7 +113,8 @@ const TreeItem = (props) => {
|
|
|
113
113
|
item
|
|
114
114
|
});
|
|
115
115
|
}, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
|
|
116
|
-
const
|
|
116
|
+
const childrenLength = useMemo(() => children?.length ?? 0, [children]);
|
|
117
|
+
const ariaLabel = `${itemLabelText}${showChildrenAmount && childrenLength > 0 ? `, ${childrenLength} Items` : ""}`;
|
|
117
118
|
return /* @__PURE__ */ React2.createElement(TreeListItem, {
|
|
118
119
|
tabIndex: 0,
|
|
119
120
|
onMouseLeave: () => {
|
|
@@ -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';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\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: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow, nameKey, showChildrenAmount },\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 const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n onItemFocus({\n itemIndex: itemVirtualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n item,\n });\n },\n [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n );\n\n const ariaLabel = `${itemLabelText}${showChildrenAmount &&
|
|
5
|
-
"mappings": "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
|
|
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';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\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: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow, nameKey, showChildrenAmount },\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 const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n onItemFocus({\n itemIndex: itemVirtualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n item,\n });\n },\n [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n );\n\n 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
|
}
|