Merge e921896 into 2d8c213

docs/demo/AutoComplete.md

@@ -0,0 +1,4 @@
+## AutoComplete
+
+
+<code src="../examples/AutoComplete.tsx" />

docs/demo/Cascader.md

@@ -0,0 +1,4 @@
+## Cascader
+
+
+<code src="../examples/Cascader.tsx" />

docs/examples/basic.tsx → docs/examples/AutoComplete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AutoComplete, ConfigProvider } from '../../src';
+import { AutoComplete } from '../../src';
 
 export default () => {
   return (

docs/examples/Cascader.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Cascader } from '../../src';
+
+export default () => {
+  const options = [
+    {
+      value: 'zhejiang',
+      label: 'Zhejiang',
+      children: [
+        {
+          value: 'hangzhou',
+          label: 'Hangzhou',
+          children: [
+            {
+              value: 'xihu',
+              label: 'West Lake',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 'jiangsu',
+      label: 'Jiangsu',
+      children: [
+        {
+          value: 'nanjing',
+          label: 'Nanjing',
+          children: [
+            {
+              value: 'zhonghuamen',
+              label: 'Zhong Hua Men',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  function onChange(value) {
+    console.log(value);
+  }
+
+  return (
+    <Cascader options={options} onChange={onChange} placeholder="Please select" />
+  );
+};

package.json

@@ -40,7 +40,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "classnames": "^2.2.6"
+    "classnames": "^2.2.6",
+    "dayjs": "^1.11.4"
   },
   "peerDependencies": {
     "antd": "4.x",
@@ -56,7 +57,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^2.5.2",
-    "antd": "^5.0.0-experimental.10",
+    "antd": "^5.0.0-experimental.18",
     "dumi": "^1.1.0",
     "eslint": "^7.18.0",
     "father": "^4.0.0-rc.8",

src/AutoComplete.tsx

@@ -17,7 +17,7 @@ const CompatibleAutoComplete = React.forwardRef(
   ) => {
     warning(
       !dropdownClassName,
-      `[Compatible: AutoComplete] 'dropdownClassName' is deprecated. Please use 'popupClassName' instead.`,
+      "[antd: AutoComplete] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
     );
 
     return (

src/Cascader.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Cascader } from 'antd';
+import warning from 'rc-util/lib/warning';
+
+type CascaderProps = Parameters<typeof Cascader>[0];
+type CascaderRef = CascaderProps['ref'];
+
+type CompatibleCascaderProps = CascaderProps & {
+  /** @deprecated Please use `popupClassName` instead. */
+  dropdownClassName?: string;
+};
+
+const CompatibleCascader = React.forwardRef(
+  (
+    { dropdownClassName, popupClassName, ...restProps }: CompatibleCascaderProps,
+    ref: CascaderRef,
+  ) => {
+    warning(
+      !dropdownClassName,
+      "[antd: Cascader] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
+    );
+    return (
+      <Cascader {...restProps} popupClassName={popupClassName || dropdownClassName} ref={ref} />
+    );
+  },
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CompatibleCascader.displayName = 'CompatibleCascader';
+}
+
+export default CompatibleCascader;

src/index.tsx

@@ -1,4 +1,5 @@
 export * from 'antd';
-
 import AutoComplete from './AutoComplete';
-export { AutoComplete };
+import Cascader from './Cascader';
+
+export { AutoComplete,Cascader};

tests/AutoComplete.test.tsx

@@ -16,7 +16,7 @@ describe('AutoComplete', () => {
     );
 
     expect(errSpy).toHaveBeenCalledWith(
-      "Warning: [Compatible: AutoComplete] 'dropdownClassName' is deprecated. Please use 'popupClassName' instead.",
+      "Warning: [antd: AutoComplete] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
     );
 
     // TODO: Remove this when antd release version

tests/Cascader.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Cascader } from '../src';
+import { render } from '@testing-library/react';
+
+describe('Cascader', () => {
+
+  const options = [
+    {
+      value: 'zhejiang',
+      label: 'Zhejiang',
+      children: [
+        {
+          value: 'hangzhou',
+          label: 'Hangzhou',
+          children: [
+            {
+              value: 'xihu',
+              label: 'West Lake',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 'jiangsu',
+      label: 'Jiangsu',
+      children: [
+        {
+          value: 'nanjing',
+          label: 'Nanjing',
+          children: [
+            {
+              value: 'zhonghuamen',
+              label: 'Zhong Hua Men',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  it('dropdownClassName', async () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { container } = render(
+      <Cascader options={options} dropdownClassName="test" />
+    );
+
+    expect(errSpy).toHaveBeenNthCalledWith(1,
+      "Warning: [antd: Cascader] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
+    );
+
+    // TODO: Remove this when antd release version
+    // expect(container.querySelector('.test')).toBeTruthy();
+
+    errSpy.mockRestore();
+  });
+});