mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-19 06:43:16 +08:00
feat: cascader dropdown-render prop (#24812)
* feat: cascader dropdown-render prop * fix: update Cascader dropdownRender type annotation * fix: set rc-cascader semver from ^ to ~ * docs: fix coding style in cascader/custom-dropdown
This commit is contained in:
07akioni
GitHub
parent
fcfd080f0a
commit
1fdccc9c73
@ -80,6 +80,46 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/cascader/demo/custom-dropdown.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-cascader-picker"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="ant-cascader-picker-label"
|
||||
/>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-cascader-picker-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-cascader-picker"
|
||||
|
||||
72
components/cascader/demo/custom-dropdown.md
Normal file
72
components/cascader/demo/custom-dropdown.md
Normal file
@ -0,0 +1,72 @@
|
||||
---
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 扩展菜单
|
||||
en-US: Custom dropdown
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `dropdownRender` 对下拉菜单进行自由扩展。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize the dropdown menu via `dropdownRender`.
|
||||
|
||||
```jsx
|
||||
import { Cascader, Divider } from 'antd';
|
||||
|
||||
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 dropdownRender(menus) {
|
||||
return (
|
||||
<div>
|
||||
{menus}
|
||||
<Divider style={{ margin: 0 }} />
|
||||
<div style={{ padding: 8 }}>The footer is not very short.</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Cascader
|
||||
options={options}
|
||||
dropdownRender={dropdownRender}
|
||||
placeholder="Please select"
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -44,6 +44,7 @@ Cascade selection box.
|
||||
| style | additional style | CSSProperties | - | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| value | selected value | string\[] \| number\[] | - | |
|
||||
| dropdownRender | Customize dropdown content | `(menus: ReactNode) => ReactNode` | - | 4.4.0 |
|
||||
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | |
|
||||
| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - | |
|
||||
|
||||
|
||||
@ -108,6 +108,7 @@ export interface CascaderProps {
|
||||
/** use this after antd@3.7.0 */
|
||||
fieldNames?: FieldNamesType;
|
||||
suffixIcon?: React.ReactNode;
|
||||
dropdownRender?: (menus: React.ReactNode) => React.ReactNode
|
||||
}
|
||||
|
||||
export interface CascaderState {
|
||||
@ -461,6 +462,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
notFoundContent,
|
||||
popupClassName,
|
||||
bordered,
|
||||
dropdownRender,
|
||||
...otherProps
|
||||
} = props;
|
||||
const mergedSize = customizeSize || size;
|
||||
@ -625,6 +627,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
loadingIcon={loadingIcon}
|
||||
popupClassName={rcCascaderPopupClassName}
|
||||
popupPlacement={this.getPopupPlacement(direction)}
|
||||
dropdownRender={dropdownRender}
|
||||
>
|
||||
{input}
|
||||
</RcCascader>
|
||||
|
||||
@ -45,6 +45,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/cOHaAyTQ3u/Cascader.svg
|
||||
| style | 自定义样式 | CSSProperties | - | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| value | 指定选中项 | string\[] \| number\[] | - | |
|
||||
| dropdownRender | 自定义下拉框内容 | `(menus: ReactNode) => ReactNode` | - | 4.4.0 |
|
||||
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - | |
|
||||
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - | |
|
||||
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
"omit.js": "^1.0.2",
|
||||
"raf": "^3.4.1",
|
||||
"rc-animate": "~3.1.0",
|
||||
"rc-cascader": "~1.2.0",
|
||||
"rc-cascader": "~1.3.0",
|
||||
"rc-checkbox": "~2.2.0",
|
||||
"rc-collapse": "~2.0.0",
|
||||
"rc-dialog": "~8.0.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user