From dc480bd4b39e351b68edc333745127e58e4d0519 Mon Sep 17 00:00:00 2001 From: songsong0707 <74165917+songsong0707@users.noreply.github.com> Date: Sun, 12 Feb 2023 11:24:00 +0800 Subject: [PATCH] refactor: rate style (#6254) --- components/rate/index.tsx | 8 +- components/rate/style/index.less | 91 --------------- components/rate/style/index.ts | 135 +++++++++++++++++++++++ components/rate/style/index.tsx | 5 - components/rate/style/rtl.less | 21 ---- components/style.ts | 2 +- components/theme/interface/components.ts | 4 +- 7 files changed, 144 insertions(+), 122 deletions(-) delete mode 100644 components/rate/style/index.less create mode 100644 components/rate/style/index.ts delete mode 100644 components/rate/style/index.tsx delete mode 100644 components/rate/style/rtl.less diff --git a/components/rate/index.tsx b/components/rate/index.tsx index ac3a5af12..c46a8357f 100644 --- a/components/rate/index.tsx +++ b/components/rate/index.tsx @@ -16,6 +16,8 @@ import { useInjectFormItemContext } from '../form/FormItemContext'; import type { Direction } from '../config-provider'; import type { FocusEventHandler, KeyboardEventHandler } from '../_util/EventInterface'; +import useStyle from './style'; + export const rateProps = () => ({ prefixCls: String, count: Number, @@ -54,6 +56,7 @@ const Rate = defineComponent({ // emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'], setup(props, { slots, attrs, emit, expose }) { const { prefixCls, direction } = useConfigInject('rate', props); + const [wrapSSR, hashId] = useStyle(prefixCls); const formItemContext = useInjectFormItemContext(); const rateRef = ref(); const [setRef, starRefs] = useRefs(); @@ -224,9 +227,10 @@ const Rate = defineComponent({ ); } const rateClassName = classNames(prefixCls.value, disabledClass, className, { + [hashId.value]: true, [`${prefixCls.value}-rtl`]: direction.value === 'rtl', }); - return ( + return wrapSSR( + , ); }; }, diff --git a/components/rate/style/index.less b/components/rate/style/index.less deleted file mode 100644 index 56a274b1b..000000000 --- a/components/rate/style/index.less +++ /dev/null @@ -1,91 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@rate-prefix-cls: ~'@{ant-prefix}-rate'; - -.@{rate-prefix-cls} { - .reset-component(); - - display: inline-block; - margin: 0; - padding: 0; - color: @rate-star-color; - font-size: @rate-star-size; - line-height: unset; - list-style: none; - outline: none; - - &-disabled &-star { - cursor: default; - - > div:hover { - transform: scale(1); - } - } - - &-star { - position: relative; - display: inline-block; - color: inherit; - cursor: pointer; - - &:not(:last-child) { - margin-right: 8px; - } - - > div { - transition: all 0.3s, outline 0s; - - &:hover { - transform: @rate-star-hover-scale; - } - - &:focus { - outline: 0; - } - - &:focus-visible { - outline: 1px dashed @rate-star-color; - transform: @rate-star-hover-scale; - } - } - - &-first, - &-second { - color: @rate-star-bg; - transition: all 0.3s; - user-select: none; - .@{iconfont-css-prefix} { - vertical-align: middle; - } - } - - &-first { - position: absolute; - top: 0; - left: 0; - width: 50%; - height: 100%; - overflow: hidden; - opacity: 0; - } - - &-half &-first, - &-half &-second { - opacity: 1; - } - - &-half &-first, - &-full &-second { - color: inherit; - } - } - - &-text { - display: inline-block; - margin: 0 8px; - font-size: @font-size-base; - } -} - -@import './rtl'; diff --git a/components/rate/style/index.ts b/components/rate/style/index.ts new file mode 100644 index 000000000..7138e441a --- /dev/null +++ b/components/rate/style/index.ts @@ -0,0 +1,135 @@ +import type { CSSObject } from '../../_util/cssinjs'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { resetComponent } from '../../_style'; + +export type ComponentToken = {}; + +interface RateToken extends FullToken<'Rate'> { + rateStarColor: string; + rateStarSize: number; + rateStarHoverScale: CSSObject['transform']; + defaultColor: string; +} + +const genRateStarStyle: GenerateStyle = token => { + const { componentCls } = token; + + return { + [`${componentCls}-star`]: { + position: 'relative', + display: 'inline-block', + color: 'inherit', + cursor: 'pointer', + + '&:not(:last-child)': { + marginInlineEnd: token.marginXS, + }, + + '> div': { + transition: `all ${token.motionDurationMid}, outline 0s`, + + '&:hover': { + transform: token.rateStarHoverScale, + }, + + '&:focus': { + outline: 0, + }, + + '&:focus-visible': { + outline: `${token.lineWidth}px dashed ${token.rateStarColor}`, + transform: token.rateStarHoverScale, + }, + }, + + '&-first, &-second': { + color: token.defaultColor, + transition: `all ${token.motionDurationMid}`, + userSelect: 'none', + + [token.iconCls]: { + verticalAlign: 'middle', + }, + }, + + '&-first': { + position: 'absolute', + top: 0, + insetInlineStart: 0, + width: '50%', + height: '100%', + overflow: 'hidden', + opacity: 0, + }, + + [`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: { + opacity: 1, + }, + + [`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: { + color: 'inherit', + }, + }, + }; +}; + +const genRateRtlStyle = (token: RateToken): CSSObject => ({ + [`&-rtl${token.componentCls}`]: { + direction: 'rtl', + }, +}); + +const genRateStyle: GenerateStyle = token => { + const { componentCls } = token; + + return { + [componentCls]: { + ...resetComponent(token), + + display: 'inline-block', + margin: 0, + padding: 0, + color: token.rateStarColor, + fontSize: token.rateStarSize, + lineHeight: 'unset', + listStyle: 'none', + outline: 'none', + + // disable styles + [`&-disabled${componentCls} ${componentCls}-star`]: { + cursor: 'default', + + '&:hover': { + transform: 'scale(1)', + }, + }, + + // star styles + ...genRateStarStyle(token), + + // text styles + [`+ ${componentCls}-text`]: { + display: 'inline-block', + marginInlineStart: token.marginXS, + fontSize: token.fontSize, + }, + + // rtl styles + ...genRateRtlStyle(token), + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook('Rate', token => { + const { colorFillContent } = token; + + const rateToken = mergeToken(token, { + rateStarColor: token['yellow-6'], + rateStarSize: token.controlHeightLG * 0.5, + rateStarHoverScale: 'scale(1.1)', + defaultColor: colorFillContent, + }); + return [genRateStyle(rateToken)]; +}); diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx deleted file mode 100644 index 7bd39f61b..000000000 --- a/components/rate/style/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import '../../style/index.less'; -import './index.less'; - -// style dependencies -import '../../tooltip/style'; diff --git a/components/rate/style/rtl.less b/components/rate/style/rtl.less deleted file mode 100644 index 6a997955e..000000000 --- a/components/rate/style/rtl.less +++ /dev/null @@ -1,21 +0,0 @@ -.@{rate-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-star { - &:not(:last-child) { - .@{rate-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - } - - &-first { - .@{rate-prefix-cls}-rtl & { - right: 0; - left: auto; - } - } - } -} diff --git a/components/style.ts b/components/style.ts index 6693d82d4..b2d119dea 100644 --- a/components/style.ts +++ b/components/style.ts @@ -4,7 +4,7 @@ import './radio/style'; import './checkbox/style'; // import './grid/style'; // import './tag/style'; -import './rate/style'; +// import './rate/style'; import './pagination/style'; // import './avatar/style'; // import './badge/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 78ce85091..ca1fa3dcf 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -28,7 +28,7 @@ import type { ComponentToken as PopconfirmComponentToken } from '../../popconfir import type { ComponentToken as PopoverComponentToken } from '../../popover/style'; import type { ComponentToken as ProgressComponentToken } from '../../progress/style'; // import type { ComponentToken as RadioComponentToken } from '../../radio/style'; -// import type { ComponentToken as RateComponentToken } from '../../rate/style'; +import type { ComponentToken as RateComponentToken } from '../../rate/style'; // import type { ComponentToken as ResultComponentToken } from '../../result/style'; // import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style'; // import type { ComponentToken as SelectComponentToken } from '../../select/style'; @@ -85,7 +85,7 @@ export interface ComponentTokenMap { Pagination?: {}; Popover?: PopoverComponentToken; Popconfirm?: PopconfirmComponentToken; - // Rate?: RateComponentToken; + Rate?: RateComponentToken; // Radio?: RadioComponentToken; // Result?: ResultComponentToken; // Segmented?: SegmentedComponentToken;