@perfma/heaven
Version:
An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.
345 lines (302 loc) • 14.9 kB
JavaScript
var _excluded = ["suffix", "tooltip", "style", "children"],
_excluded2 = ["onResize", "width", "resizable"],
_excluded3 = ["columns", "left", "toolbar", "extra", "options", "empty", "expandable", "scroll"];
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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 React, { useState, useMemo } from 'react';
import { ConfigProvider, Tooltip, Table, Space, Row, Col, Typography } from 'antd';
import defaultLocale from 'antd/lib/locale/en_US';
import { SettingOutlined } from '@ant-design/icons';
import { Resizable } from 'react-resizable';
import { mixinStaticProps } from '../_util';
import TableContext from './store';
import Empty from './empty';
import Icon from '../icon';
import ColumnSetting from './column-setting';
import FilterDropdown from './filter-dropdown';
var ConfigContext = ConfigProvider.ConfigContext;
var Text = Typography.Text;
var EllipsisMiddle = function EllipsisMiddle(props) {
var suffix = props.suffix,
tooltip = props.tooltip,
style = props.style,
children = props.children,
rest = _objectWithoutProperties(props, _excluded);
return /*#__PURE__*/React.createElement(Text, _objectSpread({
style: _objectSpread(_objectSpread({}, style), {}, {
maxWidth: '100%'
}),
ellipsis: {
suffix: suffix,
tooltip: tooltip ? children : null
}
}, rest), children);
};
function handleEllipsis(col) {
if (!col.ellipsis) return col;
var suffix = col.ellipsis.suffix;
var render = col.render;
if (!col.render && !col.ellipsis.useRender) {
render = function render(val, record, index) {
var _onClick = col.ellipsis.onClick;
var isArray = Array.isArray(val);
var text = isArray ? val.join('、') : val;
var getDomWidth = function getDomWidth() {
var dom = document.createElement('div');
dom.style.position = 'fixed';
dom.style.left = '-9999px';
dom.style.top = '-9999px';
dom.style.whiteSpace = 'nowrap';
dom.innerText = text;
document.body.append(dom);
var width = dom.offsetWidth;
document.body.removeChild(dom);
return width;
};
var width = col.width;
width = width;
var isCustomOverflow = col.width && getDomWidth() > width - 32; // 32px is paddings
// const line = (col.ellipsis as ProCellEllipsisType).line || 1;
return /*#__PURE__*/React.createElement(React.Fragment, null, isArray && isCustomOverflow ? /*#__PURE__*/React.createElement(EllipsisMiddle, {
className: "".concat(_onClick ? 'clickable-ellipsis-cell' : ''),
suffix: suffix ? suffix(val) : "\u7B49".concat(val.length, "\u4E2A"),
tooltip: !_onClick,
onClick: function onClick() {
return _onClick && _onClick(val, record, index);
}
}, text) : /*#__PURE__*/React.createElement("span", {
onClick: function onClick() {
return _onClick && _onClick(val, record, index);
},
className: "".concat(_onClick ? 'clickable-ellipsis-cell' : '')
}, text));
};
}
return _objectSpread(_objectSpread({}, col), {}, {
ellipsis: _objectSpread(_objectSpread({}, col.ellipsis), {}, {
showTitle: false
}),
render: render
});
}
var ResizeableTitle = function ResizeableTitle(props) {
var onResize = props.onResize,
width = props.width,
resizable = props.resizable,
restProps = _objectWithoutProperties(props, _excluded2);
if (!resizable) {
return /*#__PURE__*/React.createElement("th", _objectSpread({}, restProps));
}
return /*#__PURE__*/React.createElement(Resizable, {
width: width,
height: 0,
handle: /*#__PURE__*/React.createElement("span", {
className: "react-resizable-handle",
onClick: function onClick(e) {
e.stopPropagation();
}
}),
onResize: onResize
}, /*#__PURE__*/React.createElement("th", _objectSpread({}, restProps)));
};
var classPrefix = function classPrefix(name) {
return "pro-table-".concat(name);
};
function ProTable(_ref) {
var _ref$columns = _ref.columns,
defaultColumns = _ref$columns === void 0 ? [] : _ref$columns,
left = _ref.left,
toolbar = _ref.toolbar,
extra = _ref.extra,
_ref$options = _ref.options,
options = _ref$options === void 0 ? {
columnSetting: false
} : _ref$options,
empty = _ref.empty,
expandable = _ref.expandable,
scroll = _ref.scroll,
rest = _objectWithoutProperties(_ref, _excluded3);
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
columns = _useState2[0],
setColumns = _useState2[1];
var _React$useContext = React.useContext(ConfigContext),
_React$useContext$loc = _React$useContext.locale,
contextLocale = _React$useContext$loc === void 0 ? defaultLocale : _React$useContext$loc;
var handleFilter = function handleFilter(column) {
if (!column.filters || column.filterDropdown) {
return column;
} // 仅支持通过点击【确定】按钮才能触发筛选展示结果
return _objectSpread(_objectSpread({}, column), {}, {
filterDropdown: function filterDropdown(props) {
return /*#__PURE__*/React.createElement(FilterDropdown, _objectSpread(_objectSpread({}, props), {}, {
locale: _objectSpread(_objectSpread({}, contextLocale.Table), rest.locale),
column: column,
customizePrefixCls: rest.prefixCls,
customizeDropdownPrefixCls: rest.dropdownPrefixCls,
getPopupContainer: rest.getPopupContainer
}));
}
});
};
React.useEffect(function () {
var cols = defaultColumns.map(function (col, index) {
var newCol = handleEllipsis(col);
newCol = handleFilter(newCol);
return _objectSpread(_objectSpread({}, newCol), {}, {
key: newCol.key || "t_r_".concat(index),
fixed: newCol.fixed || (newCol.action ? 'right' : false)
});
});
setColumns(cols);
}, [defaultColumns]);
var handleResize = function handleResize(index) {
return function (e, _ref2) {
var size = _ref2.size;
setColumns(function (prevColumns) {
var curr = _toConsumableArray(prevColumns.filter(function (col) {
return !col.hidden;
}))[index];
var nextColumns = _toConsumableArray(prevColumns);
return nextColumns.map(function (val) {
return val.key === curr.key ? _objectSpread(_objectSpread({}, val), {}, {
width: size.width
}) : val;
});
});
};
};
var components = {
header: {
cell: ResizeableTitle
}
};
var resizable = false;
var hasActionCol = false;
var filtered = useMemo(function () {
var _curr;
var curr = columns === null || columns === void 0 ? void 0 : columns.filter(function (col) {
return !col.hidden;
});
curr = curr.map(function (col, index) {
resizable = resizable || col.resizable;
hasActionCol = hasActionCol || col.action;
return _objectSpread(_objectSpread({}, col), {}, {
onHeaderCell: function onHeaderCell(column) {
return {
width: column.width,
resizable: column.resizable,
onResize: handleResize(index !== curr.length - 1 ? index : null)
};
},
className: index === curr.length - 1 ? 'column-setting-cell-prev' : col.className,
filterIcon: /*#__PURE__*/React.createElement(Icon, {
type: "Filter"
})
});
});
var hasFixedRight = (_curr = curr) === null || _curr === void 0 ? void 0 : _curr.some(function (col) {
return col.fixed === 'right';
});
return options.columnSetting ? curr.concat({
key: 't_c_setting',
width: '46px',
fixed: (hasFixedRight || hasActionCol) && 'right',
onHeaderCell: function onHeaderCell(column) {
return {
width: column.width,
onResize: handleResize(null)
};
},
filterDropdown: function filterDropdown(_ref3) {
var confirm = _ref3.confirm;
return /*#__PURE__*/React.createElement(ColumnSetting, {
onChange: options === null || options === void 0 ? void 0 : options.onColumnSettingChange,
onOk: confirm
});
},
filterIcon: function filterIcon(status) {
return /*#__PURE__*/React.createElement(Tooltip, {
title: "\u5B57\u6BB5\u8BBE\u7F6E"
}, /*#__PURE__*/React.createElement(SettingOutlined, {
style: {
color: status ? '#1890ff' : undefined
}
}));
}
}) : curr;
}, [columns, options === null || options === void 0 ? void 0 : options.onColumnSettingChange]);
expandable = expandable ? expandable === true ? {} : expandable : expandable;
if (expandable) {
expandable.expandIcon = function (_ref4) {
var expanded = _ref4.expanded,
expandable_ = _ref4.expandable,
onExpand = _ref4.onExpand,
record = _ref4.record;
return expandable_ ? expanded ? /*#__PURE__*/React.createElement(Icon, {
type: "CaretDown",
onClick: function onClick(e) {
return onExpand(record, e);
}
}) : /*#__PURE__*/React.createElement(Icon, {
type: "CaretRight",
onClick: function onClick(e) {
return onExpand(record, e);
}
}) : null;
};
}
return /*#__PURE__*/React.createElement(ConfigProvider, {
renderEmpty: function renderEmpty() {
return /*#__PURE__*/React.createElement(Empty, _objectSpread({}, empty));
}
}, /*#__PURE__*/React.createElement(TableContext.Provider, {
value: {
columns: columns,
setColumns: setColumns
}
}, (toolbar || extra) && /*#__PURE__*/React.createElement("div", {
className: classPrefix('toolbar')
}, /*#__PURE__*/React.createElement(Space, {
className: classPrefix('toolbar-left')
}, toolbar), /*#__PURE__*/React.createElement(Space, {
size: 16,
className: classPrefix('toolbar-right')
}, extra)), /*#__PURE__*/React.createElement(Row, {
gutter: 0
}, left && /*#__PURE__*/React.createElement(Col, {
className: classPrefix('left')
}, left), /*#__PURE__*/React.createElement(Col, {
flex: "1 1 auto"
}, /*#__PURE__*/React.createElement("div", {
className: "pro-table".concat(resizable ? ' pro-table-resizable' : '')
}, /*#__PURE__*/React.createElement(Table, _objectSpread({
columns: filtered,
components: components,
expandable: expandable,
scroll: scroll || (hasActionCol ? {
x: 'max-content'
} : undefined)
}, rest)))))));
}
mixinStaticProps(ProTable, Table);
ProTable.Column = Table.Column;
ProTable.ColumnGroup = Table.ColumnGroup;
ProTable.SELECTION_ALL = Table.SELECTION_ALL;
ProTable.SELECTION_INVERT = Table.SELECTION_INVERT;
ProTable.SELECTION_NONE = Table.SELECTION_NONE;
ProTable.Summary = Table.Summary;
export default ProTable;