From 30b2420a2a4f261a1b685748ae7d46b41bf584ec Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Fri, 27 Jan 2023 23:35:02 +0800 Subject: [PATCH 1/2] refactor(divider): less to cssinjs --- components/divider/index.tsx | 10 +- components/divider/style/index.less | 137 ------------------- components/divider/style/index.ts | 167 +++++++++++++++++++++++ components/divider/style/index.tsx | 2 - components/divider/style/rtl.less | 38 ------ components/theme/interface/components.ts | 4 +- 6 files changed, 176 insertions(+), 182 deletions(-) delete mode 100644 components/divider/style/index.less create mode 100644 components/divider/style/index.ts delete mode 100644 components/divider/style/index.tsx delete mode 100644 components/divider/style/rtl.less diff --git a/components/divider/index.tsx b/components/divider/index.tsx index e40f7fda71..ceeff13232 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -3,6 +3,7 @@ import type { ExtractPropTypes, PropType } from 'vue'; import { computed, defineComponent } from 'vue'; import { withInstall } from '../_util/type'; import useConfigInject from '../config-provider/hooks/useConfigInject'; +import useStyle from './style'; export const dividerProps = () => ({ prefixCls: String, @@ -30,8 +31,9 @@ const Divider = defineComponent({ compatConfig: { MODE: 3 }, name: 'ADivider', props: dividerProps(), - setup(props, { slots }) { + setup(props, { slots, attrs }) { const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props); + const [wrapSSR, hashId] = useStyle(prefixClsRef); const hasCustomMarginLeft = computed( () => props.orientation === 'left' && props.orientationMargin != null, ); @@ -43,6 +45,7 @@ const Divider = defineComponent({ const prefixCls = prefixClsRef.value; return { [prefixCls]: true, + [hashId.value]: true, [`${prefixCls}-${type}`]: true, [`${prefixCls}-dashed`]: !!dashed, [`${prefixCls}-plain`]: !!plain, @@ -67,8 +70,9 @@ const Divider = defineComponent({ return () => { const children = flattenChildren(slots.default?.()); - return ( + return wrapSSR(
) : null} -
+ , ); }; }, diff --git a/components/divider/style/index.less b/components/divider/style/index.less deleted file mode 100644 index 38808a9d14..0000000000 --- a/components/divider/style/index.less +++ /dev/null @@ -1,137 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@divider-prefix-cls: ~'@{ant-prefix}-divider'; - -.@{divider-prefix-cls} { - .reset-component(); - - 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; - } - - &-horizontal { - display: flex; - clear: both; - width: 100%; - min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914 - margin: @divider-horizontal-gutter 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; - - &::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; - } - - &::after { - 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; - } - } - - &-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; - } - - &-horizontal&-with-text&-dashed { - &::before, - &::after { - border-style: dashed none none; - } - } - - &-vertical&-dashed { - border-width: 0 0 0 @border-width-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; - } - - &::after { - width: 100%; - } - - .ant-divider-inner-text { - padding-left: 0; - } - } - - &-horizontal&-with-text-right&-no-default-orientation-margin-right { - &::before { - width: 100%; - } - - &::after { - width: 0; - } - - .ant-divider-inner-text { - padding-right: 0; - } - } -} - -@import './rtl'; diff --git a/components/divider/style/index.ts b/components/divider/style/index.ts new file mode 100644 index 0000000000..9f8aa7a887 --- /dev/null +++ b/components/divider/style/index.ts @@ -0,0 +1,167 @@ +import type { CSSObject } from '../../_util/cssinjs'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { resetComponent } from '../../_style'; + +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + sizePaddingEdgeHorizontal: number; +} + +interface DividerToken extends FullToken<'Divider'> { + dividerVerticalGutterMargin: number; + dividerHorizontalWithTextGutterMargin: number; + dividerHorizontalGutterMargin: number; +} + +// ============================== Shared ============================== +const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { + const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; + + return { + [componentCls]: { + ...resetComponent(token), + borderBlockStart: `${lineWidth}px solid ${colorSplit}`, + + // vertical + '&-vertical': { + position: 'relative', + top: '-0.06em', + display: 'inline-block', + height: '0.9em', + margin: `0 ${token.dividerVerticalGutterMargin}px`, + verticalAlign: 'middle', + borderTop: 0, + borderInlineStart: `${lineWidth}px solid ${colorSplit}`, + }, + + '&-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${componentCls}-with-text`]: { + display: 'flex', + alignItems: 'center', + margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`, + color: token.colorTextHeading, + fontWeight: 500, + fontSize: token.fontSizeLG, + whiteSpace: 'nowrap', + textAlign: 'center', + borderBlockStart: `0 ${colorSplit}`, + + '&::before, &::after': { + position: 'relative', + width: '50%', + borderBlockStart: `${lineWidth}px solid transparent`, + // Chrome not accept `inherit` in `border-top` + borderBlockStartColor: 'inherit', + borderBlockEnd: 0, + transform: 'translateY(50%)', + content: "''", + }, + }, + + [`&-horizontal${componentCls}-with-text-left`]: { + '&::before': { + width: '5%', + }, + + '&::after': { + width: '95%', + }, + }, + + [`&-horizontal${componentCls}-with-text-right`]: { + '&::before': { + width: '95%', + }, + + '&::after': { + width: '5%', + }, + }, + + [`${componentCls}-inner-text`]: { + display: 'inline-block', + padding: '0 1em', + }, + + '&-dashed': { + background: 'none', + borderColor: colorSplit, + borderStyle: 'dashed', + borderWidth: `${lineWidth}px 0 0`, + }, + + [`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: { + '&::before, &::after': { + borderStyle: 'dashed none none', + }, + }, + + [`&-vertical${componentCls}-dashed`]: { + borderInlineStart: lineWidth, + borderInlineEnd: 0, + borderBlockStart: 0, + borderBlockEnd: 0, + }, + + [`&-plain${componentCls}-with-text`]: { + color: token.colorText, + fontWeight: 'normal', + fontSize: token.fontSize, + }, + + [`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]: + { + '&::before': { + width: 0, + }, + + '&::after': { + width: '100%', + }, + + [`${componentCls}-inner-text`]: { + paddingInlineStart: sizePaddingEdgeHorizontal, + }, + }, + + [`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]: + { + '&::before': { + width: '100%', + }, + + '&::after': { + width: 0, + }, + + [`${componentCls}-inner-text`]: { + paddingInlineEnd: sizePaddingEdgeHorizontal, + }, + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Divider', + token => { + const dividerToken = mergeToken(token, { + dividerVerticalGutterMargin: token.marginXS, + dividerHorizontalWithTextGutterMargin: token.margin, + dividerHorizontalGutterMargin: token.marginLG, + }); + return [genSharedDividerStyle(dividerToken)]; + }, + { + sizePaddingEdgeHorizontal: 0, + }, +); diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx deleted file mode 100644 index 3a3ab0de59..0000000000 --- a/components/divider/style/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import '../../style/index.less'; -import './index.less'; diff --git a/components/divider/style/rtl.less b/components/divider/style/rtl.less deleted file mode 100644 index 7cdc84f00b..0000000000 --- a/components/divider/style/rtl.less +++ /dev/null @@ -1,38 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@divider-prefix-cls: ~'@{ant-prefix}-divider'; - -.@{divider-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-horizontal&-with-text-left { - &::before { - .@{divider-prefix-cls}-rtl& { - width: 100% - @divider-orientation-margin; - } - } - - &::after { - .@{divider-prefix-cls}-rtl& { - width: @divider-orientation-margin; - } - } - } - - &-horizontal&-with-text-right { - &::before { - .@{divider-prefix-cls}-rtl& { - width: @divider-orientation-margin; - } - } - - &::after { - .@{divider-prefix-cls}-rtl& { - width: 100% - @divider-orientation-margin; - } - } - } -} diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index d4f46a00a3..5da0fec177 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -11,7 +11,7 @@ import type { ComponentToken as ButtonComponentToken } from '../../button/style' // import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style'; // import type { ComponentToken as CollapseComponentToken } from '../../collapse/style'; // import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; -// import type { ComponentToken as DividerComponentToken } from '../../divider/style'; +import type { ComponentToken as DividerComponentToken } from '../../divider/style'; // import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style'; // import type { ComponentToken as DrawerComponentToken } from '../../drawer/style'; // import type { ComponentToken as EmptyComponentToken } from '../../empty/style'; @@ -66,7 +66,7 @@ export interface ComponentTokenMap { // Collapse?: CollapseComponentToken; // DatePicker?: DatePickerComponentToken; Descriptions?: {}; - // Divider?: DividerComponentToken; + Divider?: DividerComponentToken; // Drawer?: DrawerComponentToken; // Dropdown?: DropdownComponentToken; // Empty?: EmptyComponentToken; From 651b9884ec81778db7c95b2679f3455303a44862 Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Sat, 28 Jan 2023 00:13:36 +0800 Subject: [PATCH 2/2] fix: add inheritAttrs --- components/divider/index.tsx | 3 ++- components/style.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/divider/index.tsx b/components/divider/index.tsx index ceeff13232..a6087621b0 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -28,8 +28,9 @@ export const dividerProps = () => ({ export type DividerProps = Partial>>; const Divider = defineComponent({ - compatConfig: { MODE: 3 }, name: 'ADivider', + inheritAttrs: false, + compatConfig: { MODE: 3 }, props: dividerProps(), setup(props, { slots, attrs }) { const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props); diff --git a/components/style.ts b/components/style.ts index 702feea800..787f0acc68 100644 --- a/components/style.ts +++ b/components/style.ts @@ -16,7 +16,7 @@ import './popconfirm/style'; import './menu/style'; import './mentions/style'; import './dropdown/style'; -import './divider/style'; +// import './divider/style'; import './card/style'; import './collapse/style'; import './carousel/style';