drip-table
Version:
A tiny and powerful enterprise-class solution for building tables.
158 lines (140 loc) • 6.51 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/*
* This file is part of the drip-table project.
* @link : https://drip-table.jd.com/
* @author : Emil Zhai (root@derzh.com)
* @modifier : Emil Zhai (root@derzh.com)
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
*/
import "./index.less";
import classnames from 'classnames';
import React, { useEffect } from 'react';
import * as childrenLike from "../utils/children-like";
import { parseThemeCSS } from "../utils/dom";
import ErrorBoundary from "../components/react-components/error-boundary";
import SlotRender from "../components/react-components/slot-render";
import Spin from "../components/react-components/spin";
import { useTableContext } from "../hooks";
import CalendarLayout from "./calendar";
import CardLayout from "./card";
import TableLayout from "./table";
function DripTableLayout() {
var _useTableContext = useTableContext(),
tableProps = _useTableContext.props,
tableInfo = _useTableContext.info,
tableState = _useTableContext.state,
setTableState = _useTableContext.setState;
React.useEffect(function () {
if (tableProps.selectedRowKeys) {
setTableState({
selectedRowKeys: tableProps.selectedRowKeys
});
}
}, [tableProps.selectedRowKeys]);
React.useEffect(function () {
setTableState(function (state) {
return {
filters: Object.fromEntries(childrenLike.flattenRecursive(tableProps.schema.columns).map(function (c) {
return [c.dataIndex, c.defaultFilteredValue];
}).filter(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
k = _ref2[0],
v = _ref2[1];
return typeof k === 'string' && v;
})),
displayColumnKeys: tableProps.displayColumnKeys || childrenLike.flattenRecursive(tableProps.schema.columns).filter(function (c) {
return c.hidable;
}).map(function (c) {
return c.key;
})
};
});
}, [tableProps.displayColumnKeys]);
var header = React.useMemo(function () {
var _tableProps$schema$he;
if (tableProps.schema.header === true) {
return {
elements: [{
type: 'display-column-selector',
selectorButtonType: 'primary'
}, {
type: 'spacer',
span: 'flex-auto'
}, {
type: 'search'
}, {
type: 'insert-button',
showIcon: true
}]
};
}
if (!tableProps.schema.header || !((_tableProps$schema$he = tableProps.schema.header.elements) !== null && _tableProps$schema$he !== void 0 && _tableProps$schema$he.length)) {
return null;
}
return {
style: tableProps.schema.header.style,
elements: tableProps.schema.header.elements
};
}, [tableProps.schema.header]);
var footer = React.useMemo(function () {
var _tableProps$schema$fo;
if (!tableProps.schema.footer || !((_tableProps$schema$fo = tableProps.schema.footer.elements) !== null && _tableProps$schema$fo !== void 0 && _tableProps$schema$fo.length)) {
return null;
}
return {
style: tableProps.schema.footer.style,
elements: tableProps.schema.footer.elements
};
}, [tableProps.schema.footer]);
var headerNode = header ? /*#__PURE__*/React.createElement(SlotRender, {
schema: header
}) : null;
var footerNode = footer ? /*#__PURE__*/React.createElement(SlotRender, {
schema: footer
}) : null;
useEffect(function () {
if (tableInfo.schema.defaultTableLayout) {
setTableState({
layout: tableInfo.schema.defaultTableLayout
});
}
}, []);
var layoutNode = React.useMemo(function () {
if (tableState.layout === 'table') {
return /*#__PURE__*/React.createElement(TableLayout, {
header: headerNode,
footer: footerNode
});
}
if (tableState.layout === 'card') {
return /*#__PURE__*/React.createElement(CardLayout, {
header: headerNode
});
}
if (tableState.layout === 'calendar') {
return /*#__PURE__*/React.createElement(CalendarLayout, {
header: headerNode
});
}
return null;
}, [tableProps, tableInfo, tableState, setTableState, headerNode, footerNode]);
var themeStyle = React.useMemo(function () {
return parseThemeCSS(tableProps.schema.theme);
}, [tableProps.schema.theme]);
return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Spin, {
spinning: tableProps.loading,
className: tableProps.spinClassName,
innerClassName: tableProps.spinInnerClassName
}, /*#__PURE__*/React.createElement("div", {
className: classnames(tableProps.className, tableProps.schema.className, {
'jfe-drip-table-layout-table-sticky-container': tableProps.schema.pagination && tableProps.schema.pagination.sticky
}),
style: Object.assign({}, tableProps.style, tableProps.schema.style, themeStyle)
}, layoutNode)));
}
export default DripTableLayout;