feat: jumper 更名为 paginationMini 组件 (#1749)

* feat: jumper 更名为 paginationMini 组件

* feat: jumper 更名为 paginationMini 组件

* feat: jumper 更名为 paginationMini 组件

* feat: jumper 更名为 paginationMini 组件

site/site.config.mjs

@@ -141,12 +141,6 @@ export default {
           path: '/react/components/dropdown',
           component: () => import('tdesign-react/dropdown/dropdown.md'),
         },
-        {
-          title: 'Jumper 跳转',
-          name: 'jumper',
-          path: '/react/components/jumper',
-          component: () => import('tdesign-react/jumper/jumper.md'),
-        },
         {
           title: 'Menu 导航',
           name: 'menu',

src/date-picker/base/Header.tsx

@@ -3,14 +3,14 @@ import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import useConfig from '../../hooks/useConfig';
 import Select from '../../select';
 import { TdDatePickerProps } from '../type';
-import Jumper, { TdJumperProps } from '../../jumper';
+import { PaginationMini, TdPaginationMiniProps } from '../../pagination';
 
 export interface DatePickerHeaderProps extends Pick<TdDatePickerProps, 'mode'> {
   year?: number;
   month?: number;
   onMonthChange?: Function;
   onYearChange?: Function;
-  onJumperClick?: TdJumperProps['onChange'];
+  onJumperClick?: TdPaginationMiniProps['onChange'];
 }
 
 const useDatePickerLocalConfig = () => {
@@ -221,7 +221,7 @@ const DatePickerHeader = (props: DatePickerHeaderProps) => {
         />
       </div>
 
-      <Jumper tips={labelMap[mode]} size="small" onChange={onJumperClick} />
+      <PaginationMini tips={labelMap[mode]} size="small" onChange={onJumperClick} />
     </div>
   );
 };

src/index.ts

@@ -56,7 +56,6 @@ export * from './range-input';
 export * from './watermark';
 export * from './image-viewer';
 export * from './space';
-export * from './jumper';
 export * from './timeline';
 export * from './image';
 export * from './rate';

src/jumper/Jumper.tsx → src/pagination/PaginationMini.tsx

@@ -12,13 +12,13 @@ import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import Button from '../button';
 import { StyledProps } from '../common';
-import type { TdJumperProps } from './type';
-import { jumperDefaultProps } from './defaultProps';
+import type { TdPaginationMiniProps } from './type';
+import { paginationMiniDefaultProps } from './defaultProps';
 import noop from '../_util/noop';
 
-export interface JumperProps extends TdJumperProps, StyledProps {}
+export interface PaginationMiniProps extends TdPaginationMiniProps, StyledProps {}
 
-const Jumper = forwardRef((props: JumperProps, ref: React.Ref<HTMLDivElement>) => {
+const PaginationMini = forwardRef((props: PaginationMiniProps, ref: React.Ref<HTMLDivElement>) => {
   const { classPrefix } = useConfig();
   const { RoundIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } = useGlobalIcon({
     RoundIcon: TdRoundIcon,
@@ -44,8 +44,8 @@ const Jumper = forwardRef((props: JumperProps, ref: React.Ref<HTMLDivElement>) =
 
   return (
     <div
-      className={classNames(`${classPrefix}-jumper`, className, {
-        [`${classPrefix}-jumper--outline`]: variant === 'outline',
+      className={classNames(`${classPrefix}-pagination-mini`, className, {
+        [`${classPrefix}-pagination-mini--outline`]: variant === 'outline',
       })}
       ref={ref}
       style={style}
@@ -57,7 +57,7 @@ const Jumper = forwardRef((props: JumperProps, ref: React.Ref<HTMLDivElement>) =
         shape="square"
         onClick={(e) => onChange({ e, trigger: 'prev' })}
         icon={layout === 'horizontal' ? <ChevronLeftIcon /> : <ChevronUpIcon />}
-        className={`${classPrefix}-jumper__prev`}
+        className={`${classPrefix}-pagination-mini__prev`}
         disabled={disabledConfig.prev}
       />
 
@@ -69,7 +69,7 @@ const Jumper = forwardRef((props: JumperProps, ref: React.Ref<HTMLDivElement>) =
           shape="square"
           onClick={(e) => onChange({ e, trigger: 'current' })}
           icon={<RoundIcon />}
-          className={`${classPrefix}-jumper__current`}
+          className={`${classPrefix}-pagination-mini__current`}
           disabled={disabledConfig.current}
         />
       )}
@@ -81,14 +81,14 @@ const Jumper = forwardRef((props: JumperProps, ref: React.Ref<HTMLDivElement>) =
         shape="square"
         onClick={(e) => onChange({ e, trigger: 'next' })}
         icon={layout === 'horizontal' ? <ChevronRightIcon /> : <ChevronDownIcon />}
-        className={`${classPrefix}-jumper__next`}
+        className={`${classPrefix}-pagination-mini__next`}
         disabled={disabledConfig.next}
       />
     </div>
   );
 });
 
-Jumper.displayName = 'Jumper';
-Jumper.defaultProps = jumperDefaultProps;
+PaginationMini.displayName = 'PaginationMini';
+PaginationMini.defaultProps = paginationMiniDefaultProps;
 
-export default Jumper;
+export default PaginationMini;

src/pagination/_example/pagination-mini.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Radio, PaginationMini, Space } from 'tdesign-react';
+
+export default function DemoPaginationMini() {
+  const [layout, setLayout] = useState('vertical');
+  const [size, setSize] = useState('medium');
+
+  const tips = { prev: '前尘忆梦', current: '回到现在', next: '展望未来' };
+
+  return (
+    <Space direction="vertical" size={16}>
+      <Space align="center">
+        <span>layout:</span>
+        <Radio.Group value={layout} onChange={setLayout} variant="default-filled">
+          <Radio.Button value="vertical">vertical</Radio.Button>
+          <Radio.Button value="horizontal">horizontal</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Space align="center">
+        <span>size:</span>
+        <Radio.Group value={size} onChange={setSize} variant="default-filled">
+          <Radio.Button value="small">small</Radio.Button>
+          <Radio.Button value="medium">medium</Radio.Button>
+          <Radio.Button value="large">large</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <PaginationMini layout={layout} size={size} tips={tips} />
+    </Space>
+  )
+}