Added empty message into tree

nitrogenous · Jan 22, 2024 · 4ccacaf · 4ccacaf
1 parent 50012c1
commit 4ccacaf
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 20 deletions.
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PrimeReactContext } from '../api/Api';
+import { localeOption, PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { useUpdateEffect } from '../hooks/useUpdateEffect';
@@ -408,33 +408,59 @@ export const Tree = React.memo(
             );
         };
 
-        const createRootChildren = () => {
-            if (props.filter) {
-                filterChanged.current = true;
-                _filter();
-            }
+        const createEmptyMessageNode = () => {
+            const emptyMessageProps = mergeProps(
+                {
+                    className: classNames(props.contentClassName, cx('emptyMessage'))
+                },
+                ptm('emptyMessage')
+            );
+
+            return (
+                <li {...emptyMessageProps}>
+                    <span className="p-treenode-content">{localeOption('emptyMessage')}</span>
+                </li>
+            );
+        };
 
-            const value = getRootNode();
+        const createRootChildrenContainer = (children) => {
+            const containerProps = mergeProps(
+                {
+                    className: classNames(props.contentClassName, cx('container')),
+                    role: 'tree',
+                    'aria-label': props.ariaLabel,
+                    'aria-labelledby': props.ariaLabelledBy,
+                    style: props.contentStyle,
+                    ...ariaProps
+                },
+                ptm('container')
+            );
 
+            return <ul {...containerProps}>{children}</ul>;
+        };
+
+        const createRootChildren = (value) => {
             return value.map((node, index) => createRootChild(node, index, index === value.length - 1));
         };
 
         const createModel = () => {
             if (props.value) {
-                const rootNodes = createRootChildren();
-                const containerProps = mergeProps(
-                    {
-                        className: classNames(props.contentClassName, cx('container')),
-                        role: 'tree',
-                        'aria-label': props.ariaLabel,
-                        'aria-labelledby': props.ariaLabelledBy,
-                        style: props.contentStyle,
-                        ...ariaProps
-                    },
-                    ptm('container')
-                );
+                if (props.filter) {
+                    filterChanged.current = true;
+                    _filter();
+                }
 
-                return <ul {...containerProps}>{rootNodes}</ul>;
+                const value = getRootNode();
+
+                if (value.length > 0) {
+                    const rootNodes = createRootChildren(value);
+
+                    return createRootChildrenContainer(rootNodes);
+                } else {
+                    const emptyMessageNode = createEmptyMessageNode();
+
+                    return createRootChildrenContainer(emptyMessageNode);
+                }
             }
 
             return null;

diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js
@@ -6,6 +6,7 @@ const classes = {
     loadingIcon: 'p-tree-loading-icon',
     loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
     searchIcon: 'p-tree-filter-icon',
+    emptyMessage: 'p-treenode p-tree-empty-message',
     filterContainer: 'p-tree-filter-container',
     input: 'p-tree-filter p-inputtext p-component',
     header: 'p-tree-header',
@@ -117,6 +118,7 @@ export const TreeBase = ComponentBase.extend({
         value: null,
         checkboxIcon: null,
         disabled: false,
+        emptyMessage: null,
         selectionMode: null,
         selectionKeys: null,
         onSelectionChange: null,