@ucloud-pccl/react-components
Version:
UCloud pccl react components
381 lines (380 loc) • 15 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _miniStore = require("mini-store");
var _merge = _interopRequireDefault(require("lodash/merge"));
var _componentClasses = _interopRequireDefault(require("component-classes"));
var _reactLifecyclesCompat = require("react-lifecycles-compat");
var _utils = require("./utils");
var _ColumnManager = _interopRequireDefault(require("./ColumnManager"));
var _HeadTable = _interopRequireDefault(require("./HeadTable"));
var _BodyTable = _interopRequireDefault(require("./BodyTable"));
var _ExpandableTable = _interopRequireDefault(require("./ExpandableTable"));
var _this7 = void 0;
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) { (0, _defineProperty2.default)(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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var Table = /*#__PURE__*/function (_React$Component) {
function Table(props) {
var _this2 = this;
var _this;
(0, _classCallCheck2.default)(this, Table);
_this = _callSuper(this, Table, [props]);
_this.state = {};
_this.getRowKey = function (record, index) {
(0, _newArrowCheck2.default)(this, _this2);
var rowKey = _this.props.rowKey;
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
(0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.');
return key === undefined ? index : key;
}.bind(this);
_this.handleWindowResize = function () {
(0, _newArrowCheck2.default)(this, _this2);
_this.setScrollPositionClassName();
}.bind(this);
_this.handleBodyScrollLeft = function (e) {
(0, _newArrowCheck2.default)(this, _this2);
// Fix https://github.com/ant-design/ant-design/issues/7635
if (e.currentTarget !== e.target) {
return;
}
var target = e.target;
var _this3 = _this,
headTable = _this3.headTable,
bodyTable = _this3.bodyTable;
if (target.scrollLeft !== _this.lastScrollLeft) {
_this.setScrollPositionClassName();
if (_this.useFixedHeader()) {
if (target === bodyTable && headTable) {
headTable.scrollLeft = target.scrollLeft;
} else if (target === headTable && bodyTable) {
bodyTable.scrollLeft = target.scrollLeft;
}
}
}
// Remember last scrollLeft for scroll direction detecting.
_this.lastScrollLeft = target.scrollLeft;
}.bind(this);
_this.handleBodyScroll = function (e) {
(0, _newArrowCheck2.default)(this, _this2);
_this.handleBodyScrollLeft(e);
}.bind(this);
_this.saveRef = function (name) {
var _this4 = this;
(0, _newArrowCheck2.default)(this, _this2);
return function (node) {
(0, _newArrowCheck2.default)(this, _this4);
_this[name] = node;
}.bind(this);
}.bind(this);
_this.useFixedHeader = function () {
(0, _newArrowCheck2.default)(this, _this2);
var _this$props = _this.props,
useFixedHeader = _this$props.useFixedHeader,
scroll = _this$props.scroll;
return useFixedHeader || scroll && scroll.y;
}.bind(this);
_this.columnManager = new _ColumnManager.default(props.columns);
_this.store = (0, _miniStore.create)({
fixedColumnsHeadRowsHeight: [],
fixedColumnsBodyRowsHeight: {}
});
_this.debouncedWindowResize = (0, _utils.debounce)(_this.handleWindowResize, 150);
return _this;
}
(0, _inherits2.default)(Table, _React$Component);
return (0, _createClass2.default)(Table, [{
key: "getChildContext",
value: function getChildContext() {
return {
table: {
props: this.props,
columnManager: this.columnManager,
saveRef: this.saveRef,
components: (0, _merge.default)({
table: 'table',
header: {
wrapper: 'thead',
row: 'tr',
cell: 'th'
},
body: {
wrapper: 'tbody',
row: 'tr',
cell: 'td'
}
}, this.props.components)
}
};
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
// when table changes to empty, reset scrollLeft
if (prevProps.data.length > 0 && this.props.data.length === 0 && this.hasScrollX()) {
this.resetScrollX();
}
// update scroll position
if (this.props.columns !== prevState.columns) {
this.setScrollPositionClassName();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.resizeEvent) {
this.resizeEvent.remove();
}
if (this.debouncedWindowResize) {
this.debouncedWindowResize.cancel();
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.setScrollPositionClassName();
}
}, {
key: "setScrollPosition",
value: function setScrollPosition(position) {
this.scrollPosition = position;
if (this.tableNode) {
var prefixCls = this.props.prefixCls;
(0, _componentClasses.default)(this.tableNode).remove(new RegExp("^".concat(prefixCls, "-scroll-position-.+$"))).add("".concat(prefixCls, "-scroll-position-").concat(position));
}
}
}, {
key: "setScrollPositionClassName",
value: function setScrollPositionClassName() {
var node = this.bodyTable;
var scrollToLeft = node.scrollLeft === 0;
var scrollToRight = node.scrollLeft + 1 >= node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
if (scrollToLeft && scrollToRight) {
this.setScrollPosition('both');
} else if (scrollToLeft) {
this.setScrollPosition('left');
} else if (scrollToRight) {
this.setScrollPosition('right');
} else if (this.scrollPosition !== 'middle') {
this.setScrollPosition('middle');
}
}
}, {
key: "resetScrollX",
value: function resetScrollX() {
if (this.headTable) {
this.headTable.scrollLeft = 0;
}
if (this.bodyTable) {
this.bodyTable.scrollLeft = 0;
}
}
}, {
key: "hasScrollX",
value: function hasScrollX() {
var _this$props$scroll = this.props.scroll,
scroll = _this$props$scroll === void 0 ? {} : _this$props$scroll;
return 'x' in scroll;
}
}, {
key: "renderMainTable",
value: function renderMainTable() {
var _this$props2 = this.props,
scroll = _this$props2.scroll,
tableLayout = _this$props2.tableLayout;
var table = [this.renderTable({
columns: this.columnManager.groupedColumns(),
onScroll: scroll.onScroll,
tableLayout: tableLayout
}), this.renderEmptyText(), this.renderFooter()];
return table;
}
}, {
key: "renderTable",
value: function renderTable(options) {
var _this5 = this;
var columns = options.columns,
onScroll = options.onScroll,
tableLayout = options.tableLayout;
var headTable = /*#__PURE__*/_react.default.createElement(_HeadTable.default, {
key: "head",
columns: columns,
tableClassName: "",
handleBodyScrollLeft: this.handleBodyScrollLeft,
expander: this.expander,
tableLayout: tableLayout
});
var bodyTable = /*#__PURE__*/_react.default.createElement(_BodyTable.default, {
key: "body",
columns: columns,
tableClassName: "",
getRowKey: this.getRowKey,
handleBodyScroll: function (e) {
(0, _newArrowCheck2.default)(this, _this5);
this.handleBodyScroll(e);
onScroll && onScroll(e);
}.bind(this),
expander: this.expander,
tableLayout: tableLayout
});
return [headTable, bodyTable];
}
}, {
key: "renderTitle",
value: function renderTitle() {
var _this$props3 = this.props,
title = _this$props3.title,
prefixCls = _this$props3.prefixCls;
return title ? /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefixCls, "-title"),
key: "title"
}, title(this.props.data)) : null;
}
}, {
key: "renderFooter",
value: function renderFooter() {
var _this$props4 = this.props,
footer = _this$props4.footer,
prefixCls = _this$props4.prefixCls;
return footer ? /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefixCls, "-footer"),
key: "footer"
}, footer(this.props.data)) : null;
}
}, {
key: "renderEmptyText",
value: function renderEmptyText() {
var _this$props5 = this.props,
emptyText = _this$props5.emptyText,
prefixCls = _this$props5.prefixCls,
data = _this$props5.data;
if (data.length) {
return null;
}
var emptyClassName = "".concat(prefixCls, "-placeholder");
return /*#__PURE__*/_react.default.createElement("div", {
className: emptyClassName,
key: "emptyText"
}, typeof emptyText === 'function' ? emptyText() : emptyText);
}
}, {
key: "render",
value: function render() {
var _this6 = this;
var props = this.props;
var prefixCls = props.prefixCls;
if (this.state.columns) {
this.columnManager.reset(props.columns);
}
var className = props.prefixCls;
if (props.className) {
className += " ".concat(props.className);
}
if (this.useFixedHeader()) {
className += " ".concat(prefixCls, "-fixed-header");
}
return /*#__PURE__*/_react.default.createElement(_miniStore.Provider, {
store: this.store
}, /*#__PURE__*/_react.default.createElement(_ExpandableTable.default, (0, _extends2.default)({}, props, {
columnManager: this.columnManager,
getRowKey: this.getRowKey
}), function (expander) {
(0, _newArrowCheck2.default)(this, _this6);
this.expander = expander;
return /*#__PURE__*/_react.default.createElement("div", {
ref: this.saveRef('tableNode'),
className: className,
style: props.style
}, this.renderTitle(), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefixCls, "-content")
}, this.renderMainTable()));
}.bind(this)));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.columns && nextProps.columns !== prevState.columns) {
return {
columns: nextProps.columns
};
}
return null;
}
}]);
}(_react.default.Component);
Table.propTypes = _objectSpread({
data: _propTypes.default.array,
useFixedHeader: _propTypes.default.bool,
columns: _propTypes.default.array,
prefixCls: _propTypes.default.string,
bodyStyle: _propTypes.default.object,
style: _propTypes.default.object,
rowKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
rowClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
onRow: _propTypes.default.func,
onHeaderRow: _propTypes.default.func,
showHeader: _propTypes.default.bool,
title: _propTypes.default.func,
footer: _propTypes.default.func,
emptyText: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
scroll: _propTypes.default.object,
rowRef: _propTypes.default.func,
tableLayout: _propTypes.default.oneOf(['fixed', 'auto']),
components: _propTypes.default.shape({
table: _propTypes.default.any,
header: _propTypes.default.shape({
wrapper: _propTypes.default.any,
row: _propTypes.default.any,
cell: _propTypes.default.any
}),
body: _propTypes.default.shape({
wrapper: _propTypes.default.any,
row: _propTypes.default.any,
cell: _propTypes.default.any
})
})
}, _ExpandableTable.default.propTypes);
Table.childContextTypes = {
table: _propTypes.default.any,
components: _propTypes.default.any
};
Table.defaultProps = {
data: [],
useFixedHeader: false,
rowKey: 'key',
rowClassName: function rowClassName() {
(0, _newArrowCheck2.default)(this, _this7);
return '';
}.bind(void 0),
onRow: function onRow() {},
onHeaderRow: function onHeaderRow() {},
prefixCls: 'rc-table',
bodyStyle: {},
style: {},
showHeader: true,
scroll: {},
rowRef: function rowRef() {
(0, _newArrowCheck2.default)(this, _this7);
return null;
}.bind(void 0),
emptyText: function emptyText() {
(0, _newArrowCheck2.default)(this, _this7);
return 'No Data';
}.bind(void 0)
};
(0, _reactLifecyclesCompat.polyfill)(Table);
var _default = exports.default = Table;