mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat: Divider support cssVar (#45810)
* feat: Divider support cssVar * fix: fix * fix: fix * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix * Update components/divider/style/index.ts Signed-off-by: lijianan <574980606@qq.com> * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
lijianan
GitHub
parent
0de7f06023
commit
58aa57b79b
@ -4,6 +4,7 @@ import classNames from 'classnames';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useStyle from './style';
|
||||
import useCSSVar from './style/cssVar';
|
||||
|
||||
export interface DividerProps {
|
||||
prefixCls?: string;
|
||||
@ -35,7 +36,9 @@ const Divider: React.FC<DividerProps> = (props) => {
|
||||
...restProps
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('divider', customizePrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const [, hashId] = useStyle(prefixCls);
|
||||
const wrapCSSVar = useCSSVar(prefixCls);
|
||||
|
||||
const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
|
||||
const hasChildren = !!children;
|
||||
@ -85,7 +88,7 @@ const Divider: React.FC<DividerProps> = (props) => {
|
||||
);
|
||||
}
|
||||
|
||||
return wrapSSR(
|
||||
return wrapCSSVar(
|
||||
<div
|
||||
className={classString}
|
||||
style={{ ...divider?.style, ...style }}
|
||||
|
||||
8
components/divider/style/cssVar.ts
Normal file
8
components/divider/style/cssVar.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { prepareComponentToken } from '.';
|
||||
import { genCSSVarRegister } from '../../theme/internal';
|
||||
|
||||
export default genCSSVarRegister<'Divider'>('Divider', prepareComponentToken, {
|
||||
unitless: {
|
||||
orientationMargin: true,
|
||||
},
|
||||
});
|
||||
@ -1,7 +1,9 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
@ -24,9 +26,9 @@ export interface ComponentToken {
|
||||
}
|
||||
|
||||
interface DividerToken extends FullToken<'Divider'> {
|
||||
sizePaddingEdgeHorizontal: number;
|
||||
dividerHorizontalWithTextGutterMargin: number;
|
||||
dividerHorizontalGutterMargin: number;
|
||||
sizePaddingEdgeHorizontal: number | string;
|
||||
dividerHorizontalWithTextGutterMargin: number | string;
|
||||
dividerHorizontalGutterMargin: number | string;
|
||||
}
|
||||
|
||||
// ============================== Shared ==============================
|
||||
@ -44,7 +46,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
|
||||
borderBlockStart: `${unit(lineWidth)} solid ${colorSplit}`,
|
||||
|
||||
// vertical
|
||||
'&-vertical': {
|
||||
@ -56,7 +58,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
marginBlock: 0,
|
||||
verticalAlign: 'middle',
|
||||
borderTop: 0,
|
||||
borderInlineStart: `${lineWidth}px solid ${colorSplit}`,
|
||||
borderInlineStart: `${unit(lineWidth)} solid ${colorSplit}`,
|
||||
},
|
||||
|
||||
'&-horizontal': {
|
||||
@ -64,13 +66,13 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
clear: 'both',
|
||||
width: '100%',
|
||||
minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914
|
||||
margin: `${token.dividerHorizontalGutterMargin}px 0`,
|
||||
margin: `${unit(token.dividerHorizontalGutterMargin)} 0`,
|
||||
},
|
||||
|
||||
[`&-horizontal${componentCls}-with-text`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
|
||||
margin: `${unit(token.dividerHorizontalWithTextGutterMargin)} 0`,
|
||||
color: token.colorTextHeading,
|
||||
fontWeight: 500,
|
||||
fontSize: token.fontSizeLG,
|
||||
@ -81,7 +83,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
'&::before, &::after': {
|
||||
position: 'relative',
|
||||
width: '50%',
|
||||
borderBlockStart: `${lineWidth}px solid transparent`,
|
||||
borderBlockStart: `${unit(lineWidth)} solid transparent`,
|
||||
// Chrome not accept `inherit` in `border-top`
|
||||
borderBlockStartColor: 'inherit',
|
||||
borderBlockEnd: 0,
|
||||
@ -92,21 +94,19 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
|
||||
[`&-horizontal${componentCls}-with-text-left`]: {
|
||||
'&::before': {
|
||||
width: `${orientationMargin * 100}%`,
|
||||
width: `calc(${orientationMargin} * 100%)`,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
width: `${100 - orientationMargin * 100}%`,
|
||||
width: `calc(100% - ${orientationMargin} * 100%)`,
|
||||
},
|
||||
},
|
||||
|
||||
[`&-horizontal${componentCls}-with-text-right`]: {
|
||||
'&::before': {
|
||||
width: `${100 - orientationMargin * 100}%`,
|
||||
width: `calc(100% - ${orientationMargin} * 100%)`,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
width: `${orientationMargin * 100}%`,
|
||||
width: `calc(${orientationMargin} * 100%)`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -120,7 +120,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
background: 'none',
|
||||
borderColor: colorSplit,
|
||||
borderStyle: 'dashed',
|
||||
borderWidth: `${lineWidth}px 0 0`,
|
||||
borderWidth: `${unit(lineWidth)} 0 0`,
|
||||
},
|
||||
|
||||
[`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
|
||||
@ -175,6 +175,12 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
};
|
||||
};
|
||||
|
||||
export const prepareComponentToken: GetDefaultToken<'Divider'> = (token) => ({
|
||||
textPaddingInline: '1em',
|
||||
orientationMargin: 0.05,
|
||||
verticalMarginInline: token.marginXS,
|
||||
});
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Divider',
|
||||
@ -186,9 +192,5 @@ export default genComponentStyleHook(
|
||||
});
|
||||
return [genSharedDividerStyle(dividerToken)];
|
||||
},
|
||||
(token) => ({
|
||||
textPaddingInline: '1em',
|
||||
orientationMargin: 0.05,
|
||||
verticalMarginInline: token.marginXS,
|
||||
}),
|
||||
prepareComponentToken,
|
||||
);
|
||||
|
||||
@ -37,7 +37,6 @@ async function checkCSSVar() {
|
||||
'collapse',
|
||||
'color-picker',
|
||||
'descriptions',
|
||||
'divider',
|
||||
'drawer',
|
||||
'float-button',
|
||||
'grid',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user