From 253b43fed319aca1a244ec4a4729e61a294293e4 Mon Sep 17 00:00:00 2001 From: Peach Date: Thu, 10 Mar 2022 10:47:33 +0800 Subject: [PATCH] refactor: cssinjs for Rate (#34373) * refactor: cssinjs for Rate * refactor: better cssinjs practice for Rate --- components/rate/index.tsx | 12 ++- components/rate/style/index.less | 91 ------------------ components/rate/style/index.tsx | 152 ++++++++++++++++++++++++++++++- components/rate/style/rtl.less | 21 ----- 4 files changed, 157 insertions(+), 119 deletions(-) delete mode 100644 components/rate/style/index.less delete mode 100644 components/rate/style/rtl.less diff --git a/components/rate/index.tsx b/components/rate/index.tsx index 3ce9952d1c..9817e61c00 100644 --- a/components/rate/index.tsx +++ b/components/rate/index.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; +import classNames from 'classnames'; import RcRate from 'rc-rate'; import StarFilled from '@ant-design/icons/StarFilled'; import Tooltip from '../tooltip'; import { ConfigContext } from '../config-provider'; +import useStyle from './style'; export interface RateProps { prefixCls?: string; @@ -31,17 +33,21 @@ const Rate = React.forwardRef(({ prefixCls, tooltips, ...pro return {node}; }; - const { getPrefixCls, direction } = React.useContext(ConfigContext); + const { getPrefixCls, iconPrefixCls, direction } = React.useContext(ConfigContext); const ratePrefixCls = getPrefixCls('rate', prefixCls); - return ( + // Style + const [wrapSSR, hashId] = useStyle(ratePrefixCls, iconPrefixCls); + + return wrapSSR( + />, ); }); diff --git a/components/rate/style/index.less b/components/rate/style/index.less deleted file mode 100644 index 7b5dad79ee..0000000000 --- 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; - - &: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.tsx b/components/rate/style/index.tsx index 7bd39f61bf..801056a59d 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -1,5 +1,149 @@ -import '../../style/index.less'; -import './index.less'; +// deps-lint-skip-all +import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import { + DerivativeToken, + resetComponent, + UseComponentStyleResult, + useStyleRegister, + useToken, +} from '../../_util/theme'; -// style dependencies -import '../../tooltip/style'; +interface RateToken extends DerivativeToken { + rateStarColor: string; + rateStarSize: number; + rateStarHoverScale: CSSObject['transform']; + rateCls: string; + iconPrefixCls: string; +} + +const genRateStarStyle = (token: RateToken): CSSObject => { + const { rateCls } = token; + + return { + [`${rateCls}-star`]: { + position: 'relative', + display: 'inline-block', + color: 'inherit', + cursor: 'pointer', + + '&:not(:last-child)': { + marginInlineEnd: token.marginXS, + }, + + '> div': { + transition: `all ${token.duration}, outline 0s`, + + '&:hover': { + transform: token.rateStarHoverScale, + }, + + '&:focus': { + outline: 0, + }, + + '&:focus-visible': { + outline: `1px dashed ${token.borderColorSplit}`, + transform: token.rateStarHoverScale, + }, + }, + + '&-first, &-second': { + color: token.borderColorSplit, + transition: `all ${token.duration}`, + userSelect: 'none', + + [token.iconPrefixCls]: { + verticalAlign: 'middle', + }, + }, + + '&-first': { + position: 'absolute', + top: 0, + insetInlineStart: 0, + width: '50%', + height: '100%', + overflow: 'hidden', + opacity: 0, + }, + + [`&-half ${rateCls}-star-first, &-half ${rateCls}-star-second`]: { + opacity: 1, + }, + + [`&-half ${rateCls}-star-first, &-full ${rateCls}-star-second`]: { + color: 'inherit', + }, + }, + }; +}; + +const genRateRtlStyle = (token: RateToken): CSSObject => ({ + [`&-rtl${token.rateCls}`]: { + direction: 'rtl', + }, +}); + +const genRateStyle = (token: RateToken): CSSInterpolation => { + const { rateCls } = token; + + return { + [rateCls]: { + ...resetComponent(token), + + display: 'inline-block', + margin: 0, + padding: 0, + color: token.rateStarColor, + fontSize: token.rateStarSize, + lineHeight: 'unset', + listStyle: 'none', + outline: 'none', + + // disable styles + [`&-disabled${rateCls} ${rateCls}-star`]: { + cursor: 'default', + + '&:hover': { + transform: 'scale(1)', + }, + }, + + // star styles + ...genRateStarStyle(token), + + // text styles + [`+ ${rateCls}-text`]: { + display: 'inline-block', + marginInlineStart: token.marginXS, + fontSize: token.fontSize, + }, + + // rtl styles + ...genRateRtlStyle(token), + }, + }; +}; + +// ============================== Export ============================== +export default function useStyle( + prefixCls: string, + iconPrefixCls: string, +): UseComponentStyleResult { + const [theme, token, hashId] = useToken(); + + const rateToken: RateToken = { + ...token, + // FIXME: missing token + rateStarColor: '#fadb14', // @yellow-6 + rateStarSize: 20, // fixed-value + rateStarHoverScale: 'scale(1.1)', // fixed-value + rateCls: `.${prefixCls}`, + iconPrefixCls: `.${iconPrefixCls}`, + }; + + return [ + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [genRateStyle(rateToken)]), + hashId, + ]; +} diff --git a/components/rate/style/rtl.less b/components/rate/style/rtl.less deleted file mode 100644 index 6a997955e5..0000000000 --- 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; - } - } - } -}