@elliemae/ds-treeview 3.51.0-next.8 → 3.51.0-rc.0
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.
|
@@ -95,6 +95,11 @@ const TreeListWrapper = import_ds_system.styled.div`
|
|
|
95
95
|
.em-ds-tree-item--dragging.em-ds-tree-item__addons.em-ds-icon {
|
|
96
96
|
fill: ${({ theme }) => theme.colors.neutral["600"]};
|
|
97
97
|
}
|
|
98
|
+
|
|
99
|
+
//Count displayer
|
|
100
|
+
.em-ds-tree-item-children-count-displayer {
|
|
101
|
+
color: ${({ theme }) => theme.colors.neutral["700"]};
|
|
102
|
+
}
|
|
98
103
|
`;
|
|
99
104
|
const compactRowClass = `${import_cssClassesConstants.DSTreeViewPrefix}-tv-row-size-compact`;
|
|
100
105
|
const normaRowClass = `${import_cssClassesConstants.DSTreeViewPrefix}-tv-row-size-normal`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TreeList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { styled } from '@elliemae/ds-system';\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}\nconst LegacyTreeListWrapper = 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\nexport const TreeListWrapper = styled.div`\n width: max-content;\n height: 100%;\n\n // Item content\n .em-ds-tree-item.hover {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n .em-ds-tree-item.selected {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n .em-ds-tree-item.hover.selected {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n // DnD Handle\n .em-ds-icon.drag-handle {\n &[aria-disabled='true'] {\n cursor: not-allowed;\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n }\n\n // Item left icon\n .em-ds-icon.tree-item-icon.tree-item-icon-disabled {\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n\n // Rigth addons\n .em-ds-tree-item--dragging.em-ds-tree-item__addons.em-ds-icon {\n fill: ${({ theme }) => theme.colors.neutral['600']};\n }\n`;\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 <LegacyTreeListWrapper\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 </LegacyTreeListWrapper>\n </TreeListWrapper>\n );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { styled } from '@elliemae/ds-system';\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}\nconst LegacyTreeListWrapper = 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\nexport const TreeListWrapper = styled.div`\n width: max-content;\n height: 100%;\n\n // Item content\n .em-ds-tree-item.hover {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n .em-ds-tree-item.selected {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n .em-ds-tree-item.hover.selected {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n // DnD Handle\n .em-ds-icon.drag-handle {\n &[aria-disabled='true'] {\n cursor: not-allowed;\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n }\n\n // Item left icon\n .em-ds-icon.tree-item-icon.tree-item-icon-disabled {\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n\n // Rigth addons\n .em-ds-tree-item--dragging.em-ds-tree-item__addons.em-ds-icon {\n fill: ${({ theme }) => theme.colors.neutral['600']};\n }\n\n //Count displayer\n .em-ds-tree-item-children-count-displayer {\n color: ${({ theme }) => theme.colors.neutral['700']};\n }\n`;\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 <LegacyTreeListWrapper\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 </LegacyTreeListWrapper>\n </TreeListWrapper>\n );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["TreeViewContext", "TreeItem"]
|
|
7
7
|
}
|
|
@@ -59,6 +59,11 @@ const TreeListWrapper = styled.div`
|
|
|
59
59
|
.em-ds-tree-item--dragging.em-ds-tree-item__addons.em-ds-icon {
|
|
60
60
|
fill: ${({ theme }) => theme.colors.neutral["600"]};
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
//Count displayer
|
|
64
|
+
.em-ds-tree-item-children-count-displayer {
|
|
65
|
+
color: ${({ theme }) => theme.colors.neutral["700"]};
|
|
66
|
+
}
|
|
62
67
|
`;
|
|
63
68
|
const compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;
|
|
64
69
|
const normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;
|
|
@@ -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 { styled } from '@elliemae/ds-system';\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}\nconst LegacyTreeListWrapper = 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\nexport const TreeListWrapper = styled.div`\n width: max-content;\n height: 100%;\n\n // Item content\n .em-ds-tree-item.hover {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n .em-ds-tree-item.selected {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n .em-ds-tree-item.hover.selected {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n // DnD Handle\n .em-ds-icon.drag-handle {\n &[aria-disabled='true'] {\n cursor: not-allowed;\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n }\n\n // Item left icon\n .em-ds-icon.tree-item-icon.tree-item-icon-disabled {\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n\n // Rigth addons\n .em-ds-tree-item--dragging.em-ds-tree-item__addons.em-ds-icon {\n fill: ${({ theme }) => theme.colors.neutral['600']};\n }\n`;\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 <LegacyTreeListWrapper\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 </LegacyTreeListWrapper>\n </TreeListWrapper>\n );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,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 { styled } from '@elliemae/ds-system';\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}\nconst LegacyTreeListWrapper = 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\nexport const TreeListWrapper = styled.div`\n width: max-content;\n height: 100%;\n\n // Item content\n .em-ds-tree-item.hover {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n .em-ds-tree-item.selected {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n .em-ds-tree-item.hover.selected {\n &[aria-disabled='true'] {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n // DnD Handle\n .em-ds-icon.drag-handle {\n &[aria-disabled='true'] {\n cursor: not-allowed;\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n }\n\n // Item left icon\n .em-ds-icon.tree-item-icon.tree-item-icon-disabled {\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n\n // Rigth addons\n .em-ds-tree-item--dragging.em-ds-tree-item__addons.em-ds-icon {\n fill: ${({ theme }) => theme.colors.neutral['600']};\n }\n\n //Count displayer\n .em-ds-tree-item-children-count-displayer {\n color: ${({ theme }) => theme.colors.neutral['700']};\n }\n`;\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 <LegacyTreeListWrapper\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 </LegacyTreeListWrapper>\n </TreeListWrapper>\n );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-treeview",
|
|
3
|
-
"version": "3.51.0-
|
|
3
|
+
"version": "3.51.0-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tree View",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -44,23 +44,23 @@
|
|
|
44
44
|
"react-virtual": "~2.10.4",
|
|
45
45
|
"tree-model": "~1.0.7",
|
|
46
46
|
"uid": "~2.0.1",
|
|
47
|
-
"@elliemae/ds-button-v2": "3.51.0-
|
|
48
|
-
"@elliemae/ds-circular-progress-indicator": "3.51.0-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-form": "3.51.0-
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-system": "3.51.0-
|
|
56
|
-
"@elliemae/ds-truncated-tooltip-text": "3.51.0-
|
|
57
|
-
"@elliemae/ds-typescript-helpers": "3.51.0-
|
|
47
|
+
"@elliemae/ds-button-v2": "3.51.0-rc.0",
|
|
48
|
+
"@elliemae/ds-circular-progress-indicator": "3.51.0-rc.0",
|
|
49
|
+
"@elliemae/ds-classnames": "3.51.0-rc.0",
|
|
50
|
+
"@elliemae/ds-controlled-form": "3.51.0-rc.0",
|
|
51
|
+
"@elliemae/ds-drag-and-drop": "3.51.0-rc.0",
|
|
52
|
+
"@elliemae/ds-form": "3.51.0-rc.0",
|
|
53
|
+
"@elliemae/ds-props-helpers": "3.51.0-rc.0",
|
|
54
|
+
"@elliemae/ds-icons": "3.51.0-rc.0",
|
|
55
|
+
"@elliemae/ds-system": "3.51.0-rc.0",
|
|
56
|
+
"@elliemae/ds-truncated-tooltip-text": "3.51.0-rc.0",
|
|
57
|
+
"@elliemae/ds-typescript-helpers": "3.51.0-rc.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
61
61
|
"jest": "~29.7.0",
|
|
62
62
|
"styled-components": "~5.3.9",
|
|
63
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-
|
|
63
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-rc.0"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
66
|
"lodash": "^4.17.21",
|