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