From 9cb8917c96d8e6881121a9d1a3b8096cc83fdf15 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Fri, 25 Nov 2022 15:36:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20jumper=20=E6=9B=B4=E5=90=8D=E4=B8=BA=20?= =?UTF-8?q?paginationMini=20=E7=BB=84=E4=BB=B6=20(#1749)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: jumper 更名为 paginationMini 组件 * feat: jumper 更名为 paginationMini 组件 * feat: jumper 更名为 paginationMini 组件 * feat: jumper 更名为 paginationMini 组件 --- site/site.config.mjs | 6 - src/_common | 2 +- src/date-picker/base/Header.tsx | 6 +- src/index.ts | 1 - src/jumper/__tests__/jumper.test.tsx | 10 - src/jumper/_example/layout.jsx | 10 - src/jumper/_example/size.jsx | 12 - src/jumper/_example/tips.jsx | 7 - src/jumper/_usage/index.jsx | 48 - src/jumper/_usage/props.json | 63 - src/jumper/defaultProps.ts | 12 - src/jumper/index.ts | 9 - src/jumper/jumper.md | 16 - src/jumper/style/css.js | 1 - src/jumper/style/index.js | 1 - src/jumper/type.ts | 49 - .../PaginationMini.tsx} | 24 +- src/pagination/_example/pagination-mini.jsx | 30 + src/pagination/defaultProps.ts | 9 +- src/pagination/index.ts | 3 + src/pagination/type.ts | 44 +- test/snap/__snapshots__/csr.test.jsx.snap | 1410 +++++++---------- 22 files changed, 637 insertions(+), 1136 deletions(-) delete mode 100644 src/jumper/__tests__/jumper.test.tsx delete mode 100644 src/jumper/_example/layout.jsx delete mode 100644 src/jumper/_example/size.jsx delete mode 100644 src/jumper/_example/tips.jsx delete mode 100644 src/jumper/_usage/index.jsx delete mode 100644 src/jumper/_usage/props.json delete mode 100644 src/jumper/defaultProps.ts delete mode 100644 src/jumper/index.ts delete mode 100644 src/jumper/jumper.md delete mode 100644 src/jumper/style/css.js delete mode 100644 src/jumper/style/index.js delete mode 100644 src/jumper/type.ts rename src/{jumper/Jumper.tsx => pagination/PaginationMini.tsx} (76%) create mode 100644 src/pagination/_example/pagination-mini.jsx diff --git a/site/site.config.mjs b/site/site.config.mjs index 3bca02d10..3d36883bc 100644 --- a/site/site.config.mjs +++ b/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', diff --git a/src/_common b/src/_common index 410a55353..ec9a9f8ea 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 410a55353e8254e9654f80568f030ea79655d553 +Subproject commit ec9a9f8ea90f2e5a9250e722510d14152057666d diff --git a/src/date-picker/base/Header.tsx b/src/date-picker/base/Header.tsx index fa3788f07..a24015f9a 100644 --- a/src/date-picker/base/Header.tsx +++ b/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 { year?: number; month?: number; onMonthChange?: Function; onYearChange?: Function; - onJumperClick?: TdJumperProps['onChange']; + onJumperClick?: TdPaginationMiniProps['onChange']; } const useDatePickerLocalConfig = () => { @@ -221,7 +221,7 @@ const DatePickerHeader = (props: DatePickerHeaderProps) => { /> - + ); }; diff --git a/src/index.ts b/src/index.ts index 92901e41f..f29a8dbbe 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/jumper/__tests__/jumper.test.tsx b/src/jumper/__tests__/jumper.test.tsx deleted file mode 100644 index 5d4b06864..000000000 --- a/src/jumper/__tests__/jumper.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -// import { render } from '@test/utils'; -// import React from 'react'; -// import Jumper from '../index'; - -// TODO -describe('Jumper 组件测试', () => { - test('dom', () => { - expect(true).toBe(true); - }); -}); diff --git a/src/jumper/_example/layout.jsx b/src/jumper/_example/layout.jsx deleted file mode 100644 index 4b4502f27..000000000 --- a/src/jumper/_example/layout.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { Jumper } from 'tdesign-react'; - -export default function DemoJumper() { - function handleChange(ctx) { - console.log('ctx', ctx) - } - - return ; -} diff --git a/src/jumper/_example/size.jsx b/src/jumper/_example/size.jsx deleted file mode 100644 index eabe17306..000000000 --- a/src/jumper/_example/size.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Jumper, Space } from 'tdesign-react'; - -export default function DemoJumper() { - return ( - - - - - - ) -} diff --git a/src/jumper/_example/tips.jsx b/src/jumper/_example/tips.jsx deleted file mode 100644 index 177e87c19..000000000 --- a/src/jumper/_example/tips.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Jumper } from 'tdesign-react'; - -export default function DemoJumper() { - const tips = { prev: '前尘忆梦', current: '回到现在', next: '展望未来' }; - return ; -} diff --git a/src/jumper/_usage/index.jsx b/src/jumper/_usage/index.jsx deleted file mode 100644 index 83e7ba8a3..000000000 --- a/src/jumper/_usage/index.jsx +++ /dev/null @@ -1,48 +0,0 @@ -/** - * 该脚本为自动生成，如有需要请在 /script/generate-usage.js 中调整 - */ - -// @ts-nocheck -import React, { useState, useEffect, useMemo } from "react"; -import BaseUsage, { - useConfigChange, - usePanelChange, -} from "@site/src/components/BaseUsage"; -import jsxToString from "react-element-to-jsx-string"; - -import configProps from "./props.json"; - -import { Jumper } from "tdesign-react"; - -export default function Usage() { - const [configList, setConfigList] = useState(configProps); - - const { changedProps, onConfigChange } = useConfigChange(configList); - - const panelList = [{ label: "jumper", value: "jumper" }]; - - const { panel, onPanelChange } = usePanelChange(panelList); - - const [renderComp, setRenderComp] = useState(); - - useEffect(() => { - setRenderComp(); - }, [changedProps]); - - const jsxStr = useMemo(() => { - if (!renderComp) return ""; - return jsxToString(renderComp); - }, [renderComp]); - - return ( - - {renderComp} - - ); -} diff --git a/src/jumper/_usage/props.json b/src/jumper/_usage/props.json deleted file mode 100644 index 926c6d23d..000000000 --- a/src/jumper/_usage/props.json +++ /dev/null @@ -1,63 +0,0 @@ -[ - { - "name": "disabled", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "layout", - "type": "enum", - "defaultValue": "horizontal", - "options": [ - { - "label": "horizontal", - "value": "horizontal" - }, - { - "label": "vertical", - "value": "vertical" - } - ] - }, - { - "name": "showCurrent", - "type": "Boolean", - "defaultValue": true, - "options": [] - }, - { - "name": "size", - "type": "enum", - "defaultValue": "medium", - "options": [ - { - "label": "small", - "value": "small" - }, - { - "label": "medium", - "value": "medium" - }, - { - "label": "large", - "value": "large" - } - ] - }, - { - "name": "variant", - "type": "enum", - "defaultValue": "text", - "options": [ - { - "label": "text", - "value": "text" - }, - { - "label": "outline", - "value": "outline" - } - ] - } -] \ No newline at end of file diff --git a/src/jumper/defaultProps.ts b/src/jumper/defaultProps.ts deleted file mode 100644 index 2de35d12f..000000000 --- a/src/jumper/defaultProps.ts +++ /dev/null @@ -1,12 +0,0 @@ -/** - * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * */ - -import { TdJumperProps } from './type'; - -export const jumperDefaultProps: TdJumperProps = { - layout: 'horizontal', - showCurrent: true, - size: 'medium', - variant: 'text', -}; diff --git a/src/jumper/index.ts b/src/jumper/index.ts deleted file mode 100644 index bbcd8d6c2..000000000 --- a/src/jumper/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import _Jumper from './Jumper'; - -import './style/index.js'; - -export type { JumperProps } from './Jumper'; -export * from './type'; - -export const Jumper = _Jumper; -export default Jumper; diff --git a/src/jumper/jumper.md b/src/jumper/jumper.md deleted file mode 100644 index d4668827b..000000000 --- a/src/jumper/jumper.md +++ /dev/null @@ -1,16 +0,0 @@ -:: BASE_DOC :: - -## API -### Jumper Props - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -disabled | Boolean / Object | - | 按钮禁用配置。TS 类型：`boolean | JumperDisabledConfig` `type JumperDisabledConfig = { prev?: boolean; current?: boolean; next?: boolean; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/jumper/type.ts) | N -layout | String | horizontal | 按钮方向。可选项：horizontal/vertical | N -showCurrent | Boolean | true | 是否展示当前按钮。TS 类型：`boolean` | N -size | String | medium | 按钮尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tips | Object | - | 提示文案配置，值为 `true` 显示默认文案；值为 `false` 不显示提示文案；值类型为对象则单独配置文案内容。TS 类型：`boolean | JumperTipsConfig` `type JumperTipsConfig = { prev?: string; current?: string; next?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/jumper/type.ts) | N -variant | String | text | 按钮形式。可选项：text/outline | N -onChange | Function | | TS 类型：`(context: {e: MouseEvent, trigger: JumperTrigger}) => void`
按钮点击事件回调。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/jumper/type.ts)。
`type JumperTrigger = 'prev' | 'current' | 'next'`
| N diff --git a/src/jumper/style/css.js b/src/jumper/style/css.js deleted file mode 100644 index 6a9a4b132..000000000 --- a/src/jumper/style/css.js +++ /dev/null @@ -1 +0,0 @@ -import './index.css'; diff --git a/src/jumper/style/index.js b/src/jumper/style/index.js deleted file mode 100644 index 3371078bd..000000000 --- a/src/jumper/style/index.js +++ /dev/null @@ -1 +0,0 @@ -import '../../_common/style/web/components/jumper/_index.less'; diff --git a/src/jumper/type.ts b/src/jumper/type.ts deleted file mode 100644 index 65032e613..000000000 --- a/src/jumper/type.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* eslint-disable */ - -/** - * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * */ - -import { SizeEnum } from '../common'; -import { MouseEvent } from 'react'; - -export interface TdJumperProps { - /** - * 按钮禁用配置 - */ - disabled?: boolean | JumperDisabledConfig; - /** - * 按钮方向 - * @default horizontal - */ - layout?: 'horizontal' | 'vertical'; - /** - * 是否展示当前按钮 - * @default true - */ - showCurrent?: boolean; - /** - * 按钮尺寸 - * @default medium - */ - size?: SizeEnum; - /** - * 提示文案配置，值为 `true` 显示默认文案；值为 `false` 不显示提示文案；值类型为对象则单独配置文案内容 - */ - tips?: boolean | JumperTipsConfig; - /** - * 按钮形式 - * @default text - */ - variant?: 'text' | 'outline'; - /** - * 按钮点击事件回调 - */ - onChange?: (context: { e: MouseEvent; trigger: JumperTrigger }) => void; -} - -export type JumperDisabledConfig = { prev?: boolean; current?: boolean; next?: boolean }; - -export type JumperTipsConfig = { prev?: string; current?: string; next?: string }; - -export type JumperTrigger = 'prev' | 'current' | 'next'; diff --git a/src/jumper/Jumper.tsx b/src/pagination/PaginationMini.tsx similarity index 76% rename from src/jumper/Jumper.tsx rename to src/pagination/PaginationMini.tsx index d27c807e0..f135f28fa 100644 --- a/src/jumper/Jumper.tsx +++ b/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) => { +const PaginationMini = forwardRef((props: PaginationMiniProps, ref: React.Ref) => { const { classPrefix } = useConfig(); const { RoundIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } = useGlobalIcon({ RoundIcon: TdRoundIcon, @@ -44,8 +44,8 @@ const Jumper = forwardRef((props: JumperProps, ref: React.Ref) = return (
) = shape="square" onClick={(e) => onChange({ e, trigger: 'prev' })} icon={layout === 'horizontal' ? : } - className={`${classPrefix}-jumper__prev`} + className={`${classPrefix}-pagination-mini__prev`} disabled={disabledConfig.prev} /> @@ -69,7 +69,7 @@ const Jumper = forwardRef((props: JumperProps, ref: React.Ref) = shape="square" onClick={(e) => onChange({ e, trigger: 'current' })} icon={} - className={`${classPrefix}-jumper__current`} + className={`${classPrefix}-pagination-mini__current`} disabled={disabledConfig.current} /> )} @@ -81,14 +81,14 @@ const Jumper = forwardRef((props: JumperProps, ref: React.Ref) = shape="square" onClick={(e) => onChange({ e, trigger: 'next' })} icon={layout === 'horizontal' ? : } - className={`${classPrefix}-jumper__next`} + className={`${classPrefix}-pagination-mini__next`} disabled={disabledConfig.next} />
); }); -Jumper.displayName = 'Jumper'; -Jumper.defaultProps = jumperDefaultProps; +PaginationMini.displayName = 'PaginationMini'; +PaginationMini.defaultProps = paginationMiniDefaultProps; -export default Jumper; +export default PaginationMini; diff --git a/src/pagination/_example/pagination-mini.jsx b/src/pagination/_example/pagination-mini.jsx new file mode 100644 index 000000000..a2f7fb0a2 --- /dev/null +++ b/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 ( + + + layout: + + vertical + horizontal + + + + size: + + small + medium + large + + + + + ) +} diff --git a/src/pagination/defaultProps.ts b/src/pagination/defaultProps.ts index 99086766b..8457605dc 100644 --- a/src/pagination/defaultProps.ts +++ b/src/pagination/defaultProps.ts @@ -2,7 +2,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdPaginationProps } from './type'; +import { TdPaginationProps, TdPaginationMiniProps } from './type'; export const paginationDefaultProps: TdPaginationProps = { defaultCurrent: 1, @@ -21,3 +21,10 @@ export const paginationDefaultProps: TdPaginationProps = { total: 0, totalContent: true, }; + +export const paginationMiniDefaultProps: TdPaginationMiniProps = { + layout: 'horizontal', + showCurrent: true, + size: 'medium', + variant: 'text', +}; diff --git a/src/pagination/index.ts b/src/pagination/index.ts index d29e49dd4..60d56fde4 100644 --- a/src/pagination/index.ts +++ b/src/pagination/index.ts @@ -1,9 +1,12 @@ import _Pagination from './Pagination'; +import _PaginationMini from './PaginationMini'; import './style/index.js'; export type { PaginationProps } from './Pagination'; +export type { PaginationMiniProps } from './PaginationMini'; export * from './type'; export const Pagination = _Pagination; +export const PaginationMini = _PaginationMini; export default Pagination; diff --git a/src/pagination/type.ts b/src/pagination/type.ts index 291bf8cc4..74b8d660e 100644 --- a/src/pagination/type.ts +++ b/src/pagination/type.ts @@ -5,7 +5,8 @@ * */ import { SelectProps } from '../select'; -import { TNode } from '../common'; +import { TNode, SizeEnum } from '../common'; +import { MouseEvent } from 'react'; export interface TdPaginationProps { /** @@ -115,8 +116,49 @@ export interface TdPaginationProps { onPageSizeChange?: (pageSize: number, pageInfo: PageInfo) => void; } +export interface TdPaginationMiniProps { + /** + * 按钮禁用配置 + */ + disabled?: boolean | JumperDisabledConfig; + /** + * 按钮方向 + * @default horizontal + */ + layout?: 'horizontal' | 'vertical'; + /** + * 是否展示当前按钮 + * @default true + */ + showCurrent?: boolean; + /** + * 按钮尺寸 + * @default medium + */ + size?: SizeEnum; + /** + * 提示文案配置，值为 `true` 显示默认文案；值为 `false` 不显示提示文案；值类型为对象则单独配置文案内容 + */ + tips?: boolean | JumperTipsConfig; + /** + * 按钮形式 + * @default text + */ + variant?: 'text' | 'outline'; + /** + * 按钮点击事件回调 + */ + onChange?: (context: { e: MouseEvent; trigger: JumperTrigger }) => void; +} + export interface PageInfo { current: number; previous: number; pageSize: number; } + +export type JumperDisabledConfig = { prev?: boolean; current?: boolean; next?: boolean }; + +export type JumperTipsConfig = { prev?: string; current?: string; next?: string }; + +export type JumperTrigger = 'prev' | 'current' | 'next'; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 25ac5084e..04de3f984 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -66112,10 +66112,10 @@ exports[`csr snapshot test > csr test src/date-picker/_example/panel.jsx 1`] = `