@uiw/react-table
Version:
Table component
293 lines (292 loc) • 13.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Table;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _utils = require("@uiw/utils");
var _reactIcon = _interopRequireDefault(require("@uiw/react-icon"));
var _Thead = _interopRequireDefault(require("./Thead"));
var _util = require("./util");
var _Expandable = _interopRequireDefault(require("./Expandable"));
var _TableTr = _interopRequireDefault(require("./TableTr"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "columns", "data", "title", "footer", "bordered", "onCell", "onCellHead", "empty", "children", "expandable", "rowKey", "scroll"]; // 展开配置
function Table() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'w-table' : _props$prefixCls,
className = props.className,
_props$columns = props.columns,
columns = _props$columns === void 0 ? [] : _props$columns,
_props$data = props.data,
data = _props$data === void 0 ? [] : _props$data,
title = props.title,
footer = props.footer,
bordered = props.bordered,
_props$onCell = props.onCell,
onCell = _props$onCell === void 0 ? _utils.noop : _props$onCell,
_props$onCellHead = props.onCellHead,
onCellHead = _props$onCellHead === void 0 ? _utils.noop : _props$onCellHead,
empty = props.empty,
children = props.children,
expandable = props.expandable,
rowKey = props.rowKey,
scroll = props.scroll,
other = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useState = (0, _react.useState)([]),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
expandIndex = _useState2[0],
setExpandIndex = _useState2[1];
var _useState3 = (0, _react.useState)({}),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
locationWidth = _useState4[0],
setLocationWidth = _useState4[1];
var finalLocationWidth = (0, _react.useRef)({});
var updateLocation = function updateLocation(params, index, key) {
var colSpan = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
finalLocationWidth.current = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, finalLocationWidth.current), {}, (0, _defineProperty2["default"])({}, index, (0, _objectSpread3["default"])((0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, finalLocationWidth.current[index]), params), {}, {
key: key,
colSpan: colSpan
})));
if (index === "".concat(header.length - 1).concat(header[header.length - 1].length - 1)) {
setLocationWidth(computed());
}
};
var deepClumnsLocation = function deepClumnsLocation(params, fistIndex) {
var initialValue = 0,
headerIndex = 0,
deepParams = [];
params.forEach(function (_, index) {
var i = "".concat(fistIndex).concat(headerIndex);
if (typeof params[index] === 'number') {
initialValue = params[index] + initialValue;
deepParams.push(params[index]);
return;
}
if (finalLocationWidth.current[i]) {
finalLocationWidth.current[i].left = initialValue;
initialValue = finalLocationWidth.current[i].width + initialValue;
if (Array.isArray(params[index].children)) {
deepParams.push.apply(deepParams, (0, _toConsumableArray2["default"])(params[index].children));
} else {
deepParams.push(finalLocationWidth.current[i].width);
}
}
headerIndex += 1;
});
initialValue = 0, headerIndex = header[fistIndex].length - 1;
for (var _index = params.length - 1; _index >= 0; _index--) {
var i = "".concat(fistIndex).concat(headerIndex);
if (typeof params[_index] === 'number') {
initialValue = params[_index] + initialValue;
continue;
}
if (finalLocationWidth.current[i]) {
finalLocationWidth.current[i].right = initialValue;
initialValue = finalLocationWidth.current[i].width + initialValue;
}
headerIndex -= 1;
}
if (deepParams.filter(function (it) {
return typeof it !== 'number';
}).length) deepClumnsLocation(deepParams, fistIndex + 1);
};
var computed = function computed() {
deepClumnsLocation(columns, 0);
return finalLocationWidth.current;
};
(0, _react.useEffect)(function () {
var childKey = (expandable === null || expandable === void 0 ? void 0 : expandable.childrenColumnName) || 'children';
var deep = function deep(params) {
var arr1 = [];
var arr = params.map(function (it, index) {
if (Array.isArray(it[childKey])) {
arr1.push.apply(arr1, (0, _toConsumableArray2["default"])(deep(it[childKey])));
}
return rowKey ? it[rowKey] : index;
});
return [].concat(arr1, (0, _toConsumableArray2["default"])(arr));
};
if (expandable) {
if (expandable.defaultExpandAllRows) {
setExpandIndex(deep(data));
return;
}
if (expandable.defaultExpandedRowKeys) {
setExpandIndex(expandable.defaultExpandedRowKeys);
return;
}
}
}, []);
(0, _react.useEffect)(function () {
if (expandable) {
if (expandable.expandedRowKeys && JSON.stringify(expandable.expandedRowKeys) !== JSON.stringify(expandIndex)) {
setExpandIndex(expandable.expandedRowKeys);
}
}
}, [expandable === null || expandable === void 0 ? void 0 : expandable.expandedRowKeys]);
var isExpandedDom = (0, _react.useMemo)(function () {
return function (record, index) {
if (!expandable) {
return false;
}
if (!expandable.expandedRowRender) {
return false;
}
var flag = true;
if (expandable.rowExpandable) {
flag = expandable.rowExpandable(record);
}
return flag && /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
style: expandIndex.includes(rowKey ? record[rowKey] : index) ? {} : {
display: 'none'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
style: {
paddingLeft: 16
},
colSpan: columns.length + 1,
children: expandable.expandedRowRender(record, index, true)
})
});
};
}, [expandable, expandIndex]);
var self = (0, _react.useMemo)(function () {
var keys = (0, _util.getAllColumnsKeys)(columns);
var selfColumns = [];
if (expandable !== null && expandable !== void 0 && expandable.expandedRowRender) {
keys = [{
key: 'uiw-expanded',
align: 'center'
}].concat((0, _toConsumableArray2["default"])(keys));
selfColumns = [{
title: '',
key: 'uiw-expanded',
width: 50,
align: 'center',
render: function render(text, key, record, index) {
var _expandable$defaultEx;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Expandable["default"], {
defaultExpand: expandable.defaultExpandAllRows === undefined ? !!((_expandable$defaultEx = expandable.defaultExpandedRowKeys) !== null && _expandable$defaultEx !== void 0 && _expandable$defaultEx.includes(rowKey ? record[rowKey] : index)) : !!expandable.defaultExpandAllRows,
onClick: function onClick(expand) {
var _expandable$onExpand;
(_expandable$onExpand = expandable.onExpand) === null || _expandable$onExpand === void 0 || _expandable$onExpand.call(expandable, expand, record, index);
if (expand) {
var result = expandIndex.filter(function (it) {
return rowKey ? it !== record[rowKey] : it !== index;
});
expandable.onExpandedRowsChange ? expandable.onExpandedRowsChange(result) : setExpandIndex(result);
} else {
var _result = [].concat((0, _toConsumableArray2["default"])(expandIndex), [rowKey ? record[rowKey] : index]);
expandable.onExpandedRowsChange ? expandable.onExpandedRowsChange(_result) : setExpandIndex(_result);
}
},
expandIcon: function expandIcon(expand) {
var _expandable$rowExpand;
if (expandable.rowExpandable && !((_expandable$rowExpand = expandable.rowExpandable) !== null && _expandable$rowExpand !== void 0 && _expandable$rowExpand.call(expandable, record))) {
return null;
}
if (expandable.expandIcon) {
return expandable.expandIcon(expand, record, index);
}
return expand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon["default"], {
type: "minus-square-o"
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon["default"], {
type: "plus-square-o"
});
}
});
}
}].concat((0, _toConsumableArray2["default"])(columns));
} else {
selfColumns = (0, _toConsumableArray2["default"])(columns);
}
return {
keys: keys,
selfColumns: selfColumns
};
}, [columns, expandIndex]);
var style = (0, _react.useMemo)(function () {
var style = {
table: {},
div: {}
};
if (scroll) {
if (scroll.x !== undefined) {
style.table.minWidth = '100%';
style.table.width = scroll.x;
style.div.overflowX = 'auto';
style.div.overflowY = 'hidden';
}
if (scroll.y !== undefined) {
style.div.maxHeight = scroll.y;
style.div.overflowY = 'scroll';
}
}
return style;
}, [scroll]);
var cls = [prefixCls, className, bordered ? "".concat(prefixCls, "-bordered") : null].filter(Boolean).join(' ').trim();
var _getLevelItems = (0, _util.getLevelItems)(self.selfColumns),
header = _getLevelItems.header,
render = _getLevelItems.render,
ellipsis = _getLevelItems.ellipsis;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread3["default"])((0, _objectSpread3["default"])({
className: cls
}, other), {}, {
style: (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, other.style), style.div),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
style: (0, _objectSpread3["default"])({
tableLayout: ellipsis ? 'fixed' : 'auto'
}, style.table),
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("caption", {
children: title
}), columns && columns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Thead["default"], {
onCellHead: onCellHead,
data: header,
locationWidth: locationWidth,
updateLocation: updateLocation
}), data && data.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableTr["default"], {
rowKey: rowKey,
locationWidth: locationWidth,
data: data,
header: header,
keys: self.keys,
render: render,
ellipsis: ellipsis,
prefixCls: prefixCls,
onCell: onCell,
hierarchy: 0,
isExpandedDom: isExpandedDom,
indentSize: typeof (expandable === null || expandable === void 0 ? void 0 : expandable.indentSize) === 'number' ? expandable === null || expandable === void 0 ? void 0 : expandable.indentSize : 16,
childrenColumnName: (expandable === null || expandable === void 0 ? void 0 : expandable.childrenColumnName) || 'children'
})
}), data && data.length === 0 && empty && /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
colSpan: self.keys.length,
style: {
position: 'relative',
left: 0
},
children: empty
})
})
}), props.children]
})
})), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "".concat(prefixCls, "-footer"),
children: footer
})]
});
}
module.exports = exports.default;