fix(ts): 添加ts配置
This commit is contained in:
parent
f5ff6e760f
commit
3d8959891e
151
packages/meta/src/pagination/Pagination.tsx
Normal file
151
packages/meta/src/pagination/Pagination.tsx
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
|
||||||
|
import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
|
||||||
|
import LeftOutlined from '@ant-design/icons/LeftOutlined';
|
||||||
|
import RightOutlined from '@ant-design/icons/RightOutlined';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import type { PaginationLocale, PaginationProps as RcPaginationProps } from 'rc-pagination';
|
||||||
|
import RcPagination from 'rc-pagination';
|
||||||
|
import enUS from 'rc-pagination/lib/locale/en_US';
|
||||||
|
|
||||||
|
import { ConfigContext } from '../config-provider';
|
||||||
|
import useSize from '../config-provider/hooks/useSize';
|
||||||
|
import useBreakpoint from '../grid/hooks/useBreakpoint';
|
||||||
|
import { useLocale } from '../locale';
|
||||||
|
import { useToken } from '../theme/internal';
|
||||||
|
import { MiddleSelect, MiniSelect } from './Select';
|
||||||
|
import useStyle from './style';
|
||||||
|
import BorderedStyle from './style/bordered';
|
||||||
|
|
||||||
|
export interface PaginationProps extends RcPaginationProps {
|
||||||
|
showQuickJumper?: boolean | { goButton?: React.ReactNode };
|
||||||
|
size?: 'default' | 'small';
|
||||||
|
responsive?: boolean;
|
||||||
|
role?: string;
|
||||||
|
totalBoundaryShowSizeChanger?: number;
|
||||||
|
rootClassName?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type PaginationPosition = 'top' | 'bottom' | 'both';
|
||||||
|
|
||||||
|
export type PaginationAlign = 'start' | 'center' | 'end';
|
||||||
|
|
||||||
|
export interface PaginationConfig extends Omit<PaginationProps, 'rootClassName'> {
|
||||||
|
position?: PaginationPosition;
|
||||||
|
align?: PaginationAlign;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { PaginationLocale };
|
||||||
|
|
||||||
|
const Pagination: React.FC<PaginationProps> = (props) => {
|
||||||
|
const {
|
||||||
|
prefixCls: customizePrefixCls,
|
||||||
|
selectPrefixCls: customizeSelectPrefixCls,
|
||||||
|
className,
|
||||||
|
rootClassName,
|
||||||
|
style,
|
||||||
|
size: customizeSize,
|
||||||
|
locale: customLocale,
|
||||||
|
selectComponentClass,
|
||||||
|
responsive,
|
||||||
|
showSizeChanger,
|
||||||
|
...restProps
|
||||||
|
} = props;
|
||||||
|
const { xs } = useBreakpoint(responsive);
|
||||||
|
const [, token] = useToken();
|
||||||
|
|
||||||
|
const { getPrefixCls, direction, pagination = {} } = React.useContext(ConfigContext);
|
||||||
|
const prefixCls = getPrefixCls('pagination', customizePrefixCls);
|
||||||
|
|
||||||
|
// Style
|
||||||
|
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
|
||||||
|
|
||||||
|
const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger;
|
||||||
|
|
||||||
|
const iconsProps = React.useMemo<Record<PropertyKey, React.ReactNode>>(() => {
|
||||||
|
const ellipsis = <span className={`${prefixCls}-item-ellipsis`}>•••</span>;
|
||||||
|
const prevIcon = (
|
||||||
|
<button className={`${prefixCls}-item-link`} type="button" tabIndex={-1}>
|
||||||
|
{direction === 'rtl' ? <RightOutlined /> : <LeftOutlined />}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
const nextIcon = (
|
||||||
|
<button className={`${prefixCls}-item-link`} type="button" tabIndex={-1}>
|
||||||
|
{direction === 'rtl' ? <LeftOutlined /> : <RightOutlined />}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
const jumpPrevIcon = (
|
||||||
|
<a className={`${prefixCls}-item-link`}>
|
||||||
|
<div className={`${prefixCls}-item-container`}>
|
||||||
|
{direction === 'rtl' ? (
|
||||||
|
<DoubleRightOutlined className={`${prefixCls}-item-link-icon`} />
|
||||||
|
) : (
|
||||||
|
<DoubleLeftOutlined className={`${prefixCls}-item-link-icon`} />
|
||||||
|
)}
|
||||||
|
{ellipsis}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
const jumpNextIcon = (
|
||||||
|
<a className={`${prefixCls}-item-link`}>
|
||||||
|
<div className={`${prefixCls}-item-container`}>
|
||||||
|
{direction === 'rtl' ? (
|
||||||
|
<DoubleLeftOutlined className={`${prefixCls}-item-link-icon`} />
|
||||||
|
) : (
|
||||||
|
<DoubleRightOutlined className={`${prefixCls}-item-link-icon`} />
|
||||||
|
)}
|
||||||
|
{ellipsis}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon };
|
||||||
|
}, [direction, prefixCls]);
|
||||||
|
|
||||||
|
const [contextLocale] = useLocale('Pagination', enUS);
|
||||||
|
|
||||||
|
const locale = { ...contextLocale, ...customLocale };
|
||||||
|
|
||||||
|
const mergedSize = useSize(customizeSize);
|
||||||
|
|
||||||
|
const isSmall = mergedSize === 'small' || !!(xs && !mergedSize && responsive);
|
||||||
|
|
||||||
|
const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
|
||||||
|
|
||||||
|
const extendedClassName = classNames(
|
||||||
|
{
|
||||||
|
[`${prefixCls}-mini`]: isSmall,
|
||||||
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||||
|
[`${prefixCls}-bordered`]: token.wireframe,
|
||||||
|
},
|
||||||
|
pagination?.className,
|
||||||
|
className,
|
||||||
|
rootClassName,
|
||||||
|
hashId,
|
||||||
|
cssVarCls,
|
||||||
|
);
|
||||||
|
|
||||||
|
const mergedStyle: React.CSSProperties = { ...pagination?.style, ...style };
|
||||||
|
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
</>,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
|
Pagination.displayName = 'Pagination';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Pagination;
|
||||||
16
packages/meta/src/pagination/Select.tsx
Normal file
16
packages/meta/src/pagination/Select.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import type { SelectProps } from '../select';
|
||||||
|
import Select from '../select';
|
||||||
|
|
||||||
|
type CompoundedComponent = React.FC<SelectProps> & {
|
||||||
|
Option: typeof Select.Option;
|
||||||
|
};
|
||||||
|
|
||||||
|
const MiniSelect: CompoundedComponent = (props) => <Select {...props} showSearch size="small" />;
|
||||||
|
const MiddleSelect: CompoundedComponent = (props) => <Select {...props} showSearch size="middle" />;
|
||||||
|
|
||||||
|
MiniSelect.Option = Select.Option;
|
||||||
|
MiddleSelect.Option = Select.Option;
|
||||||
|
|
||||||
|
export { MiniSelect, MiddleSelect };
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,398 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Pagination ConfigProvider should be rendered correctly in RTL 1`] = `
|
||||||
|
<ul
|
||||||
|
class="ant-pagination ant-pagination-rtl"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
aria-disabled="true"
|
||||||
|
class="ant-pagination-prev ant-pagination-disabled"
|
||||||
|
title="Previous Page"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-pagination-item-link"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="right"
|
||||||
|
class="anticon anticon-right"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="right"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||||
|
tabindex="0"
|
||||||
|
title="1"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-2"
|
||||||
|
tabindex="0"
|
||||||
|
title="2"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-3"
|
||||||
|
tabindex="0"
|
||||||
|
title="3"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-4"
|
||||||
|
tabindex="0"
|
||||||
|
title="4"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
4
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-5"
|
||||||
|
tabindex="0"
|
||||||
|
title="5"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
5
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-disabled="false"
|
||||||
|
class="ant-pagination-next"
|
||||||
|
tabindex="0"
|
||||||
|
title="Next Page"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-pagination-item-link"
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="left"
|
||||||
|
class="anticon anticon-left"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="left"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Pagination ConfigProvider should be rendered correctly when componentSize is large 1`] = `
|
||||||
|
<ul
|
||||||
|
class="ant-pagination"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
aria-disabled="true"
|
||||||
|
class="ant-pagination-prev ant-pagination-disabled"
|
||||||
|
title="Previous Page"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-pagination-item-link"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="left"
|
||||||
|
class="anticon anticon-left"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="left"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||||
|
tabindex="0"
|
||||||
|
title="1"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-2"
|
||||||
|
tabindex="0"
|
||||||
|
title="2"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-3"
|
||||||
|
tabindex="0"
|
||||||
|
title="3"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-4"
|
||||||
|
tabindex="0"
|
||||||
|
title="4"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
4
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-5"
|
||||||
|
tabindex="0"
|
||||||
|
title="5"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
5
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-disabled="false"
|
||||||
|
class="ant-pagination-next"
|
||||||
|
tabindex="0"
|
||||||
|
title="Next Page"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-pagination-item-link"
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="right"
|
||||||
|
class="anticon anticon-right"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="right"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-options"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Page Size"
|
||||||
|
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-select-selector"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-search"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-label="Page Size"
|
||||||
|
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-select-selection-search-input"
|
||||||
|
id="rc_select_TEST_OR_SSR"
|
||||||
|
role="combobox"
|
||||||
|
type="search"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-item"
|
||||||
|
title="10 / page"
|
||||||
|
>
|
||||||
|
10 / page
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-select-arrow"
|
||||||
|
style="user-select: none;"
|
||||||
|
unselectable="on"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="down"
|
||||||
|
class="anticon anticon-down ant-select-suffix"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="down"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Pagination rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||||
|
<ul
|
||||||
|
class="ant-pagination ant-pagination-rtl"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
aria-disabled="true"
|
||||||
|
class="ant-pagination-prev ant-pagination-disabled"
|
||||||
|
title="Previous Page"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-pagination-item-link"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="right"
|
||||||
|
class="anticon anticon-right"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="right"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-disabled"
|
||||||
|
tabindex="0"
|
||||||
|
title="1"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
rel="nofollow"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-disabled="true"
|
||||||
|
class="ant-pagination-next ant-pagination-disabled"
|
||||||
|
title="Next Page"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-pagination-item-link"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="left"
|
||||||
|
class="anticon anticon-left"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="left"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
`;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { extendTest } from '../../../tests/shared/demoTest';
|
||||||
|
|
||||||
|
extendTest('pagination');
|
||||||
3
packages/meta/src/pagination/__tests__/demo.test.ts
Normal file
3
packages/meta/src/pagination/__tests__/demo.test.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import demoTest from '../../../tests/shared/demoTest';
|
||||||
|
|
||||||
|
demoTest('pagination');
|
||||||
5
packages/meta/src/pagination/__tests__/image.test.ts
Normal file
5
packages/meta/src/pagination/__tests__/image.test.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||||
|
|
||||||
|
describe('Pagination image', () => {
|
||||||
|
imageDemoTest('pagination');
|
||||||
|
});
|
||||||
92
packages/meta/src/pagination/__tests__/index.test.tsx
Normal file
92
packages/meta/src/pagination/__tests__/index.test.tsx
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { OptionFC } from 'rc-select/lib/Option';
|
||||||
|
|
||||||
|
import type { PaginationProps } from '..';
|
||||||
|
import Pagination from '..';
|
||||||
|
import mountTest from '../../../tests/shared/mountTest';
|
||||||
|
import rtlTest from '../../../tests/shared/rtlTest';
|
||||||
|
import { fireEvent, render } from '../../../tests/utils';
|
||||||
|
import ConfigProvider from '../../config-provider';
|
||||||
|
import Select from '../../select';
|
||||||
|
|
||||||
|
describe('Pagination', () => {
|
||||||
|
mountTest(Pagination);
|
||||||
|
rtlTest(Pagination);
|
||||||
|
|
||||||
|
it('should pass disabled to prev and next buttons', () => {
|
||||||
|
const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
|
||||||
|
if (type === 'prev') {
|
||||||
|
return <button type="button">prev</button>;
|
||||||
|
}
|
||||||
|
if (type === 'next') {
|
||||||
|
return <button type="button">next</button>;
|
||||||
|
}
|
||||||
|
return originalElement;
|
||||||
|
};
|
||||||
|
const { container } = render(
|
||||||
|
<Pagination defaultCurrent={1} total={50} itemRender={itemRender} />,
|
||||||
|
);
|
||||||
|
expect(container.querySelector('button')?.disabled).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should automatically be small when size is not specified', async () => {
|
||||||
|
const { container } = render(<Pagination responsive />);
|
||||||
|
expect(container.querySelector('ul')?.className.includes('ant-pagination-mini')).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
// https://github.com/ant-design/ant-design/issues/24913
|
||||||
|
// https://github.com/ant-design/ant-design/issues/24501
|
||||||
|
it('should onChange called when pageSize change', () => {
|
||||||
|
const onChange = jest.fn();
|
||||||
|
const onShowSizeChange = jest.fn();
|
||||||
|
const { container } = render(
|
||||||
|
<Pagination
|
||||||
|
defaultCurrent={1}
|
||||||
|
total={500}
|
||||||
|
onChange={onChange}
|
||||||
|
onShowSizeChange={onShowSizeChange}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
|
||||||
|
|
||||||
|
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
|
||||||
|
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
|
||||||
|
expect(onChange).toHaveBeenCalledWith(1, 20);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should support custom selectComponentClass', () => {
|
||||||
|
const CustomSelect: React.FC<{ className?: string }> & { Option: OptionFC } = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}) => <Select className={`${className} custom-select`} {...props} />;
|
||||||
|
|
||||||
|
CustomSelect.Option = Select.Option;
|
||||||
|
|
||||||
|
const { container } = render(
|
||||||
|
<Pagination defaultCurrent={1} total={500} selectComponentClass={CustomSelect} />,
|
||||||
|
);
|
||||||
|
expect(container.querySelectorAll('.custom-select').length).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('ConfigProvider', () => {
|
||||||
|
it('should be rendered correctly in RTL', () => {
|
||||||
|
const { asFragment } = render(
|
||||||
|
<ConfigProvider direction="rtl">
|
||||||
|
<Pagination defaultCurrent={1} total={50} />
|
||||||
|
</ConfigProvider>,
|
||||||
|
);
|
||||||
|
expect(asFragment().firstChild).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be rendered correctly when componentSize is large', () => {
|
||||||
|
const { container, asFragment } = render(
|
||||||
|
<ConfigProvider componentSize="large">
|
||||||
|
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
||||||
|
</ConfigProvider>,
|
||||||
|
);
|
||||||
|
expect(asFragment().firstChild).toMatchSnapshot();
|
||||||
|
expect(container.querySelectorAll('.ant-select-lg').length).toBe(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
19
packages/meta/src/pagination/__tests__/simple.test.tsx
Normal file
19
packages/meta/src/pagination/__tests__/simple.test.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import Pagination from '..';
|
||||||
|
import { render } from '../../../tests/utils';
|
||||||
|
|
||||||
|
describe('Pagination simple mode', () => {
|
||||||
|
it('should support showTotal in simple mode', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<Pagination
|
||||||
|
simple
|
||||||
|
total={100}
|
||||||
|
showTotal={(total: number, range: number[]) => `${range[0]}-${range[1]} of ${total} items`}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(container?.querySelector('.ant-pagination-total-text')).toHaveTextContent(
|
||||||
|
'1-10 of 100 items',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
7
packages/meta/src/pagination/demo/all.md
Normal file
7
packages/meta/src/pagination/demo/all.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
展示所有配置选项。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Show all configured prop.
|
||||||
13
packages/meta/src/pagination/demo/all.tsx
Normal file
13
packages/meta/src/pagination/demo/all.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<Pagination
|
||||||
|
total={85}
|
||||||
|
showSizeChanger
|
||||||
|
showQuickJumper
|
||||||
|
showTotal={(total) => `Total ${total} items`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/basic.md
Normal file
7
packages/meta/src/pagination/demo/basic.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
基础分页。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Basic pagination.
|
||||||
6
packages/meta/src/pagination/demo/basic.tsx
Normal file
6
packages/meta/src/pagination/demo/basic.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/changer.md
Normal file
7
packages/meta/src/pagination/demo/changer.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
改变每页显示条目数。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Change `pageSize`.
|
||||||
28
packages/meta/src/pagination/demo/changer.tsx
Normal file
28
packages/meta/src/pagination/demo/changer.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { PaginationProps } from 'antd';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
|
||||||
|
console.log(current, pageSize);
|
||||||
|
};
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<Pagination
|
||||||
|
showSizeChanger
|
||||||
|
onShowSizeChange={onShowSizeChange}
|
||||||
|
defaultCurrent={3}
|
||||||
|
total={500}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Pagination
|
||||||
|
showSizeChanger
|
||||||
|
onShowSizeChange={onShowSizeChange}
|
||||||
|
defaultCurrent={3}
|
||||||
|
total={500}
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/component-token.md
Normal file
7
packages/meta/src/pagination/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
Component Token Debug.
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Component Token Debug.
|
||||||
44
packages/meta/src/pagination/demo/component-token.tsx
Normal file
44
packages/meta/src/pagination/demo/component-token.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { PaginationProps } from 'antd';
|
||||||
|
import { ConfigProvider, Pagination } from 'antd';
|
||||||
|
|
||||||
|
const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
|
||||||
|
if (type === 'prev') {
|
||||||
|
return <a>Previous</a>;
|
||||||
|
}
|
||||||
|
if (type === 'next') {
|
||||||
|
return <a>Next</a>;
|
||||||
|
}
|
||||||
|
return originalElement;
|
||||||
|
};
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
components: {
|
||||||
|
Pagination: {
|
||||||
|
itemSize: 20,
|
||||||
|
itemSizeSM: 12,
|
||||||
|
itemActiveBg: '#e7cc87',
|
||||||
|
itemLinkBg: '#344324',
|
||||||
|
itemActiveBgDisabled: '#9c1515',
|
||||||
|
itemInputBg: '#9c1515',
|
||||||
|
miniOptionsSizeChangerTop: 0,
|
||||||
|
itemBg: '#333',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Pagination
|
||||||
|
showSizeChanger
|
||||||
|
defaultCurrent={3}
|
||||||
|
total={500}
|
||||||
|
itemRender={itemRender}
|
||||||
|
showQuickJumper
|
||||||
|
showTotal={(total) => `Total ${total} items`}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Pagination showSizeChanger defaultCurrent={3} total={500} disabled />
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/controlled.md
Normal file
7
packages/meta/src/pagination/demo/controlled.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
受控制的页码。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Controlled page number.
|
||||||
16
packages/meta/src/pagination/demo/controlled.tsx
Normal file
16
packages/meta/src/pagination/demo/controlled.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import type { PaginationProps } from 'antd';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [current, setCurrent] = useState(3);
|
||||||
|
|
||||||
|
const onChange: PaginationProps['onChange'] = (page) => {
|
||||||
|
console.log(page);
|
||||||
|
setCurrent(page);
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Pagination current={current} onChange={onChange} total={50} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/itemRender.md
Normal file
7
packages/meta/src/pagination/demo/itemRender.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
修改上一步和下一步为文字链接。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Use text link for prev and next button.
|
||||||
17
packages/meta/src/pagination/demo/itemRender.tsx
Normal file
17
packages/meta/src/pagination/demo/itemRender.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { PaginationProps } from 'antd';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
|
||||||
|
if (type === 'prev') {
|
||||||
|
return <a>Previous</a>;
|
||||||
|
}
|
||||||
|
if (type === 'next') {
|
||||||
|
return <a>Next</a>;
|
||||||
|
}
|
||||||
|
return originalElement;
|
||||||
|
};
|
||||||
|
|
||||||
|
const App: React.FC = () => <Pagination total={500} itemRender={itemRender} />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/jump.md
Normal file
7
packages/meta/src/pagination/demo/jump.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
快速跳转到某一页。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Jump to a page directly.
|
||||||
17
packages/meta/src/pagination/demo/jump.tsx
Normal file
17
packages/meta/src/pagination/demo/jump.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { PaginationProps } from 'antd';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const onChange: PaginationProps['onChange'] = (pageNumber) => {
|
||||||
|
console.log('Page: ', pageNumber);
|
||||||
|
};
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
|
||||||
|
<br />
|
||||||
|
<Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
13
packages/meta/src/pagination/demo/mini.md
Normal file
13
packages/meta/src/pagination/demo/mini.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
迷你版本。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Mini size pagination.
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
23
packages/meta/src/pagination/demo/mini.tsx
Normal file
23
packages/meta/src/pagination/demo/mini.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { PaginationProps } from 'antd';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const showTotal: PaginationProps['showTotal'] = (total) => `Total ${total} items`;
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<Pagination size="small" total={50} />
|
||||||
|
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
|
||||||
|
<Pagination size="small" total={50} showTotal={showTotal} />
|
||||||
|
<Pagination
|
||||||
|
size="small"
|
||||||
|
total={50}
|
||||||
|
disabled
|
||||||
|
showTotal={showTotal}
|
||||||
|
showSizeChanger
|
||||||
|
showQuickJumper
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/more.md
Normal file
7
packages/meta/src/pagination/demo/more.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
更多分页。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
More pages.
|
||||||
6
packages/meta/src/pagination/demo/more.tsx
Normal file
6
packages/meta/src/pagination/demo/more.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => <Pagination defaultCurrent={6} total={500} />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/simple.md
Normal file
7
packages/meta/src/pagination/demo/simple.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
简单的翻页。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Simple mode.
|
||||||
12
packages/meta/src/pagination/demo/simple.tsx
Normal file
12
packages/meta/src/pagination/demo/simple.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<Pagination simple defaultCurrent={2} total={50} />
|
||||||
|
<br />
|
||||||
|
<Pagination disabled simple defaultCurrent={2} total={50} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/total.md
Normal file
7
packages/meta/src/pagination/demo/total.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
通过设置 `showTotal` 展示总共有多少数据。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
You can show the total number of data by setting `showTotal`.
|
||||||
22
packages/meta/src/pagination/demo/total.tsx
Normal file
22
packages/meta/src/pagination/demo/total.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<Pagination
|
||||||
|
total={85}
|
||||||
|
showTotal={(total) => `Total ${total} items`}
|
||||||
|
defaultPageSize={20}
|
||||||
|
defaultCurrent={1}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Pagination
|
||||||
|
total={85}
|
||||||
|
showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
|
||||||
|
defaultPageSize={20}
|
||||||
|
defaultCurrent={1}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
7
packages/meta/src/pagination/demo/wireframe.md
Normal file
7
packages/meta/src/pagination/demo/wireframe.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
线框化样式。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Wireframe style.
|
||||||
16
packages/meta/src/pagination/demo/wireframe.tsx
Normal file
16
packages/meta/src/pagination/demo/wireframe.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ConfigProvider, Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<ConfigProvider theme={{ token: { wireframe: true } }}>
|
||||||
|
<Pagination showSizeChanger defaultCurrent={3} total={500} />
|
||||||
|
<br />
|
||||||
|
<Pagination showSizeChanger defaultCurrent={3} total={500} disabled />
|
||||||
|
<br />
|
||||||
|
<Pagination size="small" defaultCurrent={50} total={500} />
|
||||||
|
<br />
|
||||||
|
<Pagination disabled size="small" defaultCurrent={50} total={500} />
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
39
packages/meta/src/pagination/design/behavior-pattern.tsx
Normal file
39
packages/meta/src/pagination/design/behavior-pattern.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
|
||||||
|
|
||||||
|
const BehaviorPattern: React.FC = () => (
|
||||||
|
<BehaviorMap
|
||||||
|
data={{
|
||||||
|
id: '200000004',
|
||||||
|
label: '跳转页面',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: '500000061',
|
||||||
|
label: '跳转至指定页面',
|
||||||
|
targetType: 'mvp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '200000005',
|
||||||
|
label: '调整单页展示条数',
|
||||||
|
targetType: 'extension',
|
||||||
|
link: 'components-pagination-index-tab-design-demo-page-size',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '200000006',
|
||||||
|
label: '快速跳转',
|
||||||
|
targetType: 'extension',
|
||||||
|
link: 'components-pagination-index-tab-design-demo-quick-jump',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '200000007',
|
||||||
|
label: '了解数据总量',
|
||||||
|
targetType: 'extension',
|
||||||
|
link: 'components-pagination-index-tab-design-demo-total',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default BehaviorPattern;
|
||||||
6
packages/meta/src/pagination/design/demo/basic.tsx
Normal file
6
packages/meta/src/pagination/design/demo/basic.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => <Pagination defaultCurrent={2} total={50} showSizeChanger={false} />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => <Pagination defaultCurrent={5} total={100} showSizeChanger={false} />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
20
packages/meta/src/pagination/design/demo/mini.tsx
Normal file
20
packages/meta/src/pagination/design/demo/mini.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Flex, Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<Flex vertical gap="middle">
|
||||||
|
<Pagination defaultCurrent={1} total={50} showSizeChanger={false} size="small" />
|
||||||
|
<Pagination defaultCurrent={1} total={100} showSizeChanger={false} size="small" />
|
||||||
|
<Pagination defaultCurrent={1} total={100} size="small" />
|
||||||
|
<Pagination defaultCurrent={1} total={100} showQuickJumper size="small" />
|
||||||
|
<Pagination
|
||||||
|
defaultCurrent={1}
|
||||||
|
total={100}
|
||||||
|
showQuickJumper
|
||||||
|
size="small"
|
||||||
|
showTotal={(total, range) => `第 ${range.join('-')} 条 / 共 ${total} 条`}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
6
packages/meta/src/pagination/design/demo/page-size.tsx
Normal file
6
packages/meta/src/pagination/design/demo/page-size.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => <Pagination defaultCurrent={3} total={500} />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
6
packages/meta/src/pagination/design/demo/quick-jump.tsx
Normal file
6
packages/meta/src/pagination/design/demo/quick-jump.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => <Pagination defaultCurrent={3} total={500} showQuickJumper />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
8
packages/meta/src/pagination/design/demo/simple.tsx
Normal file
8
packages/meta/src/pagination/design/demo/simple.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<Pagination defaultCurrent={2} total={50} showSizeChanger={false} simple />
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
13
packages/meta/src/pagination/design/demo/total.tsx
Normal file
13
packages/meta/src/pagination/design/demo/total.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<Pagination
|
||||||
|
defaultCurrent={3}
|
||||||
|
total={500}
|
||||||
|
showQuickJumper
|
||||||
|
showTotal={(total, range) => `第 ${range.join('-')} 条 / 共 ${total} 条`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
4
packages/meta/src/pagination/index.ts
Normal file
4
packages/meta/src/pagination/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Pagination from './Pagination';
|
||||||
|
|
||||||
|
export type { PaginationConfig, PaginationProps } from './Pagination';
|
||||||
|
export default Pagination;
|
||||||
62
packages/meta/src/pagination/index.zh-CN.md
Normal file
62
packages/meta/src/pagination/index.zh-CN.md
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
category: Components
|
||||||
|
group: 导航
|
||||||
|
title: Pagination
|
||||||
|
subtitle: 分页
|
||||||
|
description: 分页器用于分隔长列表，每次只加载一个页面。
|
||||||
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original
|
||||||
|
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original
|
||||||
|
---
|
||||||
|
|
||||||
|
## 何时使用
|
||||||
|
|
||||||
|
- 当加载/渲染所有数据将花费很多时间时；
|
||||||
|
- 可切换页码浏览数据。
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
<code src="./demo/basic.tsx">基本</code>
|
||||||
|
<code src="./demo/more.tsx">更多</code>
|
||||||
|
<code src="./demo/changer.tsx">改变</code>
|
||||||
|
<code src="./demo/jump.tsx">跳转</code>
|
||||||
|
<code src="./demo/mini.tsx">迷你</code>
|
||||||
|
<code src="./demo/simple.tsx">简洁</code>
|
||||||
|
<code src="./demo/controlled.tsx">受控</code>
|
||||||
|
<code src="./demo/total.tsx">总数</code>
|
||||||
|
<code src="./demo/all.tsx">全部展示</code>
|
||||||
|
<code src="./demo/itemRender.tsx">上一步和下一步</code>
|
||||||
|
<code src="./demo/wireframe.tsx" debug>线框风格</code>
|
||||||
|
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
通用属性参考：[通用属性](/docs/react/common-props)
|
||||||
|
|
||||||
|
```js
|
||||||
|
<Pagination onChange={onChange} total={50} />
|
||||||
|
```
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| current | 当前页数 | number | - | |
|
||||||
|
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
||||||
|
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
||||||
|
| disabled | 禁用分页 | boolean | - | |
|
||||||
|
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
||||||
|
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
||||||
|
| pageSize | 每页条数 | number | - | |
|
||||||
|
| pageSizeOptions | 指定每页可以显示多少条 | string\[] \| number\[] | \[`10`, `20`, `50`, `100`] | |
|
||||||
|
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
||||||
|
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
||||||
|
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
||||||
|
| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean | - | |
|
||||||
|
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
||||||
|
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
||||||
|
| simple | 当添加该属性时，显示为简单分页 | boolean | - | |
|
||||||
|
| size | 当为 `small` 时，是小尺寸分页 | `default` \| `small` | `default` | |
|
||||||
|
| total | 数据总数 | number | 0 | |
|
||||||
|
| onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | |
|
||||||
|
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
||||||
|
|
||||||
|
## 主题变量（Design Token）
|
||||||
112
packages/meta/src/pagination/style/bordered.ts
Normal file
112
packages/meta/src/pagination/style/bordered.ts
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
import { unit } from '@ant-design/cssinjs';
|
||||||
|
|
||||||
|
import type { PaginationToken } from '.';
|
||||||
|
import { prepareComponentToken, prepareToken } from '.';
|
||||||
|
import type { GenerateStyle } from '../../theme/interface';
|
||||||
|
import { genSubStyleComponent } from '../../theme/util/genComponentStyleHook';
|
||||||
|
|
||||||
|
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,
|
||||||
|
);
|
||||||
697
packages/meta/src/pagination/style/index.ts
Normal file
697
packages/meta/src/pagination/style/index.ts
Normal file
@ -0,0 +1,697 @@
|
|||||||
|
import { unit } from '@ant-design/cssinjs';
|
||||||
|
import type { CSSObject } from '@ant-design/cssinjs';
|
||||||
|
import type { GenStyleFn } from 'antd/es/theme/util/genComponentStyleHook';
|
||||||
|
|
||||||
|
import {
|
||||||
|
genBasicInputStyle,
|
||||||
|
genInputSmallStyle,
|
||||||
|
initComponentToken,
|
||||||
|
initInputToken,
|
||||||
|
} from '../../input/style';
|
||||||
|
import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
|
||||||
|
import { genBaseOutlinedStyle, genDisabledStyle } from '../../input/style/variants';
|
||||||
|
import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
|
||||||
|
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||||
|
import { genStyleHooks, mergeToken } 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 Background color of active Pagination item
|
||||||
|
*/
|
||||||
|
itemActiveBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 小号页码尺寸
|
||||||
|
* @descEN Size of small Pagination item
|
||||||
|
*/
|
||||||
|
itemSizeSM: number;
|
||||||
|
/**
|
||||||
|
* @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;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaginationToken
|
||||||
|
extends FullToken<'Pagination'>,
|
||||||
|
SharedComponentToken,
|
||||||
|
SharedInputToken {
|
||||||
|
inputOutlineOffset: number;
|
||||||
|
paginationMiniOptionsMarginInlineStart: number | string;
|
||||||
|
paginationMiniQuickJumperInputWidth: number | string;
|
||||||
|
paginationItemPaddingInline: number | string;
|
||||||
|
paginationEllipsisLetterSpacing: number | string;
|
||||||
|
paginationEllipsisTextIndent: string;
|
||||||
|
paginationSlashMarginInlineStart: number;
|
||||||
|
paginationSlashMarginInlineEnd: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (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',
|
||||||
|
|
||||||
|
'&: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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[`&${componentCls}-simple`]: {
|
||||||
|
[`${componentCls}-prev, ${componentCls}-next`]: {
|
||||||
|
[`&${componentCls}-disabled ${componentCls}-item-link`]: {
|
||||||
|
'&:hover, &:active': {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||||
|
const { componentCls } = token;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]:
|
||||||
|
{
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
lineHeight: unit(token.itemSizeSM),
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&${componentCls}-mini ${componentCls}-item`]: {
|
||||||
|
minWidth: token.itemSizeSM,
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
margin: 0,
|
||||||
|
lineHeight: unit(token.calc(token.itemSizeSM).sub(2).equal()),
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&${componentCls}-mini:not(${componentCls}-disabled) ${componentCls}-item:not(${componentCls}-item-active)`]:
|
||||||
|
{
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
borderColor: 'transparent',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: token.colorBgTextHover,
|
||||||
|
},
|
||||||
|
'&:active': {
|
||||||
|
backgroundColor: token.colorBgTextActive,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
|
||||||
|
minWidth: token.itemSizeSM,
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
margin: 0,
|
||||||
|
lineHeight: unit(token.itemSizeSM),
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&${componentCls}-mini:not(${componentCls}-disabled)`]: {
|
||||||
|
[`${componentCls}-prev, ${componentCls}-next`]: {
|
||||||
|
[`&:hover ${componentCls}-item-link`]: {
|
||||||
|
backgroundColor: token.colorBgTextHover,
|
||||||
|
},
|
||||||
|
[`&:active ${componentCls}-item-link`]: {
|
||||||
|
backgroundColor: token.colorBgTextActive,
|
||||||
|
},
|
||||||
|
[`&${componentCls}-disabled:hover ${componentCls}-item-link`]: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`
|
||||||
|
&${componentCls}-mini ${componentCls}-prev ${componentCls}-item-link,
|
||||||
|
&${componentCls}-mini ${componentCls}-next ${componentCls}-item-link
|
||||||
|
`]: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
borderColor: 'transparent',
|
||||||
|
|
||||||
|
'&::after': {
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
lineHeight: unit(token.itemSizeSM),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]:
|
||||||
|
{
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
marginInlineEnd: 0,
|
||||||
|
lineHeight: unit(token.itemSizeSM),
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&${componentCls}-mini ${componentCls}-options`]: {
|
||||||
|
marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
|
||||||
|
|
||||||
|
[`&-size-changer`]: {
|
||||||
|
top: token.miniOptionsSizeChangerTop,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&-quick-jumper`]: {
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
lineHeight: unit(token.itemSizeSM),
|
||||||
|
|
||||||
|
input: {
|
||||||
|
...genInputSmallStyle(token),
|
||||||
|
|
||||||
|
width: token.paginationMiniQuickJumperInputWidth,
|
||||||
|
height: token.controlHeightSM,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||||
|
const { componentCls } = token;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`
|
||||||
|
&${componentCls}-simple ${componentCls}-prev,
|
||||||
|
&${componentCls}-simple ${componentCls}-next
|
||||||
|
`]: {
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
lineHeight: unit(token.itemSizeSM),
|
||||||
|
verticalAlign: 'top',
|
||||||
|
[`${componentCls}-item-link`]: {
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
border: 0,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: token.colorBgTextHover,
|
||||||
|
},
|
||||||
|
'&:active': {
|
||||||
|
backgroundColor: token.colorBgTextActive,
|
||||||
|
},
|
||||||
|
'&::after': {
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
lineHeight: unit(token.itemSizeSM),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&${componentCls}-simple ${componentCls}-simple-pager`]: {
|
||||||
|
display: 'inline-block',
|
||||||
|
height: token.itemSizeSM,
|
||||||
|
marginInlineEnd: token.marginXS,
|
||||||
|
|
||||||
|
input: {
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
height: '100%',
|
||||||
|
marginInlineEnd: token.marginXS,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||||
|
const { componentCls } = token;
|
||||||
|
|
||||||
|
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,
|
||||||
|
fontFamily: 'Arial, Helvetica, sans-serif',
|
||||||
|
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: token.marginXS,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`
|
||||||
|
${componentCls}-prev,
|
||||||
|
${componentCls}-next,
|
||||||
|
${componentCls}-jump-prev,
|
||||||
|
${componentCls}-jump-next
|
||||||
|
`]: {
|
||||||
|
display: 'inline-block',
|
||||||
|
minWidth: token.itemSize,
|
||||||
|
height: token.itemSize,
|
||||||
|
color: token.colorText,
|
||||||
|
fontFamily: token.fontFamily,
|
||||||
|
lineHeight: `${unit(token.itemSize)}`,
|
||||||
|
textAlign: 'center',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
listStyle: 'none',
|
||||||
|
borderRadius: token.borderRadius,
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: `all ${token.motionDurationMid}`,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-prev, ${componentCls}-next`]: {
|
||||||
|
fontFamily: 'Arial, Helvetica, sans-serif',
|
||||||
|
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': {
|
||||||
|
display: 'inline-block',
|
||||||
|
width: 'auto',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-quick-jumper': {
|
||||||
|
display: 'inline-block',
|
||||||
|
height: token.controlHeight,
|
||||||
|
marginInlineStart: token.marginXS,
|
||||||
|
lineHeight: unit(token.controlHeight),
|
||||||
|
verticalAlign: 'top',
|
||||||
|
|
||||||
|
input: {
|
||||||
|
...genBasicInputStyle(token),
|
||||||
|
...genBaseOutlinedStyle(token, {
|
||||||
|
borderColor: token.colorBorder,
|
||||||
|
hoverBorderColor: token.colorPrimaryHover,
|
||||||
|
activeBorderColor: token.colorPrimary,
|
||||||
|
activeShadow: token.activeShadow,
|
||||||
|
}),
|
||||||
|
'&[disabled]': {
|
||||||
|
...genDisabledStyle(token),
|
||||||
|
},
|
||||||
|
|
||||||
|
width: token.calc(token.controlHeightLG).mul(1.25).equal(),
|
||||||
|
height: token.controlHeight,
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
margin: 0,
|
||||||
|
marginInlineStart: token.marginXS,
|
||||||
|
marginInlineEnd: token.marginXS,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||||
|
const { componentCls } = token;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`${componentCls}-item`]: {
|
||||||
|
display: 'inline-block',
|
||||||
|
minWidth: token.itemSize,
|
||||||
|
height: token.itemSize,
|
||||||
|
marginInlineEnd: token.marginXS,
|
||||||
|
fontFamily: token.fontFamily,
|
||||||
|
lineHeight: unit(token.calc(token.itemSize).sub(2).equal()),
|
||||||
|
textAlign: 'center',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
listStyle: 'none',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
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.colorPrimary,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:hover': {
|
||||||
|
borderColor: token.colorPrimaryHover,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:hover a': {
|
||||||
|
color: token.colorPrimaryHover,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||||
|
const { componentCls } = token;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[componentCls]: {
|
||||||
|
...resetComponent(token),
|
||||||
|
|
||||||
|
'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: token.itemSize,
|
||||||
|
marginInlineEnd: token.marginXS,
|
||||||
|
lineHeight: unit(token.calc(token.itemSize).sub(2).equal()),
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
},
|
||||||
|
|
||||||
|
// item style
|
||||||
|
...genPaginationItemStyle(token),
|
||||||
|
|
||||||
|
// jump btn style
|
||||||
|
...genPaginationJumpStyle(token),
|
||||||
|
|
||||||
|
// simple style
|
||||||
|
...genPaginationSimpleStyle(token),
|
||||||
|
|
||||||
|
// mini style
|
||||||
|
...genPaginationMiniStyle(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: GenerateStyle<PaginationToken> = (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: 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 genStyleHooks(
|
||||||
|
'Pagination',
|
||||||
|
(token) => {
|
||||||
|
const paginationToken = prepareToken(token);
|
||||||
|
return [genPaginationStyle(paginationToken), genPaginationFocusStyle(paginationToken)];
|
||||||
|
},
|
||||||
|
prepareComponentToken,
|
||||||
|
);
|
||||||
@ -43,6 +43,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
|
|||||||
title = String(renderedText);
|
title = String(renderedText);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
|
const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
|
||||||
|
|
||||||
const liProps: React.HTMLAttributes<HTMLLIElement> = { className, title };
|
const liProps: React.HTMLAttributes<HTMLLIElement> = { className, title };
|
||||||
@ -56,6 +57,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
|
|||||||
<TransButton
|
<TransButton
|
||||||
disabled={disabled || item.disabled}
|
disabled={disabled || item.disabled}
|
||||||
className={`${prefixCls}-content-item-remove`}
|
className={`${prefixCls}-content-item-remove`}
|
||||||
|
// @ts-ignore
|
||||||
aria-label={contextLocale?.remove}
|
aria-label={contextLocale?.remove}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onRemove?.(item);
|
onRemove?.(item);
|
||||||
|
|||||||
@ -422,12 +422,15 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
|
|||||||
cssVarCls,
|
cssVarCls,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
|
const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
const listLocale = getLocale(contextLocale!);
|
const listLocale = getLocale(contextLocale!);
|
||||||
|
|
||||||
const [leftTitle, rightTitle] = getTitles(listLocale);
|
const [leftTitle, rightTitle] = getTitles(listLocale);
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
const mergedSelectionsIcon = selectionsIcon ?? transfer?.selectionsIcon;
|
const mergedSelectionsIcon = selectionsIcon ?? transfer?.selectionsIcon;
|
||||||
|
|
||||||
return wrapCSSVar(
|
return wrapCSSVar(
|
||||||
|
|||||||
@ -38,6 +38,7 @@ export interface ComponentToken {
|
|||||||
headerHeight: number;
|
headerHeight: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
interface TransferToken extends FullToken<'Transfer'> {
|
interface TransferToken extends FullToken<'Transfer'> {
|
||||||
transferHeaderVerticalPadding: number;
|
transferHeaderVerticalPadding: number;
|
||||||
}
|
}
|
||||||
@ -45,6 +46,7 @@ interface TransferToken extends FullToken<'Transfer'> {
|
|||||||
const genTransferCustomizeStyle: GenerateStyle<TransferToken> = (
|
const genTransferCustomizeStyle: GenerateStyle<TransferToken> = (
|
||||||
token: TransferToken,
|
token: TransferToken,
|
||||||
): CSSObject => {
|
): CSSObject => {
|
||||||
|
// @ts-ignore
|
||||||
const { antCls, componentCls, listHeight, controlHeightLG } = token;
|
const { antCls, componentCls, listHeight, controlHeightLG } = token;
|
||||||
|
|
||||||
const tableCls = `${antCls}-table`;
|
const tableCls = `${antCls}-table`;
|
||||||
@ -115,14 +117,20 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
|||||||
colorBorder,
|
colorBorder,
|
||||||
colorSplit,
|
colorSplit,
|
||||||
lineWidth,
|
lineWidth,
|
||||||
|
// @ts-ignore
|
||||||
itemHeight,
|
itemHeight,
|
||||||
|
// @ts-ignore
|
||||||
headerHeight,
|
headerHeight,
|
||||||
transferHeaderVerticalPadding,
|
transferHeaderVerticalPadding,
|
||||||
|
// @ts-ignore
|
||||||
itemPaddingBlock,
|
itemPaddingBlock,
|
||||||
controlItemBgActive,
|
controlItemBgActive,
|
||||||
colorTextDisabled,
|
colorTextDisabled,
|
||||||
|
// @ts-ignore
|
||||||
listHeight,
|
listHeight,
|
||||||
|
// @ts-ignore
|
||||||
listWidth,
|
listWidth,
|
||||||
|
// @ts-ignore
|
||||||
listWidthLG,
|
listWidthLG,
|
||||||
fontSizeIcon,
|
fontSizeIcon,
|
||||||
marginXS,
|
marginXS,
|
||||||
@ -376,6 +384,7 @@ const genTransferRTLStyle: GenerateStyle<TransferToken> = (token: TransferToken)
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
export const prepareComponentToken: GetDefaultToken<'Transfer'> = (token) => {
|
export const prepareComponentToken: GetDefaultToken<'Transfer'> = (token) => {
|
||||||
const { fontSize, lineHeight, controlHeight, controlHeightLG, lineWidth } = token;
|
const { fontSize, lineHeight, controlHeight, controlHeightLG, lineWidth } = token;
|
||||||
const fontHeight = Math.round(fontSize * lineHeight);
|
const fontHeight = Math.round(fontSize * lineHeight);
|
||||||
@ -392,6 +401,7 @@ export const prepareComponentToken: GetDefaultToken<'Transfer'> = (token) => {
|
|||||||
|
|
||||||
// ============================== Export ==============================
|
// ============================== Export ==============================
|
||||||
export default genStyleHooks(
|
export default genStyleHooks(
|
||||||
|
// @ts-ignore
|
||||||
'Transfer',
|
'Transfer',
|
||||||
(token) => {
|
(token) => {
|
||||||
const transferToken = mergeToken<TransferToken>(token);
|
const transferToken = mergeToken<TransferToken>(token);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user