ant-design/components/cascader/demo/custom-dropdown.tsx
Jony J af84ba5176
chore(cascader): add deprecated warning for dropdown api (#53133)
* chore: optimize deprecated logic

* docs: update doc

* Update components/cascader/index.zh-CN.md

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: Jony J <1844749591@qq.com>

* Update components/cascader/index.zh-CN.md

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: Jony J <1844749591@qq.com>

* Update components/cascader/index.zh-CN.md

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: Jony J <1844749591@qq.com>

* docs: update en doc

* refactor: update Cascader component to replace deprecated props with new alternatives

---------

Signed-off-by: Jony J <1844749591@qq.com>
Co-authored-by: thinkasany <480968828@qq.com>
2025-03-12 15:04:07 +08:00

58 lines
1.0 KiB
TypeScript

import React from 'react';
import { Cascader, Divider } from 'antd';
interface Option {
value: string;
label: string;
children?: Option[];
}
const options: Option[] = [
{
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',
},
],
},
],
},
];
const popupRender = (menus: React.ReactNode) => (
<div>
{menus}
<Divider style={{ margin: 0 }} />
<div style={{ padding: 8 }}>The footer is not very short.</div>
</div>
);
const App: React.FC = () => (
<Cascader options={options} popupRender={popupRender} placeholder="Please select" />
);
export default App;