This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+41
View File
@@ -0,0 +1,41 @@
import * as React from 'react';
import type { PaginationLocale, PaginationProps as RcPaginationProps } from '@rc-component/pagination';
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
import type { SizeType } from '../config-provider/SizeContext';
import type { SelectProps } from '../select';
export type SemanticName = keyof PaginationSemanticClassNames & keyof PaginationSemanticStyles;
export type PaginationSemanticName = SemanticName;
export type PaginationSemanticClassNames = {
root?: string;
item?: string;
};
export type PaginationSemanticStyles = {
root?: React.CSSProperties;
item?: React.CSSProperties;
};
export type PaginationClassNamesType = SemanticClassNamesType<PaginationProps, PaginationSemanticClassNames>;
export type PaginationStylesType = SemanticStylesType<PaginationProps, PaginationSemanticStyles>;
export interface PaginationProps extends Omit<RcPaginationProps, 'showSizeChanger' | 'pageSizeOptions' | 'classNames' | 'styles'> {
showQuickJumper?: boolean | {
goButton?: React.ReactNode;
};
size?: SizeType;
responsive?: boolean;
role?: string;
totalBoundaryShowSizeChanger?: number;
rootClassName?: string;
showSizeChanger?: boolean | SelectProps;
/** @deprecated Not official support. Will be removed in next major version. */
selectComponentClass?: any;
/** `string` type will be removed in next major version. */
pageSizeOptions?: (string | number)[];
classNames?: PaginationClassNamesType;
styles?: PaginationStylesType;
}
export type PaginationPosition = 'top' | 'bottom' | 'both';
export interface PaginationConfig extends Omit<PaginationProps, 'rootClassName'> {
position?: PaginationPosition;
}
export type { PaginationLocale };
declare const Pagination: React.FC<PaginationProps>;
export default Pagination;
+200
View File
@@ -0,0 +1,200 @@
"use client";
import * as React from 'react';
import DoubleLeftOutlined from "@ant-design/icons/es/icons/DoubleLeftOutlined";
import DoubleRightOutlined from "@ant-design/icons/es/icons/DoubleRightOutlined";
import LeftOutlined from "@ant-design/icons/es/icons/LeftOutlined";
import RightOutlined from "@ant-design/icons/es/icons/RightOutlined";
import RcPagination from '@rc-component/pagination';
import enUS from "@rc-component/pagination/es/locale/en_US";
import { clsx } from 'clsx';
import { useMergeSemantic } from '../_util/hooks';
import { devUseWarning } from '../_util/warning';
import { useComponentConfig } from '../config-provider/context';
import useSize from '../config-provider/hooks/useSize';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import { useLocale } from '../locale';
import Select from '../select';
import { useToken } from '../theme/internal';
import useStyle from './style';
import BorderedStyle from './style/bordered';
import useShowSizeChanger from './useShowSizeChanger';
const Pagination = props => {
const {
align,
prefixCls: customizePrefixCls,
selectPrefixCls: customizeSelectPrefixCls,
className,
rootClassName,
style,
size: customizeSize,
locale: customLocale,
responsive,
showSizeChanger,
selectComponentClass,
pageSizeOptions,
styles,
classNames,
...restProps
} = props;
const {
xs
} = useBreakpoint(responsive);
const [, token] = useToken();
const {
getPrefixCls,
direction,
showSizeChanger: contextShowSizeChangerConfig,
className: contextClassName,
style: contextStyle,
classNames: contextClassNames,
styles: contextStyles,
totalBoundaryShowSizeChanger: contextTotalBoundaryShowSizeChanger
} = useComponentConfig('pagination');
const prefixCls = getPrefixCls('pagination', customizePrefixCls);
// Style
const [hashId, cssVarCls] = useStyle(prefixCls);
// ============================== Size ==============================
const mergedSize = useSize(customizeSize);
const isSmall = mergedSize === 'small' || !!(xs && !mergedSize && responsive);
// =========== Merged Props for Semantic ==========
const mergedProps = {
...props,
size: mergedSize
};
// ========================= Style ==========================
const [mergedClassNames, mergedStyles] = useMergeSemantic([contextClassNames, classNames], [contextStyles, styles], {
props: mergedProps
});
// ============================= Locale =============================
const [contextLocale] = useLocale('Pagination', enUS);
const locale = {
...contextLocale,
...customLocale
};
// ========================== Size Changer ==========================
// Merge the props showSizeChanger
const [propShowSizeChanger, propSizeChangerSelectProps] = useShowSizeChanger(showSizeChanger);
const [contextShowSizeChanger, contextSizeChangerSelectProps] = useShowSizeChanger(contextShowSizeChangerConfig);
const mergedShowSizeChanger = propShowSizeChanger ?? contextShowSizeChanger;
const mergedShowSizeChangerSelectProps = propSizeChangerSelectProps ?? contextSizeChangerSelectProps;
const SizeChanger = selectComponentClass || Select;
// Generate options
const mergedPageSizeOptions = React.useMemo(() => {
return pageSizeOptions ? pageSizeOptions.map(Number) : undefined;
}, [pageSizeOptions]);
// Render size changer
const sizeChangerRender = info => {
const {
disabled,
size: pageSize,
onSizeChange,
'aria-label': ariaLabel,
className: sizeChangerClassName,
options
} = info;
const {
className: propSizeChangerClassName,
onChange: propSizeChangerOnChange
} = mergedShowSizeChangerSelectProps || {};
// Origin Select is using Select.Option,
// So it make the option value must be string
// Just for compatible
const selectedValue = options.find(option => String(option.value) === String(pageSize))?.value;
return /*#__PURE__*/React.createElement(SizeChanger, {
disabled: disabled,
showSearch: true,
popupMatchSelectWidth: false,
getPopupContainer: triggerNode => triggerNode.parentNode,
"aria-label": ariaLabel,
options: options,
...mergedShowSizeChangerSelectProps,
value: selectedValue,
onChange: (nextSize, option) => {
onSizeChange?.(nextSize);
propSizeChangerOnChange?.(nextSize, option);
},
size: mergedSize,
className: clsx(sizeChangerClassName, propSizeChangerClassName)
});
};
if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('Pagination');
process.env.NODE_ENV !== "production" ? warning(!selectComponentClass, 'usage', '`selectComponentClass` is not official api which will be removed.') : void 0;
}
// ============================= Render =============================
const iconsProps = React.useMemo(() => {
const ellipsis = /*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-item-ellipsis`
}, "\u2022\u2022\u2022");
const prevIcon = /*#__PURE__*/React.createElement("button", {
className: `${prefixCls}-item-link`,
type: "button",
tabIndex: -1
}, direction === 'rtl' ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(LeftOutlined, null));
const nextIcon = /*#__PURE__*/React.createElement("button", {
className: `${prefixCls}-item-link`,
type: "button",
tabIndex: -1
}, direction === 'rtl' ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(RightOutlined, null));
const jumpPrevIcon = /*#__PURE__*/React.createElement("a", {
className: `${prefixCls}-item-link`
}, /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-item-container`
}, direction === 'rtl' ? (/*#__PURE__*/React.createElement(DoubleRightOutlined, {
className: `${prefixCls}-item-link-icon`
})) : (/*#__PURE__*/React.createElement(DoubleLeftOutlined, {
className: `${prefixCls}-item-link-icon`
})), ellipsis));
const jumpNextIcon = /*#__PURE__*/React.createElement("a", {
className: `${prefixCls}-item-link`
}, /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-item-container`
}, direction === 'rtl' ? (/*#__PURE__*/React.createElement(DoubleLeftOutlined, {
className: `${prefixCls}-item-link-icon`
})) : (/*#__PURE__*/React.createElement(DoubleRightOutlined, {
className: `${prefixCls}-item-link-icon`
})), ellipsis));
return {
prevIcon,
nextIcon,
jumpPrevIcon,
jumpNextIcon
};
}, [direction, prefixCls]);
const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
const extendedClassName = clsx({
[`${prefixCls}-${align}`]: !!align,
[`${prefixCls}-${mergedSize}`]: mergedSize,
/** @deprecated Should be removed in v7 */
[`${prefixCls}-mini`]: isSmall,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-bordered`]: token.wireframe
}, contextClassName, className, rootClassName, mergedClassNames.root, hashId, cssVarCls);
const mergedStyle = {
...mergedStyles.root,
...contextStyle,
...style
};
return /*#__PURE__*/React.createElement(React.Fragment, null, token.wireframe && /*#__PURE__*/React.createElement(BorderedStyle, {
prefixCls: prefixCls
}), /*#__PURE__*/React.createElement(RcPagination, {
...iconsProps,
...restProps,
styles: mergedStyles,
classNames: mergedClassNames,
style: mergedStyle,
prefixCls: prefixCls,
selectPrefixCls: selectPrefixCls,
className: extendedClassName,
locale: locale,
pageSizeOptions: mergedPageSizeOptions,
showSizeChanger: mergedShowSizeChanger,
totalBoundaryShowSizeChanger: restProps.totalBoundaryShowSizeChanger ?? contextTotalBoundaryShowSizeChanger,
sizeChangerRender: sizeChangerRender
}));
};
if (process.env.NODE_ENV !== 'production') {
Pagination.displayName = 'Pagination';
}
export default Pagination;
+3
View File
@@ -0,0 +1,3 @@
import Pagination from './Pagination';
export type { PaginationConfig, PaginationProps, PaginationSemanticClassNames, PaginationSemanticName, PaginationSemanticStyles, } from './Pagination';
export default Pagination;
+4
View File
@@ -0,0 +1,4 @@
"use client";
import Pagination from './Pagination';
export default Pagination;
+2
View File
@@ -0,0 +1,2 @@
declare const _default: import("react").FunctionComponent<import("@ant-design/cssinjs-utils/lib/util/genStyleUtils").SubStyleComponentProps>;
export default _default;
+88
View File
@@ -0,0 +1,88 @@
import { unit } from '@ant-design/cssinjs';
import { prepareComponentToken, prepareToken } from '.';
import { genSubStyleComponent } from '../../theme/internal';
const genBorderedStyle = token => {
const {
componentCls
} = token;
return {
[`${componentCls}${componentCls}-bordered${componentCls}-disabled`]: {
'&, &: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`]: {
[`${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);
+119
View File
@@ -0,0 +1,119 @@
import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
import type { FullToken, GenStyleFn, GetDefaultToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc 页码选项背景色
* @descEN Background color of Pagination item
*/
itemBg: string;
/**
* @desc 页码尺寸
* @descEN Size of Pagination item
*/
itemSize: number;
/**
* @desc 小号页码尺寸
* @descEN Size of small Pagination item
*/
itemSizeSM: number;
/**
* @desc 大号页码尺寸
* @descEN Size of large Pagination item
*/
itemSizeLG: number;
/**
* @desc 页码激活态背景色
* @descEN Background color of active Pagination item
*/
itemActiveBg: string;
/**
* @desc 页码激活态文字颜色
* @descEN Text color of active Pagination item
*/
itemActiveColor: string;
/**
* @desc 页码激活态文字颜色悬停态
* @descEN Text color of active Pagination item hover
*/
itemActiveColorHover: string;
/**
* @desc 页码链接背景色
* @descEN Background color of Pagination item link
*/
itemLinkBg: string;
/**
* @desc 页码激活态禁用状态背景色
* @descEN Background color of disabled active Pagination item
*/
itemActiveBgDisabled: string;
/**
* @desc 页码激活态禁用状态文字颜色
* @descEN Text color of disabled active Pagination item
*/
itemActiveColorDisabled: string;
/**
* @desc 输入框背景色
* @descEN Background color of input
*/
itemInputBg: string;
/**
* @desc 每页展示数量选择器 top
* @descEN Top of Pagination size changer
*/
miniOptionsSizeChangerTop: number;
}
/**
* @desc Pagination 组件的 Token
* @descEN Token for Pagination component
*/
export interface PaginationToken extends FullToken<'Pagination'>, SharedComponentToken, SharedInputToken {
/**
* @desc 输入框轮廓偏移量
* @descEN Outline offset of input
*/
inputOutlineOffset: number;
/**
* @desc 快速跳转输入框宽度
* @descEN Width of quick jumper input
*/
quickJumperInputWidth: number | string;
/**
* @desc 迷你选项横向外边距
* @descEN Horizontal margin of mini options
*/
paginationMiniOptionsMarginInlineStart: number | string;
/**
* @desc 迷你快速跳转输入框宽度
* @descEN Width of mini quick jumper input
*/
paginationMiniQuickJumperInputWidth: number | string;
/**
* @desc 页码横向内边距
* @descEN Horizontal padding of Pagination item
*/
paginationItemPaddingInline: number | string;
/**
* @desc 省略号字母间距
* @descEN Letter spacing of ellipsis
*/
paginationEllipsisLetterSpacing: number | string;
/**
* @desc 省略号文本缩进
* @descEN Text indent of ellipsis
*/
paginationEllipsisTextIndent: string;
/**
* @desc 斜杠横向外边距
* @descEN Horizontal margin of slash
*/
paginationSlashMarginInlineStart: number;
/**
* @desc 斜杠横向外边距
* @descEN Horizontal margin of slash
*/
paginationSlashMarginInlineEnd: number;
}
export declare const prepareComponentToken: GetDefaultToken<'Pagination'>;
export declare const prepareToken: (token: Parameters<GenStyleFn<"Pagination">>[0]) => PaginationToken;
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
export default _default;
+529
View File
@@ -0,0 +1,529 @@
import { unit } from '@ant-design/cssinjs';
import { genBasicInputStyle, genInputLargeStyle, genInputSmallStyle, initComponentToken, initInputToken } from '../../input/style';
import { genBaseOutlinedStyle, genDisabledStyle } from '../../input/style/variants';
import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import { genCssVar } from '../../theme/util/genStyleUtils';
const genPaginationDisabledStyle = token => {
const {
componentCls
} = token;
return {
[`${componentCls}-disabled`]: {
'&, &:hover': {
cursor: 'not-allowed',
[`${componentCls}-item-link`]: {
color: token.colorTextDisabled,
cursor: 'not-allowed'
}
},
'&:focus-visible': {
cursor: 'not-allowed',
[`${componentCls}-item-link`]: {
color: token.colorTextDisabled,
cursor: 'not-allowed'
}
}
},
[`&${componentCls}-disabled`]: {
cursor: 'not-allowed',
[`${componentCls}-item`]: {
cursor: 'not-allowed',
backgroundColor: 'transparent',
'&:hover, &:active': {
backgroundColor: 'transparent'
},
a: {
color: token.colorTextDisabled,
backgroundColor: 'transparent',
border: 'none',
cursor: 'not-allowed'
},
'&-active': {
borderColor: token.colorBorder,
backgroundColor: token.itemActiveBgDisabled,
'&:hover, &:active': {
backgroundColor: token.itemActiveBgDisabled
},
a: {
color: token.itemActiveColorDisabled
}
}
},
[`${componentCls}-item-link`]: {
color: token.colorTextDisabled,
cursor: 'not-allowed',
'&:hover, &:active': {
backgroundColor: 'transparent'
},
[`${componentCls}-simple&`]: {
backgroundColor: 'transparent',
'&:hover, &:active': {
backgroundColor: 'transparent'
}
}
},
[`${componentCls}-simple-pager`]: {
color: token.colorTextDisabled
},
[`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
[`${componentCls}-item-link-icon`]: {
opacity: 0
},
[`${componentCls}-item-ellipsis`]: {
opacity: 1
}
}
}
};
};
const genPaginationSmallStyle = token => {
const {
componentCls
} = token;
return {
[`&${componentCls}-small ${componentCls}-options`]: {
marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
'&-quick-jumper': {
input: {
...genInputSmallStyle(token),
width: token.paginationMiniQuickJumperInputWidth
}
}
}
};
};
const genPaginationLargeStyle = token => {
const {
componentCls
} = token;
return {
[`&${componentCls}-large ${componentCls}-options`]: {
'&-quick-jumper': {
input: {
...genInputLargeStyle(token)
}
}
}
};
};
const genPaginationSimpleStyle = token => {
const {
componentCls,
antCls
} = token;
const [, varRef] = genCssVar(antCls, 'pagination');
return {
[`&${componentCls}-simple`]: {
[`${componentCls}-prev, ${componentCls}-next`]: {
height: varRef(`item-size-actual`),
lineHeight: varRef(`item-size-actual`),
verticalAlign: 'top',
[`${componentCls}-item-link`]: {
height: varRef(`item-size-actual`),
backgroundColor: 'transparent',
border: 0,
'&:hover': {
backgroundColor: token.colorBgTextHover
},
'&:active': {
backgroundColor: token.colorBgTextActive
},
'&::after': {
height: varRef(`item-size-actual`),
lineHeight: varRef(`item-size-actual`)
}
}
},
[`${componentCls}-simple-pager`]: {
display: 'inline-flex',
alignItems: 'center',
height: varRef(`item-size-actual`),
marginInlineEnd: varRef(`item-spacing-actual`),
input: {
boxSizing: 'border-box',
height: '100%',
width: token.quickJumperInputWidth,
padding: `0 ${unit(token.paginationItemPaddingInline)}`,
textAlign: 'center',
backgroundColor: token.itemInputBg,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
borderRadius: token.borderRadius,
outline: 'none',
transition: `border-color ${token.motionDurationMid}`,
color: 'inherit',
'&:hover': {
borderColor: token.colorPrimary
},
'&:focus': {
borderColor: token.colorPrimaryHover,
boxShadow: `${unit(token.inputOutlineOffset)} 0 ${unit(token.controlOutlineWidth)} ${token.controlOutline}`
},
'&[disabled]': {
color: token.colorTextDisabled,
backgroundColor: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
cursor: 'not-allowed'
}
}
},
[`&${componentCls}-disabled`]: {
[`${componentCls}-prev, ${componentCls}-next`]: {
[`${componentCls}-item-link`]: {
'&:hover, &:active': {
backgroundColor: 'transparent'
}
}
}
},
[`&${componentCls}-small`]: {
[`${componentCls}-simple-pager`]: {
input: {
width: token.paginationMiniQuickJumperInputWidth
}
}
}
}
};
};
const genPaginationJumpStyle = token => {
const {
componentCls,
antCls
} = token;
const [, varRef] = genCssVar(antCls, 'pagination');
return {
[`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
outline: 0,
[`${componentCls}-item-container`]: {
position: 'relative',
[`${componentCls}-item-link-icon`]: {
color: token.colorPrimary,
fontSize: token.fontSizeSM,
opacity: 0,
transition: `all ${token.motionDurationMid}`,
'&-svg': {
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
margin: 'auto'
}
},
[`${componentCls}-item-ellipsis`]: {
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
display: 'block',
margin: 'auto',
color: token.colorTextDisabled,
letterSpacing: token.paginationEllipsisLetterSpacing,
textAlign: 'center',
textIndent: token.paginationEllipsisTextIndent,
opacity: 1,
transition: `all ${token.motionDurationMid}`
}
},
'&:hover': {
[`${componentCls}-item-link-icon`]: {
opacity: 1
},
[`${componentCls}-item-ellipsis`]: {
opacity: 0
}
}
},
[`
${componentCls}-prev,
${componentCls}-jump-prev,
${componentCls}-jump-next
`]: {
marginInlineEnd: varRef(`item-spacing-actual`)
},
[`
${componentCls}-prev,
${componentCls}-next,
${componentCls}-jump-prev,
${componentCls}-jump-next
`]: {
display: 'inline-block',
minWidth: varRef(`item-size-actual`),
height: varRef(`item-size-actual`),
color: token.colorText,
fontFamily: token.fontFamily,
lineHeight: varRef(`item-size-actual`),
textAlign: 'center',
verticalAlign: 'middle',
listStyle: 'none',
borderRadius: token.borderRadius,
cursor: 'pointer',
transition: `all ${token.motionDurationMid}`
},
[`${componentCls}-prev, ${componentCls}-next`]: {
outline: 0,
button: {
color: token.colorText,
cursor: 'pointer',
userSelect: 'none'
},
[`${componentCls}-item-link`]: {
display: 'block',
width: '100%',
height: '100%',
padding: 0,
fontSize: token.fontSizeSM,
textAlign: 'center',
backgroundColor: 'transparent',
border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
borderRadius: token.borderRadius,
outline: 'none',
transition: `all ${token.motionDurationMid}`
},
[`&:hover ${componentCls}-item-link`]: {
backgroundColor: token.colorBgTextHover
},
[`&:active ${componentCls}-item-link`]: {
backgroundColor: token.colorBgTextActive
},
[`&${componentCls}-disabled:hover`]: {
[`${componentCls}-item-link`]: {
backgroundColor: 'transparent'
}
}
},
[`${componentCls}-slash`]: {
marginInlineEnd: token.paginationSlashMarginInlineEnd,
marginInlineStart: token.paginationSlashMarginInlineStart
},
[`${componentCls}-options`]: {
display: 'inline-block',
marginInlineStart: token.margin,
verticalAlign: 'middle',
'&-size-changer': {
width: 'auto'
},
'&-quick-jumper': {
display: 'inline-block',
height: varRef(`item-size-actual`),
marginInlineStart: token.marginXS,
lineHeight: varRef(`item-size-actual`),
verticalAlign: 'baseline',
input: {
...genBasicInputStyle(token),
...genBaseOutlinedStyle(token, {
borderColor: token.colorBorder,
hoverBorderColor: token.colorPrimaryHover,
activeBorderColor: token.colorPrimary,
activeShadow: token.activeShadow
}),
'&[disabled]': {
...genDisabledStyle(token)
},
width: token.quickJumperInputWidth,
height: varRef(`item-size-actual`),
boxSizing: 'border-box',
margin: 0,
marginInlineStart: varRef(`item-spacing-actual`),
marginInlineEnd: varRef(`item-spacing-actual`)
}
}
}
};
};
const genPaginationItemStyle = token => {
const {
componentCls,
antCls
} = token;
const [, varRef] = genCssVar(antCls, 'pagination');
return {
[`${componentCls}-item`]: {
display: 'inline-block',
minWidth: varRef(`item-size-actual`),
height: varRef(`item-size-actual`),
marginInlineEnd: varRef(`item-spacing-actual`),
fontFamily: token.fontFamily,
lineHeight: unit(token.calc(varRef('item-size-actual')).sub(2).equal()),
textAlign: 'center',
verticalAlign: 'middle',
listStyle: 'none',
backgroundColor: token.itemBg,
border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
borderRadius: token.borderRadius,
outline: 0,
cursor: 'pointer',
userSelect: 'none',
a: {
display: 'block',
padding: `0 ${unit(token.paginationItemPaddingInline)}`,
color: token.colorText,
'&:hover': {
textDecoration: 'none'
}
},
[`&:not(${componentCls}-item-active)`]: {
'&:hover': {
transition: `all ${token.motionDurationMid}`,
backgroundColor: token.colorBgTextHover
},
'&:active': {
backgroundColor: token.colorBgTextActive
}
},
'&-active': {
fontWeight: token.fontWeightStrong,
backgroundColor: token.itemActiveBg,
borderColor: token.colorPrimary,
a: {
color: token.itemActiveColor
},
'&:hover': {
borderColor: token.colorPrimaryHover
},
'&:hover a': {
color: token.itemActiveColorHover
}
}
}
};
};
const genPaginationStyle = token => {
const {
componentCls,
antCls
} = token;
const [varName, varRef] = genCssVar(antCls, 'pagination');
return {
[componentCls]: {
[varName(`item-size-actual`)]: unit(token.itemSize),
[varName(`item-spacing-actual`)]: unit(token.marginXS),
'&-small': {
[varName(`item-size-actual`)]: unit(token.itemSizeSM),
[varName(`item-spacing-actual`)]: unit(token.marginXXS)
},
'&-large': {
[varName(`item-size-actual`)]: unit(token.itemSizeLG),
[varName(`item-spacing-actual`)]: unit(token.marginSM)
},
...resetComponent(token),
display: 'flex',
alignItems: 'center',
'&-start': {
justifyContent: 'start'
},
'&-center': {
justifyContent: 'center'
},
'&-end': {
justifyContent: 'end'
},
'ul, ol': {
margin: 0,
padding: 0,
listStyle: 'none'
},
'&::after': {
display: 'block',
clear: 'both',
height: 0,
overflow: 'hidden',
visibility: 'hidden',
content: '""'
},
[`${componentCls}-total-text`]: {
display: 'inline-block',
height: varRef(`item-size-actual`),
marginInlineEnd: varRef(`item-spacing-actual`),
lineHeight: unit(token.calc(varRef(`item-size-actual`)).sub(2).equal()),
verticalAlign: 'middle'
},
// item style
...genPaginationItemStyle(token),
// jump btn style
...genPaginationJumpStyle(token),
// simple style
...genPaginationSimpleStyle(token),
// size style
...genPaginationSmallStyle(token),
...genPaginationLargeStyle(token),
// disabled style
...genPaginationDisabledStyle(token),
// media query style
[`@media only screen and (max-width: ${token.screenLG}px)`]: {
[`${componentCls}-item`]: {
'&-after-jump-prev, &-before-jump-next': {
display: 'none'
}
}
},
[`@media only screen and (max-width: ${token.screenSM}px)`]: {
[`${componentCls}-options`]: {
display: 'none'
}
}
},
// rtl style
[`&${token.componentCls}-rtl`]: {
direction: 'rtl'
}
};
};
const genPaginationFocusStyle = token => {
const {
componentCls
} = token;
return {
[`${componentCls}:not(${componentCls}-disabled)`]: {
[`${componentCls}-item`]: {
...genFocusStyle(token)
},
[`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
'&:focus-visible': {
[`${componentCls}-item-link-icon`]: {
opacity: 1
},
[`${componentCls}-item-ellipsis`]: {
opacity: 0
},
...genFocusOutline(token)
}
},
[`${componentCls}-prev, ${componentCls}-next`]: {
[`&:focus-visible ${componentCls}-item-link`]: genFocusOutline(token)
}
}
};
};
export const prepareComponentToken = token => ({
itemBg: token.colorBgContainer,
itemSize: token.controlHeight,
itemSizeSM: token.controlHeightSM,
itemSizeLG: token.controlHeightLG,
itemActiveBg: token.colorBgContainer,
itemActiveColor: token.colorPrimary,
itemActiveColorHover: token.colorPrimaryHover,
itemLinkBg: token.colorBgContainer,
itemActiveColorDisabled: token.colorTextDisabled,
itemActiveBgDisabled: token.controlItemBgActiveDisabled,
itemInputBg: token.colorBgContainer,
miniOptionsSizeChangerTop: 0,
...initComponentToken(token)
});
export const prepareToken = token => mergeToken(token, {
inputOutlineOffset: 0,
quickJumperInputWidth: token.calc(token.controlHeightLG).mul(1.25).equal(),
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.marginSM,
paginationSlashMarginInlineEnd: token.marginSM,
paginationEllipsisTextIndent: '0.13em' // magic for ui experience
}, initInputToken(token));
// ============================== Export ==============================
export default genStyleHooks('Pagination', token => {
const paginationToken = prepareToken(token);
return [genPaginationStyle(paginationToken), genPaginationFocusStyle(paginationToken)];
}, prepareComponentToken);
@@ -0,0 +1,3 @@
import type { PaginationProps } from '.';
import type { SelectProps } from '../select';
export default function useShowSizeChanger(showSizeChanger?: PaginationProps['showSizeChanger']): [show: boolean | undefined, selectProps: SelectProps<any, import("@rc-component/select/lib/Select").DefaultOptionType> | undefined];
+13
View File
@@ -0,0 +1,13 @@
import { useMemo } from 'react';
import { isPlainObject } from '../_util/is';
export default function useShowSizeChanger(showSizeChanger) {
return useMemo(() => {
if (typeof showSizeChanger === 'boolean') {
return [showSizeChanger, {}];
}
if (isPlainObject(showSizeChanger)) {
return [true, showSizeChanger];
}
return [undefined, undefined];
}, [showSizeChanger]);
}