From f67abe410589b06054cf17d4c46b4ff9ffcd4e75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 22 Nov 2023 09:43:20 +0800 Subject: [PATCH] feat: pagination support cssVar (#45800) * feat: pagination support cssVar * feat: optimize code * Update check-cssinjs.tsx Signed-off-by: lijianan <574980606@qq.com> * feat: pagination css var * chore: code clean * chore: update snapshot --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- components/pagination/Pagination.tsx | 35 +-- .../__snapshots__/demo-extend.test.ts.snap | 8 +- .../__tests__/__snapshots__/demo.test.ts.snap | 8 +- components/pagination/style/bordered.ts | 111 +++++++++ components/pagination/style/cssVar.ts | 4 + components/pagination/style/index.ts | 219 ++++++------------ scripts/check-cssinjs.tsx | 1 - 7 files changed, 210 insertions(+), 176 deletions(-) create mode 100644 components/pagination/style/bordered.ts create mode 100644 components/pagination/style/cssVar.ts diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 623d916d00..c051bfd2a8 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -13,6 +13,9 @@ import useBreakpoint from '../grid/hooks/useBreakpoint'; import { useLocale } from '../locale'; import { MiddleSelect, MiniSelect } from './Select'; import useStyle from './style'; +import useCSSVar from './style/cssVar'; +import { useToken } from '../theme/internal'; +import BorderedStyle from './style/bordered'; export interface PaginationProps extends RcPaginationProps { showQuickJumper?: boolean | { goButton?: React.ReactNode }; @@ -49,12 +52,14 @@ const Pagination: React.FC = (props) => { ...restProps } = props; const { xs } = useBreakpoint(responsive); + const [, token] = useToken(); const { getPrefixCls, direction, pagination = {} } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('pagination', customizePrefixCls); // Style - const [wrapSSR, hashId] = useStyle(prefixCls); + const [, hashId] = useStyle(prefixCls); + const wrapCSSVar = useCSSVar(prefixCls); const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger; @@ -111,6 +116,7 @@ const Pagination: React.FC = (props) => { { [`${prefixCls}-mini`]: isSmall, [`${prefixCls}-rtl`]: direction === 'rtl', + [`${prefixCls}-bordered`]: token.wireframe, }, pagination?.className, className, @@ -120,18 +126,21 @@ const Pagination: React.FC = (props) => { const mergedStyle: React.CSSProperties = { ...pagination?.style, ...style }; - return wrapSSR( - , + return wrapCSSVar( + <> + {token.wireframe && } + + , ); }; diff --git a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap index 5de290439d..35e202c4dc 100644 --- a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -4985,7 +4985,7 @@ exports[`renders components/pagination/demo/total.tsx extend context correctly 2 exports[`renders components/pagination/demo/wireframe.tsx extend context correctly 1`] = ` Array [
  • ,
    ,
    • ,
      ,
      • ,
        ,
        • ,
          ,
          • ,
            ,
            • ,
              ,
              • = (token) => { + const { componentCls } = token; + + return { + [`${componentCls}${componentCls}-bordered${componentCls}-disabled:not(${componentCls}-mini)`]: { + '&, &:hover': { + [`${componentCls}-item-link`]: { + borderColor: token.colorBorder, + }, + }, + + '&:focus-visible': { + [`${componentCls}-item-link`]: { + borderColor: token.colorBorder, + }, + }, + + [`${componentCls}-item, ${componentCls}-item-link`]: { + backgroundColor: token.colorBgContainerDisabled, + borderColor: token.colorBorder, + + [`&:hover:not(${componentCls}-item-active)`]: { + backgroundColor: token.colorBgContainerDisabled, + borderColor: token.colorBorder, + + a: { + color: token.colorTextDisabled, + }, + }, + + [`&${componentCls}-item-active`]: { + backgroundColor: token.itemActiveBgDisabled, + }, + }, + + [`${componentCls}-prev, ${componentCls}-next`]: { + '&:hover button': { + backgroundColor: token.colorBgContainerDisabled, + borderColor: token.colorBorder, + color: token.colorTextDisabled, + }, + + [`${componentCls}-item-link`]: { + backgroundColor: token.colorBgContainerDisabled, + borderColor: token.colorBorder, + }, + }, + }, + + [`${componentCls}${componentCls}-bordered:not(${componentCls}-mini)`]: { + [`${componentCls}-prev, ${componentCls}-next`]: { + '&:hover button': { + borderColor: token.colorPrimaryHover, + backgroundColor: token.itemBg, + }, + + [`${componentCls}-item-link`]: { + backgroundColor: token.itemLinkBg, + borderColor: token.colorBorder, + }, + + [`&:hover ${componentCls}-item-link`]: { + borderColor: token.colorPrimary, + backgroundColor: token.itemBg, + color: token.colorPrimary, + }, + + [`&${componentCls}-disabled`]: { + [`${componentCls}-item-link`]: { + borderColor: token.colorBorder, + color: token.colorTextDisabled, + }, + }, + }, + + [`${componentCls}-item`]: { + backgroundColor: token.itemBg, + border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`, + + [`&:hover:not(${componentCls}-item-active)`]: { + borderColor: token.colorPrimary, + backgroundColor: token.itemBg, + + a: { + color: token.colorPrimary, + }, + }, + + '&-active': { + borderColor: token.colorPrimary, + }, + }, + }, + }; +}; + +export default genSubStyleComponent( + ['Pagination', 'bordered'], + (token) => { + const paginationToken = prepareToken(token); + + return [genBorderedStyle(paginationToken)]; + }, + prepareComponentToken, +); diff --git a/components/pagination/style/cssVar.ts b/components/pagination/style/cssVar.ts new file mode 100644 index 0000000000..024b9ad8ed --- /dev/null +++ b/components/pagination/style/cssVar.ts @@ -0,0 +1,4 @@ +import { genCSSVarRegister } from '../../theme/internal'; +import { prepareComponentToken } from '.'; + +export default genCSSVarRegister('Pagination', prepareComponentToken); diff --git a/components/pagination/style/index.ts b/components/pagination/style/index.ts index 8ac5eda734..895bf689af 100644 --- a/components/pagination/style/index.ts +++ b/components/pagination/style/index.ts @@ -1,14 +1,15 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { type CSSObject, unit } from '@ant-design/cssinjs'; +import type { SharedComponentToken, SharedInputToken } from '../../input/style'; import { genBasicInputStyle, genInputSmallStyle, initComponentToken, initInputToken, } from '../../input/style'; -import type { SharedComponentToken, SharedInputToken } from '../../input/style'; import { genFocusOutline, genFocusStyle, resetComponent } from '../../style'; -import type { FullToken, GenerateStyle } from '../../theme/internal'; +import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import type { GenStyleFn } from 'antd/es/theme/util/genComponentStyleHook'; export interface ComponentToken { /** @@ -58,12 +59,15 @@ export interface ComponentToken { miniOptionsSizeChangerTop: number; } -interface PaginationToken extends FullToken<'Pagination'>, SharedComponentToken, SharedInputToken { +export interface PaginationToken + extends FullToken<'Pagination'>, + SharedComponentToken, + SharedInputToken { inputOutlineOffset: number; - paginationMiniOptionsMarginInlineStart: number; - paginationMiniQuickJumperInputWidth: number; - paginationItemPaddingInline: number; - paginationEllipsisLetterSpacing: number; + paginationMiniOptionsMarginInlineStart: number | string; + paginationMiniQuickJumperInputWidth: number | string; + paginationItemPaddingInline: number | string; + paginationEllipsisLetterSpacing: number | string; paginationEllipsisTextIndent: string; paginationSlashMarginInlineStart: number; paginationSlashMarginInlineEnd: number; @@ -170,14 +174,14 @@ const genPaginationMiniStyle: GenerateStyle = (token [`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]: { height: token.itemSizeSM, - lineHeight: `${token.itemSizeSM}px`, + lineHeight: unit(token.itemSizeSM), }, [`&${componentCls}-mini ${componentCls}-item`]: { minWidth: token.itemSizeSM, height: token.itemSizeSM, margin: 0, - lineHeight: `${token.itemSizeSM - 2}px`, + lineHeight: unit(token.calc(token.itemSizeSM).sub(2).equal()), }, [`&${componentCls}-mini:not(${componentCls}-disabled) ${componentCls}-item:not(${componentCls}-item-active)`]: @@ -196,7 +200,7 @@ const genPaginationMiniStyle: GenerateStyle = (token minWidth: token.itemSizeSM, height: token.itemSizeSM, margin: 0, - lineHeight: `${token.itemSizeSM}px`, + lineHeight: unit(token.itemSizeSM), }, [`&${componentCls}-mini:not(${componentCls}-disabled)`]: { @@ -222,7 +226,7 @@ const genPaginationMiniStyle: GenerateStyle = (token '&::after': { height: token.itemSizeSM, - lineHeight: `${token.itemSizeSM}px`, + lineHeight: unit(token.itemSizeSM), }, }, @@ -230,7 +234,7 @@ const genPaginationMiniStyle: GenerateStyle = (token { height: token.itemSizeSM, marginInlineEnd: 0, - lineHeight: `${token.itemSizeSM}px`, + lineHeight: unit(token.itemSizeSM), }, [`&${componentCls}-mini ${componentCls}-options`]: { @@ -242,7 +246,7 @@ const genPaginationMiniStyle: GenerateStyle = (token [`&-quick-jumper`]: { height: token.itemSizeSM, - lineHeight: `${token.itemSizeSM}px`, + lineHeight: unit(token.itemSizeSM), input: { ...genInputSmallStyle(token), @@ -264,7 +268,7 @@ const genPaginationSimpleStyle: GenerateStyle = (tok &${componentCls}-simple ${componentCls}-next `]: { height: token.itemSizeSM, - lineHeight: `${token.itemSizeSM}px`, + lineHeight: unit(token.itemSizeSM), verticalAlign: 'top', [`${componentCls}-item-link`]: { height: token.itemSizeSM, @@ -278,7 +282,7 @@ const genPaginationSimpleStyle: GenerateStyle = (tok }, '&::after': { height: token.itemSizeSM, - lineHeight: `${token.itemSizeSM}px`, + lineHeight: unit(token.itemSizeSM), }, }, }, @@ -292,10 +296,10 @@ const genPaginationSimpleStyle: GenerateStyle = (tok boxSizing: 'border-box', height: '100%', marginInlineEnd: token.marginXS, - padding: `0 ${token.paginationItemPaddingInline}px`, + padding: `0 ${unit(token.paginationItemPaddingInline)}`, textAlign: 'center', backgroundColor: token.itemInputBg, - border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, + border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`, borderRadius: token.borderRadius, outline: 'none', transition: `border-color ${token.motionDurationMid}`, @@ -307,7 +311,9 @@ const genPaginationSimpleStyle: GenerateStyle = (tok '&:focus': { borderColor: token.colorPrimaryHover, - boxShadow: `${token.inputOutlineOffset}px 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, + boxShadow: `${unit(token.inputOutlineOffset)} 0 ${unit(token.controlOutlineWidth)} ${ + token.controlOutline + }`, }, '&[disabled]': { @@ -393,7 +399,7 @@ const genPaginationJumpStyle: GenerateStyle = (token height: token.itemSize, color: token.colorText, fontFamily: token.fontFamily, - lineHeight: `${token.itemSize}px`, + lineHeight: `${unit(token.itemSize)}`, textAlign: 'center', verticalAlign: 'middle', listStyle: 'none', @@ -420,7 +426,7 @@ const genPaginationJumpStyle: GenerateStyle = (token fontSize: token.fontSizeSM, textAlign: 'center', backgroundColor: 'transparent', - border: `${token.lineWidth}px ${token.lineType} transparent`, + border: `${unit(token.lineWidth)} ${token.lineType} transparent`, borderRadius: token.borderRadius, outline: 'none', transition: `all ${token.motionDurationMid}`, @@ -460,13 +466,13 @@ const genPaginationJumpStyle: GenerateStyle = (token display: 'inline-block', height: token.controlHeight, marginInlineStart: token.marginXS, - lineHeight: `${token.controlHeight}px`, + lineHeight: unit(token.controlHeight), verticalAlign: 'top', input: { ...genBasicInputStyle(token), - width: token.controlHeightLG * 1.25, + width: token.calc(token.controlHeightLG).mul(1.25).equal(), height: token.controlHeight, boxSizing: 'border-box', margin: 0, @@ -488,12 +494,12 @@ const genPaginationItemStyle: GenerateStyle = (token height: token.itemSize, marginInlineEnd: token.marginXS, fontFamily: token.fontFamily, - lineHeight: `${token.itemSize - 2}px`, + lineHeight: unit(token.calc(token.itemSize).sub(2).equal()), textAlign: 'center', verticalAlign: 'middle', listStyle: 'none', backgroundColor: 'transparent', - border: `${token.lineWidth}px ${token.lineType} transparent`, + border: `${unit(token.lineWidth)} ${token.lineType} transparent`, borderRadius: token.borderRadius, outline: 0, cursor: 'pointer', @@ -501,7 +507,7 @@ const genPaginationItemStyle: GenerateStyle = (token a: { display: 'block', - padding: `0 ${token.paginationItemPaddingInline}px`, + padding: `0 ${unit(token.paginationItemPaddingInline)}`, color: token.colorText, '&:hover': { @@ -567,7 +573,7 @@ const genPaginationStyle: GenerateStyle = (token) => display: 'inline-block', height: token.itemSize, marginInlineEnd: token.marginXS, - lineHeight: `${token.itemSize - 2}px`, + lineHeight: unit(token.calc(token.itemSize).sub(2).equal()), verticalAlign: 'middle', }, @@ -609,102 +615,6 @@ const genPaginationStyle: GenerateStyle = (token) => }; }; -const genBorderedStyle: GenerateStyle = (token) => { - const { componentCls } = token; - - return { - [`${componentCls}${componentCls}-disabled:not(${componentCls}-mini)`]: { - '&, &:hover': { - [`${componentCls}-item-link`]: { - borderColor: token.colorBorder, - }, - }, - - '&:focus-visible': { - [`${componentCls}-item-link`]: { - borderColor: token.colorBorder, - }, - }, - - [`${componentCls}-item, ${componentCls}-item-link`]: { - backgroundColor: token.colorBgContainerDisabled, - borderColor: token.colorBorder, - - [`&:hover:not(${componentCls}-item-active)`]: { - backgroundColor: token.colorBgContainerDisabled, - borderColor: token.colorBorder, - - a: { - color: token.colorTextDisabled, - }, - }, - - [`&${componentCls}-item-active`]: { - backgroundColor: token.itemActiveBgDisabled, - }, - }, - - [`${componentCls}-prev, ${componentCls}-next`]: { - '&:hover button': { - backgroundColor: token.colorBgContainerDisabled, - borderColor: token.colorBorder, - color: token.colorTextDisabled, - }, - - [`${componentCls}-item-link`]: { - backgroundColor: token.colorBgContainerDisabled, - borderColor: token.colorBorder, - }, - }, - }, - - [`${componentCls}:not(${componentCls}-mini)`]: { - [`${componentCls}-prev, ${componentCls}-next`]: { - '&:hover button': { - borderColor: token.colorPrimaryHover, - backgroundColor: token.itemBg, - }, - - [`${componentCls}-item-link`]: { - backgroundColor: token.itemLinkBg, - borderColor: token.colorBorder, - }, - - [`&:hover ${componentCls}-item-link`]: { - borderColor: token.colorPrimary, - backgroundColor: token.itemBg, - color: token.colorPrimary, - }, - - [`&${componentCls}-disabled`]: { - [`${componentCls}-item-link`]: { - borderColor: token.colorBorder, - color: token.colorTextDisabled, - }, - }, - }, - - [`${componentCls}-item`]: { - backgroundColor: token.itemBg, - border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, - - [`&:hover:not(${componentCls}-item-active)`]: { - borderColor: token.colorPrimary, - backgroundColor: token.itemBg, - - a: { - color: token.colorPrimary, - }, - }, - - '&-active': { - borderColor: token.colorPrimary, - }, - }, - }, - }; -}; - const genPaginationFocusStyle: GenerateStyle = (token) => { const { componentCls } = token; @@ -735,40 +645,41 @@ const genPaginationFocusStyle: GenerateStyle = (token) => { }; }; +export const prepareComponentToken: GetDefaultToken<'Pagination'> = (token) => ({ + itemBg: token.colorBgContainer, + itemSize: token.controlHeight, + itemSizeSM: token.controlHeightSM, + itemActiveBg: token.colorBgContainer, + itemLinkBg: token.colorBgContainer, + itemActiveColorDisabled: token.colorTextDisabled, + itemActiveBgDisabled: token.controlItemBgActiveDisabled, + itemInputBg: token.colorBgContainer, + miniOptionsSizeChangerTop: 0, + ...initComponentToken(token), +}); + +export const prepareToken = (token: Parameters>[0]) => + mergeToken( + token, + { + inputOutlineOffset: 0, + paginationMiniOptionsMarginInlineStart: token.calc(token.marginXXS).div(2).equal(), + paginationMiniQuickJumperInputWidth: token.calc(token.controlHeightLG).mul(1.1).equal(), + paginationItemPaddingInline: token.calc(token.marginXXS).mul(1.5).equal(), + paginationEllipsisLetterSpacing: token.calc(token.marginXXS).div(2).equal(), + paginationSlashMarginInlineStart: token.marginXXS, + paginationSlashMarginInlineEnd: token.marginSM, + paginationEllipsisTextIndent: '0.13em', // magic for ui experience + }, + initInputToken(token), + ); + // ============================== Export ============================== export default genComponentStyleHook( 'Pagination', (token) => { - const paginationToken = mergeToken( - token, - { - inputOutlineOffset: 0, - paginationMiniOptionsMarginInlineStart: token.marginXXS / 2, - paginationMiniQuickJumperInputWidth: token.controlHeightLG * 1.1, - paginationItemPaddingInline: token.marginXXS * 1.5, - paginationEllipsisLetterSpacing: token.marginXXS / 2, - paginationSlashMarginInlineStart: token.marginXXS, - paginationSlashMarginInlineEnd: token.marginSM, - paginationEllipsisTextIndent: '0.13em', // magic for ui experience - }, - initInputToken(token), - initComponentToken(token), - ); - return [ - genPaginationStyle(paginationToken), - genPaginationFocusStyle(paginationToken), - token.wireframe && genBorderedStyle(paginationToken), - ]; + const paginationToken = prepareToken(token); + return [genPaginationStyle(paginationToken), genPaginationFocusStyle(paginationToken)]; }, - (token) => ({ - itemBg: token.colorBgContainer, - itemSize: token.controlHeight, - itemSizeSM: token.controlHeightSM, - itemActiveBg: token.colorBgContainer, - itemLinkBg: token.colorBgContainer, - itemActiveColorDisabled: token.colorTextDisabled, - itemActiveBgDisabled: token.controlItemBgActiveDisabled, - itemInputBg: token.colorBgContainer, - miniOptionsSizeChangerTop: 0, - }), + prepareComponentToken, ); diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx index cd8305e121..a68db05fe5 100644 --- a/scripts/check-cssinjs.tsx +++ b/scripts/check-cssinjs.tsx @@ -29,7 +29,6 @@ console.error = (msg: any) => { async function checkCSSVar() { await generateCssinjs({ key: 'check', - ignore: ['pagination'], render(Component: any) { ReactDOMServer.renderToString(