mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
Merge branch 'master' into feature
* master: 📝 fix demo order Fixes #10576 (#13703) doc: update form & layout docs (#13701) update doc close #11802 🐛 Fix Badge offset not working when count is ReactNode
This commit is contained in:
commit
b1a67de35e
@ -173,7 +173,10 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
|
||||
}
|
||||
if (displayComponent) {
|
||||
return React.cloneElement(displayComponent, {
|
||||
className: `${prefixCls}-custom-component`,
|
||||
className: classNames(
|
||||
`${prefixCls}-custom-component`,
|
||||
displayComponent.props && displayComponent.props.className,
|
||||
),
|
||||
});
|
||||
}
|
||||
return createElement(component as any, newProps, this.renderNumberElement(prefixCls));
|
||||
|
@ -2195,3 +2195,18 @@ exports[`Badge should render when count is changed 5`] = `
|
||||
</Consumer>
|
||||
</Badge>
|
||||
`;
|
||||
|
||||
exports[`Badge should support offset when count is a ReactNode 1`] = `
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
/>
|
||||
<span
|
||||
class="ant-scroll-number-custom-component custom"
|
||||
style="right:-10px;margin-top:20px;color:#f5222d"
|
||||
/>
|
||||
</span>
|
||||
`;
|
||||
|
@ -72,4 +72,14 @@ describe('Badge', () => {
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/13694
|
||||
it('should support offset when count is a ReactNode', () => {
|
||||
const wrapper = render(
|
||||
<Badge count={<span className="custom" style={{ color: '#f5222d' }} />} offset={[10, 20]}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>,
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
@ -111,7 +111,16 @@ export default class Badge extends React.Component<BadgeProps, any> {
|
||||
|
||||
renderDispayComponent() {
|
||||
const { count } = this.props;
|
||||
return count && typeof count === 'object' ? (count as React.ReactElement<any>) : undefined;
|
||||
const customNode = count as React.ReactElement<any>;
|
||||
if (!customNode || typeof customNode !== 'object') {
|
||||
return undefined;
|
||||
}
|
||||
return React.cloneElement(customNode, {
|
||||
style: {
|
||||
...this.getStyleWithOffset(),
|
||||
...(customNode.props && customNode.props.style),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
renderBadgeNumber(prefixCls: string, scrollNumberPrefixCls: string) {
|
||||
@ -129,8 +138,6 @@ export default class Badge extends React.Component<BadgeProps, any> {
|
||||
[`${prefixCls}-status-${status}`]: !!status,
|
||||
});
|
||||
|
||||
const styleWithOffset = this.getStyleWithOffset();
|
||||
|
||||
return hidden ? null : (
|
||||
<ScrollNumber
|
||||
prefixCls={scrollNumberPrefixCls}
|
||||
@ -139,7 +146,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
|
||||
count={displayCount}
|
||||
displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
|
||||
title={this.getScollNumberTitle()}
|
||||
style={styleWithOffset}
|
||||
style={this.getStyleWithOffset()}
|
||||
key="scrollNumber"
|
||||
/>
|
||||
);
|
||||
@ -174,12 +181,14 @@ export default class Badge extends React.Component<BadgeProps, any> {
|
||||
[`${prefixCls}-status-${status}`]: !!status,
|
||||
});
|
||||
|
||||
const styleWithOffset = this.getStyleWithOffset();
|
||||
|
||||
// <Badge status="success" />
|
||||
if (!children && status) {
|
||||
return (
|
||||
<span {...restProps} className={this.getBadgeClassName(prefixCls)} style={styleWithOffset}>
|
||||
<span
|
||||
{...restProps}
|
||||
className={this.getBadgeClassName(prefixCls)}
|
||||
style={this.getStyleWithOffset()}
|
||||
>
|
||||
<span className={statusCls} />
|
||||
<span className={`${prefixCls}-status-text`}>{text}</span>
|
||||
</span>
|
||||
|
@ -69,7 +69,7 @@
|
||||
|
||||
&-extra {
|
||||
float: right;
|
||||
padding: @card-head-padding + 1.5px 0;
|
||||
padding: @card-head-padding 0;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
|
@ -85,8 +85,7 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
|
||||
| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
|
||||
| isFieldValidating | Check if the specified field is being validated. | Function(name) |
|
||||
| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
|
||||
| setFields | Set the value and error of a field. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]: { value: any, errors: [Error] } }) |
|
||||
| setFields | Set value and error state of fields | ({<br /> \[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
|
||||
| setFields | Set value and error state of fields. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | ({<br /> \[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
|
||||
| setFieldsValue | Set the value of a field. (Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [reason](https://github.com/ant-design/ant-design/issues/2985)) | ({ \[fieldName\]: value }) => void |
|
||||
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields. | (<br /> \[fieldNames: string\[]],<br /> \[options: object\],<br /> callback(errors, values)<br />) => void |
|
||||
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
|
||||
|
@ -90,7 +90,7 @@ The sidebar.
|
||||
| breakpoint | [breakpoints](/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
|
||||
| className | container className | string | - |
|
||||
| collapsed | to set the current status | boolean | - |
|
||||
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 64 |
|
||||
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 |
|
||||
| collapsible | whether can be collapsed | boolean | false |
|
||||
| defaultCollapsed | to set the initial status | boolean | false |
|
||||
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
|
||||
|
@ -91,7 +91,7 @@ title: Layout
|
||||
| breakpoint | 触发响应式布局的[断点](/components/grid#api) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
|
||||
| className | 容器 className | string | - |
|
||||
| collapsed | 当前收起状态 | boolean | - |
|
||||
| collapsedWidth | 收缩宽度,设置为 0 会出现特殊 trigger | number | 64 |
|
||||
| collapsedWidth | 收缩宽度,设置为 0 会出现特殊 trigger | number | 80 |
|
||||
| collapsible | 是否可收起 | boolean | false |
|
||||
| defaultCollapsed | 是否默认收起 | boolean | false |
|
||||
| reverseArrow | 翻转折叠提示箭头的方向,当 Sider 在右边时可以使用 | boolean | false |
|
||||
|
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 7
|
||||
order: 6
|
||||
title:
|
||||
en-US: Filter and sorter
|
||||
zh-CN: 筛选和排序
|
||||
|
@ -61,6 +61,7 @@ const columns = [{
|
||||
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
|
||||
| expandedRowKeys | Current expanded row keys | string\[] | - |
|
||||
| expandedRowRender | Expanded container render for each row | Function(record, index, indent, expanded):ReactNode | - |
|
||||
| expandIcon | Customize row expand Icon. Ref [example](http://react-component.github.io/table/examples/expandIcon.html) | Function(props):ReactNode | - |
|
||||
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` |
|
||||
| footer | Table footer renderer | Function(currentPageData) | |
|
||||
| indentSize | Indent size in pixels of tree data | number | 15 |
|
||||
|
@ -66,6 +66,7 @@ const columns = [{
|
||||
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
|
||||
| expandedRowKeys | 展开的行,控制属性 | string\[] | - |
|
||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):ReactNode | - |
|
||||
| expandIcon | 自定义展开图标,参考[示例](http://react-component.github.io/table/examples/expandIcon.html) | Function(props):ReactNode | - |
|
||||
| expandRowByClick | 通过点击行来展开子行 | boolean | `false` |
|
||||
| footer | 表格尾部 | Function(currentPageData) | |
|
||||
| indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 |
|
||||
|
Loading…
Reference in New Issue
Block a user