tea-material-pro-table
Version:
Tea ProTable
266 lines (265 loc) • 14.7 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
exports.__esModule = true;
exports.ProTable = void 0;
var react_1 = __importStar(require("react"));
var tea_component_1 = require("tea-component");
var Operations_1 = require("./Operations");
var useAddons_1 = require("./hooks/useAddons");
var SearchForm_1 = require("./SearchForm");
var useColumns_1 = require("./hooks/useColumns");
var Body = tea_component_1.Layout.Body, Content = tea_component_1.Layout.Content;
var _a = tea_component_1.Table.addons, pageable = _a.pageable, autotip = _a.autotip;
function ProTable(props) {
var records = props.records, columns = props.columns, request = props.request, params = props.params, operations = props.operations, onRequestSuccess = props.onRequestSuccess, onRequestError = props.onRequestError, addonsProp = props.addons, _a = props.externalPluginsPosition, externalPluginsPosition = _a === void 0 ? 'after' : _a, actionRef = props.actionRef, formRefProp = props.formRef, showPage = props.pageable, _b = props.pageableOptions, pageableOptions = _b === void 0 ? {} : _b, searchable = props.searchable, customLayout = props.customLayout, rest = __rest(props, ["records", "columns", "request", "params", "operations", "onRequestSuccess", "onRequestError", "addons", "externalPluginsPosition", "actionRef", "formRef", "pageable", "pageableOptions", "searchable", "customLayout"]);
var defaultPageIndex = 1;
var defaultPageSize = 10;
/** protable request 加载数据 */
var _c = react_1.useState(), dataSource = _c[0], setDataSource = _c[1];
var _d = react_1.useState(false), loading = _d[0], setLoading = _d[1];
var _e = react_1.useState(defaultPageIndex), current = _e[0], setCurrent = _e[1];
var _f = react_1.useState(defaultPageSize), pageSize = _f[0], setPageSize = _f[1];
var _g = react_1.useState(0), total = _g[0], setTotal = _g[1];
/** 搜索表单 */
var formRef = react_1.useRef();
/** 插件 */
var addons = useAddons_1.useAddons(addonsProp);
/** 表格 columns 和 搜索表单 fields */
var _h = useColumns_1.useColumns(columns), tableColumns = _h[0], fields = _h[1];
/** 标记最新的请求 */
var latestRequstPromise = react_1.useRef(null);
react_1.useEffect(function () {
if (!(params === null || params === void 0 ? void 0 : params.current) || !(params === null || params === void 0 ? void 0 : params.pageSize)) { // 非分页参数改变，搜索等场景
runRequest(defaultPageIndex, defaultPageSize);
setCurrent(defaultPageIndex);
}
else { // 刷新页面需要保留之前的分页参数场景
var pageSize_1 = Number(params.pageSize) || defaultPageSize;
var current_1 = Number(params.current) || defaultPageIndex;
runRequest(current_1, pageSize_1);
setPageSize(pageSize_1);
setCurrent(current_1);
}
}, [params]);
/** 渲染的数据列表，protable 推荐使用 request 加载数据，传了 records 参数 -> 优先级最高 */
var finallyRecords = react_1.useMemo(function () {
return records || dataSource || [];
}, [dataSource, records]);
/** action ref */
react_1.useImperativeHandle(actionRef, function () { return ({
reload: reload,
reloadAndReset: reloadAndReset,
reset: reset,
getParams: getParams,
updateDataSourceRecord: updateDataSourceRecord,
updateDataSource: updateDataSource
}); });
react_1.useImperativeHandle(formRefProp, function () { return (__assign({}, formRef.current)); });
function reload() {
runRequest(current, pageSize);
}
function reloadAndReset() {
runRequest(defaultPageIndex, pageSize);
setCurrent(defaultPageIndex);
}
function reset() {
var _a;
(_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
runRequest(defaultPageIndex, pageSize);
setCurrent(defaultPageIndex);
}
function getParams() {
var _a;
return __assign(__assign(__assign({}, params), (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.values), { pageSize: pageSize,
current: current });
}
function runRequest(current, pageSize) {
var _a;
return __awaiter(this, void 0, void 0, function () {
var currentParams, currentRequestPromise, requested, error_1;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!(request && typeof request === 'function')) return [3 /*break*/, 5];
setLoading(true);
_b.label = 1;
case 1:
_b.trys.push([1, 3, 4, 5]);
currentParams = __assign(__assign(__assign({}, params), (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.values), { pageSize: pageSize,
current: current, pageIndex: current });
currentRequestPromise = request(currentParams);
latestRequstPromise.current = currentRequestPromise;
return [4 /*yield*/, currentRequestPromise];
case 2:
requested = _b.sent();
if (currentRequestPromise === latestRequstPromise.current) {
if (requested.success) {
setDataSource(requested.data);
}
setTotal(requested.total || requested.data.length);
// request 成功回调用户更新 url 参数
onRequestSuccess === null || onRequestSuccess === void 0 ? void 0 : onRequestSuccess(currentParams);
}
return [3 /*break*/, 5];
case 3:
error_1 = _b.sent();
console.log('error: ', error_1);
onRequestError === null || onRequestError === void 0 ? void 0 : onRequestError(error_1);
return [3 /*break*/, 5];
case 4:
setLoading(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
});
}
function handleSearchFinish(values) {
var _a;
setCurrent(defaultPageIndex);
(_a = searchable === null || searchable === void 0 ? void 0 : searchable.onFinish) === null || _a === void 0 ? void 0 : _a.call(searchable, values);
runRequest(defaultPageIndex, pageSize);
}
function handleSearchReset() {
var _a;
setCurrent(defaultPageIndex);
(_a = searchable === null || searchable === void 0 ? void 0 : searchable.onReset) === null || _a === void 0 ? void 0 : _a.call(searchable);
runRequest(defaultPageIndex, pageSize);
}
// 用于更新表格某一行的数据，用户行编辑场景
function updateDataSourceRecord(data, isRecord) {
setDataSource(function (dataSource) {
if (Array.isArray(dataSource)) {
return dataSource.map(function (d) { return (isRecord(d) ? __assign(__assign({}, d), data) : d); });
}
return dataSource;
});
}
// 用于更新表格数据源，用户补全表格行数据（大多数场景都是每行都要补充， 比如子网列表的每一个子网实体需要关联上 vpc 实体）
function updateDataSource(nextDataSource) {
if (!nextDataSource.length) {
return;
}
setDataSource(function (dataSource) {
if (Array.isArray(dataSource)) {
return dataSource.map(function (d, i) {
if (nextDataSource[i]) {
return __assign(__assign({}, d), nextDataSource[i]);
}
return d;
});
}
return dataSource;
});
}
return (react_1["default"].createElement(LayoutContainer, { customLayout: customLayout },
react_1["default"].createElement(SearchForm_1.SearchForm, { onRef: function (form) { return (formRef.current = form); }, searchable: searchable, onFinish: handleSearchFinish, onReset: handleSearchReset, fields: fields }),
react_1["default"].createElement(Operations_1.Operations, { operations: operations, options: { reload: reload } }),
react_1["default"].createElement(tea_component_1.Card, null,
react_1["default"].createElement(tea_component_1.Table, __assign({ columns: tableColumns, records: finallyRecords }, rest, { addons: showPage
? __spreadArrays((externalPluginsPosition === 'before' ? addons : []), [
pageable(__assign(__assign({}, pageableOptions), { pageIndex: current, recordCount: total, onPagingChange: function (_a) {
var pageIndex = _a.pageIndex, pageSize = _a.pageSize;
setCurrent(pageIndex);
setPageSize(pageSize);
runRequest(pageIndex, pageSize);
} })),
autotip({ isLoading: loading })
], (externalPluginsPosition === 'after' ? addons : [])) : __spreadArrays((externalPluginsPosition === 'before' ? addons : []), [
autotip({ isLoading: loading })
], (externalPluginsPosition === 'after' ? addons : [])) })))));
}
exports.ProTable = ProTable;
function LayoutContainer(_a) {
var customLayout = _a.customLayout, children = _a.children;
if (customLayout) {
return react_1["default"].createElement(react_1["default"].Fragment, null, children);
}
return (react_1["default"].createElement(tea_component_1.Layout, null,
react_1["default"].createElement(Body, null,
react_1["default"].createElement(Content, null,
react_1["default"].createElement(Content.Body, null, children)))));
}