ahooks
Version:
react hooks library
205 lines (204 loc) • 8.43 kB
JavaScript
import { __rest } from "tslib";
import { useEffect, useRef, useState } from 'react';
import useMemoizedFn from '../useMemoizedFn';
import usePagination from '../usePagination';
import useUpdateEffect from '../useUpdateEffect';
const useAntdTable = (service, options = {}) => {
var _a;
const { form, defaultType = 'simple', defaultParams, manual = false, refreshDeps = [], ready = true } = options, rest = __rest(options, ["form", "defaultType", "defaultParams", "manual", "refreshDeps", "ready"]);
const result = usePagination(service, Object.assign(Object.assign({ ready, manual: true }, rest), { onSuccess(...args) {
var _a;
// eslint-disable-next-line @typescript-eslint/no-use-before-define
runSuccessRef.current = true;
(_a = rest.onSuccess) === null || _a === void 0 ? void 0 : _a.call(rest, ...args);
} }));
const { params = [], run } = result;
const cacheFormTableData = params[2] || {};
const [type, setType] = useState((cacheFormTableData === null || cacheFormTableData === void 0 ? void 0 : cacheFormTableData.type) || defaultType);
const allFormDataRef = useRef({});
const defaultDataSourceRef = useRef([]);
const runSuccessRef = useRef(false);
const isAntdV4 = !!(form === null || form === void 0 ? void 0 : form.getInternalHooks);
// get current active field values
const getActiveFieldValues = () => {
if (!form) {
return {};
}
// antd 4
if (isAntdV4) {
return form.getFieldsValue(null, () => true);
}
// antd 3
const allFieldsValue = form.getFieldsValue();
const activeFieldsValue = {};
Object.keys(allFieldsValue).forEach((key) => {
if (form.getFieldInstance ? form.getFieldInstance(key) : true) {
activeFieldsValue[key] = allFieldsValue[key];
}
});
return activeFieldsValue;
};
const validateFields = () => {
if (!form) {
return Promise.resolve({});
}
const activeFieldsValue = getActiveFieldValues();
const fields = Object.keys(activeFieldsValue);
// antd 4
if (isAntdV4) {
if (form.validateFieldsReturnFormatValue) {
return form.validateFieldsReturnFormatValue(fields);
}
return form.validateFields(fields);
}
// antd 3
return new Promise((resolve, reject) => {
form.validateFields(fields, (errors, values) => {
if (errors) {
reject(errors);
}
else {
resolve(values);
}
});
});
};
const restoreForm = () => {
if (!form) {
return;
}
// antd v4
if (isAntdV4) {
return form.setFieldsValue(allFormDataRef.current);
}
// antd v3
const activeFieldsValue = {};
Object.keys(allFormDataRef.current).forEach((key) => {
if (form.getFieldInstance ? form.getFieldInstance(key) : true) {
activeFieldsValue[key] = allFormDataRef.current[key];
}
});
form.setFieldsValue(activeFieldsValue);
};
const changeType = () => {
const activeFieldsValue = getActiveFieldValues();
allFormDataRef.current = Object.assign(Object.assign({}, allFormDataRef.current), activeFieldsValue);
setType((t) => (t === 'simple' ? 'advance' : 'simple'));
};
const _submit = (initPagination) => {
if (!ready) {
return;
}
setTimeout(() => {
validateFields()
.then((values = {}) => {
const pagination = initPagination || Object.assign(Object.assign({ pageSize: options.defaultPageSize || 10 }, ((params === null || params === void 0 ? void 0 : params[0]) || {})), { current: 1 });
if (!form) {
// @ts-ignore
run(pagination);
return;
}
// record all form data
allFormDataRef.current = Object.assign(Object.assign({}, allFormDataRef.current), values);
// @ts-ignore
run(pagination, values, {
allFormData: allFormDataRef.current,
type,
});
})
.catch((err) => err);
});
};
const reset = () => {
var _a, _b;
if (form) {
form.resetFields();
}
_submit(Object.assign(Object.assign({}, ((defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams[0]) || {})), { pageSize: options.defaultPageSize || ((_b = (_a = options.defaultParams) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.pageSize) || 10, current: 1 }));
};
const submit = (e) => {
var _a, _b, _c;
(_a = e === null || e === void 0 ? void 0 : e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
_submit(runSuccessRef.current
? undefined
: Object.assign({ pageSize: options.defaultPageSize || ((_c = (_b = options.defaultParams) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.pageSize) || 10, current: 1 }, ((defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams[0]) || {})));
};
const onTableChange = (pagination, filters, sorter, extra) => {
const [oldPaginationParams, ...restParams] = params || [];
run(Object.assign(Object.assign({}, oldPaginationParams), { current: pagination.current, pageSize: pagination.pageSize, filters,
sorter,
extra }), ...restParams);
};
// init
useEffect(() => {
// if has cache, use cached params. ignore manual and ready.
if (params.length > 0) {
allFormDataRef.current = (cacheFormTableData === null || cacheFormTableData === void 0 ? void 0 : cacheFormTableData.allFormData) || {};
restoreForm();
// @ts-ignore
run(...params);
return;
}
if (ready) {
allFormDataRef.current = (defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams[1]) || {};
restoreForm();
if (!manual) {
_submit(defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams[0]);
}
}
}, []);
// change search type, restore form data
useUpdateEffect(() => {
if (!ready) {
return;
}
restoreForm();
}, [type]);
// refresh & ready change on the same time
const hasAutoRun = useRef(false);
hasAutoRun.current = false;
useUpdateEffect(() => {
if (!manual && ready) {
hasAutoRun.current = true;
if (form) {
form.resetFields();
}
allFormDataRef.current = (defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams[1]) || {};
restoreForm();
_submit(defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams[0]);
}
}, [ready]);
useUpdateEffect(() => {
if (hasAutoRun.current) {
return;
}
if (!ready) {
return;
}
if (!manual) {
hasAutoRun.current = true;
if (options.refreshDepsAction) {
options.refreshDepsAction();
}
else {
result.pagination.changeCurrent(1);
}
}
}, [...refreshDeps]);
return Object.assign(Object.assign({}, result), { tableProps: {
dataSource: ((_a = result.data) === null || _a === void 0 ? void 0 : _a.list) || defaultDataSourceRef.current,
loading: result.loading,
onChange: useMemoizedFn(onTableChange),
pagination: {
current: result.pagination.current,
pageSize: result.pagination.pageSize,
total: result.pagination.total,
},
}, search: {
submit: useMemoizedFn(submit),
type,
changeType: useMemoizedFn(changeType),
reset: useMemoizedFn(reset),
} });
};
export default useAntdTable;