🐞 fix: pagination hover and active style error when size=small (ant-d…

…esign#41462)
RedJue · Apr 25, 2023 · 2334b0a · 2334b0a
1 parent 34e9977
commit 2334b0a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 19 deletions.
diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx
@@ -55,49 +55,51 @@ const Pagination: React.FC<PaginationProps> = ({
 
  const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger;
 
- const getIconsProps = () => {
+ const iconsProps = React.useMemo<Record<PropertyKey, React.ReactNode>>(() => {
  const ellipsis = <span className={`${prefixCls}-item-ellipsis`}>•••</span>;
- let prevIcon = (
+ const prevIcon = (
  <button className={`${prefixCls}-item-link`} type="button" tabIndex={-1}>
- <LeftOutlined />
+ {direction === 'rtl' ? <RightOutlined /> : <LeftOutlined />}
  </button>
  );
- let nextIcon = (
+ const nextIcon = (
  <button className={`${prefixCls}-item-link`} type="button" tabIndex={-1}>
- <RightOutlined />
+ {direction === 'rtl' ? <LeftOutlined /> : <RightOutlined />}
  </button>
  );
- let jumpPrevIcon = (
+ const jumpPrevIcon = (
  <a className={`${prefixCls}-item-link`}>
- {/* You can use transition effects in the container :) */}
  <div className={`${prefixCls}-item-container`}>
- <DoubleLeftOutlined className={`${prefixCls}-item-link-icon`} />
+ {direction === 'rtl' ? (
+ <DoubleRightOutlined className={`${prefixCls}-item-link-icon`} />
+ ) : (
+ <DoubleLeftOutlined className={`${prefixCls}-item-link-icon`} />
+ )}
  {ellipsis}
  </div>
  </a>
  );
- let jumpNextIcon = (
+ const jumpNextIcon = (
  <a className={`${prefixCls}-item-link`}>
- {/* You can use transition effects in the container :) */}
  <div className={`${prefixCls}-item-container`}>
- <DoubleRightOutlined className={`${prefixCls}-item-link-icon`} />
+ {direction === 'rtl' ? (
+ <DoubleLeftOutlined className={`${prefixCls}-item-link-icon`} />
+ ) : (
+ <DoubleRightOutlined className={`${prefixCls}-item-link-icon`} />
+ )}
  {ellipsis}
  </div>
  </a>
  );
- // change arrows direction in right-to-left direction
- if (direction === 'rtl') {
- [prevIcon, nextIcon] = [nextIcon, prevIcon];
- [jumpPrevIcon, jumpNextIcon] = [jumpNextIcon, jumpPrevIcon];
- }
  return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon };
- };
+ }, [direction, prefixCls]);
 
  const [contextLocale] = useLocale('Pagination', enUS);
 
  const locale = { ...contextLocale, ...customLocale };
 
  const isSmall = size === 'small' || !!(xs && !size && responsive);
+
  const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
  const extendedClassName = classNames(
  {
@@ -111,7 +113,7 @@ const Pagination: React.FC<PaginationProps> = ({
 
  return wrapSSR(
  <RcPagination
- {...getIconsProps()}
+ {...iconsProps}
  {...restProps}
  prefixCls={prefixCls}
  selectPrefixCls={selectPrefixCls}

diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx
@@ -57,7 +57,16 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (t
 
  [`&${componentCls}-disabled`]: {
  cursor: 'not-allowed',
-
+ [`&${componentCls}-mini`]: {
+ [`
+ &:hover ${componentCls}-item:not(${componentCls}-item-active),
+ &:active ${componentCls}-item:not(${componentCls}-item-active),
+ &:hover ${componentCls}-item-link,
+ &:active ${componentCls}-item-link
+ `]: {
+ backgroundColor: 'transparent',
+ },
+ },
  [`${componentCls}-item`]: {
  cursor: 'not-allowed',
 
@@ -137,13 +146,25 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
  '&:hover': {
  backgroundColor: token.colorBgTextHover,
  },
+ '&:active': {
+ backgroundColor: token.colorBgTextActive,
+ },
  },
 
  [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
  minWidth: token.paginationItemSizeSM,
  height: token.paginationItemSizeSM,
  margin: 0,
  lineHeight: `${token.paginationItemSizeSM}px`,
+ [`&:hover ${componentCls}-item-link`]: {
+ backgroundColor: token.colorBgTextHover,
+ },
+ [`&:active ${componentCls}-item-link`]: {
+ backgroundColor: token.colorBgTextActive,
+ },
+ [`&${componentCls}-disabled:hover ${componentCls}-item-link`]: {
+ backgroundColor: 'transparent',
+ },
  },
 
  [`