react-admin-component
Version:
react library
132 lines • 6.96 kB
JavaScript
import * as tslib_1 from "tslib";
import React, { useEffect, useState, useCallback, useImperativeHandle, useRef } from 'react';
import { Table } from 'antd';
import { PrototypeCheck } from '../utils';
import isEqual from 'react-fast-compare';
import { usePrevious } from 'react-use';
var pageSizeOptions = ['20', '50', '100', '200'];
var TableBase = function (props, ref) {
var apiParams = props.apiParams, fetchApi = props.fetchApi, asyncPagination = props.asyncPagination, disableMountFetch = props.disableMountFetch, normalizeResult = props.normalizeResult, normalizePageResult = props.normalizePageResult, rowSelection = props.rowSelection, fetchPageApi = props.fetchPageApi, onDataSourceChange = props.onDataSourceChange, onPageChangeFetch = props.onPageChangeFetch, onPageChange = props.onPageChange, paginationCb = props.paginationCb, columns = props.columns, className = props.className, style = props.style, rowKey = props.rowKey, rowClassName = props.rowClassName, sourceData = props.dataSource, hidePagination = props.hidePagination, _a = props.clearSelectedRowKeys, clearSelectedRowKeys = _a === void 0 ? true : _a, restProps = tslib_1.__rest(props, ["apiParams", "fetchApi", "asyncPagination", "disableMountFetch", "normalizeResult", "normalizePageResult", "rowSelection", "fetchPageApi", "onDataSourceChange", "onPageChangeFetch", "onPageChange", "paginationCb", "columns", "className", "style", "rowKey", "rowClassName", "dataSource", "hidePagination", "clearSelectedRowKeys"]);
var _b = useState(sourceData || []), dataSource = _b[0], setDataSource = _b[1];
var _c = useState(), paginationData = _c[0], setPaginationData = _c[1];
var _d = useState(rowSelection && rowSelection.selectedRowKeys ? rowSelection.selectedRowKeys : []), selectedRowKeys = _d[0], setSelectRowKeys = _d[1];
var _e = useState(false), loading = _e[0], setLoading = _e[1];
var requestTimes = useRef(0);
var prevApiParams = usePrevious(apiParams);
var fetchApiMemoized = useCallback(function (extraParams, refresh) {
function compareApiParms() {
if (PrototypeCheck.isFunction(prevApiParams))
return isEqual(apiParams(), prevApiParams());
return isEqual(apiParams, prevApiParams);
}
if (disableMountFetch && !apiParams) {
return;
}
if (!fetchApi)
return;
if (compareApiParms() && !refresh)
return;
setLoading(true);
requestTimes.current++;
var temprequestTimes = requestTimes.current;
var finalParams = PrototypeCheck.isFunction(apiParams)
? apiParams(extraParams)
: tslib_1.__assign({}, apiParams, extraParams);
function handlePagitation(data) {
if (!checkLatestRequest())
return;
if (hidePagination)
return;
setPaginationData({
total: data.total,
pageSize: data.pageSize,
pageNo: data.pageNo,
});
}
fetchApi(finalParams).then(function (res) {
if (!checkLatestRequest())
return;
setLoading(false);
clearSelectedRowKeys && setSelectRowKeys([]);
setDataSource(normalizeResult ? normalizeResult(res) : res.data.list);
if (!asyncPagination) {
handlePagitation(normalizePageResult ? normalizePageResult(res) : res.data);
}
});
if (asyncPagination) {
(fetchPageApi ? fetchPageApi(finalParams) : fetchApi(finalParams)).then(function (res) {
return handlePagitation(normalizeResult ? normalizeResult(res) : res.data);
});
}
function checkLatestRequest() {
return temprequestTimes === requestTimes.current;
}
}, [
fetchApi,
apiParams,
prevApiParams,
asyncPagination,
disableMountFetch,
fetchPageApi,
hidePagination,
normalizeResult,
normalizePageResult,
]);
useImperativeHandle(ref, function () { return ({
setDataSource: setDataSource,
setSelectRowKeys: setSelectRowKeys,
selectedRowKeys: selectedRowKeys,
getDataSource: function () { return dataSource; },
refresh: function () { return fetchApiMemoized(null, true); },
}); }, [dataSource, fetchApiMemoized, selectedRowKeys]);
useEffect(function () {
onDataSourceChange && onDataSourceChange(dataSource);
}, [dataSource, onDataSourceChange]);
useEffect(function () {
fetchApiMemoized();
}, [fetchApiMemoized]);
function showTotal() {
return "\u5171\u8BA1" + Math.ceil(paginationData.total / paginationData.pageSize) + "\u9875, " + paginationData.total + "\u6761";
}
function handlePageChange(pageNo, pageSize) {
onPageChangeFetch && fetchApiMemoized({ pageNo: pageNo, pageSize: pageSize });
onPageChange && onPageChange(pageNo, pageSize);
}
var pagination;
if (paginationData) {
var defaultPageConfig = {
size: 'small',
total: paginationData.total,
pageSize: paginationData.pageSize,
current: paginationData.pageNo,
pageSizeOptions: pageSizeOptions,
showTotal: showTotal,
showSizeChanger: true,
showQuickJumper: true,
onChange: handlePageChange,
onShowSizeChange: function (_pageNo, pageSize) { return handlePageChange(1, pageSize); },
};
pagination = paginationCb
? paginationCb(paginationData, defaultPageConfig)
: defaultPageConfig;
}
function onRowSelectChange(selectedRowKeys, selectedRows) {
setSelectRowKeys(selectedRowKeys);
rowSelection &&
rowSelection.onChangePro &&
rowSelection.onChangePro(selectedRowKeys, selectedRows);
}
return (React.createElement(Table, tslib_1.__assign({ loading: loading, columns: columns, dataSource: dataSource, className: className, style: style, rowKey: rowKey, pagination: hidePagination ? false : pagination, rowClassName: function (record, index) {
return (PrototypeCheck.isFunction(rowClassName)
? rowClassName(record, index)
: rowClassName);
} }, tslib_1.__assign({}, (rowSelection && {
rowSelection: tslib_1.__assign({}, rowSelection, { onChange: onRowSelectChange, selectedRowKeys: selectedRowKeys }),
}), restProps))));
};
function compare(prevProps, nextProps) {
var keys = ['apiParams', 'compare'];
return keys.every(function (key) { return isEqual(prevProps[key], nextProps[key]); });
}
export default React.memo(React.forwardRef(TableBase), compare);
//# sourceMappingURL=index.js.map