From 407958de8a2229d1b83f654c0321ede45f56dfa9 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 2 Jun 2022 19:27:31 +0800 Subject: [PATCH] refactor: pagination full token (#35872) * refactor: pagination full token * chore: code clean --- components/_util/theme/interface.ts | 1 + components/_util/theme/util/alias.ts | 1 + components/pagination/style/index.tsx | 58 ++++++++++++--------------- 3 files changed, 28 insertions(+), 32 deletions(-) diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index bfdba54305..b637e4413e 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -324,6 +324,7 @@ export interface AliasToken extends Omit { controlItemBgActive: string; // Note. It also is a color controlItemBgActiveHover: string; // Note. It also is a color controlInteractiveSize: number; + controlItemBgActiveDisabled: string; // Note. It also is a color // Color colorBorder: string; diff --git a/components/_util/theme/util/alias.ts b/components/_util/theme/util/alias.ts index 59c478711d..817f991828 100644 --- a/components/_util/theme/util/alias.ts +++ b/components/_util/theme/util/alias.ts @@ -95,6 +95,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken colorSplit: 'rgba(0, 0, 0, 0.06)', controlItemBgActive: primaryColors[0], controlItemBgActiveHover: new TinyColor(primaryColors[0]).darken(2).toRgbString(), + controlItemBgActiveDisabled: new TinyColor('#000').tint(90).toRgbString(), fontWeightStrong: 600, // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥 diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx index 9f63dea164..95b1b32e89 100644 --- a/components/pagination/style/index.tsx +++ b/components/pagination/style/index.tsx @@ -1,6 +1,5 @@ // deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; -import { TinyColor } from '@ctrl/tinycolor'; import { genBasicInputStyle, genInputSmallStyle, @@ -23,6 +22,13 @@ interface PaginationToken extends InputToken> { paginationItemDisabledColorActive: string; paginationItemLinkBg: string; inputOutlineOffset: string; + paginationMiniOptionsMarginInlineStart: number; + paginationMiniQuickJumperInputWidth: number; + paginationItemPaddingInline: number; + paginationEllipsisLetterSpacing: number; + paginationEllipsisTextIndent: string; + paginationSlashMarginInlineStart: number; + paginationSlashMarginInlineEnd: number; } const genPaginationDisabledStyle: GenerateStyle = token => { @@ -149,8 +155,7 @@ const genPaginationMiniStyle: GenerateStyle = token }, [`&&-mini ${componentCls}-options`]: { - // FIXME - marginInlineStart: 2, + marginInlineStart: token.paginationMiniOptionsMarginInlineStart, [`&-size-changer`]: { top: token.paginationMiniOptionsSizeChangerTop, @@ -163,8 +168,7 @@ const genPaginationMiniStyle: GenerateStyle = token input: { ...genInputSmallStyle(token), - // FIXME - width: 44, + width: token.paginationMiniQuickJumperInputWidth, height: token.controlHeightSM, }, }, @@ -204,8 +208,7 @@ const genPaginationSimpleStyle: GenerateStyle = toke boxSizing: 'border-box', height: '100%', marginInlineEnd: token.marginXS, - // FIXME: hardcode in v4 - padding: '0 6px', + padding: `0 ${token.paginationItemPaddingInline}px`, textAlign: 'center', backgroundColor: token.paginationItemInputBg, border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, @@ -246,8 +249,6 @@ const genPaginationJumpStyle: GenerateStyle = token [`${componentCls}-item-link-icon`]: { color: token.colorPrimary, fontSize: token.fontSizeSM, - // FIXME - letterSpacing: -1, opacity: 0, transition: `all ${token.motionDurationMid}`, @@ -270,11 +271,9 @@ const genPaginationJumpStyle: GenerateStyle = token margin: 'auto', color: token.colorTextDisabled, fontFamily: 'Arial, Helvetica, sans-serif', - // FIXME - letterSpacing: 2, + letterSpacing: token.paginationEllipsisLetterSpacing, textAlign: 'center', - // FIXME - textIndent: '0.13em', + textIndent: token.paginationEllipsisTextIndent, opacity: 1, transition: `all ${token.motionDurationMid}`, }, @@ -343,7 +342,6 @@ const genPaginationJumpStyle: GenerateStyle = token [`${componentCls}-item-link`]: { display: 'block', - // FIXME width: '100%', height: '100%', padding: 0, @@ -368,9 +366,8 @@ const genPaginationJumpStyle: GenerateStyle = token }, [`${componentCls}-slash`]: { - // FIXME - marginInlineEnd: 10, - marginInlineStart: 5, + marginInlineEnd: token.paginationSlashMarginInlineEnd, + marginInlineStart: token.paginationSlashMarginInlineStart, }, [`${componentCls}-options`]: { @@ -378,13 +375,6 @@ const genPaginationJumpStyle: GenerateStyle = token marginInlineStart: token.margin, verticalAlign: 'middle', - // IE11 css hack. `*::-ms-backdrop,` is a must have - '@media all and (-ms-high-contrast: none)': { - [`*::-ms-backdrop, &-options`]: { - verticalAlign: 'top', - }, - }, - '&-size-changer.-select': { display: 'inline-block', width: 'auto', @@ -400,8 +390,7 @@ const genPaginationJumpStyle: GenerateStyle = token input: { ...genBasicInputStyle(token), - // FIXME - width: 50, + width: token.controlHeightLG * 1.25, height: token.controlHeight, margin: 0, marginInlineStart: token.marginXS, @@ -435,8 +424,7 @@ const genPaginationItemStyle: GenerateStyle = token a: { display: 'block', - // FIXME - padding: '0 6px', + padding: `0 ${token.paginationItemPaddingInline}px`, color: token.colorText, transition: 'none', @@ -567,19 +555,25 @@ export default genComponentStyleHook('Pagination', token => { const paginationToken = mergeToken( token, { - // FIXME: missing token paginationItemSize: token.controlHeight, paginationFontFamily: token.fontFamily, paginationItemBg: token.colorBgComponent, paginationItemBgActive: token.colorBgComponent, - paginationFontWeightActive: 500, - paginationItemSizeSM: 24, + paginationFontWeightActive: token.fontWeightStrong, + paginationItemSizeSM: token.controlHeightSM, paginationItemInputBg: token.colorBgComponent, paginationMiniOptionsSizeChangerTop: 0, - paginationItemDisabledBgActive: new TinyColor('#000').tint(90).toString(), // tint(@black, 90%) + paginationItemDisabledBgActive: token.controlItemBgActiveDisabled, paginationItemDisabledColorActive: token.colorTextDisabled, paginationItemLinkBg: token.colorBgComponent, inputOutlineOffset: '0 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), );