diff --git a/README.en_US.md b/README.en_US.md index d424f3d9..29519848 100644 --- a/README.en_US.md +++ b/README.en_US.md @@ -23,7 +23,7 @@ pro-table is encapsulated in an antd table, supports some presets, and encapsula | request | a method to get the dataSource. | `(params?: {pageSize: number;current: number;[key: string]: any;}) => Promise>` | - | | postData | Do some processing on the data obtained through the url. | `(data: T[]) => T[]` | - | | defaultData | Default data array. | `T[]` | - | -| onInit | Triggered after the table data is successfully initialized, it will be triggered multiple times. | `(action: UseFetchDataAction>) => void` | [] | +| onPostAction | Triggered after the table data is successfully initialized, it will be triggered multiple times. | `(action: UseFetchDataAction>) => void` | [] | | toolBarRender | Render toolbar, support for returning a dom array, will automatically increase margin-right. | `(action: UseFetchDataAction>) => React.ReactNode[]` | - | | onLoad | Triggered after the data is loaded, it will be triggered multiple times. | `(dataSource: T[]) => void` | - | | tableClassName | The className of the packaged table | string | - | diff --git a/README.md b/README.md index 947d9e87..5e9ca6db 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设， | request | 一个获得 dataSource 的方法 | `(params?: {pageSize: number;current: number;[key: string]: any;}) => Promise>` | - | | postData | 对通过 url 获取的数据进行一些处理 | `(data: T[]) => T[]` | - | | defaultData | 默认的数据 | `T[]` | - | -| onInit | 表格的数据初始化成功之后触发，会多次触发。 | `(action: UseFetchDataAction>) => void` | [] | +| onPostAction | 表格的数据初始化成功之后触发，会多次触发。 | `(action: UseFetchDataAction>) => void` | [] | | toolBarRender | 渲染工具栏，支持返回一个 dom 数组，会自动增加 margin-right | `(action: UseFetchDataAction>) => React.ReactNode[]` | - | | onLoad | 数据加载完成后触发,会多次触发 | `(dataSource: T[]) => void` | - | | tableClassName | 封装的 table 的 className | string | - | diff --git a/docs/api.md b/docs/api.md index 83080961..36066438 100644 --- a/docs/api.md +++ b/docs/api.md @@ -13,7 +13,7 @@ pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设， | request | 一个获得 dataSource 的方法 | `(params?: {pageSize: number;current: number;[key: string]: any;}) => Promise>` | - | | postData | 对通过 url 获取的数据进行一些处理 | `(data: T[]) => T[]` | - | | defaultData | 默认的数据 | `T[]` | - | -| onInit | 表格的数据初始化成功之后触发，会多次触发。 | `(action: UseFetchDataAction>) => void` | [] | +| onPostAction | 表格的数据初始化成功之后触发，会多次触发。 | `(action: UseFetchDataAction>) => void` | [] | | toolBarRender | 渲染工具栏，支持返回一个 dom 数组，会自动增加 margin-right | `(action: UseFetchDataAction>) => React.ReactNode[]` | - | | onLoad | 数据加载完成后触发,会多次触发 | `(dataSource: T[]) => void` | - | | tableClassName | 封装的 table 的 className | string | - | diff --git a/package.json b/package.json index 05972e4d..65de881c 100644 --- a/package.json +++ b/package.json @@ -49,8 +49,11 @@ "@ant-design/icons": "^4.0.0-alpha.11", "antd": "^3.25.1", "classnames": "^2.2.6", + "dnd-core": "^10.0.2", "moment": "^2.24.0", "rc-resize-observer": "^0.1.3", + "react-dnd": "^10.0.2", + "react-dnd-html5-backend": "^10.0.2", "unstated-next": "^1.1.0", "use-merge-value": "^1.0.1" }, diff --git a/src/Table.tsx b/src/Table.tsx index 209528c3..9b85f190 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -1,7 +1,7 @@ import './index.less'; import React, { useEffect, CSSProperties, useRef, useState, ReactNode } from 'react'; -import { Table, Card, Typography, Tooltip } from 'antd'; +import { Table, Card, Typography, Empty, Tooltip } from 'antd'; import classNames from 'classnames'; import useMergeValue from 'use-merge-value'; import moment from 'moment'; @@ -13,7 +13,7 @@ import Toolbar, { OptionsType, ToolBarProps } from './component/toolBar'; import Alert from './component/alert'; import FormSearch from './Form'; import { StatusType } from './component/status'; -import { parsingText, parsingValueEnumToArray } from './component/util'; +import { parsingText, parsingValueEnumToArray, checkUndefinedOrNull } from './component/util'; /** * money 金额 @@ -103,6 +103,10 @@ export interface ProColumns extends Omit, 'render' | * 在 table 中隐藏 */ hideInTable?: boolean; + /** + * from 的排序 + */ + order?: number; } export interface ProTableProps extends Omit, 'columns' | 'rowSelection'> { @@ -137,7 +141,7 @@ export interface ProTableProps extends Omit, 'columns' | 'rowSe /** * 初始化的参数，可以操作 table */ - onInit?: (action: { + onPostAction?: (action: { fetch: () => Promise; reload: () => Promise; fetchMore: () => void; @@ -221,23 +225,30 @@ const mergePagination = ( pageSize, onChange: (page: number, newPageSize?: number) => { // pageSize 改变之后就没必要切换页码 - if (newPageSize !== pageSize) { - action.setPageSize(pageSize); - } else if (current !== page) { - action.setCurrent(page); + if (newPageSize !== pageSize && current !== page) { + action.setPageInfo({ pageSize, page }); + } else { + if (newPageSize !== pageSize) { + action.setPageInfo({ pageSize }); + } + if (current !== page) { + action.setPageInfo({ page }); + } } + const { onChange } = pagination as PaginationConfig; if (onChange) { onChange(page, newPageSize || 10); } }, - onShowSizeChange: (curt: number, size: number) => { - action.setPageSize(size); - action.setCurrent(curt); - + onShowSizeChange: (page: number, showPageSize: number) => { + action.setPageInfo({ + pageSize: showPageSize, + page, + }); const { onShowSizeChange } = pagination as PaginationConfig; if (onShowSizeChange) { - onShowSizeChange(curt, size || 10); + onShowSizeChange(page, showPageSize || 10); } }, }; @@ -378,7 +389,7 @@ const ColumRender = ({ item, text, row, index }: ColumRenderInterfac } return renderDom as React.ReactNode; } - return (dom as React.ReactNode) || null; + return checkUndefinedOrNull(dom) ? dom : null; }; const genColumnList = ( @@ -389,7 +400,7 @@ const genColumnList = ( }, ): ColumnProps[] => columns - .map(item => { + .map((item, columnsIndex) => { const { key, dataIndex } = item; const columnKey = `${key || ''}-${dataIndex || ''}`; const config = map[columnKey] || { fixed: item.fixed }; @@ -398,6 +409,7 @@ const genColumnList = ( const itemValue = String(record[item.dataIndex || ''] || '') as string; return String(itemValue) === String(value); }, + index: columnsIndex, filters: parsingValueEnumToArray(item.valueEnum), ...item, fixed: config.fixed, @@ -425,7 +437,7 @@ const ProTable = (props: ProTableProps) => { headerTitle, postData, pagination: propsPagination, - onInit, + onPostAction, columns: propsColumns = [], toolBarRender = () => [], onLoad, @@ -442,6 +454,7 @@ const ProTable = (props: ProTableProps) => { } = props; const [formSearch, setFormSearch] = useState<{}>({}); + /** * 需要初始化 不然默认可能报错 */ @@ -472,10 +485,10 @@ const ProTable = (props: ProTableProps) => { onLoad, effects: [ Object.values(params) - .filter(item => item) + .filter(item => checkUndefinedOrNull(item)) .join('-'), Object.values(formSearch) - .filter(item => item) + .filter(item => checkUndefinedOrNull(item)) .join('-'), ], }, @@ -483,28 +496,41 @@ const ProTable = (props: ProTableProps) => { const rootRef = useRef(null); - action.fullScreen = () => { - if (!rootRef.current || !document.fullscreenEnabled) { - return; - } - if (document.fullscreenElement) { - document.exitFullscreen(); - } else { - rootRef.current.requestFullscreen(); - } - }; - useEffect(() => { - // 页码更改的时候触发一下 - // 不然会造成 action 中数据老旧 - if (onInit) { - onInit({ + if (onPostAction) { + onPostAction({ reload: action.reload, fetch: action.fetch, fetchMore: action.fetchMore, }); } - }, []); + }, [ + action.pageSize, + action.current, + action.total, + Object.values(params) + .filter(item => checkUndefinedOrNull(item)) + .join('-'), + Object.values(formSearch) + .filter(item => checkUndefinedOrNull(item)) + .join('-'), + ]); + + const fullScreen = useRef<() => void>(); + useEffect(() => { + fullScreen.current = () => { + if (!rootRef.current || !document.fullscreenEnabled) { + return; + } + if (document.fullscreenElement) { + document.exitFullscreen(); + } else { + rootRef.current.requestFullscreen(); + } + }; + }, [rootRef.current]); + + action.fullScreen = fullScreen.current; const pagination = mergePagination(propsPagination, action); @@ -537,6 +563,9 @@ const ProTable = (props: ProTableProps) => { // 映射 selectedRowKeys 与 selectedRow useEffect(() => { + if (action.loading !== false || propsRowSelection === false) { + return; + } const tableKey = reset.rowKey; setSelectedRows( ((action.dataSource as T[]) || []).filter((item, index) => { @@ -550,7 +579,7 @@ const ProTable = (props: ProTableProps) => { return (selectedRowKeys as any).includes(item[tableKey]); }), ); - }, [selectedRowKeys.join('-'), action.loading]); + }, [selectedRowKeys.join('-'), action.loading, propsRowSelection === false]); const rowSelection: TableRowSelection = { selectedRowKeys, @@ -563,6 +592,10 @@ const ProTable = (props: ProTableProps) => { }, }; + if (counter.columns.length < 1) { + return ; + } + return (
{search && ( diff --git a/src/component/columnSetting/DndItem.tsx b/src/component/columnSetting/DndItem.tsx new file mode 100644 index 00000000..bd78a3fa --- /dev/null +++ b/src/component/columnSetting/DndItem.tsx @@ -0,0 +1,98 @@ +import React, { useRef } from 'react'; +import { XYCoord } from 'dnd-core'; +import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'; + +export interface CardProps { + id: any; + index: number; + move?: (dragIndex: number, hoverIndex: number) => void; + end: (id: string, dragIndex: number) => void; +} + +interface DragItem { + index: number; + id: string; + type: string; +} +const ItemTypes = { + CARD: 'card', +}; + +const Card: React.FC = ({ id, end, move, children, index }) => { + const ref = useRef(null); + const [, drop] = useDrop({ + accept: ItemTypes.CARD, + hover(item: DragItem, monitor: DropTargetMonitor) { + if (!ref.current) { + return; + } + const dragIndex = item.index; + const hoverIndex = index; + + // Don't replace items with themselves + if (dragIndex === hoverIndex) { + return; + } + + // Determine rectangle on screen + const hoverBoundingRect = ref.current!.getBoundingClientRect(); + + // Get vertical middle + const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; + + // Determine mouse position + const clientOffset = monitor.getClientOffset(); + + // Get pixels to the top + const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top; + + // Only perform the move when the mouse has crossed half of the items height + // When dragging downwards, only move when the cursor is below 50% + // When dragging upwards, only move when the cursor is above 50% + + // Dragging downwards + if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { + return; + } + + // Dragging upwards + if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { + return; + } + // Time to actually perform the action + + if (move) { + move(dragIndex, hoverIndex); + } + + // Note: we're mutating the monitor item here! + // Generally it's better to avoid mutations, + // but it's good here for the sake of performance + // to avoid expensive index searches. + item.index = hoverIndex; + }, + }); + + const [{ isDragging }, drag] = useDrag({ + item: { type: ItemTypes.CARD, id, index }, + collect: (monitor: any) => ({ + isDragging: monitor.isDragging(), + }), + end: (item?: { id: string; index: number }) => { + if (!item) { + return; + } + end(item.id, item.index); + }, + }); + + const opacity = isDragging ? 0 : 1; + drag(drop(ref)); + return ( +
+ {children} +
+ ); +}; + +export default Card; diff --git a/src/component/columnSetting/index.less b/src/component/columnSetting/index.less index 2e420aa5..b4a371b6 100644 --- a/src/component/columnSetting/index.less +++ b/src/component/columnSetting/index.less @@ -21,14 +21,15 @@ font-size: 12px; } &-item { + display: block; width: 100%; &-option { display: none; float: right; + cursor: pointer; > span { > i.anticon { color: @primary-color; - cursor: pointer; } } > span + span { diff --git a/src/component/columnSetting/index.tsx b/src/component/columnSetting/index.tsx index c7cb3660..826e6fe4 100644 --- a/src/component/columnSetting/index.tsx +++ b/src/component/columnSetting/index.tsx @@ -2,8 +2,11 @@ import React, { useEffect } from 'react'; import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context'; import { PushpinOutlined, SettingOutlined, VerticalAlignMiddleOutlined } from '@ant-design/icons'; import { Checkbox, Popover, Tooltip } from 'antd'; +import { DndProvider } from 'react-dnd'; +import Backend from 'react-dnd-html5-backend'; import Container, { ColumnsMapItem } from '../../container'; import { ProColumns } from '../../Table'; +import DnDItem from './DndItem'; import './index.less'; interface ColumnSettingProps { @@ -38,87 +41,149 @@ const ToolTipIcon: React.FC<{ return null; }; +const CheckboxListItem: React.FC<{ + columnKey: string; + className?: string; + title?: React.ReactNode; + columnsMap: { + [key: string]: ColumnsMapItem; + }; + fixed?: boolean | 'left' | 'right'; + setColumnsMap: (map: { [key: string]: ColumnsMapItem }) => void; +}> = ({ columnKey, className, columnsMap, title, setColumnsMap, fixed }) => { + const config = columnsMap[columnKey || 'null'] || { show: true }; + return ( + + { + if (columnKey) { + const tempConfig = columnsMap[columnKey || ''] || {}; + const columnKeyMap = { + ...columnsMap, + [columnKey]: { ...tempConfig, show: e.target.checked } as ColumnsMapItem, + }; + setColumnsMap(columnKeyMap); + } + }} + checked={config.show !== false} + > + {title} + + + + + + + + + + + + + + ); +}; + const CheckboxList: React.FC<{ - localColumns: ProColumns[]; + list: ProColumns[]; className?: string; -}> = ({ localColumns, className }) => { - const { columnsMap, setColumnsMap } = Container.useContainer(); - const rightList: React.ReactNode[] = []; - const leftList: React.ReactNode[] = []; - const list: React.ReactNode[] = []; + title: string; + showTitle?: boolean; +}> = ({ list, className, showTitle = true, title: listTitle }) => { + const { columnsMap, setColumnsMap, columns, setColumns } = Container.useContainer(); + const show = list && list.length > 0; - localColumns.forEach(({ title, key, dataIndex, fixed }) => { - const columnKey = `${key || ''}-${dataIndex || ''}`; - const config = columnsMap[columnKey || 'null'] || { show: true }; + if (!show) { + return null; + } + const move = (id: string, targetIndex: number) => { + const newColumns = [...columns]; + const findIndex = newColumns.findIndex(item => { + const columnKey = `${item.key || ''}-${item.dataIndex || ''}`; + return columnKey === id; + }); + const item = { ...newColumns[findIndex] }; + newColumns.splice(findIndex, 1); + if (targetIndex === 0) { + newColumns.unshift(item); + } else { + newColumns.splice(targetIndex, 0, item); + } + setColumns(newColumns); + }; - const dom = ( - - { - if (columnKey) { - const tempConfig = columnsMap[columnKey || ''] || {}; - const columnKeyMap = { - ...columnsMap, - [columnKey]: { ...tempConfig, show: e.target.checked } as ColumnsMapItem, - }; - setColumnsMap(columnKeyMap); - } - }} - checked={config.show !== false} - > - {title} - - - - - - - - - - - - - + const listDom = list.map(({ key, dataIndex, title, fixed }, index) => { + const columnKey = `${key || ''}-${dataIndex || ''}`; + return ( + { + move(id, targetIndex); + }} + > + + ); + }); + return ( + + {showTitle && {listTitle}} + {listDom} + + ); +}; + +const GroupCheckboxList: React.FC<{ + localColumns: ProColumns[]; + className?: string; +}> = ({ localColumns, className }) => { + const rightList: ProColumns[] = []; + const leftList: ProColumns[] = []; + const list: ProColumns[] = []; + + localColumns.forEach(item => { + const { fixed } = item; if (fixed === 'left') { - leftList.push(dom); + leftList.push(item); return; } if (fixed === 'right') { - rightList.push(dom); + rightList.push(item); return; } - list.push(dom); + list.push(item); }); - - const showLeft = leftList && leftList.length > 0; const showRight = rightList && rightList.length > 0; - + const showLeft = leftList && leftList.length > 0; return (
- {showLeft && 固定在左侧} - {leftList} + {/* 如果没有任何固定，不需要显示title */} - {list && list.length > 0 && (showLeft || showRight) && ( - 不固定 - )} - {list} - {showRight && 固定在右侧} - {rightList} + +
); }; @@ -127,7 +192,6 @@ const ColumnSetting = (props: ColumnSettingProps) => { const counter = Container.useContainer(); const localColumns: ProColumns[] = props.columns || counter.columns || []; const { columnsMap, setColumnsMap } = counter; - /** * 设置全部选中，或全部未选中 * @param show @@ -161,7 +225,6 @@ const ColumnSetting = (props: ColumnSettingProps) => { const selectKeys = Object.values(columnsMap).filter(value => !value || value.show !== false); const indeterminate = selectKeys.length > 0 && selectKeys.length !== localColumns.length; - return ( {({ getPrefixCls }: ConfigConsumerProps) => { @@ -203,7 +266,7 @@ const ColumnSetting = (props: ColumnSettingProps) => { } trigger="click" placement="bottomRight" - content={} + content={} > (props: ColumnSettingProps) => { className={`${toolBarClassName}-item-icon`} style={{ fontSize: 16, - }} /> + }} + /> ); diff --git a/src/component/toolBar/index.tsx b/src/component/toolBar/index.tsx index d5108266..fe2aa4b3 100644 --- a/src/component/toolBar/index.tsx +++ b/src/component/toolBar/index.tsx @@ -30,6 +30,7 @@ export interface ToolBarProps { }; selectedRowKeys?: (string | number)[]; selectedRows?: T[]; + className?: string; } const buttonText = { @@ -124,40 +125,46 @@ const ToolBar = ({ }, selectedRowKeys, selectedRows, -}: ToolBarProps) => ( + className, +}: ToolBarProps) => { + const optionDom = + renderDefaultOption(options, `${className}-item-icon`, { + fullScreen: () => action.fullScreen && action.fullScreen(), + reload: () => action.reload(), + setting: true, + }) || []; + // 操作列表 + const actions = toolBarRender ? toolBarRender(action, { selectedRowKeys, selectedRows }) : []; + + return ( +
+
{headerTitle}
+
+ {actions + .filter(item => item) + .map((node, index) => ( +
+ {node} +
+ ))} + {optionDom.length > 0 && actions.length > 0 && } + {optionDom} +
+
+ ); +}; + +const WarpToolBar = (props: ToolBarProps) => ( {({ getPrefixCls }: ConfigConsumerProps) => { const className = getPrefixCls('pro-table-toolbar'); - const optionDom = - renderDefaultOption(options, `${className}-item-icon`, { - fullScreen: () => action.fullScreen && action.fullScreen(), - reload: () => action.reload(), - setting: true, - }) || []; - // 操作列表 - const actions = toolBarRender ? toolBarRender(action, { selectedRowKeys, selectedRows }) : []; - return ( -
-
{headerTitle}
-
- {actions - .filter(item => item) - .map((node, index) => ( -
- {node} -
- ))} - {optionDom.length > 0 && actions.length > 0 && } - {optionDom} -
-
- ); + return ; }} ); -export default ToolBar; +export default WarpToolBar; diff --git a/src/component/util.tsx b/src/component/util.tsx index cd96f988..05e2f959 100644 --- a/src/component/util.tsx +++ b/src/component/util.tsx @@ -70,3 +70,10 @@ export const parsingValueEnumToArray = ( value: key, }; }); + +/** + * 检查值是否存在 + * 为了 避开 0 和 false + * @param value + */ +export const checkUndefinedOrNull = (value: any) => value !== undefined && value !== null; diff --git a/src/useFetchData.tsx b/src/useFetchData.tsx index e9992dda..2365ab5c 100644 --- a/src/useFetchData.tsx +++ b/src/useFetchData.tsx @@ -17,7 +17,7 @@ export interface RequestData { } export interface UseFetchDataAction> { dataSource: T['data'] | T; - loading: boolean; + loading: boolean | undefined; hasMore: boolean; current: number; pageSize: number; @@ -27,9 +27,15 @@ export interface UseFetchDataAction> { fetchMore: () => void; fullScreen?: () => void; resetPageIndex: () => void; - setCurrent: (current: number) => void; - setPageSize: (pageSize: number) => void; restColumnsConfig?: () => void; + setPageInfo: (pageInfo: Partial) => void; +} + +interface PageInfo { + hasMore: boolean; + page: number; + pageSize: number; + total: number; } const useFetchData = , U = {}>( @@ -45,16 +51,18 @@ const useFetchData = , U = {}>( const { defaultPageSize = 10, defaultCurrent = 1, onLoad = () => null } = options || {}; const [list, setList] = useState(defaultData as any); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(undefined); - const [pageIndex, setPageIndex] = useState(defaultCurrent || 1); - const [pageSize, setPageSize] = useState(defaultPageSize); - const [total, setTotal] = useState(0); - const [hasMore, setHasMore] = useState(false); + const [pageInfo, setPageInfo] = useState({ + hasMore: false, + page: defaultCurrent || 1, + total: 0, + pageSize: defaultPageSize, + }); // pre state - const prePage = usePrevious(pageIndex); - const prePageSize = usePrevious(pageSize); + const prePage = usePrevious(pageInfo.page); + const prePageSize = usePrevious(pageInfo.pageSize); const { effects = [] } = options || {}; @@ -67,9 +75,10 @@ const useFetchData = , U = {}>( return; } setLoading(true); + const { pageSize, page } = pageInfo; const { data, success, total: dataTotal = 0 } = (await getData({ - current: pageIndex, + current: page, pageSize, })) || {}; if (success !== false) { @@ -78,12 +87,8 @@ const useFetchData = , U = {}>( } else { setList(data); } - if (dataTotal !== total) { - setTotal(dataTotal); - } - // 判断是否可以继续翻页 - setHasMore(dataTotal > pageSize * pageIndex); + setPageInfo({ ...pageInfo, total: dataTotal, hasMore: dataTotal > pageSize * page }); } setLoading(false); if (onLoad) { @@ -93,8 +98,8 @@ const useFetchData = , U = {}>( const fetchMore = () => { // 如果没有更多的就忽略掉 - if (hasMore) { - setPageIndex(pageIndex + 1); + if (pageInfo.hasMore) { + setPageInfo({ ...pageInfo, page: pageInfo.page + 1 }); } }; @@ -102,9 +107,10 @@ const useFetchData = , U = {}>( * pageIndex 改变的时候自动刷新 */ useEffect(() => { + const { page, pageSize } = pageInfo; // 如果上次的页码为空或者两次页码等于是没必要查询的 // 如果 pageSize 发生变化是需要查询的，所以又加了 prePageSize - if ((!prePage || prePage === pageIndex) && (!prePageSize || prePageSize === pageSize)) { + if ((!prePage || prePage === page) && (!prePageSize || prePageSize === pageSize)) { return; } // 如果 list 的长度大于 pageSize 的长度 @@ -112,24 +118,25 @@ const useFetchData = , U = {}>( // (pageIndex - 1 || 1) 至少要第一页 // 在第一页大于 10 // 第二页也应该是大于 10 - if (pageIndex !== undefined && list.length <= pageSize) { + if (page !== undefined && list.length <= pageSize) { fetchList(); } - }, [pageIndex]); + }, [pageInfo.page]); // pageSize 修改后返回第一页 useEffect(() => { - setPageIndex(1); - if (prePage === 1) { - fetchList(); + if (!prePageSize) { + return; } - }, [pageSize]); + setPageInfo({ ...pageInfo, page: 1 }); + fetchList(); + }, [pageInfo.pageSize]); /** * 重置pageIndex 到 1 */ const resetPageIndex = () => { - setPageIndex(1); + setPageInfo({ ...pageInfo, page: 1 }); }; useEffect(() => { @@ -142,13 +149,16 @@ const useFetchData = , U = {}>( fetch: fetchList, reload: fetchList, fetchMore, - total, - hasMore, + total: pageInfo.total, + hasMore: pageInfo.hasMore, resetPageIndex, - current: pageIndex, - pageSize, - setCurrent: setPageIndex, - setPageSize, + current: pageInfo.page, + pageSize: pageInfo.pageSize, + setPageInfo: info => + setPageInfo({ + ...pageInfo, + ...info, + }), }; }; diff --git a/tests/__tests__/__snapshots__/index.test.tsx.snap b/tests/__tests__/__snapshots__/index.test.tsx.snap index af812331..e58676f4 100644 --- a/tests/__tests__/__snapshots__/index.test.tsx.snap +++ b/tests/__tests__/__snapshots__/index.test.tsx.snap @@ -2,866 +2,300 @@ exports[`BasicTable 🎏 do not render default option 1`] = `
-
-
-
- - -
-
-
-
-
-
-
-
-
+ + + + + + -
-
-
-
-
-
-
- - - - -
-
-
-
-
- - - - - - - - - -
-

- No Data -

-
-
-
-
-
-
-
-
+ + + + +
+

+ No Data +

`; exports[`BasicTable 🎏 do not render setting 1`] = `
-
-
-
- - -
-
-
-
-
-
-
-
+ + + + + + -
- - - - - - - - - - -
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - - - - - - - - -
-

- No Data -

-
-
-
-
-
-
-
-
+ + + + +
+

+ No Data +

`; exports[`BasicTable 🎏 base use 1`] = `
-
-
-
- - -
-
-
-
-
-
-
-
+ + + + + + -
-
- - - - - - - - -
-
- -
-
- -
-
- -
-
- -
- -
-
-
-
-
-
-
- - - - -
-
-
-
-
- - - - - - - - - -
-

- No Data -

-
-
-
-
-
-
-
-
+ + + +
+

+ No Data +

`; exports[`BasicTable 🎏 do not render Search 1`] = `
-
-
-
-
- - - - - - - - - - - - - -
-
-
-
+ + + + + + + -
-
-
-
- - - - -
-
-
-
-
- - - - - - - - - -
-

- No Data -

-
-
-
-
-
-
-
-
+ + + + +
+

+ No Data +

`;