diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 4bf98574b5..1092c63032 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -11,6 +11,7 @@ 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 type { SelectProps } from '../select'; import { useLocale } from '../locale'; import { useToken } from '../theme/internal'; import { MiddleSelect, MiniSelect } from './Select'; @@ -24,6 +25,7 @@ export interface PaginationProps extends RcPaginationProps { role?: string; totalBoundaryShowSizeChanger?: number; rootClassName?: string; + showSizeChanger?: boolean | SelectProps; } export type PaginationPosition = 'top' | 'bottom' | 'both'; diff --git a/components/pagination/__tests__/type.test.tsx b/components/pagination/__tests__/type.test.tsx new file mode 100644 index 0000000000..871e13dcbd --- /dev/null +++ b/components/pagination/__tests__/type.test.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import Pagination from '..'; + +describe('Pagination types', () => { + it('Pagination showSizeChanger could accept SelectProps', () => { + const Demo = () => ( + , + className: 'cls', + popupMatchSelectWidth: true, + onChange: (value) => { + console.log(value); + }, + }} + /> + ); + expect(Demo).toBeTruthy(); + }); +}); diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md index 0ed5cd2222..7729c20f75 100644 --- a/components/pagination/index.en-US.md +++ b/components/pagination/index.en-US.md @@ -51,7 +51,7 @@ Common props ref：[Common props](/docs/react/common-props) | responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - | | | showLessItems | Show less page items | boolean | false | | | showQuickJumper | Determine whether you can jump to pages directly | boolean \| { goButton: ReactNode } | false | | -| showSizeChanger | Determine whether to show `pageSize` select, it will be true when `total > 50` | boolean | - | | +| showSizeChanger | Determine whether to show `pageSize` select, it will be true when `total > 50` | boolean \| [SelectProps](/components/select#api) | - | SelectProps: 5.21.0 | | showTitle | Show page item's title | boolean | true | | | showTotal | To display the total number and range | function(total, range) | - | | | simple | Whether to use simple mode | boolean \| { readOnly?: boolean } | - | | diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index 977e77b7ee..7d86134356 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -52,7 +52,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA | responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | | | showLessItems | 是否显示较少页面内容 | boolean | false | | | showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | | -| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean | - | | +| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean \| [SelectProps](/components/select-cn#api) | - | SelectProps: 5.21.0 | | showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | | | showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | | | simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | | diff --git a/components/select/demo/component-token.tsx b/components/select/demo/component-token.tsx index abf8c6039a..9df8521fc8 100644 --- a/components/select/demo/component-token.tsx +++ b/components/select/demo/component-token.tsx @@ -20,6 +20,9 @@ const App: React.FC = () => ( multipleItemBorderColor: 'rgba(0,0,0,0.06)', multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)', optionSelectedColor: '#1677ff', + hoverBorderColor: 'red', + activeBorderColor: 'green', + activeOutlineColor: 'pink', }, }, }} diff --git a/components/select/style/token.ts b/components/select/style/token.ts index 2fde549fa8..ba20991722 100644 --- a/components/select/style/token.ts +++ b/components/select/style/token.ts @@ -113,6 +113,21 @@ export interface ComponentToken extends MultipleSelectorToken { * @descEN Inline end padding of arrow */ showArrowPaddingInlineEnd: number; + /** + * @desc 悬浮态边框色 + * @descEN Hover border color + */ + hoverBorderColor: string; + /** + * @desc 激活态边框色 + * @descEN Active border color + */ + activeBorderColor: string; + /** + * @desc 激活态 outline 颜色 + * @descEN Active outline color + */ + activeOutlineColor: string; } export interface SelectorToken { @@ -151,6 +166,10 @@ export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => { colorBgContainerDisabled, colorTextDisabled, + + colorPrimaryHover, + colorPrimary, + controlOutline, } = token; // Item height default use `controlHeight - 2 * paddingXXS`, @@ -196,5 +215,8 @@ export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => { multipleItemColorDisabled: colorTextDisabled, multipleItemBorderColorDisabled: 'transparent', showArrowPaddingInlineEnd: Math.ceil(token.fontSize * 1.25), + hoverBorderColor: colorPrimaryHover, + activeBorderColor: colorPrimary, + activeOutlineColor: controlOutline, }; }; diff --git a/components/select/style/variants.ts b/components/select/style/variants.ts index 5bd6d20436..1a1868526f 100644 --- a/components/select/style/variants.ts +++ b/components/select/style/variants.ts @@ -12,7 +12,7 @@ const genBaseOutlinedStyle = ( borderColor: string; hoverBorderHover: string; activeBorderColor: string; - activeShadowColor: string; + activeOutlineColor: string; }, ): CSSObject => { const { componentCls, antCls, controlOutlineWidth } = token; @@ -30,7 +30,7 @@ const genBaseOutlinedStyle = ( [`${componentCls}-focused& ${componentCls}-selector`]: { borderColor: options.activeBorderColor, - boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeShadowColor}`, + boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeOutlineColor}`, outline: 0, }, }, @@ -44,7 +44,7 @@ const genOutlinedStatusStyle = ( borderColor: string; hoverBorderHover: string; activeBorderColor: string; - activeShadowColor: string; + activeOutlineColor: string; }, ): CSSObject => ({ [`&${token.componentCls}-status-${options.status}`]: { @@ -56,9 +56,9 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({ '&-outlined': { ...genBaseOutlinedStyle(token, { borderColor: token.colorBorder, - hoverBorderHover: token.colorPrimaryHover, - activeBorderColor: token.colorPrimary, - activeShadowColor: token.controlOutline, + hoverBorderHover: token.hoverBorderColor, + activeBorderColor: token.activeBorderColor, + activeOutlineColor: token.activeOutlineColor, }), ...genOutlinedStatusStyle(token, { @@ -66,7 +66,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({ borderColor: token.colorError, hoverBorderHover: token.colorErrorHover, activeBorderColor: token.colorError, - activeShadowColor: token.colorErrorOutline, + activeOutlineColor: token.colorErrorOutline, }), ...genOutlinedStatusStyle(token, { @@ -74,7 +74,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({ borderColor: token.colorWarning, hoverBorderHover: token.colorWarningHover, activeBorderColor: token.colorWarning, - activeShadowColor: token.colorWarningOutline, + activeOutlineColor: token.colorWarningOutline, }), [`&${token.componentCls}-disabled`]: { diff --git a/package.json b/package.json index a46b1d3e5d..1236ed8fe1 100644 --- a/package.json +++ b/package.json @@ -130,7 +130,7 @@ "rc-menu": "~9.15.1", "rc-motion": "^2.9.3", "rc-notification": "~5.6.1", - "rc-pagination": "~4.2.0", + "rc-pagination": "~4.3.0", "rc-picker": "~4.6.14", "rc-progress": "~4.0.0", "rc-rate": "~2.13.0",