fix: empty in cascader/select/table/treeSelect (#24279)

* fix: empty in cascader\select\table\treeSelect * fix: snap
ant-design · May 19, 2020 · ce78029 · ce78029
1 parent 8bd1088
commit ce78029
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 78 deletions.
diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap
@@ -608,7 +608,7 @@ exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
         class="ant-cascader-menu"
       >
         <li
-          class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
+          class="ant-cascader-menu-item"
           role="menuitem"
           title=""
         >
@@ -1493,7 +1493,7 @@ exports[`Cascader should render not found content 1`] = `
       ],
     }
   }
-  className=""
+  className="ant-cascader-menu-empty"
   destroyPopupOnHide={false}
   getClassNameFromAlign={[Function]}
   getRootDomNode={[Function]}
@@ -1552,7 +1552,7 @@ exports[`Cascader should render not found content 1`] = `
           target={[Function]}
         >
           <PopupInner
-            className="ant-cascader-menus"
+            className="ant-cascader-menus ant-cascader-menu-empty"
             hiddenClassName="ant-cascader-menus-hidden"
             onMouseDown={[Function]}
             onTouchStart={[Function]}
@@ -1566,7 +1566,7 @@ exports[`Cascader should render not found content 1`] = `
             visible={true}
           >
             <div
-              className="ant-cascader-menus"
+              className="ant-cascader-menus ant-cascader-menu-empty"
               onMouseDown={[Function]}
               onTouchStart={[Function]}
               style={
@@ -1687,7 +1687,7 @@ exports[`Cascader should render not found content 1`] = `
                     },
                   ]
                 }
-                popupClassName=""
+                popupClassName="ant-cascader-menu-empty"
                 popupPlacement="bottomLeft"
                 popupVisible={true}
                 prefixCls="ant-cascader"
@@ -1808,7 +1808,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
       ],
     }
   }
-  className=""
+  className="ant-cascader-menu-empty"
   destroyPopupOnHide={false}
   getClassNameFromAlign={[Function]}
   getRootDomNode={[Function]}
@@ -1867,7 +1867,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
           target={[Function]}
         >
           <PopupInner
-            className="ant-cascader-menus"
+            className="ant-cascader-menus ant-cascader-menu-empty"
             hiddenClassName="ant-cascader-menus-hidden"
             onMouseDown={[Function]}
             onTouchStart={[Function]}
@@ -1881,7 +1881,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
             visible={true}
           >
             <div
-              className="ant-cascader-menus"
+              className="ant-cascader-menus ant-cascader-menu-empty"
               onMouseDown={[Function]}
               onTouchStart={[Function]}
               style={
@@ -1988,15 +1988,14 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                 options={
                   Array [
                     Object {
-                      "disabled": true,
                       "label": <Context.Consumer>
                         [Function]
                       </Context.Consumer>,
                       "value": "ANT_CASCADER_NOT_FOUND",
                     },
                   ]
                 }
-                popupClassName=""
+                popupClassName="ant-cascader-menu-empty"
                 popupPlacement="bottomLeft"
                 popupVisible={true}
                 prefixCls="ant-cascader"
@@ -2011,7 +2010,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                     style={Object {}}
                   >
                     <li
-                      className="ant-cascader-menu-item ant-cascader-menu-item-disabled"
+                      className="ant-cascader-menu-item"
                       key="ANT_CASCADER_NOT_FOUND"
                       onClick={[Function]}
                       onDoubleClick={[Function]}

diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
@@ -535,7 +535,6 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
             {
               [names.label]: notFoundContent || renderEmpty('Cascader'),
               [names.value]: 'ANT_CASCADER_NOT_FOUND',
-              disabled: true,
             },
           ];
         }
@@ -610,8 +609,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
 
         const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
         const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon', 'bordered']);
-        const rcCascaderRtlPopupClassName = classNames(popupClassName, {
+        const rcCascaderPopupClassName = classNames(popupClassName, {
           [`${prefixCls}-menu-${direction}`]: direction === 'rtl',
+          [`${prefixCls}-menu-empty`]:
+            options.length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND',
         });
         return (
           <RcCascader
@@ -626,7 +627,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
             dropdownMenuColumnStyle={dropdownMenuColumnStyle}
             expandIcon={expandIcon}
             loadingIcon={loadingIcon}
-            popupClassName={rcCascaderRtlPopupClassName}
+            popupClassName={rcCascaderPopupClassName}
             popupPlacement={this.getPopupPlacement(direction)}
           >
             {input}

diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
@@ -204,6 +204,11 @@
         background: transparent;
       }
     }
+    .@{cascader-prefix-cls}-menu-empty & {
+      color: @disabled-color;
+      cursor: default;
+      pointer-events: none;
+    }
     &-active:not(&-disabled) {
       &,
       &:hover {

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -19481,7 +19481,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
       class="config-spin-container"
     >
       <div
-        class="config-table"
+        class="config-table config-table-empty"
       >
         <div
           class="config-table-container"
@@ -19755,7 +19755,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
       class="config-spin-container"
     >
       <div
-        class="config-table"
+        class="config-table config-table-empty"
       >
         <div
           class="config-table-container"
@@ -20029,7 +20029,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
       class="config-spin-container"
     >
       <div
-        class="config-table config-table-middle"
+        class="config-table config-table-middle config-table-empty"
       >
         <div
           class="config-table-container"
@@ -20303,7 +20303,7 @@ exports[`ConfigProvider components Table normal 1`] = `
       class="ant-spin-container"
     >
       <div
-        class="ant-table"
+        class="ant-table ant-table-empty"
       >
         <div
           class="ant-table-container"
@@ -20577,7 +20577,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
       class="ant-spin-container"
     >
       <div
-        class="prefix-Table"
+        class="prefix-Table prefix-Table-empty"
       >
         <div
           class="prefix-Table-container"

diff --git a/components/empty/__tests__/__snapshots__/demo.test.js.snap b/components/empty/__tests__/__snapshots__/demo.test.js.snap
@@ -510,7 +510,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
           class="ant-spin-container"
         >
           <div
-            class="ant-table"
+            class="ant-table ant-table-empty"
           >
             <div
               class="ant-table-container"