@uiw/react-table
Version:
Table component
157 lines (156 loc) • 6.88 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = TableTr;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIcon = _interopRequireDefault(require("@uiw/react-icon"));
var _utils = require("@uiw/utils");
var _util = require("./util");
var _jsxRuntime = require("react/jsx-runtime");
function TableTr(props) {
var rowKey = props.rowKey,
data = props.data,
keys = props.keys,
render = props.render,
ellipsis = props.ellipsis,
prefixCls = props.prefixCls,
_props$onCell = props.onCell,
onCell = _props$onCell === void 0 ? _utils.noop : _props$onCell,
isExpandedDom = props.isExpandedDom,
hierarchy = props.hierarchy,
indentSize = props.indentSize,
childrenColumnName = props.childrenColumnName,
locationWidth = props.locationWidth,
header = props.header;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
isOpacity = _useState2[0],
setIsOpacity = _useState2[1];
var _useState3 = (0, _react.useState)(0),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
childrenIndex = _useState4[0],
setChildrenIndex = _useState4[1];
var _useState5 = (0, _react.useState)([]),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
expandIndex = _useState6[0],
setExpandIndex = _useState6[1];
(0, _react.useEffect)(function () {
setIsOpacity(!!(data !== null && data !== void 0 && data.find(function (it) {
return it[childrenColumnName];
})));
setChildrenIndex((keys === null || keys === void 0 ? void 0 : keys.findIndex(function (it) {
return it.key === 'uiw-expanded';
})) === -1 ? 0 : 1);
}, [data]);
var IconDom = (0, _react.useMemo)(function () {
return function (key, isOpacity) {
var flag = expandIndex.includes(key);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon["default"], {
type: flag ? 'minus-square-o' : 'plus-square-o',
style: {
marginRight: 10,
opacity: isOpacity ? 1 : 0,
marginLeft: hierarchy * indentSize,
"float": 'left',
marginTop: 3.24
},
onClick: function onClick() {
setExpandIndex(flag ? expandIndex.filter(function (it) {
return it !== key;
}) : [].concat((0, _toConsumableArray2["default"])(expandIndex), [key]));
}
});
};
}, [expandIndex]);
var getIndex = function getIndex(key) {
var j = 0;
var i = header.findIndex(function (it) {
j = it.findIndex(function (item) {
return item.key === key;
});
return j > -1;
});
return "".concat(i).concat(j);
};
if (!Array.isArray(data) || !data.length) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {
children: data.map(function (trData, rowNum) {
var key = rowKey ? trData[rowKey] : rowNum;
var rightFixedNum = 0;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
children: keys.map(function (keyName, colNum) {
var objs = {
children: trData[keyName.key]
};
if (render[keyName.key]) {
var child = render[keyName.key](trData[keyName.key], keyName.key, trData, rowNum, colNum);
if ( /*#__PURE__*/_react["default"].isValidElement(child)) {
objs.children = child;
} else {
if (child.props) {
objs = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, child.props), {}, {
children: objs.children
});
if (child.props.rowSpan === 0 || child.props.colSpan === 0) return null;
}
if (child.children) {
objs.children = child.children;
}
}
}
var isHasChildren = Array.isArray(trData[childrenColumnName]);
if (colNum === childrenIndex && (isOpacity || hierarchy || isHasChildren)) {
objs.children = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [IconDom(key, isHasChildren), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
style: {
paddingLeft: hierarchy * indentSize
}
}), objs.children]
});
}
if (keyName.fixed) {
if (keyName.fixed === 'right') {
rightFixedNum = rightFixedNum + 1;
var cls = rightFixedNum === 1 ? "".concat(prefixCls, "-fixed-right-first") : '';
objs.className = "".concat(prefixCls, "-fixed-right ").concat(cls);
} else {
objs.className = "".concat(prefixCls, "-fixed-true");
}
}
return /*#__PURE__*/(0, _react.createElement)("td", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, objs), {}, {
style: keyName.fixed ? (0, _objectSpread2["default"])({}, (0, _util.locationFixed)(keyName.fixed, locationWidth, "".concat(getIndex(keyName.key || 'undefined')))) : {},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: ellipsis && ellipsis[keyName.key] ? "".concat(prefixCls, "-ellipsis") : undefined,
children: objs.children
}),
key: colNum,
className: [prefixCls + '-tr-children-' + (keyName.align || 'left'), keyName.className, objs.className].filter(function (it) {
return it;
}).join(' ').trim(),
onClick: function onClick(evn) {
return onCell(trData, {
rowNum: rowNum,
colNum: colNum,
keyName: keyName.key
}, evn);
}
}));
})
}, key), isExpandedDom(trData, rowNum), expandIndex.includes(key) && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableTr, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
data: trData[childrenColumnName],
hierarchy: hierarchy + 1
}))]
}, rowNum);
})
});
}
module.exports = exports.default;