From 493c6763dede9e77f14c4601e9874e2b1d430834 Mon Sep 17 00:00:00 2001 From: shifeng1993 Date: Wed, 8 Feb 2023 23:28:02 +0800 Subject: [PATCH 1/2] refactor:pagination --- components/pagination/Pagination.tsx | 10 +- components/pagination/style/index.less | 472 ----------------- components/pagination/style/index.tsx | 687 ++++++++++++++++++++++++- components/pagination/style/rtl.less | 55 -- components/style.ts | 2 +- 5 files changed, 692 insertions(+), 534 deletions(-) delete mode 100644 components/pagination/style/index.less delete mode 100644 components/pagination/style/rtl.less diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 763a9c51c7..36c8311fe1 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -12,6 +12,9 @@ import classNames from '../_util/classNames'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import useBreakpoint from '../_util/hooks/useBreakpoint'; +// CSSINJS +import useStyle from './style'; + export const paginationProps = () => ({ total: Number, defaultCurrent: Number, @@ -81,6 +84,10 @@ export default defineComponent({ // emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'], setup(props, { slots, attrs }) { const { prefixCls, configProvider, direction } = useConfigInject('pagination', props); + + // style + const [wrapSSR, hashId] = useStyle(prefixCls); + const selectPrefixCls = computed(() => configProvider.getPrefixCls('select', props.selectPrefixCls), ); @@ -152,11 +159,12 @@ export default defineComponent({ class: classNames( { mini: isSmall, [`${prefixCls.value}-rtl`]: direction.value === 'rtl' }, attrs.class, + hashId.value, ), itemRender, }; - return ; + return wrapSSR(); }; }, }); diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less deleted file mode 100644 index 8572af66f3..0000000000 --- a/components/pagination/style/index.less +++ /dev/null @@ -1,472 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; - -@pagination-prefix-cls: ~'@{ant-prefix}-pagination'; - -.@{pagination-prefix-cls} { - .reset-component(); - - ul, - ol { - margin: 0; - padding: 0; - list-style: none; - } - - &::after { - display: block; - clear: both; - height: 0; - overflow: hidden; - visibility: hidden; - content: ' '; - } - - &-total-text { - display: inline-block; - height: @pagination-item-size; - margin-right: 8px; - line-height: @pagination-item-size - 2px; - vertical-align: middle; - } - - &-item { - display: inline-block; - min-width: @pagination-item-size; - height: @pagination-item-size; - margin-right: 8px; - font-family: @pagination-font-family; - line-height: @pagination-item-size - 2px; - text-align: center; - vertical-align: middle; - list-style: none; - background-color: @pagination-item-bg; - border: @border-width-base @border-style-base @border-color-base; - border-radius: @border-radius-base; - outline: 0; - cursor: pointer; - user-select: none; - - a { - display: block; - padding: 0 6px; - color: @text-color; - transition: none; - - &:hover { - text-decoration: none; - } - } - - &:hover { - border-color: @primary-color; - transition: all 0.3s; - - a { - color: @primary-color; - } - } - - // cannot merge with `&:hover` - // see https://github.com/ant-design/ant-design/pull/34002 - &:focus-visible { - border-color: @primary-color; - transition: all 0.3s; - - a { - color: @primary-color; - } - } - - &-active { - font-weight: @pagination-font-weight-active; - background: @pagination-item-bg-active; - border-color: @primary-color; - - a { - color: @primary-color; - } - - &:hover { - border-color: @primary-5; - } - - &:focus-visible { - border-color: @primary-5; - } - - &:hover a { - color: @primary-5; - } - - &:focus-visible a { - color: @primary-5; - } - } - } - - &-jump-prev, - &-jump-next { - outline: 0; - .@{pagination-prefix-cls}-item-container { - position: relative; - - .@{pagination-prefix-cls}-item-link-icon { - color: @primary-color; - font-size: @font-size-sm; - letter-spacing: -1px; - opacity: 0; - transition: all 0.2s; - - &-svg { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - } - } - - .@{pagination-prefix-cls}-item-ellipsis { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - margin: auto; - color: @disabled-color; - font-family: Arial, Helvetica, sans-serif; - letter-spacing: 2px; - text-align: center; - text-indent: 0.13em; - opacity: 1; - transition: all 0.2s; - } - } - - &:hover { - .@{pagination-prefix-cls}-item-link-icon { - opacity: 1; - } - .@{pagination-prefix-cls}-item-ellipsis { - opacity: 0; - } - } - - &:focus-visible { - .@{pagination-prefix-cls}-item-link-icon { - opacity: 1; - } - .@{pagination-prefix-cls}-item-ellipsis { - opacity: 0; - } - } - } - - &-prev, - &-jump-prev, - &-jump-next { - margin-right: 8px; - } - - &-prev, - &-next, - &-jump-prev, - &-jump-next { - display: inline-block; - min-width: @pagination-item-size; - height: @pagination-item-size; - color: @text-color; - font-family: @pagination-font-family; - line-height: @pagination-item-size; - text-align: center; - vertical-align: middle; - list-style: none; - border-radius: @border-radius-base; - cursor: pointer; - transition: all 0.3s; - } - - &-prev, - &-next { - font-family: Arial, Helvetica, sans-serif; - outline: 0; - - button { - color: @text-color; - cursor: pointer; - user-select: none; - } - - &:hover button { - border-color: @primary-5; - } - - .@{pagination-prefix-cls}-item-link { - display: block; - width: 100%; - height: 100%; - padding: 0; - font-size: 12px; - text-align: center; - background-color: @pagination-item-link-bg; - border: @border-width-base @border-style-base @border-color-base; - border-radius: @border-radius-base; - outline: none; - transition: all 0.3s; - } - - &:focus-visible .@{pagination-prefix-cls}-item-link { - color: @primary-color; - border-color: @primary-color; - } - - &:hover .@{pagination-prefix-cls}-item-link { - color: @primary-color; - border-color: @primary-color; - } - } - - &-disabled { - &, - &:hover { - cursor: not-allowed; - .@{pagination-prefix-cls}-item-link { - color: @disabled-color; - border-color: @border-color-base; - cursor: not-allowed; - } - } - - &:focus-visible { - cursor: not-allowed; - .@{pagination-prefix-cls}-item-link { - color: @disabled-color; - border-color: @border-color-base; - cursor: not-allowed; - } - } - } - - &-slash { - margin: 0 10px 0 5px; - } - - &-options { - display: inline-block; - margin-left: 16px; - vertical-align: middle; - - // IE11 css hack. `*::-ms-backdrop,` is a must have - @media all and (-ms-high-contrast: none) { - *::-ms-backdrop, - & { - vertical-align: top; - } - } - - &-size-changer.@{ant-prefix}-select { - display: inline-block; - width: auto; - } - - &-quick-jumper { - display: inline-block; - height: @input-height-base; - margin-left: @margin-xs; - line-height: @input-height-base; - vertical-align: top; - - input { - .input(); - - width: 50px; - height: @input-height-base; - margin: 0 8px; - } - } - } - - &-simple &-prev, - &-simple &-next { - height: @pagination-item-size-sm; - line-height: @pagination-item-size-sm; - vertical-align: top; - .@{pagination-prefix-cls}-item-link { - height: @pagination-item-size-sm; - background-color: transparent; - border: 0; - - &::after { - height: @pagination-item-size-sm; - line-height: @pagination-item-size-sm; - } - } - } - - &-simple &-simple-pager { - display: inline-block; - height: @pagination-item-size-sm; - margin-right: 8px; - - input { - box-sizing: border-box; - height: 100%; - margin-right: 8px; - padding: 0 6px; - text-align: center; - background-color: @pagination-item-input-bg; - border: @border-width-base @border-style-base @border-color-base; - border-radius: @border-radius-base; - outline: none; - transition: border-color 0.3s; - - &:hover { - border-color: @primary-color; - } - - &:focus { - border-color: @primary-color-hover; - box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline; - } - - &[disabled] { - color: @disabled-color; - background: @disabled-bg; - border-color: @border-color-base; - cursor: not-allowed; - } - } - } - - &.mini &-total-text, - &.mini &-simple-pager { - height: @pagination-item-size-sm; - line-height: @pagination-item-size-sm; - } - - &.mini &-item { - min-width: @pagination-item-size-sm; - height: @pagination-item-size-sm; - margin: 0; - line-height: @pagination-item-size-sm - 2px; - } - - &.mini &-item:not(&-item-active) { - background: transparent; - border-color: transparent; - } - - &.mini &-prev, - &.mini &-next { - min-width: @pagination-item-size-sm; - height: @pagination-item-size-sm; - margin: 0; - line-height: @pagination-item-size-sm; - } - - &.mini &-prev &-item-link, - &.mini &-next &-item-link { - background: transparent; - border-color: transparent; - - &::after { - height: @pagination-item-size-sm; - line-height: @pagination-item-size-sm; - } - } - - &.mini &-jump-prev, - &.mini &-jump-next { - height: @pagination-item-size-sm; - margin-right: 0; - line-height: @pagination-item-size-sm; - } - - &.mini &-options { - margin-left: 2px; - - &-size-changer { - top: @pagination-mini-options-size-changer-top; - } - - &-quick-jumper { - height: @pagination-item-size-sm; - line-height: @pagination-item-size-sm; - - input { - .input-sm(); - - width: 44px; - height: @input-height-sm; - } - } - } - - // ============================ Disabled ============================ - &&-disabled { - cursor: not-allowed; - - .@{pagination-prefix-cls}-item { - background: @disabled-bg; - border-color: @border-color-base; - cursor: not-allowed; - - a { - color: @disabled-color; - background: transparent; - border: none; - cursor: not-allowed; - } - - &-active { - background: @pagination-item-disabled-bg-active; - - a { - color: @pagination-item-disabled-color-active; - } - } - } - - .@{pagination-prefix-cls}-item-link { - color: @disabled-color; - background: @disabled-bg; - border-color: @border-color-base; - cursor: not-allowed; - .@{pagination-prefix-cls}-simple& { - background: transparent; - } - } - - .@{pagination-prefix-cls}-item-link-icon { - opacity: 0; - } - - .@{pagination-prefix-cls}-item-ellipsis { - opacity: 1; - } - - .@{pagination-prefix-cls}-simple-pager { - color: @disabled-color; - } - } -} - -@media only screen and (max-width: @screen-lg) { - .@{pagination-prefix-cls}-item { - &-after-jump-prev, - &-before-jump-next { - display: none; - } - } -} - -@media only screen and (max-width: @screen-sm) { - .@{pagination-prefix-cls}-options { - display: none; - } -} - -@import './rtl'; diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx index 701efcf638..5ccefbf5d1 100644 --- a/components/pagination/style/index.tsx +++ b/components/pagination/style/index.tsx @@ -1,6 +1,683 @@ -import '../../style/index.less'; -import './index.less'; +import type { CSSObject } from '../../_util/cssinjs'; +import { + genBasicInputStyle, + genInputSmallStyle, + initInputToken, + type InputToken, +} from '../../input/style'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { genFocusOutline, genFocusStyle, resetComponent } from '../../_style'; -// style dependencies -// deps-lint-skip: grid -import '../../select/style'; +interface PaginationToken extends InputToken> { + paginationItemSize: number; + paginationFontFamily: string; + paginationItemBg: string; + paginationItemBgActive: string; + paginationFontWeightActive: number; + paginationItemSizeSM: number; + paginationItemInputBg: string; + paginationMiniOptionsSizeChangerTop: number; + paginationItemDisabledBgActive: string; + paginationItemDisabledColorActive: string; + paginationItemLinkBg: string; + inputOutlineOffset: string; + paginationMiniOptionsMarginInlineStart: number; + paginationMiniQuickJumperInputWidth: number; + paginationItemPaddingInline: number; + paginationEllipsisLetterSpacing: number; + paginationEllipsisTextIndent: string; + paginationSlashMarginInlineStart: number; + paginationSlashMarginInlineEnd: number; +} + +const genPaginationDisabledStyle: GenerateStyle = 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.paginationItemDisabledBgActive, + + '&:hover, &:active': { + backgroundColor: token.paginationItemDisabledBgActive, + }, + + a: { + color: token.paginationItemDisabledColorActive, + }, + }, + }, + + [`${componentCls}-item-link`]: { + color: token.colorTextDisabled, + cursor: 'not-allowed', + + '&:hover, &:active': { + backgroundColor: 'transparent', + }, + + [`${componentCls}-simple&`]: { + backgroundColor: 'transparent', + }, + }, + + [`${componentCls}-item-link-icon`]: { + opacity: 0, + }, + + [`${componentCls}-item-ellipsis`]: { + opacity: 1, + }, + + [`${componentCls}-simple-pager`]: { + color: token.colorTextDisabled, + }, + }, + }; +}; + +const genPaginationMiniStyle: GenerateStyle = token => { + const { componentCls } = token; + + return { + [`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]: + { + height: token.paginationItemSizeSM, + lineHeight: `${token.paginationItemSizeSM}px`, + }, + + [`&${componentCls}-mini ${componentCls}-item`]: { + minWidth: token.paginationItemSizeSM, + height: token.paginationItemSizeSM, + margin: 0, + lineHeight: `${token.paginationItemSizeSM - 2}px`, + }, + + [`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: { + backgroundColor: 'transparent', + borderColor: 'transparent', + }, + + [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: { + minWidth: token.paginationItemSizeSM, + height: token.paginationItemSizeSM, + margin: 0, + lineHeight: `${token.paginationItemSizeSM}px`, + }, + + [` + &${componentCls}-mini ${componentCls}-prev ${componentCls}-item-link, + &${componentCls}-mini ${componentCls}-next ${componentCls}-item-link + `]: { + backgroundColor: 'transparent', + borderColor: 'transparent', + + '&::after': { + height: token.paginationItemSizeSM, + lineHeight: `${token.paginationItemSizeSM}px`, + }, + }, + + [`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]: + { + height: token.paginationItemSizeSM, + marginInlineEnd: 0, + lineHeight: `${token.paginationItemSizeSM}px`, + }, + + [`&${componentCls}-mini ${componentCls}-options`]: { + marginInlineStart: token.paginationMiniOptionsMarginInlineStart, + + [`&-size-changer`]: { + top: token.paginationMiniOptionsSizeChangerTop, + }, + + [`&-quick-jumper`]: { + height: token.paginationItemSizeSM, + lineHeight: `${token.paginationItemSizeSM}px`, + + input: { + ...genInputSmallStyle(token), + + width: token.paginationMiniQuickJumperInputWidth, + height: token.controlHeightSM, + }, + }, + }, + }; +}; + +const genPaginationSimpleStyle: GenerateStyle = token => { + const { componentCls } = token; + + return { + [` + &${componentCls}-simple ${componentCls}-prev, + &${componentCls}-simple ${componentCls}-next + `]: { + height: token.paginationItemSizeSM, + lineHeight: `${token.paginationItemSizeSM}px`, + verticalAlign: 'top', + [`${componentCls}-item-link`]: { + height: token.paginationItemSizeSM, + backgroundColor: 'transparent', + border: 0, + + '&::after': { + height: token.paginationItemSizeSM, + lineHeight: `${token.paginationItemSizeSM}px`, + }, + }, + }, + + [`&${componentCls}-simple ${componentCls}-simple-pager`]: { + display: 'inline-block', + height: token.paginationItemSizeSM, + marginInlineEnd: token.marginXS, + + input: { + boxSizing: 'border-box', + height: '100%', + marginInlineEnd: token.marginXS, + padding: `0 ${token.paginationItemPaddingInline}px`, + textAlign: 'center', + backgroundColor: token.paginationItemInputBg, + border: `${token.lineWidth}px ${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: `${token.inputOutlineOffset}px 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, + }, + + '&[disabled]': { + color: token.colorTextDisabled, + backgroundColor: token.colorBgContainerDisabled, + borderColor: token.colorBorder, + cursor: 'not-allowed', + }, + }, + }, + }; +}; + +const genPaginationJumpStyle: GenerateStyle = 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, + }, + }, + + '&:focus-visible': { + [`${componentCls}-item-link-icon`]: { + opacity: 1, + }, + [`${componentCls}-item-ellipsis`]: { + opacity: 0, + }, + ...genFocusOutline(token), + }, + }, + + [` + ${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.paginationItemSize, + height: token.paginationItemSize, + color: token.colorText, + fontFamily: token.paginationFontFamily, + lineHeight: `${token.paginationItemSize}px`, + 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: `${token.lineWidth}px ${token.lineType} transparent`, + borderRadius: token.borderRadius, + outline: 'none', + transition: `border ${token.motionDurationMid}`, + }, + + [`&:focus-visible ${componentCls}-item-link`]: { + ...genFocusOutline(token), + }, + + [`&: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.-select': { + display: 'inline-block', + width: 'auto', + }, + + '&-quick-jumper': { + display: 'inline-block', + height: token.controlHeight, + marginInlineStart: token.marginXS, + lineHeight: `${token.controlHeight}px`, + verticalAlign: 'top', + + input: { + ...genBasicInputStyle(token), + + width: token.controlHeightLG * 1.25, + height: token.controlHeight, + boxSizing: 'border-box', + margin: 0, + marginInlineStart: token.marginXS, + marginInlineEnd: token.marginXS, + }, + }, + }, + }; +}; + +const genPaginationItemStyle: GenerateStyle = token => { + const { componentCls } = token; + + return { + [`${componentCls}-item`]: { + display: 'inline-block', + minWidth: token.paginationItemSize, + height: token.paginationItemSize, + marginInlineEnd: token.marginXS, + fontFamily: token.paginationFontFamily, + lineHeight: `${token.paginationItemSize - 2}px`, + textAlign: 'center', + verticalAlign: 'middle', + listStyle: 'none', + backgroundColor: 'transparent', + border: `${token.lineWidth}px ${token.lineType} transparent`, + borderRadius: token.borderRadius, + outline: 0, + cursor: 'pointer', + userSelect: 'none', + + a: { + display: 'block', + padding: `0 ${token.paginationItemPaddingInline}px`, + color: token.colorText, + transition: 'none', + + '&:hover': { + textDecoration: 'none', + }, + }, + + [`&:not(${componentCls}-item-active)`]: { + '&:hover': { + transition: `all ${token.motionDurationMid}`, + backgroundColor: token.colorBgTextHover, + }, + + '&:active': { + backgroundColor: token.colorBgTextActive, + }, + }, + + // cannot merge with `&:hover` + // see https://github.com/ant-design/ant-design/pull/34002 + ...genFocusStyle(token), + + '&-active': { + fontWeight: token.paginationFontWeightActive, + backgroundColor: token.paginationItemBgActive, + borderColor: token.colorPrimary, + + a: { + color: token.colorPrimary, + }, + + '&:hover': { + borderColor: token.colorPrimaryHover, + }, + + '&:hover a': { + color: token.colorPrimaryHover, + }, + }, + }, + }; +}; + +const genPaginationStyle: GenerateStyle = 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.paginationItemSize, + marginInlineEnd: token.marginXS, + lineHeight: `${token.paginationItemSize - 2}px`, + 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 genBorderedStyle: GenerateStyle = token => { + const { componentCls } = token; + + return { + [`${componentCls}${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.paginationItemDisabledBgActive, + }, + }, + + [`${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}-prev, ${componentCls}-next`]: { + '&:hover button': { + borderColor: token.colorPrimaryHover, + backgroundColor: token.paginationItemBg, + }, + + [`${componentCls}-item-link`]: { + backgroundColor: token.paginationItemLinkBg, + borderColor: token.colorBorder, + }, + + [`&:hover ${componentCls}-item-link`]: { + borderColor: token.colorPrimary, + backgroundColor: token.paginationItemBg, + color: token.colorPrimary, + }, + + [`&${componentCls}-disabled`]: { + [`${componentCls}-item-link`]: { + borderColor: token.colorBorder, + color: token.colorTextDisabled, + }, + }, + }, + + [`${componentCls}-item`]: { + backgroundColor: token.paginationItemBg, + border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, + + [`&:hover:not(${componentCls}-item-active)`]: { + borderColor: token.colorPrimary, + backgroundColor: token.paginationItemBg, + + a: { + color: token.colorPrimary, + }, + }, + + '&-active': { + borderColor: token.colorPrimary, + }, + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook('Pagination', token => { + const paginationToken = mergeToken( + token, + { + paginationItemSize: token.controlHeight, + paginationFontFamily: token.fontFamily, + paginationItemBg: token.colorBgContainer, + paginationItemBgActive: token.colorBgContainer, + paginationFontWeightActive: token.fontWeightStrong, + paginationItemSizeSM: token.controlHeightSM, + paginationItemInputBg: token.colorBgContainer, + paginationMiniOptionsSizeChangerTop: 0, + paginationItemDisabledBgActive: token.controlItemBgActiveDisabled, + paginationItemDisabledColorActive: token.colorTextDisabled, + paginationItemLinkBg: token.colorBgContainer, + inputOutlineOffset: '0 0', + paginationMiniOptionsMarginInlineStart: token.marginXXS / 2, + paginationMiniQuickJumperInputWidth: token.controlHeightLG * 1.1, + paginationItemPaddingInline: token.marginXXS * 1.5, + paginationEllipsisLetterSpacing: token.marginXXS / 2, + paginationSlashMarginInlineStart: token.marginXXS, + paginationSlashMarginInlineEnd: token.marginSM, + paginationEllipsisTextIndent: '0.13em', // magic for ui experience + }, + initInputToken(token), + ); + return [ + genPaginationStyle(paginationToken), + token.wireframe && genBorderedStyle(paginationToken), + ]; +}); diff --git a/components/pagination/style/rtl.less b/components/pagination/style/rtl.less deleted file mode 100644 index 49e74ecfd9..0000000000 --- a/components/pagination/style/rtl.less +++ /dev/null @@ -1,55 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; - -@pagination-prefix-cls: ~'@{ant-prefix}-pagination'; - -.@{pagination-prefix-cls}-rtl { - .@{pagination-prefix-cls}-total-text { - margin-right: 0; - margin-left: 8px; - } - - .@{pagination-prefix-cls}-item, - .@{pagination-prefix-cls}-prev, - .@{pagination-prefix-cls}-jump-prev, - .@{pagination-prefix-cls}-jump-next { - margin-right: 0; - margin-left: 8px; - } - - .@{pagination-prefix-cls}-slash { - margin: 0 5px 0 10px; - } - - .@{pagination-prefix-cls}-options { - margin-right: 16px; - margin-left: 0; - - .@{pagination-prefix-cls}-options-size-changer.@{ant-prefix}-select { - margin-right: 0; - margin-left: 8px; - } - - .@{pagination-prefix-cls}-options-quick-jumper { - margin-left: 0; - } - } - - &.@{pagination-prefix-cls}-simple { - .@{pagination-prefix-cls}-simple-pager { - margin-right: 0; - margin-left: 8px; - - input { - margin-right: 0; - margin-left: 8px; - } - } - } - - &.@{pagination-prefix-cls}.mini .@{pagination-prefix-cls}-options { - margin-right: 2px; - margin-left: 0; - } -} diff --git a/components/style.ts b/components/style.ts index 23700052aa..dc08c71abe 100644 --- a/components/style.ts +++ b/components/style.ts @@ -5,7 +5,7 @@ import './checkbox/style'; // import './grid/style'; // import './tag/style'; import './rate/style'; -import './pagination/style'; +// import './pagination/style'; // import './avatar/style'; // import './badge/style'; import './tabs/style'; From 40839c4682b3365493fb80fc4d1c785cbdd9c852 Mon Sep 17 00:00:00 2001 From: shifeng1993 Date: Sun, 12 Feb 2023 22:41:49 +0800 Subject: [PATCH 2/2] docs:update & refactor: pagination type --- components/pagination/Pagination.tsx | 54 ++++++++++++++-------------- components/pagination/index.en-US.md | 2 +- components/pagination/index.zh-CN.md | 2 +- 3 files changed, 30 insertions(+), 28 deletions(-) diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 36c8311fe1..ef504cf094 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -1,4 +1,4 @@ -import type { ExtractPropTypes, PropType } from 'vue'; +import type { ExtractPropTypes } from 'vue'; import { computed, toRef, defineComponent } from 'vue'; import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; @@ -11,6 +11,7 @@ import enUS from '../vc-pagination/locale/en_US'; import classNames from '../_util/classNames'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import useBreakpoint from '../_util/hooks/useBreakpoint'; +import { booleanType, arrayType, stringType, functionType, someType } from '../_util/type'; // CSSINJS import useStyle from './style'; @@ -18,46 +19,47 @@ import useStyle from './style'; export const paginationProps = () => ({ total: Number, defaultCurrent: Number, - disabled: { type: Boolean, default: undefined }, + disabled: booleanType(), current: Number, defaultPageSize: Number, pageSize: Number, - hideOnSinglePage: { type: Boolean, default: undefined }, - showSizeChanger: { type: Boolean, default: undefined }, - pageSizeOptions: Array as PropType<(string | number)[]>, - buildOptionText: Function as PropType<(opt: { value: any }) => any>, - showQuickJumper: { - type: [Boolean, Object] as PropType, - default: undefined as boolean | { goButton?: any }, - }, - showTotal: Function as PropType<(total: number, range: [number, number]) => any>, - size: String as PropType<'default' | 'small'>, - simple: { type: Boolean, default: undefined }, + hideOnSinglePage: booleanType(), + showSizeChanger: booleanType(), + pageSizeOptions: arrayType<(string | number)[]>(), + buildOptionText: functionType<(opt: { value: any }) => any>(), + showQuickJumper: someType( + [Boolean, Object], + undefined as boolean | { goButton?: any }, + ), + showTotal: functionType<(total: number, range: [number, number]) => any>(), + size: stringType<'default' | 'small'>(), + simple: booleanType(), locale: Object, prefixCls: String, selectPrefixCls: String, totalBoundaryShowSizeChanger: Number, selectComponentClass: String, - itemRender: Function as PropType< - (opt: { - page: number; - type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next'; - originalElement: any; - }) => any - >, + itemRender: + functionType< + (opt: { + page: number; + type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next'; + originalElement: any; + }) => any + >(), role: String, responsive: Boolean, - showLessItems: { type: Boolean, default: undefined }, - onChange: Function as PropType<(page: number, pageSize: number) => void>, - onShowSizeChange: Function as PropType<(current: number, size: number) => void>, - 'onUpdate:current': Function as PropType<(current: number) => void>, - 'onUpdate:pageSize': Function as PropType<(size: number) => void>, + showLessItems: booleanType(), + onChange: functionType<(page: number, pageSize: number) => void>(), + onShowSizeChange: functionType<(current: number, size: number) => void>(), + 'onUpdate:current': functionType<(current: number) => void>(), + 'onUpdate:pageSize': functionType<(size: number) => void>(), }); export type PaginationPosition = 'top' | 'bottom' | 'both'; export const paginationConfig = () => ({ ...paginationProps(), - position: String as PropType, + position: stringType(), }); export type PaginationProps = Partial>>; diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md index 36f2b28e28..2c65e4fcf6 100644 --- a/components/pagination/index.en-US.md +++ b/components/pagination/index.en-US.md @@ -3,7 +3,7 @@ category: Components type: Navigation title: Pagination cols: 1 -cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original --- A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time. diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index 7651c48cf8..8c94610e6a 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -4,7 +4,7 @@ subtitle: 分页 type: 导航 title: Pagination cols: 1 -cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original --- 采用分页的形式分隔长列表，每次只加载一个页面。