UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

mantine.dev

mantinedev/mantine

1 lines • 8.23 kB
1
{"version":3,"file":"FlatTreeNode.cjs","names":["findElementAncestor","classes"],"sources":["../../../src/components/Tree/FlatTreeNode.tsx"],"sourcesContent":["import { memo, useRef } from 'react';\nimport { findElementAncestor } from '../../core';\nimport type { RenderNode, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface FlatTreeNodeProps {\n /** Node data from tree data */\n node: TreeNodeData;\n\n /** Nesting level of the node, starts at 1 */\n level: number;\n\n /** Value of the parent node, `null` for root nodes */\n parent: string | null;\n\n /** Whether the node has children */\n hasChildren: boolean;\n\n /** Whether the node is expanded */\n expanded: boolean;\n\n /** Tree controller instance, return value of `useTree` hook */\n tree: TreeController;\n\n /** If set, tree node with children is expanded on click @default true */\n expandOnClick?: boolean;\n\n /** If set, tree node is selected on click @default false */\n selectOnClick?: boolean;\n\n /** If set, tree node with children is expanded on space key press @default true */\n expandOnSpace?: boolean;\n\n /** If set, tree node is checked on space key press @default false */\n checkOnSpace?: boolean;\n\n /** A function to render tree node label */\n renderNode?: RenderNode;\n\n /** Style to apply to the root element, used for virtualizer positioning */\n style?: React.CSSProperties;\n\n /** Tab index for the node */\n tabIndex?: number;\n}\n\nexport const FlatTreeNode = memo(function FlatTreeNode({\n node,\n level,\n parent,\n hasChildren,\n expanded,\n tree,\n expandOnClick = true,\n selectOnClick,\n expandOnSpace = true,\n checkOnSpace,\n renderNode,\n style,\n tabIndex = -1,\n}: FlatTreeNodeProps) {\n const ref = useRef<HTMLDivElement>(null);\n const isLoading = tree.isNodeLoading(node.value);\n const loadError = tree.getNodeLoadError(node.value);\n const selected = tree.selectedState.includes(node.value);\n\n const handleClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n\n if (expandOnClick && hasChildren) {\n tree.toggleExpanded(node.value);\n }\n\n if (selectOnClick) {\n tree.select(node.value);\n }\n\n ref.current?.focus();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.nativeEvent.code === 'ArrowRight') {\n event.stopPropagation();\n event.preventDefault();\n\n if (expanded && hasChildren) {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n const nodes = root\n ? Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n (treeNode) => treeNode.style.display !== 'none'\n )\n : [];\n const index = nodes.indexOf(event.currentTarget as HTMLElement);\n if (index !== -1) {\n nodes[index + 1]?.focus();\n }\n } else if (hasChildren) {\n tree.expand(node.value);\n }\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n event.stopPropagation();\n event.preventDefault();\n\n if (expanded && hasChildren) {\n tree.collapse(node.value);\n } else if (parent) {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n const parentElement = root?.querySelector<HTMLElement>(\n `[role=treeitem][data-value=\"${CSS.escape(parent)}\"]`\n );\n parentElement?.focus();\n }\n }\n\n if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n if (!root) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n const nodes = Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n (treeNode) => treeNode.style.display !== 'none'\n );\n const index = nodes.indexOf(event.currentTarget as HTMLElement);\n\n if (index === -1) {\n return;\n }\n\n const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n nodes[nextIndex]?.focus();\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (expandOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n tree.toggleExpanded(node.value);\n }\n\n if (checkOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n if (tree.isNodeChecked(node.value)) {\n tree.uncheckNode(node.value);\n } else {\n tree.checkNode(node.value);\n }\n }\n }\n };\n\n const elementProps = {\n className: classes.label,\n style: {} as React.CSSProperties,\n onClick: handleClick,\n 'data-selected': selected || undefined,\n 'data-value': node.value,\n };\n\n return (\n <div\n ref={ref}\n className={classes.node}\n style={{\n ...({\n '--label-offset': `calc(var(--level-offset, var(--mantine-spacing-lg)) * ${level - 1})`,\n } as React.CSSProperties),\n ...style,\n }}\n role=\"treeitem\"\n aria-selected={selected}\n aria-expanded={hasChildren ? expanded : undefined}\n data-value={node.value}\n data-selected={selected || undefined}\n data-level={level}\n tabIndex={tabIndex}\n onKeyDown={handleKeyDown}\n >\n {typeof renderNode === 'function' ? (\n renderNode({\n node,\n level,\n selected,\n tree,\n expanded,\n hasChildren,\n isLoading,\n loadError,\n elementProps,\n dragHandleProps: undefined,\n })\n ) : (\n <div {...elementProps}>{node.label}</div>\n )}\n </div>\n );\n});\n\nFlatTreeNode.displayName = '@mantine/core/FlatTreeNode';\n"],"mappings":"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"}