mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactor: change usecontext of divider prepare for v5 (#34246)

Browse Source 
Co-authored-by: zengguhao.zgh <zengguhao.zgh@alibaba-inc.com>
This commit is contained in:
Long Hao (龙濠) 2022-03-02 10:10:29 +08:00 committed by GitHub
parent ee6c23c584
commit cfca106c4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
components/divider/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
export interface DividerProps { export interface DividerProps {
prefixCls?: string; prefixCls?: string;
@ -14,56 +14,54 @@ export interface DividerProps {
plain?: boolean; plain?: boolean;
} }
const Divider: React.FC<DividerProps> = props => ( const Divider: React.FC<DividerProps> = props => {
<ConfigConsumer> const { getPrefixCls, direction } = React.useContext(ConfigContext);
{({ getPrefixCls, direction }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
type = 'horizontal',
orientation = 'center',
orientationMargin,
className,
children,
dashed,
plain,
...restProps
} = props;
const prefixCls = getPrefixCls('divider', customizePrefixCls);
const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
const hasChildren = !!children;
const hasCustomMarginLeft = orientation === 'left' && orientationMargin != null;
const hasCustomMarginRight = orientation === 'right' && orientationMargin != null;
const classString = classNames(
prefixCls,
`${prefixCls}-${type}`,
{
[`${prefixCls}-with-text`]: hasChildren,
[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
[`${prefixCls}-dashed`]: !!dashed,
[`${prefixCls}-plain`]: !!plain,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft,
[`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight,
},
className,
);
const innerStyle = { const {
...(hasCustomMarginLeft && { marginLeft: orientationMargin }), prefixCls: customizePrefixCls,
...(hasCustomMarginRight && { marginRight: orientationMargin }), type = 'horizontal',
}; orientation = 'center',
orientationMargin,
className,
children,
dashed,
plain,
...restProps
} = props;
const prefixCls = getPrefixCls('divider', customizePrefixCls);
const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
const hasChildren = !!children;
const hasCustomMarginLeft = orientation === 'left' && orientationMargin != null;
const hasCustomMarginRight = orientation === 'right' && orientationMargin != null;
const classString = classNames(
prefixCls,
`${prefixCls}-${type}`,
{
[`${prefixCls}-with-text`]: hasChildren,
[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
[`${prefixCls}-dashed`]: !!dashed,
[`${prefixCls}-plain`]: !!plain,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft,
[`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight,
},
className,
);
return ( const innerStyle = {
<div className={classString} {...restProps} role="separator"> ...(hasCustomMarginLeft && { marginLeft: orientationMargin }),
{children && ( ...(hasCustomMarginRight && { marginRight: orientationMargin }),
<span className={`${prefixCls}-inner-text`} style={innerStyle}> };
{children}
</span> return (
)} <div className={classString} {...restProps} role="separator">
</div> {children && (
); <span className={`${prefixCls}-inner-text`} style={innerStyle}>
}} {children}
</ConfigConsumer> </span>
); )}
</div>
);
};
export default Divider; export default Divider;