fix: Cascader notFoundContent width (ant-design#18325)

* 🐛 Fix Cascader notFoundContent width close ant-design#18176 * 🔒 lock less to 3.9.0 less/less.js#3416 less/less.js#3414
d3clan · Aug 17, 2019 · 4e9c477 · 4e9c477
1 parent c0f98be
commit 4e9c477
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 3 deletions.
diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap
@@ -349,6 +349,74 @@ exports[`Cascader can be selected 3`] = `
 </div>
 `;
 
+exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft slide-up-appear"
+    style="left: -999px; top: -995px;"
+  >
+    <div>
+      <ul
+        class="ant-cascader-menu"
+        style="height: auto;"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
+          role="menuitem"
+          title=""
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#F5F5F5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#D9D9D9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#FAFAFA"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <p
+              class="ant-empty-description"
+            >
+              No Data
+            </p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Cascader popup correctly when panel is hidden 1`] = `
 <div>
   <div

diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js
@@ -471,4 +471,16 @@ describe('Cascader', () => {
       mount(<Cascader options={optionsWithChildrenNull} />);
     }).not.toThrow();
   });
+
+  // https://github.com/ant-design/ant-design/issues/18176
+  it('have a notFoundContent that fit trigger input width', () => {
+    const wrapper = mount(<Cascader popupVisible options={[]} fieldNames={{ label: 'name', value: 'code', children: 'items' }} />);
+    const popupWrapper = mount(
+      wrapper
+        .find('Trigger')
+        .instance()
+        .getComponent(),
+    );
+    expect(popupWrapper.render()).toMatchSnapshot();
+  });
 });
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
@@ -496,12 +496,12 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     ]);
 
     let { options } = props;
+    const names: FilledFieldNamesType = getFilledFieldNames(this.props);
     if (options && options.length > 0) {
       if (state.inputValue) {
         options = this.generateFilteredOptions(prefixCls, renderEmpty);
       }
     } else {
-      const names: FilledFieldNamesType = getFilledFieldNames(this.props);
       options = [
         {
           [names.label]: notFoundContent || renderEmpty('Cascader'),
@@ -519,7 +519,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
 
     const dropdownMenuColumnStyle: { width?: number; height?: string } = {};
     const isNotFound =
-      (options || []).length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND';
+      (options || []).length === 1 && options[0][names.value] === 'ANT_CASCADER_NOT_FOUND';
     if (isNotFound) {
       dropdownMenuColumnStyle.height = 'auto'; // Height of one row.
     }
@@ -554,7 +554,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
           value={state.inputValue}
           disabled={disabled}
           readOnly={!showSearch}
-          autoComplete={inputProps.autoComplete || "off"}
+          autoComplete={inputProps.autoComplete || 'off'}
           onClick={showSearch ? this.handleInputClick : undefined}
           onBlur={showSearch ? this.handleInputBlur : undefined}
           onKeyDown={this.handleKeyDown}

diff --git a/package.json b/package.json
@@ -144,6 +144,7 @@
     "jest": "^24.8.0",
     "jsdom": "^15.1.1",
     "jsonml.js": "^0.1.0",
+    "less": "~3.9.0",
     "logrocket": "^1.0.0",
     "logrocket-react": "^3.0.0",
     "lz-string": "^1.4.4",