@alifd/next
Version:
A configurable component library for web built on React.
246 lines (223 loc) • 9.65 kB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
import _typeof from 'babel-runtime/helpers/typeof';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
var _class, _temp2;
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import RowComponent from './row';
import CellComponent from './cell';
import { dom, events } from '../../util';
var noop = function noop() {};
var Body = (_temp2 = _class = function (_React$Component) {
_inherits(Body, _React$Component);
function Body() {
var _temp, _this, _ret;
_classCallCheck(this, Body);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.getRowRef = function (i, row) {
_this.props.rowRef(i, row);
}, _this.onRowClick = function (record, index, e) {
_this.props.onRowClick(record, index, e);
}, _this.onRowMouseEnter = function (record, index, e) {
_this.props.onRowMouseEnter(record, index, e);
}, _this.onRowMouseLeave = function (record, index, e) {
_this.props.onRowMouseLeave(record, index, e);
}, _this.onBodyMouseOver = function (e) {
_this.props.onBodyMouseOver(e);
}, _this.onBodyMouseOut = function (e) {
_this.props.onBodyMouseOut(e);
}, _this.getEmptyNode = function (ref) {
_this.emptyNode = ref;
}, _this.setEmptyDomStyle = function () {
var tableEl = _this.props.tableEl;
// getboundingclientRect 获取的是除 margin 之外的内容区，可能带小数点，不四舍五入
var borderLeftWidth = dom.getStyle(tableEl, 'borderLeftWidth');
var tableWidth = tableEl && tableEl.getBoundingClientRect().width;
var totalWidth = tableWidth - borderLeftWidth - 1 || '100%';
dom.setStyle(_this.emptyNode, { width: totalWidth });
}, _temp), _possibleConstructorReturn(_this, _ret);
}
Body.prototype.componentDidMount = function componentDidMount() {
events.on(window, 'resize', this.setEmptyDomStyle);
};
Body.prototype.componentDidUpdate = function componentDidUpdate() {
this.setEmptyDomStyle();
};
Body.prototype.componentWillUnmount = function componentWillUnmount() {
events.off(window, 'resize', this.setEmptyDomStyle);
};
Body.prototype.render = function render() {
var _this2 = this;
/*eslint-disable no-unused-vars */
var _props = this.props,
prefix = _props.prefix,
className = _props.className,
children = _props.children,
Tag = _props.component,
colGroup = _props.colGroup,
loading = _props.loading,
emptyContent = _props.emptyContent,
components = _props.components,
getCellProps = _props.getCellProps,
primaryKey = _props.primaryKey,
getRowProps = _props.getRowProps,
dataSource = _props.dataSource,
cellRef = _props.cellRef,
columns = _props.columns,
rowRef = _props.rowRef,
onRowClick = _props.onRowClick,
onRowMouseEnter = _props.onRowMouseEnter,
onRowMouseLeave = _props.onRowMouseLeave,
onBodyMouseOver = _props.onBodyMouseOver,
onBodyMouseOut = _props.onBodyMouseOut,
locale = _props.locale,
pure = _props.pure,
expandedIndexSimulate = _props.expandedIndexSimulate,
tableEl = _props.tableEl,
rtl = _props.rtl,
crossline = _props.crossline,
tableWidth = _props.tableWidth,
others = _objectWithoutProperties(_props, ['prefix', 'className', 'children', 'component', 'colGroup', 'loading', 'emptyContent', 'components', 'getCellProps', 'primaryKey', 'getRowProps', 'dataSource', 'cellRef', 'columns', 'rowRef', 'onRowClick', 'onRowMouseEnter', 'onRowMouseLeave', 'onBodyMouseOver', 'onBodyMouseOut', 'locale', 'pure', 'expandedIndexSimulate', 'tableEl', 'rtl', 'crossline', 'tableWidth']);
var totalWidth = +(tableEl && tableEl.clientWidth) - 1 || '100%';
var _components$Row = components.Row,
Row = _components$Row === undefined ? RowComponent : _components$Row,
_components$Cell = components.Cell,
Cell = _components$Cell === undefined ? CellComponent : _components$Cell;
var empty = loading ? React.createElement(
'span',
null,
'\xA0'
) : emptyContent || locale.empty;
var rows = React.createElement(
'tr',
null,
React.createElement(
'td',
{ colSpan: columns.length },
React.createElement(
'div',
{
ref: this.getEmptyNode,
className: prefix + 'table-empty',
style: { position: 'sticky', left: 0, overflow: 'hidden', width: totalWidth }
},
empty
)
)
);
if (Tag === 'div') {
rows = React.createElement(
'table',
{ role: 'table' },
React.createElement(
'tbody',
null,
rows
)
);
}
if (dataSource.length) {
rows = dataSource.map(function (record, index) {
var _classnames;
var rowProps = {};
// record may be a string
var rowIndex = (typeof record === 'undefined' ? 'undefined' : _typeof(record)) === 'object' && '__rowIndex' in record ? record.__rowIndex : index;
if (expandedIndexSimulate) {
rowProps = record.__expanded ? {} : getRowProps(record, index / 2);
} else {
rowProps = getRowProps(record, rowIndex);
}
rowProps = rowProps || {};
var rowClass = rowProps.className;
var className = classnames((_classnames = {
first: index === 0,
last: index === dataSource.length - 1
}, _classnames[rowClass] = rowClass, _classnames));
var expanded = record.__expanded ? 'expanded' : '';
return React.createElement(Row, _extends({
key: '' + (record[primaryKey] || (record[primaryKey] === 0 ? 0 : rowIndex)) + expanded
}, rowProps, {
ref: _this2.getRowRef.bind(_this2, expanded ? rowIndex + '_expanded' : rowIndex),
colGroup: colGroup,
rtl: rtl,
columns: columns,
primaryKey: primaryKey,
record: record,
rowIndex: rowIndex,
__rowIndex: rowIndex,
prefix: prefix,
pure: pure,
cellRef: cellRef,
getCellProps: getCellProps,
className: className,
Cell: Cell,
tableEl: tableEl,
onClick: _this2.onRowClick,
locale: locale,
onMouseEnter: _this2.onRowMouseEnter,
onMouseLeave: _this2.onRowMouseLeave
}));
});
} else {
// 异步设置空数据时的宽度
this.setEmptyDomStyle();
}
var event = crossline ? {
onMouseOver: this.onBodyMouseOver,
onMouseOut: this.onBodyMouseOut
} : {};
return React.createElement(
Tag,
_extends({ className: className }, others, event),
rows,
children
);
};
return Body;
}(React.Component), _class.propTypes = {
loading: PropTypes.bool,
emptyContent: PropTypes.any,
tableEl: PropTypes.any,
prefix: PropTypes.string,
pure: PropTypes.bool,
components: PropTypes.object,
getCellProps: PropTypes.func,
cellRef: PropTypes.func,
primaryKey: PropTypes.oneOfType([PropTypes.symbol, PropTypes.string]),
getRowProps: PropTypes.func,
rowRef: PropTypes.func,
dataSource: PropTypes.array,
children: PropTypes.any,
className: PropTypes.string,
component: PropTypes.string,
colGroup: PropTypes.object,
columns: PropTypes.array,
onRowClick: PropTypes.func,
onRowMouseEnter: PropTypes.func,
onRowMouseLeave: PropTypes.func,
onBodyMouseOver: PropTypes.func,
onBodyMouseOut: PropTypes.func,
locale: PropTypes.object,
crossline: PropTypes.bool,
tableWidth: PropTypes.number
}, _class.defaultProps = {
loading: false,
prefix: 'next-',
components: {},
getCellProps: noop,
cellRef: noop,
primaryKey: 'id',
getRowProps: noop,
rowRef: noop,
dataSource: [],
component: 'tbody',
columns: []
}, _temp2);
Body.displayName = 'Body';
export { Body as default };