@schema-render/search-table-react
Version:
Conditional search table component.
244 lines (243 loc) • 10.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
var _jsxruntime = require("react/jsx-runtime");
var _corereact = require("@schema-render/core-react");
var _antd = require("antd");
var _react = require("react");
var _constants = require("./constants");
var _useColumns = require("./hooks/useColumns");
var _useOpenApi = /*#__PURE__*/ _interop_require_default(require("./hooks/useOpenApi"));
var _useRequest = /*#__PURE__*/ _interop_require_default(require("./hooks/useRequest"));
var _useScrollY = /*#__PURE__*/ _interop_require_default(require("./hooks/useScrollY"));
var _useSearch = /*#__PURE__*/ _interop_require_default(require("./hooks/useSearch"));
var _useSummary = /*#__PURE__*/ _interop_require_default(require("./hooks/useSummary"));
var _useTitle = /*#__PURE__*/ _interop_require_default(require("./hooks/useTitle"));
var _zh_CN = /*#__PURE__*/ _interop_require_default(require("./locale/zh_CN"));
var _RootContext = /*#__PURE__*/ _interop_require_default(require("./RootContext"));
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _interop_require_default(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
var classNames = _corereact.utils.classNames, isPlainObject = _corereact.utils.isPlainObject, isNil = _corereact.utils.isNil;
/**
* 备注：
* rawColumns: 原始列
* baseColumns: 基于 rawColumns 处理加工的基础列，如设置列宽、处理 valueType 等
* sortColumns: 基于 baseColumns 排序后的列（排序、显示/隐藏等配置）。
* finalColumns: 基于 sortColumns 最终渲染的列，1、过滤隐藏列，2、添加序号、操作列
*
* ▕▔▔▔▔▔ 还原 ▔▔▔▔▏
* ↓ ↑
* 原始列 基础列 排序列 最终列
* rawColumns -> baseColumns -> sortColumns -> finalColumns
*/ var SearchTable = function(param, ref) {
var className = param.className, style = param.style, locale = param.locale, request = param.request, _param_requestOnMounted = param.requestOnMounted, requestOnMounted = _param_requestOnMounted === void 0 ? true : _param_requestOnMounted, header = param.header, search = param.search, titleTop = param.titleTop, _param_title = param.title, title = _param_title === void 0 ? {} : _param_title, titleBottom = param.titleBottom, _param_table = param.table, table = _param_table === void 0 ? {} : _param_table, footer = param.footer;
var rootElemRef = (0, _react.useRef)(null);
var searchValueRef = (0, _react.useRef)(search === false ? {} : search.defaultValue || {});
// 国际化处理
var internalLocale = (0, _react.useMemo)(function() {
return _object_spread({}, _zh_CN.default, locale);
}, [
locale
]);
/**
* 解决存在 rowSelection 属性且数据源为空的情况下表头无宽度问题
* ref: https://github.com/ant-design/ant-design/issues/47114
*/ if (table.rowSelection && isNil(table.rowSelection.columnWidth)) {
table.rowSelection = _object_spread_props(_object_spread({}, table.rowSelection), {
columnWidth: 32
});
}
/**
* 全局状态
*/ var globalStateRef = (0, _react.useRef)({
isTabChanging: false
});
// 表格列配置数据处理
var baseColumns = (0, _useColumns.useBaseColumns)({
table: table,
globalStateRef: globalStateRef
}).baseColumns;
var _useSortColumns = (0, _useColumns.useSortColumns)({
table: table,
baseColumns: baseColumns,
globalStateRef: globalStateRef
}), sortColumns = _useSortColumns.sortColumns, sortModalHolder = _useSortColumns.sortModalHolder, openSettingModal = _useSortColumns.openSettingModal;
var finalColumns = (0, _useColumns.useFinalColumns)({
table: table,
sortColumns: sortColumns,
locale: internalLocale
}).finalColumns;
// 表格高度计算：“一屏显示”效果
var _useScrollY1 = (0, _useScrollY.default)({
table: table,
rootElemRef: rootElemRef
}), scrollY = _useScrollY1.scrollY, updateScrollY = _useScrollY1.updateScrollY;
// 数据请求处理
var _useRequest1 = (0, _useRequest.default)({
searchValueRef: searchValueRef,
table: table,
request: request,
updateScrollY: updateScrollY,
locale: internalLocale
}), loading = _useRequest1.loading, dataSource = _useRequest1.dataSource, updateDataSource = _useRequest1.updateDataSource, summaryData = _useRequest1.summaryData, updateSummaryData = _useRequest1.updateSummaryData, finalPagination = _useRequest1.finalPagination, runRequest = _useRequest1.runRequest, requestParamsRef = _useRequest1.requestParamsRef, requestExtraParamsRef = _useRequest1.requestExtraParamsRef, updateRequestExtraParams = _useRequest1.updateRequestExtraParams;
// 搜索栏
var _useSearch1 = (0, _useSearch.default)({
locale: internalLocale,
loading: loading,
search: search,
searchValueRef: searchValueRef,
runRequest: runRequest,
updateScrollY: updateScrollY
}), searchNodeHolder = _useSearch1.searchNodeHolder, searchRef = _useSearch1.searchRef;
// 标题栏
var titleNodeHolder = (0, _useTitle.default)({
locale: internalLocale,
title: title,
loading: loading,
globalStateRef: globalStateRef,
runRequest: runRequest,
openSettingModal: openSettingModal
}).titleNodeHolder;
// 总结栏处理
var finalSummary = (0, _useSummary.default)({
table: table,
finalColumns: finalColumns,
summaryData: summaryData
}).finalSummary;
// 公共插槽参数
var comRenderParams = {
loading: loading
};
// 表格 onChange 事件处理
var handleTableChange = (0, _corereact.useMemoizedFn)(function(_p, filter, sorter, _e) {
var _table_onChange;
// 服务端排序发送请求
if (table.sortMode === 'service' || table.sortMode === 'service-all') {
updateRequestExtraParams({
filter: filter,
sorter: sorter
});
runRequest();
}
(_table_onChange = table.onChange) === null || _table_onChange === void 0 ? void 0 : _table_onChange.call(table, _p, filter, sorter, _e);
});
// 组件加载完毕请求一次数据
(0, _corereact.useMounted)(function() {
requestOnMounted && runRequest();
});
// 开放 API
(0, _useOpenApi.default)({
ref: ref,
rootElemRef: rootElemRef,
searchRef: searchRef,
requestParamsRef: requestParamsRef,
requestExtraParamsRef: requestExtraParamsRef,
searchValueRef: searchValueRef,
dataSource: dataSource,
updateDataSource: updateDataSource,
updateSummaryData: updateSummaryData,
updateScrollY: updateScrollY,
openSettingModal: openSettingModal,
runRequest: runRequest
});
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootContext.default.Provider, {
value: {
locale: internalLocale
},
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
ref: rootElemRef,
className: className,
style: style,
children: [
header === null || header === void 0 ? void 0 : header(comRenderParams),
searchNodeHolder,
titleTop === null || titleTop === void 0 ? void 0 : titleTop(comRenderParams),
titleNodeHolder,
titleBottom === null || titleBottom === void 0 ? void 0 : titleBottom(comRenderParams),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_antd.Table, _object_spread_props(_object_spread({
tableLayout: "fixed"
}, table), {
className: classNames(table.className, _constants.EClassNames.table),
columns: finalColumns,
dataSource: dataSource,
loading: _object_spread({
spinning: loading
}, isPlainObject(table === null || table === void 0 ? void 0 : table.loading) ? table.loading : undefined),
scroll: _object_spread({
scrollToFirstRowOnChange: true,
x: 'max-content',
y: scrollY
}, table === null || table === void 0 ? void 0 : table.scroll),
summary: finalSummary,
pagination: finalPagination,
onChange: handleTableChange
})),
footer === null || footer === void 0 ? void 0 : footer(comRenderParams),
sortModalHolder
]
})
});
};
var _default = /*#__PURE__*/ (0, _react.forwardRef)(SearchTable);