Skip to content

Commit 44d7917

Browse files
buqiyuanbuqiyuan
authored
refactor(divider): less to cssinjs (#6214)
* refactor(divider): less to cssinjs * fix: add inheritAttrs
1 parent 73ce708 commit 44d7917

File tree

7 files changed

+179
-184
lines changed

7 files changed

+179
-184
lines changed

‎components/divider/index.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
33
import { computed, defineComponent } from 'vue';
44
import { withInstall } from '../_util/type';
55
import useConfigInject from '../config-provider/hooks/useConfigInject';
6+
import useStyle from './style';
67

78
export const dividerProps = () => ({
89
prefixCls: String,
@@ -27,11 +28,13 @@ export const dividerProps = () => ({
2728
export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>;
2829

2930
const Divider = defineComponent({
30-
compatConfig: { MODE: 3 },
3131
name: 'ADivider',
32+
inheritAttrs: false,
33+
compatConfig: { MODE: 3 },
3234
props: dividerProps(),
33-
setup(props, { slots }) {
35+
setup(props, { slots, attrs }) {
3436
const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props);
37+
const [wrapSSR, hashId] = useStyle(prefixClsRef);
3538
const hasCustomMarginLeft = computed(
3639
() => props.orientation === 'left' && props.orientationMargin != null,
3740
);
@@ -43,6 +46,7 @@ const Divider = defineComponent({
4346
const prefixCls = prefixClsRef.value;
4447
return {
4548
[prefixCls]: true,
49+
[hashId.value]: true,
4650
[`${prefixCls}-${type}`]: true,
4751
[`${prefixCls}-dashed`]: !!dashed,
4852
[`${prefixCls}-plain`]: !!plain,
@@ -67,8 +71,9 @@ const Divider = defineComponent({
6771

6872
return () => {
6973
const children = flattenChildren(slots.default?.());
70-
return (
74+
return wrapSSR(
7175
<div
76+
{...attrs}
7277
class={[
7378
classString.value,
7479
children.length
@@ -82,7 +87,7 @@ const Divider = defineComponent({
8287
{children}
8388
</span>
8489
) : null}
85-
</div>
90+
</div>,
8691
);
8792
};
8893
},

‎components/divider/style/index.less

-137
This file was deleted.

‎components/divider/style/index.ts

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
import type { CSSObject } from '../../_util/cssinjs';
2+
import type { FullToken, GenerateStyle } from '../../theme/internal';
3+
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
4+
import { resetComponent } from '../../_style';
5+
6+
/** Component only token. Which will handle additional calculation of alias token */
7+
export interface ComponentToken {
8+
sizePaddingEdgeHorizontal: number;
9+
}
10+
11+
interface DividerToken extends FullToken<'Divider'> {
12+
dividerVerticalGutterMargin: number;
13+
dividerHorizontalWithTextGutterMargin: number;
14+
dividerHorizontalGutterMargin: number;
15+
}
16+
17+
// ============================== Shared ==============================
18+
const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
19+
const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token;
20+
21+
return {
22+
[componentCls]: {
23+
...resetComponent(token),
24+
borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
25+
26+
// vertical
27+
'&-vertical': {
28+
position: 'relative',
29+
top: '-0.06em',
30+
display: 'inline-block',
31+
height: '0.9em',
32+
margin: `0 ${token.dividerVerticalGutterMargin}px`,
33+
verticalAlign: 'middle',
34+
borderTop: 0,
35+
borderInlineStart: `${lineWidth}px solid ${colorSplit}`,
36+
},
37+
38+
'&-horizontal': {
39+
display: 'flex',
40+
clear: 'both',
41+
width: '100%',
42+
minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914
43+
margin: `${token.dividerHorizontalGutterMargin}px 0`,
44+
},
45+
46+
[`&-horizontal${componentCls}-with-text`]: {
47+
display: 'flex',
48+
alignItems: 'center',
49+
margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
50+
color: token.colorTextHeading,
51+
fontWeight: 500,
52+
fontSize: token.fontSizeLG,
53+
whiteSpace: 'nowrap',
54+
textAlign: 'center',
55+
borderBlockStart: `0 ${colorSplit}`,
56+
57+
'&::before, &::after': {
58+
position: 'relative',
59+
width: '50%',
60+
borderBlockStart: `${lineWidth}px solid transparent`,
61+
// Chrome not accept `inherit` in `border-top`
62+
borderBlockStartColor: 'inherit',
63+
borderBlockEnd: 0,
64+
transform: 'translateY(50%)',
65+
content: "''",
66+
},
67+
},
68+
69+
[`&-horizontal${componentCls}-with-text-left`]: {
70+
'&::before': {
71+
width: '5%',
72+
},
73+
74+
'&::after': {
75+
width: '95%',
76+
},
77+
},
78+
79+
[`&-horizontal${componentCls}-with-text-right`]: {
80+
'&::before': {
81+
width: '95%',
82+
},
83+
84+
'&::after': {
85+
width: '5%',
86+
},
87+
},
88+
89+
[`${componentCls}-inner-text`]: {
90+
display: 'inline-block',
91+
padding: '0 1em',
92+
},
93+
94+
'&-dashed': {
95+
background: 'none',
96+
borderColor: colorSplit,
97+
borderStyle: 'dashed',
98+
borderWidth: `${lineWidth}px 0 0`,
99+
},
100+
101+
[`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
102+
'&::before, &::after': {
103+
borderStyle: 'dashed none none',
104+
},
105+
},
106+
107+
[`&-vertical${componentCls}-dashed`]: {
108+
borderInlineStart: lineWidth,
109+
borderInlineEnd: 0,
110+
borderBlockStart: 0,
111+
borderBlockEnd: 0,
112+
},
113+
114+
[`&-plain${componentCls}-with-text`]: {
115+
color: token.colorText,
116+
fontWeight: 'normal',
117+
fontSize: token.fontSize,
118+
},
119+
120+
[`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]:
121+
{
122+
'&::before': {
123+
width: 0,
124+
},
125+
126+
'&::after': {
127+
width: '100%',
128+
},
129+
130+
[`${componentCls}-inner-text`]: {
131+
paddingInlineStart: sizePaddingEdgeHorizontal,
132+
},
133+
},
134+
135+
[`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]:
136+
{
137+
'&::before': {
138+
width: '100%',
139+
},
140+
141+
'&::after': {
142+
width: 0,
143+
},
144+
145+
[`${componentCls}-inner-text`]: {
146+
paddingInlineEnd: sizePaddingEdgeHorizontal,
147+
},
148+
},
149+
},
150+
};
151+
};
152+
153+
// ============================== Export ==============================
154+
export default genComponentStyleHook(
155+
'Divider',
156+
token => {
157+
const dividerToken = mergeToken<DividerToken>(token, {
158+
dividerVerticalGutterMargin: token.marginXS,
159+
dividerHorizontalWithTextGutterMargin: token.margin,
160+
dividerHorizontalGutterMargin: token.marginLG,
161+
});
162+
return [genSharedDividerStyle(dividerToken)];
163+
},
164+
{
165+
sizePaddingEdgeHorizontal: 0,
166+
},
167+
);

‎components/divider/style/index.tsx

-2
This file was deleted.

‎components/divider/style/rtl.less

-38
This file was deleted.

0 commit comments

Comments
 (0)