mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 19:42:54 +08:00
refactor: change divider into cssinjs (#34364)
* refactor: change divider into cssinjs * fix: token and logical css * fix: token to margin * fix: token add marginLG 24px margin * 1.5 = 16 * 1.5 * fix: comment the _style less * fix: move file * fix: add px for marginNumber * fix: borderwidth * fix: delete test css * fix: add comment fixme * fix: add dividerNotDefaultTextPadding token to divider * fix: add prefixCls to fix the inner classname * fix: delete useless code * fix: delete withPrefix * fix: delete import * fix: wrapper with prefixCls Co-authored-by: zengguhao.zgh <zengguhao.zgh@alibaba-inc.com>
This commit is contained in:
Long Hao (龙濠)
GitHub
parent
f7ebd0d55f
commit
4db1fc1a20
@ -114,6 +114,7 @@ export interface DerivativeToken extends Omit<DesignToken, 'duration'> {
|
||||
paddingXS: number;
|
||||
paddingXXS: number;
|
||||
marginXS: number;
|
||||
marginLG: number;
|
||||
marginXXS: number;
|
||||
|
||||
duration: string;
|
||||
@ -174,6 +175,7 @@ function derivative(designToken: DesignToken): DerivativeToken {
|
||||
paddingXS,
|
||||
paddingXXS: designToken.padding * 0.25,
|
||||
marginXS: designToken.margin * 0.5,
|
||||
marginLG: designToken.margin * 1.5,
|
||||
marginXXS: designToken.margin * 0.25,
|
||||
|
||||
duration: `${designToken.duration}s`,
|
||||
|
||||
@ -2,6 +2,8 @@ import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
|
||||
import useStyle from './style';
|
||||
|
||||
export interface DividerProps {
|
||||
prefixCls?: string;
|
||||
type?: 'horizontal' | 'vertical';
|
||||
@ -29,12 +31,15 @@ const Divider: React.FC<DividerProps> = props => {
|
||||
...restProps
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('divider', customizePrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
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,
|
||||
hashId,
|
||||
`${prefixCls}-${type}`,
|
||||
{
|
||||
[`${prefixCls}-with-text`]: hasChildren,
|
||||
@ -53,14 +58,14 @@ const Divider: React.FC<DividerProps> = props => {
|
||||
...(hasCustomMarginRight && { marginRight: orientationMargin }),
|
||||
};
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<div className={classString} {...restProps} role="separator">
|
||||
{children && (
|
||||
<span className={`${prefixCls}-inner-text`} style={innerStyle}>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,137 +1,137 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@divider-prefix-cls: ~'@{ant-prefix}-divider';
|
||||
// @divider-prefix-cls: ~'@{ant-prefix}-divider';
|
||||
|
||||
.@{divider-prefix-cls} {
|
||||
.reset-component();
|
||||
// .@{divider-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
border-top: @border-width-base solid @divider-color;
|
||||
// border-top: @border-width-base solid @divider-color;
|
||||
|
||||
&-vertical {
|
||||
position: relative;
|
||||
top: -0.06em;
|
||||
display: inline-block;
|
||||
height: 0.9em;
|
||||
margin: 0 @divider-vertical-gutter;
|
||||
vertical-align: middle;
|
||||
border-top: 0;
|
||||
border-left: @border-width-base solid @divider-color;
|
||||
}
|
||||
// &-vertical {
|
||||
// position: relative;
|
||||
// top: -0.06em;
|
||||
// display: inline-block;
|
||||
// height: 0.9em;
|
||||
// margin: 0 @divider-vertical-gutter;
|
||||
// vertical-align: middle;
|
||||
// border-top: 0;
|
||||
// border-left: @border-width-base solid @divider-color;
|
||||
// }
|
||||
|
||||
&-horizontal {
|
||||
display: flex;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
|
||||
margin: 24px 0;
|
||||
}
|
||||
// &-horizontal {
|
||||
// display: flex;
|
||||
// clear: both;
|
||||
// width: 100%;
|
||||
// min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
|
||||
// margin: 24px 0;
|
||||
// }
|
||||
|
||||
&-horizontal&-with-text {
|
||||
display: flex;
|
||||
margin: 16px 0;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
border-top: 0;
|
||||
border-top-color: @divider-color;
|
||||
// &-horizontal&-with-text {
|
||||
// display: flex;
|
||||
// margin: 16px 0;
|
||||
// color: @heading-color;
|
||||
// font-weight: 500;
|
||||
// font-size: @font-size-lg;
|
||||
// white-space: nowrap;
|
||||
// text-align: center;
|
||||
// border-top: 0;
|
||||
// border-top-color: @divider-color;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
border-top: @border-width-base solid transparent;
|
||||
// Chrome not accept `inherit` in `border-top`
|
||||
border-top-color: inherit;
|
||||
border-bottom: 0;
|
||||
transform: translateY(50%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
// &::before,
|
||||
// &::after {
|
||||
// position: relative;
|
||||
// top: 50%;
|
||||
// width: 50%;
|
||||
// border-top: @border-width-base solid transparent;
|
||||
// // Chrome not accept `inherit` in `border-top`
|
||||
// border-top-color: inherit;
|
||||
// border-bottom: 0;
|
||||
// transform: translateY(50%);
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
|
||||
&-horizontal&-with-text-left {
|
||||
&::before {
|
||||
top: 50%;
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
// &-horizontal&-with-text-left {
|
||||
// &::before {
|
||||
// top: 50%;
|
||||
// width: @divider-orientation-margin;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
// &::after {
|
||||
// top: 50%;
|
||||
// width: 100% - @divider-orientation-margin;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-horizontal&-with-text-right {
|
||||
&::before {
|
||||
top: 50%;
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
// &-horizontal&-with-text-right {
|
||||
// &::before {
|
||||
// top: 50%;
|
||||
// width: 100% - @divider-orientation-margin;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
// &::after {
|
||||
// top: 50%;
|
||||
// width: @divider-orientation-margin;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-inner-text {
|
||||
display: inline-block;
|
||||
padding: 0 @divider-text-padding;
|
||||
}
|
||||
// &-inner-text {
|
||||
// display: inline-block;
|
||||
// padding: 0 @divider-text-padding;
|
||||
// }
|
||||
|
||||
&-dashed {
|
||||
background: none;
|
||||
border-color: @divider-color;
|
||||
border-style: dashed;
|
||||
border-width: @border-width-base 0 0;
|
||||
}
|
||||
// &-dashed {
|
||||
// background: none;
|
||||
// border-color: @divider-color;
|
||||
// border-style: dashed;
|
||||
// border-width: @border-width-base 0 0;
|
||||
// }
|
||||
|
||||
&-horizontal&-with-text&-dashed {
|
||||
&::before,
|
||||
&::after {
|
||||
border-style: dashed none none;
|
||||
}
|
||||
}
|
||||
// &-horizontal&-with-text&-dashed {
|
||||
// &::before,
|
||||
// &::after {
|
||||
// border-style: dashed none none;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-vertical&-dashed {
|
||||
border-width: 0 0 0 @border-width-base;
|
||||
}
|
||||
// &-vertical&-dashed {
|
||||
// border-width: 0 0 0 @border-width-base;
|
||||
// }
|
||||
|
||||
&-plain&-with-text {
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
// &-plain&-with-text {
|
||||
// color: @text-color;
|
||||
// font-weight: normal;
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
|
||||
&-horizontal&-with-text-left&-no-default-orientation-margin-left {
|
||||
&::before {
|
||||
width: 0;
|
||||
}
|
||||
// &-horizontal&-with-text-left&-no-default-orientation-margin-left {
|
||||
// &::before {
|
||||
// width: 0;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
// &::after {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
.ant-divider-inner-text {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
// .ant-divider-inner-text {
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-horizontal&-with-text-right&-no-default-orientation-margin-right {
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
// &-horizontal&-with-text-right&-no-default-orientation-margin-right {
|
||||
// &::before {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
width: 0;
|
||||
}
|
||||
// &::after {
|
||||
// width: 0;
|
||||
// }
|
||||
|
||||
.ant-divider-inner-text {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .ant-divider-inner-text {
|
||||
// padding-right: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './rtl';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,2 +1,180 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import {
|
||||
DerivativeToken,
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
UseComponentStyleResult,
|
||||
resetComponent,
|
||||
} from '../../_util/theme';
|
||||
|
||||
interface DividerToken extends DerivativeToken {
|
||||
dividerBorderColor: string;
|
||||
|
||||
dividerBorderWidth: number;
|
||||
|
||||
dividerNotDefaultTextPadding: number;
|
||||
dividerVerticalGutterMargin: number;
|
||||
dividerHorizontalWithTextGutterMargin: number;
|
||||
dividerHorizontalGutterMargin: number;
|
||||
}
|
||||
|
||||
// FIXME
|
||||
interface genStyleProps {
|
||||
token: DividerToken;
|
||||
prefixCls: string;
|
||||
}
|
||||
|
||||
// ============================== Shared ==============================
|
||||
const genSharedDividerStyle = ({ token, prefixCls }: genStyleProps): CSSObject => ({
|
||||
[`.${prefixCls}`]: {
|
||||
...resetComponent(token),
|
||||
borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
|
||||
|
||||
// vertical
|
||||
'&-vertical': {
|
||||
position: 'relative',
|
||||
top: '-0.06em',
|
||||
display: 'inline-block',
|
||||
height: '0.9em',
|
||||
margin: `0 ${token.dividerVerticalGutterMargin}px`,
|
||||
verticalAlign: 'middle',
|
||||
borderTop: 0,
|
||||
borderInlineStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
|
||||
},
|
||||
|
||||
'&-horizontal': {
|
||||
display: 'flex',
|
||||
clear: 'both',
|
||||
width: '100%',
|
||||
minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914
|
||||
margin: `${token.dividerHorizontalGutterMargin}px 0`,
|
||||
},
|
||||
|
||||
'&-horizontal&-with-text': {
|
||||
display: 'flex',
|
||||
margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
|
||||
color: token.headingColor,
|
||||
fontWeight: 500,
|
||||
fontSize: token.fontSizeLG,
|
||||
whiteSpace: 'nowrap',
|
||||
textAlign: 'center',
|
||||
borderBlockStart: `0 ${token.dividerBorderColor}`,
|
||||
|
||||
'&::before, &::after': {
|
||||
position: 'relative',
|
||||
top: '50%',
|
||||
width: '50%',
|
||||
borderBlockStart: `${token.dividerBorderWidth}px solid transparent`,
|
||||
// Chrome not accept `inherit` in `border-top`
|
||||
borderBlockStartColor: 'inherit',
|
||||
borderBlockEnd: 0,
|
||||
transform: 'translateY(50%)',
|
||||
content: "''",
|
||||
},
|
||||
},
|
||||
|
||||
'&-horizontal&-with-text-right': {
|
||||
'&::before': {
|
||||
top: '50%',
|
||||
width: '95%',
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
top: '50%',
|
||||
width: '5%',
|
||||
},
|
||||
},
|
||||
|
||||
[`.${prefixCls}-inner-text`]: {
|
||||
display: 'inline-block',
|
||||
padding: '0 1em',
|
||||
},
|
||||
|
||||
'&-dashed': {
|
||||
background: 'none',
|
||||
borderColor: token.dividerBorderColor,
|
||||
borderStyle: 'dashed',
|
||||
borderWidth: 0,
|
||||
borderBlockStart: `${token.dividerBorderWidth}px`,
|
||||
},
|
||||
|
||||
'&-horizontal&-with-text&-dashed': {
|
||||
'&::before, &::after': {
|
||||
borderStyle: 'dashed none none',
|
||||
},
|
||||
},
|
||||
|
||||
'&-vertical&-dashed': {
|
||||
borderWidth: `0 0 0 ${token.dividerBorderWidth}px`,
|
||||
},
|
||||
|
||||
'&-plain&-with-text': {
|
||||
color: token.textColor,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
|
||||
'&-horizontal&-with-text-left&-no-default-orientation-margin-left': {
|
||||
'&::before': {
|
||||
width: 0,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
'.ant-divider-inner-text': {
|
||||
paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`,
|
||||
},
|
||||
},
|
||||
|
||||
'&-horizontal&-with-text-right&-no-default-orientation-margin-right': {
|
||||
'&::before': {
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
width: 0,
|
||||
},
|
||||
|
||||
'.ant-divider-inner-text': {
|
||||
paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
// FIXME
|
||||
const dividerBorderColor = 'rgba(0, 0, 0, 6%)';
|
||||
|
||||
const dividerBorderWidth = token.borderWidth;
|
||||
|
||||
const dividerNotDefaultTextPadding = 0;
|
||||
const dividerVerticalGutterMargin = token.marginXS;
|
||||
const dividerHorizontalWithTextGutterMargin = token.marginLG;
|
||||
const dividerHorizontalGutterMargin = token.margin;
|
||||
|
||||
const dividerToken: DividerToken = {
|
||||
...token,
|
||||
|
||||
dividerBorderColor,
|
||||
|
||||
dividerBorderWidth,
|
||||
|
||||
dividerNotDefaultTextPadding,
|
||||
dividerVerticalGutterMargin,
|
||||
dividerHorizontalWithTextGutterMargin,
|
||||
dividerHorizontalGutterMargin,
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genSharedDividerStyle({ token: dividerToken, prefixCls }),
|
||||
]),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user