fix(pro:tree): empty state is not centered (#1394)

IDuxFE · Jan 11, 2023 · 2c58ca2 · 2c58ca2
1 parent 1457cfd
commit 2c58ca2
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
@@ -687,7 +687,7 @@ exports[`Tree > render work 1`] = `
 `;
 
 exports[`Tree > searchFn work 1`] = `
-"<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
+"<div class=\\"ix-tree ix-tree-active ix-tree-empty\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
   <div class=\\"ix-empty ix-empty-simple\\">
     <div class=\\"ix-empty-image\\"><svg width=\\"80\\" height=\\"60\\" viewBox=\\"0 0 80 60\\" xmlns=\\"http://www.w3.org/2000/svg\\">
@@ -891,7 +891,7 @@ exports[`Tree > searchValue work 2`] = `
 `;
 
 exports[`Tree > searchValue work 3`] = `
-"<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
+"<div class=\\"ix-tree ix-tree-active ix-tree-empty\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
   <div class=\\"ix-empty ix-empty-simple\\">
     <div class=\\"ix-empty-image\\"><svg width=\\"80\\" height=\\"60\\" viewBox=\\"0 0 80 60\\" xmlns=\\"http://www.w3.org/2000/svg\\">

diff --git a/packages/components/tree/__tests__/tree.spec.ts b/packages/components/tree/__tests__/tree.spec.ts
@@ -664,6 +664,7 @@ describe('Tree', () => {
       props: { dataSource: [], empty: { description: emptyDescription } },
     })
 
+    expect(wrapper.classes()).toContain('ix-tree-empty')
     expect(wrapper.find('.ix-empty').text()).toBe(emptyDescription)
   })
 
@@ -673,6 +674,7 @@ describe('Tree', () => {
       slots: { empty: () => h(IxEmpty, { description: 'empty slot' }) },
     })
 
+    expect(wrapper.classes()).toContain('ix-tree-empty')
     expect(wrapper.find('.ix-empty-description').text()).toBe('empty slot')
   })
 

diff --git a/packages/components/tree/src/Tree.tsx b/packages/components/tree/src/Tree.tsx
@@ -113,6 +113,7 @@ export default defineComponent({
         [`${prefixCls}-auto-height`]: autoHeight.value,
         [`${prefixCls}-focused`]: focused.value,
         [`${prefixCls}-show-line`]: mergedShowLine.value,
+        [`${prefixCls}-empty`]: !flattedNodes.value.length,
       }
     })
 

diff --git a/packages/components/tree/style/index.less b/packages/components/tree/style/index.less
@@ -131,6 +131,12 @@
     }
   }
 
+  &.@{tree-prefix}-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .@{tree-node-prefix} {
     position: relative;
     display: flex;