mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

feat: pagination support cssVar (#45800)

Browse Source 
* 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>
This commit is contained in:
kiner-tang(文辉) 2023-11-22 09:43:20 +08:00 committed by GitHub
parent 682904a9ec
commit f67abe4105
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 210 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/pagination/Pagination.tsx
View File

@ -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<PaginationProps> = (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<PaginationProps> = (props) => {
{
[`${prefixCls}-mini`]: isSmall,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-bordered`]: token.wireframe,
},
pagination?.className,
className,
@ -120,18 +126,21 @@ const Pagination: React.FC<PaginationProps> = (props) => {
const mergedStyle: React.CSSProperties = { ...pagination?.style, ...style };
return wrapSSR(
<RcPagination
{...iconsProps}
{...restProps}
style={mergedStyle}
prefixCls={prefixCls}
selectPrefixCls={selectPrefixCls}
className={extendedClassName}
selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
locale={locale}
showSizeChanger={mergedShowSizeChanger}
/>,
return wrapCSSVar(
<>
{token.wireframe && <BorderedStyle prefixCls={prefixCls} />}
<RcPagination
{...iconsProps}
{...restProps}
style={mergedStyle}
prefixCls={prefixCls}
selectPrefixCls={selectPrefixCls}
className={extendedClassName}
selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
locale={locale}
showSizeChanger={mergedShowSizeChanger}
/>
</>,
);
};

8
components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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 [
<ul
class="ant-pagination"
class="ant-pagination ant-pagination-bordered"
>
<li
aria-disabled="false"
@ -5323,7 +5323,7 @@ Array [
</ul>,
<br />,
<ul
class="ant-pagination ant-pagination-disabled"
class="ant-pagination ant-pagination-bordered ant-pagination-disabled"
>
<li
aria-disabled="false"
@ -5662,7 +5662,7 @@ Array [
</ul>,
<br />,
<ul
class="ant-pagination ant-pagination-mini"
class="ant-pagination ant-pagination-mini ant-pagination-bordered"
>
<li
aria-disabled="false"
@ -6000,7 +6000,7 @@ Array [
</ul>,
<br />,
<ul
class="ant-pagination ant-pagination-mini ant-pagination-disabled"
class="ant-pagination ant-pagination-mini ant-pagination-bordered ant-pagination-disabled"
>
<li
aria-disabled="false"

8
components/pagination/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -3624,7 +3624,7 @@ Array [
exports[`renders components/pagination/demo/wireframe.tsx correctly 1`] = `
Array [
<ul
class="ant-pagination"
class="ant-pagination ant-pagination-bordered"
>
<li
aria-disabled="false"
@ -3859,7 +3859,7 @@ Array [
</ul>,
<br />,
<ul
class="ant-pagination ant-pagination-disabled"
class="ant-pagination ant-pagination-bordered ant-pagination-disabled"
>
<li
aria-disabled="false"
@ -4095,7 +4095,7 @@ Array [
</ul>,
<br />,
<ul
class="ant-pagination ant-pagination-mini"
class="ant-pagination ant-pagination-mini ant-pagination-bordered"
>
<li
aria-disabled="false"
@ -4330,7 +4330,7 @@ Array [
</ul>,
<br />,
<ul
class="ant-pagination ant-pagination-mini ant-pagination-disabled"
class="ant-pagination ant-pagination-mini ant-pagination-bordered ant-pagination-disabled"
>
<li
aria-disabled="false"

111
components/pagination/style/bordered.ts Normal file
View File

@ -0,0 +1,111 @@
import { genSubStyleComponent } from '../../theme/util/genComponentStyleHook';
import type { PaginationToken } from '.';
import { prepareComponentToken, prepareToken } from '.';
import type { GenerateStyle } from '../../theme/interface';
import { unit } from '@ant-design/cssinjs';
const genBorderedStyle: GenerateStyle<PaginationToken> = (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,
);

4
components/pagination/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Pagination', prepareComponentToken);

219
components/pagination/style/index.ts
View File

@ -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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (token
'&::after': {
height: token.itemSizeSM,
lineHeight: `${token.itemSizeSM}px`,
lineHeight: unit(token.itemSizeSM),
},
},
@ -230,7 +234,7 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (token
[`&-quick-jumper`]: {
height: token.itemSizeSM,
lineHeight: `${token.itemSizeSM}px`,
lineHeight: unit(token.itemSizeSM),
input: {
...genInputSmallStyle(token),
@ -264,7 +268,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (tok
},
'&::after': {
height: token.itemSizeSM,
lineHeight: `${token.itemSizeSM}px`,
lineHeight: unit(token.itemSizeSM),
},
},
},
@ -292,10 +296,10 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (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<PaginationToken, CSSObject> = (token) =>
};
};
const genBorderedStyle: GenerateStyle<PaginationToken> = (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<PaginationToken> = (token) => {
const { componentCls } = token;
@ -735,40 +645,41 @@ const genPaginationFocusStyle: GenerateStyle<PaginationToken> = (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<GenStyleFn<'Pagination'>>[0]) =>
mergeToken<PaginationToken>(
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<PaginationToken>(
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,
);

1
scripts/check-cssinjs.tsx
View File

@ -29,7 +29,6 @@ console.error = (msg: any) => {
async function checkCSSVar() {
await generateCssinjs({
key: 'check',
ignore: ['pagination'],
render(Component: any) {
ReactDOMServer.renderToString(
<StyleProvider linters={[NaNLinter]}>