1
This commit is contained in:
+41
@@ -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
@@ -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
@@ -0,0 +1,3 @@
|
||||
import Pagination from './Pagination';
|
||||
export type { PaginationConfig, PaginationProps, PaginationSemanticClassNames, PaginationSemanticName, PaginationSemanticStyles, } from './Pagination';
|
||||
export default Pagination;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
"use client";
|
||||
|
||||
import Pagination from './Pagination';
|
||||
export default Pagination;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
declare const _default: import("react").FunctionComponent<import("@ant-design/cssinjs-utils/lib/util/genStyleUtils").SubStyleComponentProps>;
|
||||
export default _default;
|
||||
+88
@@ -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
@@ -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
@@ -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);
|
||||
+3
@@ -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
@@ -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]);
|
||||
}
|
||||
Reference in New Issue
Block a user