@oceanbase/design
Version:
The Design System of OceanBase
231 lines • 16 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["batchOperationBar", "emptyText"];
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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import { Popover, Space, Table as AntTable } from 'antd';
import classNames from 'classnames';
import { isEmpty } from 'lodash';
import React, { useContext, useEffect, useState } from 'react';
import ConfigProvider from "../config-provider";
import Typography from "../typography";
import Empty from "../empty";
import useStyle from "./style";
import useDefaultPagination from "./hooks/useDefaultPagination";
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import enUS from "../locale/en-US";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export * from 'antd/es/table';
function Table(props, ref) {
var _enUS$Table, _locale$Table;
var customLocale = props.locale,
size = props.size,
bordered = props.bordered,
innerBordered = props.innerBordered,
columns = props.columns,
footer = props.footer,
customPagination = props.pagination,
rowSelection = props.rowSelection,
_rowClassName = props.rowClassName,
toolAlertRender = props.toolAlertRender,
toolOptionsRender = props.toolOptionsRender,
toolSelectedContent = props.toolSelectedContent,
cancelText = props.cancelText,
collapseText = props.collapseText,
openText = props.openText,
expandable = props.expandable,
_props$hiddenCancelBt = props.hiddenCancelBtn,
hiddenCancelBtn = _props$hiddenCancelBt === void 0 ? false : _props$hiddenCancelBt,
customizePrefixCls = props.prefixCls,
className = props.className;
var extendedContext = useContext(ConfigProvider.ExtendedConfigContext);
var pagination = useDefaultPagination(customPagination);
var _useContext = useContext(ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls,
locale = _useContext.locale,
table = _useContext.table;
var _customLocale$batchOp = _objectSpread(_objectSpread({}, customLocale), {}, {
batchOperationBar: _objectSpread(_objectSpread(_objectSpread({}, (_enUS$Table = enUS.Table) === null || _enUS$Table === void 0 ? void 0 : _enUS$Table.batchOperationBar), locale === null || locale === void 0 || (_locale$Table = locale.Table) === null || _locale$Table === void 0 ? void 0 : _locale$Table.batchOperationBar), customLocale === null || customLocale === void 0 ? void 0 : customLocale.batchOperationBar)
}),
batchOperationBar = _customLocale$batchOp.batchOperationBar,
_customLocale$batchOp2 = _customLocale$batchOp.emptyText,
emptyText = _customLocale$batchOp2 === void 0 ? /*#__PURE__*/_jsx(Empty, {
image: Empty.PRESENTED_IMAGE_SIMPLE
}) : _customLocale$batchOp2,
restLocale = _objectWithoutProperties(_customLocale$batchOp, _excluded);
var prefixCls = getPrefixCls('table', customizePrefixCls);
var _useStyle = useStyle(prefixCls),
wrapSSR = _useStyle.wrapSSR;
var tableCls = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-expandable"), !isEmpty(expandable)), "".concat(prefixCls, "-selectable"), !!rowSelection), "".concat(prefixCls, "-has-footer"), !!footer), "".concat(prefixCls, "-inner-bordered"), innerBordered), className);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
openPopover = _useState2[0],
setOpenPopover = _useState2[1];
var _useMergedState = useMergedState([], {
value: rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys,
defaultValue: rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.defaultSelectedRowKeys
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
currentSelectedRowKeys = _useMergedState2[0],
setCurrentSelectedRowKeys = _useMergedState2[1];
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
currentSelectedRows = _useState4[0],
setCurrentSelectedRows = _useState4[1];
var _useState5 = useState({}),
_useState6 = _slicedToArray(_useState5, 2),
currentSelectedInfo = _useState6[0],
setCurrentSelectedInfo = _useState6[1];
var newColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (item) {
if (item.ellipsis) {
return _objectSpread(_objectSpread({}, item), {}, {
ellipsis: item.ellipsis === true ? item.ellipsis : _objectSpread({
showTitle: false
}, item.ellipsis),
render: function render(text, record, index) {
var element = item.render ? item.render(text, record, index) : record[item.dataIndex];
var elementType = element === null || element === void 0 ? void 0 : element.type;
// 如果目标元素已经被 Tooltip 包裹，则去掉默认的 Tooltip，避免有两个 Tooltip
return (elementType === null || elementType === void 0 ? void 0 : elementType.__ANT_TOOLTIP) === true ? element : /*#__PURE__*/_jsx(Typography.Text, {
ellipsis: {
tooltip: {
placement: 'topLeft',
title: element
}
},
children: /*#__PURE__*/_jsx("span", {
children: element
})
});
}
});
}
return item;
});
var handleSelectedData = function handleSelectedData(selectedRowKeys, selectedRows, info) {
setCurrentSelectedRowKeys(selectedRowKeys);
setCurrentSelectedRows(selectedRows);
setCurrentSelectedInfo(info);
};
var handleOptionsCancel = function handleOptionsCancel() {
var _rowSelection$onChang;
rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang = rowSelection.onChange) === null || _rowSelection$onChang === void 0 || _rowSelection$onChang.call(rowSelection, [], [], currentSelectedInfo);
handleSelectedData([], [], currentSelectedInfo);
};
useEffect(function () {
if (isEmpty(currentSelectedRows) && toolSelectedContent) {
setOpenPopover(false);
}
}, [currentSelectedRows]);
var renderOptionsBar = function renderOptionsBar(total, range) {
if (isEmpty(rowSelection) || isEmpty(currentSelectedRowKeys)) {
return (
/*#__PURE__*/
// @ts-ignore
_jsx("span", {
children: pagination && (pagination === null || pagination === void 0 ? void 0 : pagination.showTotal) && (pagination === null || pagination === void 0 ? void 0 : pagination.showTotal(total, range))
})
);
}
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsxs("div", {
className: "".concat(prefixCls, "-batch-operation-bar"),
children: [/*#__PURE__*/_jsxs(Space, {
size: 8,
style: {
marginRight: 24
},
children: [toolAlertRender && toolAlertRender(currentSelectedRowKeys, currentSelectedRows), !toolAlertRender && toolAlertRender !== false && /*#__PURE__*/_jsxs("span", {
className: "".concat(prefixCls, "-batch-operation-selection"),
children: [/*#__PURE__*/_jsx("span", {
children: batchOperationBar === null || batchOperationBar === void 0 ? void 0 : batchOperationBar.selected
}), /*#__PURE__*/_jsx("span", {
className: "".concat(prefixCls, "-batch-operation-selection-count"),
children: (currentSelectedRowKeys === null || currentSelectedRowKeys === void 0 ? void 0 : currentSelectedRowKeys.length) || 0
}), /*#__PURE__*/_jsx("span", {
children: batchOperationBar === null || batchOperationBar === void 0 ? void 0 : batchOperationBar.object
})]
}), !hiddenCancelBtn && /*#__PURE__*/_jsx("a", {
onClick: handleOptionsCancel,
children: cancelText !== null && cancelText !== void 0 ? cancelText : batchOperationBar === null || batchOperationBar === void 0 ? void 0 : batchOperationBar.cancel
}), toolSelectedContent && /*#__PURE__*/_jsx(Popover, {
placement: "top",
overlayClassName: "".concat(prefixCls, "-batch-operation-selection-popover"),
content: toolSelectedContent === null || toolSelectedContent === void 0 ? void 0 : toolSelectedContent(currentSelectedRowKeys, currentSelectedRows),
trigger: "click",
open: openPopover,
children: /*#__PURE__*/_jsx("a", {
onClick: function onClick() {
return setOpenPopover(!openPopover);
},
children: openPopover ? collapseText !== null && collapseText !== void 0 ? collapseText : batchOperationBar === null || batchOperationBar === void 0 ? void 0 : batchOperationBar.collapse : openText !== null && openText !== void 0 ? openText : batchOperationBar === null || batchOperationBar === void 0 ? void 0 : batchOperationBar.open
})
})]
}), toolOptionsRender && /*#__PURE__*/_jsx(Space, {
size: 8,
children: toolOptionsRender === null || toolOptionsRender === void 0 ? void 0 : toolOptionsRender(currentSelectedRowKeys, currentSelectedRows)
})]
}), /*#__PURE__*/_jsx("span", {
children: pagination && (pagination === null || pagination === void 0 ? void 0 : pagination.showTotal) && (pagination === null || pagination === void 0 ? void 0 : pagination.showTotal(total, range))
})]
});
};
return wrapSSR( /*#__PURE__*/_jsx(AntTable, _objectSpread(_objectSpread({}, props), {}, {
ref: ref,
prefixCls: customizePrefixCls,
className: tableCls,
locale: _objectSpread(_objectSpread({}, restLocale), {}, {
emptyText: /*#__PURE__*/_jsx("div", {
className: "".concat(prefixCls, "-empty-wrapper"),
children: typeof emptyText === 'function' ? emptyText() : emptyText
})
}),
size: size,
bordered: bordered || innerBordered,
columns: newColumns,
rowClassName: function rowClassName() {
return classNames(typeof _rowClassName === 'function' ? _rowClassName.apply(void 0, arguments) : _rowClassName, _defineProperty({}, "".concat(prefixCls, "-expand-row-by-click"), expandable === null || expandable === void 0 ? void 0 : expandable.expandRowByClick));
},
expandable: expandable ? _objectSpread({
columnWidth: !size || size === 'large' ? 40 : 32
}, expandable) : undefined,
rowSelection: rowSelection ? _objectSpread(_objectSpread({
columnWidth: table === null || table === void 0 ? void 0 : table.selectionColumnWidth
}, rowSelection), {}, {
onChange: function onChange(selectedRowKeys, selectedRows, info) {
var _rowSelection$onChang2;
handleSelectedData(selectedRowKeys, selectedRows, info);
rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang2 = rowSelection.onChange) === null || _rowSelection$onChang2 === void 0 || _rowSelection$onChang2.call(rowSelection, selectedRowKeys, selectedRows, info);
}
}) : undefined,
footer: footer,
pagination: pagination === false ? false : _objectSpread(_objectSpread({}, pagination), {}, {
hideOnSinglePage: toolAlertRender || toolOptionsRender || toolSelectedContent || pagination !== null && pagination !== void 0 && pagination.showSizeChanger ? false : (pagination === null || pagination === void 0 ? void 0 : pagination.hideOnSinglePage) !== undefined ? pagination === null || pagination === void 0 ? void 0 : pagination.hideOnSinglePage : extendedContext.hideOnSinglePage,
showTotal: renderOptionsBar
})
})));
}
var ForwardTable = /*#__PURE__*/React.forwardRef(Table);
export default Object.assign(ForwardTable, {
SELECTION_COLUMN: AntTable.SELECTION_COLUMN,
EXPAND_COLUMN: AntTable.EXPAND_COLUMN,
SELECTION_ALL: AntTable.SELECTION_ALL,
SELECTION_INVERT: AntTable.SELECTION_INVERT,
SELECTION_NONE: AntTable.SELECTION_NONE,
Column: AntTable.Column,
ColumnGroup: AntTable.ColumnGroup,
Summary: AntTable.Summary,
useStyle: useStyle,
useDefaultPagination: useDefaultPagination
});