From fee7c04d679cd520513ed0d2df7d6d219c36da4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=9C=E5=86=BB=E6=A9=99?= Date: Wed, 8 Feb 2023 14:09:32 +0800 Subject: [PATCH] refactor:comment (#6238) * refactor:comment * fix inheritAttrs: false & attrs.class --- components/comment/index.tsx | 18 ++- components/comment/style/index.less | 105 --------------- components/comment/style/index.tsx | 163 ++++++++++++++++++++++- components/comment/style/rtl.less | 51 ------- components/style.ts | 2 +- components/theme/interface/components.ts | 1 + 6 files changed, 178 insertions(+), 162 deletions(-) delete mode 100644 components/comment/style/index.less delete mode 100644 components/comment/style/rtl.less diff --git a/components/comment/index.tsx b/components/comment/index.tsx index 29ef260af..48ed574d5 100644 --- a/components/comment/index.tsx +++ b/components/comment/index.tsx @@ -5,6 +5,10 @@ import { flattenChildren } from '../_util/props-util'; import type { VueNode } from '../_util/type'; import { withInstall } from '../_util/type'; import useConfigInject from '../config-provider/hooks/useConfigInject'; + +// CSSINJS +import useStyle from './style'; + export const commentProps = () => ({ actions: Array, /** The element to display as the comment author. */ @@ -24,10 +28,15 @@ export type CommentProps = Partial { return
{children}
; }; @@ -79,18 +88,21 @@ const Comment = defineComponent({ ); const children = flattenChildren(slots.default?.()); - return ( + return wrapSSR(
{comment} {children && children.length ? renderNested(pre, children) : null} -
+ , ); }; }, diff --git a/components/comment/style/index.less b/components/comment/style/index.less deleted file mode 100644 index 84da3a3a2..000000000 --- a/components/comment/style/index.less +++ /dev/null @@ -1,105 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@comment-prefix-cls: ~'@{ant-prefix}-comment'; - -.@{comment-prefix-cls} { - position: relative; - background-color: @comment-bg; - - &-inner { - display: flex; - padding: @comment-padding-base; - } - - &-avatar { - position: relative; - flex-shrink: 0; - margin-right: @margin-sm; - cursor: pointer; - - img { - width: 32px; - height: 32px; - border-radius: 50%; - } - } - - &-content { - position: relative; - flex: 1 1 auto; - min-width: 1px; - font-size: @comment-font-size-base; - word-wrap: break-word; - - &-author { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - margin-bottom: @margin-xss; - font-size: @comment-font-size-base; - - & > a, - & > span { - padding-right: @padding-xs; - font-size: @comment-font-size-sm; - line-height: 18px; - } - - &-name { - color: @comment-author-name-color; - font-size: @comment-font-size-base; - transition: color 0.3s; - - > * { - color: @comment-author-name-color; - - &:hover { - color: @comment-author-name-color; - } - } - } - - &-time { - color: @comment-author-time-color; - white-space: nowrap; - cursor: auto; - } - } - - &-detail p { - margin-bottom: @comment-content-detail-p-margin-bottom; - white-space: pre-wrap; - } - } - - &-actions { - margin-top: @comment-actions-margin-top; - margin-bottom: @comment-actions-margin-bottom; - padding-left: 0; - - > li { - display: inline-block; - color: @comment-action-color; - - > span { - margin-right: 10px; - color: @comment-action-color; - font-size: @comment-font-size-sm; - cursor: pointer; - transition: color 0.3s; - user-select: none; - - &:hover { - color: @comment-action-hover-color; - } - } - } - } - - &-nested { - margin-left: @comment-nest-indent; - } -} - -@import './rtl'; diff --git a/components/comment/style/index.tsx b/components/comment/style/index.tsx index 3a3ab0de5..ee4c14c8d 100644 --- a/components/comment/style/index.tsx +++ b/components/comment/style/index.tsx @@ -1,2 +1,161 @@ -import '../../style/index.less'; -import './index.less'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; + +export interface ComponentToken {} + +type CommentToken = FullToken<'Comment'> & { + commentBg: string; + commentPaddingBase: string; + commentNestIndent: string; + commentFontSizeBase: number; + commentFontSizeSm: number; + commentAuthorNameColor: string; + commentAuthorTimeColor: string; + commentActionColor: string; + commentActionHoverColor: string; + commentActionsMarginBottom: string; + commentActionsMarginTop: number; + commentContentDetailPMarginBottom: string; +}; + +const genBaseStyle: GenerateStyle = token => { + const { + componentCls, + commentBg, + commentPaddingBase, + commentNestIndent, + commentFontSizeBase, + commentFontSizeSm, + commentAuthorNameColor, + commentAuthorTimeColor, + commentActionColor, + commentActionHoverColor, + commentActionsMarginBottom, + commentActionsMarginTop, + commentContentDetailPMarginBottom, + } = token; + + return { + [componentCls]: { + position: 'relative', + backgroundColor: commentBg, + + [`${componentCls}-inner`]: { + display: 'flex', + padding: commentPaddingBase, + }, + + [`${componentCls}-avatar`]: { + position: 'relative', + flexShrink: 0, + marginRight: token.marginSM, + cursor: 'pointer', + + [`img`]: { + width: '32px', + height: '32px', + borderRadius: '50%', + }, + }, + + [`${componentCls}-content`]: { + position: 'relative', + flex: `1 1 auto`, + minWidth: `1px`, + fontSize: commentFontSizeBase, + wordWrap: 'break-word', + + [`&-author`]: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'flex-start', + marginBottom: token.marginXXS, + fontSize: commentFontSizeBase, + + [`& > a,& > span`]: { + paddingRight: token.paddingXS, + fontSize: commentFontSizeSm, + lineHeight: `18px`, + }, + + [`&-name`]: { + color: commentAuthorNameColor, + fontSize: commentFontSizeBase, + transition: `color ${token.motionDurationSlow}`, + + [`> *`]: { + color: commentAuthorNameColor, + + [`&:hover`]: { + color: commentAuthorNameColor, + }, + }, + }, + + [`&-time`]: { + color: commentAuthorTimeColor, + whiteSpace: 'nowrap', + cursor: 'auto', + }, + }, + + [`&-detail p`]: { + marginBottom: commentContentDetailPMarginBottom, + whiteSpace: 'pre-wrap', + }, + }, + + [`${componentCls}-actions`]: { + marginTop: commentActionsMarginTop, + marginBottom: commentActionsMarginBottom, + paddingLeft: 0, + + [`> li`]: { + display: 'inline-block', + color: commentActionColor, + + [`> span`]: { + marginRight: '10px', + color: commentActionColor, + fontSize: commentFontSizeSm, + cursor: 'pointer', + transition: `color ${token.motionDurationSlow}`, + userSelect: 'none', + + [`&:hover`]: { + color: commentActionHoverColor, + }, + }, + }, + }, + + [`${componentCls}-nested`]: { + marginLeft: commentNestIndent, + }, + + '&-rtl': { + direction: 'rtl', + }, + }, + }; +}; + +export default genComponentStyleHook('Comment', token => { + console.log(token); + const commentToken = mergeToken(token, { + commentBg: 'inherit', + commentPaddingBase: `${token.paddingMD}px 0`, + commentNestIndent: `44px`, + commentFontSizeBase: token.fontSize, + commentFontSizeSm: token.fontSizeSM, + commentAuthorNameColor: token.colorTextTertiary, + commentAuthorTimeColor: token.colorTextPlaceholder, + commentActionColor: token.colorTextTertiary, + commentActionHoverColor: token.colorTextSecondary, + commentActionsMarginBottom: 'inherit', + commentActionsMarginTop: token.marginSM, + commentContentDetailPMarginBottom: 'inherit', + }); + + return [genBaseStyle(commentToken)]; +}); diff --git a/components/comment/style/rtl.less b/components/comment/style/rtl.less deleted file mode 100644 index a930d8384..000000000 --- a/components/comment/style/rtl.less +++ /dev/null @@ -1,51 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@comment-prefix-cls: ~'@{ant-prefix}-comment'; - -.@{comment-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-avatar { - .@{comment-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 12px; - } - } - - &-content { - &-author { - & > a, - & > span { - .@{comment-prefix-cls}-rtl & { - padding-right: 0; - padding-left: 8px; - } - } - } - } - - &-actions { - .@{comment-prefix-cls}-rtl & { - padding-right: 0; - } - - > li { - > span { - .@{comment-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 10px; - } - } - } - } - - &-nested { - .@{comment-prefix-cls}-rtl & { - margin-right: @comment-nest-indent; - margin-left: 0; - } - } -} diff --git a/components/style.ts b/components/style.ts index 98a893200..bd1ae0bf3 100644 --- a/components/style.ts +++ b/components/style.ts @@ -50,7 +50,7 @@ import './list/style'; import './tree-select/style'; import './drawer/style'; // import './skeleton/style'; -import './comment/style'; +// import './comment/style'; // import './config-provider/style'; import './empty/style'; import './statistic/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index cc63641b7..e22a0c0c5 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -64,6 +64,7 @@ export interface ComponentTokenMap { // Cascader?: CascaderComponentToken; // Checkbox?: CheckboxComponentToken; // Collapse?: CollapseComponentToken; + Comment?: {}; // DatePicker?: DatePickerComponentToken; Descriptions?: {}; Divider?: DividerComponentToken;