@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
169 lines (168 loc) • 8.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Table", {
enumerable: true,
get: function() {
return Table;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreact = require("@nutui/icons-react");
var _configprovider = require("../configprovider");
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var _utils = require("./utils");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
columns: [],
data: [],
bordered: true,
striped: false,
noData: '',
sorterIcon: null,
showHeader: true
});
var Table = function Table(props) {
var locale = (0, _configprovider.useConfig)().locale;
var rtl = (0, _configprovider.useRtl)();
defaultProps.noData = locale.noData;
var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, className = _ref.className, style = _ref.style, columns = _ref.columns, data = _ref.data, bordered = _ref.bordered, summary = _ref.summary, striped = _ref.striped, noData = _ref.noData, sorterIcon = _ref.sorterIcon, showHeader = _ref.showHeader, onSort = _ref.onSort, rest = (0, _object_without_properties._)(_ref, [
"children",
"className",
"style",
"columns",
"data",
"bordered",
"summary",
"striped",
"noData",
"sorterIcon",
"showHeader",
"onSort"
]);
var sortedMapping = (0, _react.useRef)({});
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
defaultValue: data,
finalValue: []
}), 2), innerValue = _usePropsValue[0], setValue = _usePropsValue[1];
var _useTableSticky = (0, _utils.useTableSticky)(columns, rtl), isSticky = _useTableSticky.isSticky, stickyLeftWidth = _useTableSticky.stickyLeftWidth, stickyRightWidth = _useTableSticky.stickyRightWidth, getStickyClass = _useTableSticky.getStickyClass, getStickyStyle = _useTableSticky.getStickyStyle;
(0, _react.useEffect)(function() {
setValue(data);
}, [
data
]);
var classPrefix = 'nut-table';
var headerClassPrefix = "".concat(classPrefix, "-main-head-tr");
var bodyClassPrefix = "".concat(classPrefix, "-main-body-tr");
var cls = (0, _classnames.default)(classPrefix, className);
var handleSorterClick = function handleSorterClick(item) {
if (item.sorter && !sortedMapping.current[item.key]) {
var copied = (0, _to_consumable_array._)(innerValue);
if (typeof item.sorter === 'function') {
copied.sort(item.sorter);
} else if (item.sorter === 'default') {
copied.sort();
}
sortedMapping.current[item.key] = true;
setValue(copied, true);
onSort && onSort(item, copied);
} else {
sortedMapping.current[item.key] = false;
setValue(data);
}
};
var cellClasses = function cellClasses(item) {
var _obj;
return _obj = {}, (0, _define_property._)(_obj, "".concat(headerClassPrefix, "-border"), bordered), (0, _define_property._)(_obj, "".concat(headerClassPrefix, "-align").concat(item.align ? item.align : ''), true), _obj;
};
var getColumnItem = function getColumnItem(value) {
return columns.filter(function(item) {
return item.key === value;
})[0];
};
var renderHeadCells = function renderHeadCells() {
return columns.map(function(item, index) {
return /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(headerClassPrefix, "-th"), cellClasses(item), getStickyClass(item.key)),
key: item.key,
onClick: function onClick() {
return handleSorterClick(item);
},
style: getStickyStyle(item.key)
}, item.title, "\xa0", item.sorter && (sorterIcon || /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowDown, {
width: "12px",
height: "12px"
})));
});
};
var sortDataItem = function sortDataItem() {
return columns.map(function(columns) {
return [
columns.key,
columns.render
];
});
};
var renderBodyTds = function renderBodyTds(item, rowIndex) {
return sortDataItem().map(function(param) {
var _param = (0, _sliced_to_array._)(param, 2), value = _param[0], render = _param[1];
return /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(bodyClassPrefix, "-td"), cellClasses(getColumnItem(value)), getStickyClass(value)),
key: value,
style: getStickyStyle(value)
}, typeof item[value] === 'function' || typeof render === 'function' ? /*#__PURE__*/ _react.default.createElement("div", null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
});
};
var renderBodyTrs = function renderBodyTrs() {
return innerValue.map(function(item, index) {
var inner = renderBodyTds(item, index);
var rowRender = item.rowRender;
if (rowRender && typeof rowRender === 'function') {
return rowRender(item, index, {
inner: inner
});
}
return /*#__PURE__*/ _react.default.createElement("div", {
className: bodyClassPrefix,
key: index
}, inner);
});
};
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
className: cls
}, rest), /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(classPrefix, "-wrapper ").concat(isSticky ? "".concat(classPrefix, "-wrapper-sticky") : '')),
style: style
}, /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(classPrefix, "-main"), (0, _define_property._)({}, "".concat(classPrefix, "-main-striped"), striped))
}, showHeader && /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-main-head")
}, /*#__PURE__*/ _react.default.createElement("div", {
className: headerClassPrefix
}, renderHeadCells())), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-main-body")
}, renderBodyTrs()))), isSticky ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-sticky-left"),
style: {
width: stickyLeftWidth
}
}), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-sticky-right"),
style: {
width: stickyRightWidth
}
})) : null, (summary || innerValue.length === 0) && /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-summary")
}, summary || noData));
};
Table.displayName = 'NutTable';