@uiw/react-table
Version:
Table component
276 lines (275 loc) • 9.69 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "columns", "data", "title", "footer", "bordered", "onCell", "onCellHead", "empty", "children", "expandable", "rowKey", "scroll"];
import React, { useMemo, useState, useEffect, useRef } from 'react';
import { noop } from '@uiw/utils';
import Icon from '@uiw/react-icon';
import Thead from './Thead';
import { getLevelItems, getAllColumnsKeys } from './util';
import ExpandableComponent from './Expandable';
import TableTr from './TableTr';
import "./style/index.css";
// 展开配置
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default function Table(props) {
if (props === void 0) {
props = {};
}
var {
prefixCls = 'w-table',
className,
columns = [],
data = [],
title,
footer,
bordered,
onCell = noop,
onCellHead = noop,
empty,
expandable,
rowKey,
scroll
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
var [expandIndex, setExpandIndex] = useState([]);
var [locationWidth, setLocationWidth] = useState({});
var finalLocationWidth = useRef({});
var updateLocation = function updateLocation(params, index, key, colSpan) {
if (colSpan === void 0) {
colSpan = 0;
}
finalLocationWidth.current = _extends({}, finalLocationWidth.current, {
[index]: _extends({}, finalLocationWidth.current[index], params, {
key: key,
colSpan
})
});
if (index === "" + (header.length - 1) + (header[header.length - 1].length - 1)) {
setLocationWidth(computed());
}
};
var deepClumnsLocation = (params, fistIndex) => {
var initialValue = 0,
headerIndex = 0,
deepParams = [];
params.forEach((_, index) => {
var i = "" + fistIndex + 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(...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 = "" + fistIndex + 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(it => typeof it !== 'number').length) deepClumnsLocation(deepParams, fistIndex + 1);
};
var computed = () => {
deepClumnsLocation(columns, 0);
return finalLocationWidth.current;
};
useEffect(() => {
var childKey = (expandable == null ? void 0 : expandable.childrenColumnName) || 'children';
var deep = params => {
var arr1 = [];
var arr = params.map((it, index) => {
if (Array.isArray(it[childKey])) {
arr1.push(...deep(it[childKey]));
}
return rowKey ? it[rowKey] : index;
});
return [...arr1, ...arr];
};
if (expandable) {
if (expandable.defaultExpandAllRows) {
setExpandIndex(deep(data));
return;
}
if (expandable.defaultExpandedRowKeys) {
setExpandIndex(expandable.defaultExpandedRowKeys);
return;
}
}
}, []);
useEffect(() => {
if (expandable) {
if (expandable.expandedRowKeys && JSON.stringify(expandable.expandedRowKeys) !== JSON.stringify(expandIndex)) {
setExpandIndex(expandable.expandedRowKeys);
}
}
}, [expandable == null ? void 0 : expandable.expandedRowKeys]);
var isExpandedDom = useMemo(() => {
return (record, index) => {
if (!expandable) {
return false;
}
if (!expandable.expandedRowRender) {
return false;
}
var flag = true;
if (expandable.rowExpandable) {
flag = expandable.rowExpandable(record);
}
return flag && /*#__PURE__*/_jsx("tr", {
style: expandIndex.includes(rowKey ? record[rowKey] : index) ? {} : {
display: 'none'
},
children: /*#__PURE__*/_jsx("td", {
style: {
paddingLeft: 16
},
colSpan: columns.length + 1,
children: expandable.expandedRowRender(record, index, true)
})
});
};
}, [expandable, expandIndex]);
var self = useMemo(() => {
var keys = getAllColumnsKeys(columns);
var selfColumns = [];
if (expandable != null && expandable.expandedRowRender) {
keys = [{
key: 'uiw-expanded',
align: 'center'
}, ...keys];
selfColumns = [{
title: '',
key: 'uiw-expanded',
width: 50,
align: 'center',
render: (text, key, record, index) => {
var _expandable$defaultEx;
return /*#__PURE__*/_jsx(ExpandableComponent, {
defaultExpand: expandable.defaultExpandAllRows === undefined ? !!((_expandable$defaultEx = expandable.defaultExpandedRowKeys) != null && _expandable$defaultEx.includes(rowKey ? record[rowKey] : index)) : !!expandable.defaultExpandAllRows,
onClick: expand => {
expandable.onExpand == null || expandable.onExpand(expand, record, index);
if (expand) {
var result = expandIndex.filter(it => rowKey ? it !== record[rowKey] : it !== index);
expandable.onExpandedRowsChange ? expandable.onExpandedRowsChange(result) : setExpandIndex(result);
} else {
var _result = [...expandIndex, rowKey ? record[rowKey] : index];
expandable.onExpandedRowsChange ? expandable.onExpandedRowsChange(_result) : setExpandIndex(_result);
}
},
expandIcon: expand => {
if (expandable.rowExpandable && !(expandable.rowExpandable != null && expandable.rowExpandable(record))) {
return null;
}
if (expandable.expandIcon) {
return expandable.expandIcon(expand, record, index);
}
return expand ? /*#__PURE__*/_jsx(Icon, {
type: "minus-square-o"
}) : /*#__PURE__*/_jsx(Icon, {
type: "plus-square-o"
});
}
});
}
}, ...columns];
} else {
selfColumns = [...columns];
}
return {
keys,
selfColumns
};
}, [columns, expandIndex]);
var style = useMemo(() => {
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 ? prefixCls + "-bordered" : null].filter(Boolean).join(' ').trim();
var {
header,
render,
ellipsis
} = getLevelItems(self.selfColumns);
return /*#__PURE__*/_jsxs(React.Fragment, {
children: [/*#__PURE__*/_jsx("div", _extends({
className: cls
}, other, {
style: _extends({}, other.style, style.div),
children: /*#__PURE__*/_jsxs("table", {
style: _extends({
tableLayout: ellipsis ? 'fixed' : 'auto'
}, style.table),
children: [title && /*#__PURE__*/_jsx("caption", {
children: title
}), columns && columns.length > 0 && /*#__PURE__*/_jsx(Thead, {
onCellHead: onCellHead,
data: header,
locationWidth: locationWidth,
updateLocation: updateLocation
}), data && data.length > 0 && /*#__PURE__*/_jsx("tbody", {
children: /*#__PURE__*/_jsx(TableTr, {
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 ? void 0 : expandable.indentSize) === 'number' ? expandable == null ? void 0 : expandable.indentSize : 16,
childrenColumnName: (expandable == null ? void 0 : expandable.childrenColumnName) || 'children'
})
}), data && data.length === 0 && empty && /*#__PURE__*/_jsx("tbody", {
children: /*#__PURE__*/_jsx("tr", {
children: /*#__PURE__*/_jsx("td", {
colSpan: self.keys.length,
style: {
position: 'relative',
left: 0
},
children: empty
})
})
}), props.children]
})
})), footer && /*#__PURE__*/_jsx("div", {
className: prefixCls + "-footer",
children: footer
})]
});
}