From 940acc2ff9556082c4e7804b16d87826e3f0990d Mon Sep 17 00:00:00 2001 From: wangning Date: Thu, 18 Aug 2022 23:04:10 +0800 Subject: [PATCH 1/2] feat: replace cascader dropdownClassName to popupClassName --- docs/demo/AutoComplete.md | 4 ++ docs/demo/Cascader.md | 4 ++ docs/demo/basic.md | 4 -- docs/examples/{basic.tsx => AutoComplete.tsx} | 2 +- docs/examples/Cascader.tsx | 47 +++++++++++++++ package.json | 5 +- src/Cascader.tsx | 33 +++++++++++ src/index.tsx | 7 ++- tests/Cascader.test.tsx | 58 +++++++++++++++++++ 9 files changed, 154 insertions(+), 10 deletions(-) create mode 100644 docs/demo/AutoComplete.md create mode 100644 docs/demo/Cascader.md delete mode 100644 docs/demo/basic.md rename docs/examples/{basic.tsx => AutoComplete.tsx} (83%) create mode 100644 docs/examples/Cascader.tsx create mode 100644 src/Cascader.tsx create mode 100644 tests/Cascader.test.tsx diff --git a/docs/demo/AutoComplete.md b/docs/demo/AutoComplete.md new file mode 100644 index 0000000..ada1846 --- /dev/null +++ b/docs/demo/AutoComplete.md @@ -0,0 +1,4 @@ +## AutoComplete + + + diff --git a/docs/demo/Cascader.md b/docs/demo/Cascader.md new file mode 100644 index 0000000..c999b1f --- /dev/null +++ b/docs/demo/Cascader.md @@ -0,0 +1,4 @@ +## Cascader + + + diff --git a/docs/demo/basic.md b/docs/demo/basic.md deleted file mode 100644 index ad6f032..0000000 --- a/docs/demo/basic.md +++ /dev/null @@ -1,4 +0,0 @@ -## basic - - - diff --git a/docs/examples/basic.tsx b/docs/examples/AutoComplete.tsx similarity index 83% rename from docs/examples/basic.tsx rename to docs/examples/AutoComplete.tsx index 19f15ba..4d50a51 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/AutoComplete.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { AutoComplete, ConfigProvider } from '../../src'; +import { AutoComplete } from '../../src'; export default () => { return ( diff --git a/docs/examples/Cascader.tsx b/docs/examples/Cascader.tsx new file mode 100644 index 0000000..ca645fd --- /dev/null +++ b/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 ( + + ); +}; diff --git a/package.json b/package.json index 33d826c..9037802 100644 --- a/package.json +++ b/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.16", "dumi": "^1.1.0", "eslint": "^7.18.0", "father": "^4.0.0-rc.8", diff --git a/src/Cascader.tsx b/src/Cascader.tsx new file mode 100644 index 0000000..fc6f450 --- /dev/null +++ b/src/Cascader.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { Cascader } from 'antd'; +import warning from 'rc-util/lib/warning'; + +type CascaderProps = Parameters[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, + `[Compatible: Cascader] 'dropdownClassName' is deprecated. Please use 'popupClassName' instead.`, + ); + + return ( + + ); + }, +); + +if (process.env.NODE_ENV !== 'production') { + CompatibleCascader.displayName = 'CompatibleCascader'; +} + +export default CompatibleCascader; diff --git a/src/index.tsx b/src/index.tsx index 3c87804..fd5b5e1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ -export * from 'antd'; - import AutoComplete from './AutoComplete'; -export { AutoComplete }; +import Cascader from './Cascader'; + +export default { AutoComplete,Cascader}; +export * from 'antd'; diff --git a/tests/Cascader.test.tsx b/tests/Cascader.test.tsx new file mode 100644 index 0000000..78e5b2a --- /dev/null +++ b/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( + + ); + + expect(errSpy).toHaveBeenCalledWith( + "Warning: [Compatible: Cascader] 'dropdownClassName' is deprecated. Please use 'popupClassName' instead.", + ); + + // TODO: Remove this when antd release version + // expect(container.querySelector('.test')).toBeTruthy(); + + errSpy.mockRestore(); + }); +}); From e9218963f56dd1d5a91b1679bac305a23bfa3ce1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Fri, 19 Aug 2022 15:08:52 +0800 Subject: [PATCH 2/2] feat: edit warning info --- package.json | 2 +- src/AutoComplete.tsx | 2 +- src/Cascader.tsx | 3 +-- src/index.tsx | 4 ++-- tests/AutoComplete.test.tsx | 2 +- tests/Cascader.test.tsx | 4 ++-- 6 files changed, 8 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 9037802..fa601c7 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@umijs/fabric": "^2.5.2", - "antd": "^5.0.0-experimental.16", + "antd": "^5.0.0-experimental.18", "dumi": "^1.1.0", "eslint": "^7.18.0", "father": "^4.0.0-rc.8", diff --git a/src/AutoComplete.tsx b/src/AutoComplete.tsx index 76629b2..f23f2e7 100644 --- a/src/AutoComplete.tsx +++ b/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 ( diff --git a/src/Cascader.tsx b/src/Cascader.tsx index fc6f450..acb6bc9 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -17,9 +17,8 @@ const CompatibleCascader = React.forwardRef( ) => { warning( !dropdownClassName, - `[Compatible: Cascader] 'dropdownClassName' is deprecated. Please use 'popupClassName' instead.`, + "[antd: Cascader] `dropdownClassName` is removed in v5, please use `popupClassName` instead.", ); - return ( ); diff --git a/src/index.tsx b/src/index.tsx index fd5b5e1..97e6a56 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ +export * from 'antd'; import AutoComplete from './AutoComplete'; import Cascader from './Cascader'; -export default { AutoComplete,Cascader}; -export * from 'antd'; +export { AutoComplete,Cascader}; diff --git a/tests/AutoComplete.test.tsx b/tests/AutoComplete.test.tsx index 20a96e7..8211f71 100644 --- a/tests/AutoComplete.test.tsx +++ b/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 diff --git a/tests/Cascader.test.tsx b/tests/Cascader.test.tsx index 78e5b2a..89c0699 100644 --- a/tests/Cascader.test.tsx +++ b/tests/Cascader.test.tsx @@ -46,8 +46,8 @@ describe('Cascader', () => { ); - expect(errSpy).toHaveBeenCalledWith( - "Warning: [Compatible: Cascader] 'dropdownClassName' is deprecated. Please use 'popupClassName' instead.", + expect(errSpy).toHaveBeenNthCalledWith(1, + "Warning: [antd: Cascader] `dropdownClassName` is removed in v5, please use `popupClassName` instead.", ); // TODO: Remove this when antd release version