UNPKG

@alifd/next

Version:

A configurable component library for web built on React.

938 lines (816 loc) 35.7 kB
'use strict'; exports.__esModule = true; var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); var _typeof2 = require('babel-runtime/helpers/typeof'); var _typeof3 = _interopRequireDefault(_typeof2); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _class, _temp; var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _reactDom = require('react-dom'); var _classnames2 = require('classnames'); var _classnames3 = _interopRequireDefault(_classnames2); var _shallowElementEquals = require('shallow-element-equals'); var _shallowElementEquals2 = _interopRequireDefault(_shallowElementEquals); var _reactLifecyclesCompat = require('react-lifecycles-compat'); var _loading = require('../loading'); var _loading2 = _interopRequireDefault(_loading); var _configProvider = require('../config-provider'); var _configProvider2 = _interopRequireDefault(_configProvider); var _zhCn = require('../locale/zh-cn'); var _zhCn2 = _interopRequireDefault(_zhCn); var _util = require('../util'); var _body = require('./base/body'); var _body2 = _interopRequireDefault(_body); var _header = require('./base/header'); var _header2 = _interopRequireDefault(_header); var _wrapper = require('./base/wrapper'); var _wrapper2 = _interopRequireDefault(_wrapper); var _row = require('./base/row'); var _row2 = _interopRequireDefault(_row); var _cell = require('./base/cell'); var _cell2 = _interopRequireDefault(_cell); var _filter = require('./base/filter'); var _filter2 = _interopRequireDefault(_filter); var _sort = require('./base/sort'); var _sort2 = _interopRequireDefault(_sort); var _column = require('./column'); var _column2 = _interopRequireDefault(_column); var _columnGroup = require('./column-group'); var _columnGroup2 = _interopRequireDefault(_columnGroup); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var Children = _react2.default.Children, noop = function noop() {}; //<Table> // <Table.Column/> // <Table.ColumnGroup> // <Table.Column/> // <Table.Column/> // </Table.ColumnGroup> //</Table> /** Table */ var Table = (_temp = _class = function (_React$Component) { (0, _inherits3.default)(Table, _React$Component); function Table(props, context) { (0, _classCallCheck3.default)(this, Table); var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props, context)); _this.state = { sort: _this.props.sort || {} }; _this.onSort = function (dataIndex, order, sort) { if (typeof _this.props.sort === 'undefined') { _this.setState({ sort: sort }, function () { _this.props.onSort(dataIndex, order, sort); }); } else { _this.props.onSort(dataIndex, order, sort); } }; _this.onFilter = function (filterParams) { _this.props.onFilter(filterParams); }; _this.onResizeChange = function (dataIndex, value) { _this.props.onResizeChange(dataIndex, value); }; _this.getResizeProxyDomRef = function (resizeProxyDom) { if (!resizeProxyDom) { return _this.resizeProxyDomRef; } _this.resizeProxyDomRef = resizeProxyDom; }; _this.getWrapperRef = function (wrapper) { if (!wrapper) { return _this.wrapper; } _this.wrapper = wrapper; }; _this.getAffixRef = function (affixRef) { if (!affixRef) { return _this.affixRef; } _this.affixRef = affixRef; }; _this.getHeaderCellRef = function (i, j, cell) { var cellRef = 'header_cell_' + i + '_' + j; if (!cell) { return _this[cellRef]; } _this[cellRef] = cell; }; _this.getRowRef = function (i, row) { var rowRef = 'row_' + i; if (!row) { return _this[rowRef]; } _this[rowRef] = row; }; _this.getCellRef = function (i, j, cell) { var cellRef = 'cell_' + i + '_' + j; if (!cell) { return _this[cellRef]; } _this[cellRef] = cell; }; _this.handleColHoverClass = function (rowIndex, colIndex, isAdd) { var crossline = _this.props.crossline; var funcName = isAdd ? 'addClass' : 'removeClass'; if (crossline) { _this.props.entireDataSource.forEach(function (val, index) { try { // in case of finding an unmounted component due to cached data // need to clear refs of this.tableInc when dataSource Changed // in virtual table var currentCol = (0, _reactDom.findDOMNode)(_this.getCellRef(index, colIndex)); currentCol && _util.dom[funcName](currentCol, 'hovered'); } catch (error) { return null; } }); } }; _this.findEventTarget = function (e) { var prefix = _this.props.prefix; var target = _util.dom.getClosest(e.target, 'td.' + prefix + 'table-cell'); var colIndex = target && target.getAttribute('data-next-table-col'); var rowIndex = target && target.getAttribute('data-next-table-row'); try { // in case of finding an unmounted component due to cached data // need to clear refs of this.tableInc when dataSource Changed // in virtual table var currentCol = (0, _reactDom.findDOMNode)(_this.getCellRef(rowIndex, colIndex)); if (currentCol === target) { return { colIndex: colIndex, rowIndex: rowIndex }; } } catch (error) { return {}; } return {}; }; _this.onBodyMouseOver = function (e) { var crossline = _this.props.crossline; if (!crossline) { return; } var _this$findEventTarget = _this.findEventTarget(e), colIndex = _this$findEventTarget.colIndex, rowIndex = _this$findEventTarget.rowIndex; // colIndex, rowIndex are string if (!colIndex || !rowIndex) { return; } _this.handleColHoverClass(rowIndex, colIndex, true); _this.colIndex = colIndex; _this.rowIndex = rowIndex; }; _this.onBodyMouseOut = function (e) { var crossline = _this.props.crossline; if (!crossline) { return; } var _this$findEventTarget2 = _this.findEventTarget(e), colIndex = _this$findEventTarget2.colIndex, rowIndex = _this$findEventTarget2.rowIndex; // colIndex, rowIndex are string if (!colIndex || !rowIndex) { return; } _this.handleColHoverClass(_this.rowIndex, _this.colIndex, false); _this.colIndex = -1; _this.rowIndex = -1; }; _this.addColIndex = function (children) { var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; children.forEach(function (child, i) { child.__colIndex = start + i; }); }; _this.getTableEl = function (ref) { _this.tableEl = ref; }; var _this$context = _this.context, getTableInstance = _this$context.getTableInstance, getTableInstanceForVirtual = _this$context.getTableInstanceForVirtual, getTableInstanceForFixed = _this$context.getTableInstanceForFixed, getTableInstanceForExpand = _this$context.getTableInstanceForExpand; getTableInstance && getTableInstance(props.lockType, _this); getTableInstanceForFixed && getTableInstanceForFixed(props.lockType, _this); getTableInstanceForVirtual && getTableInstanceForVirtual(props.lockType, _this); getTableInstanceForExpand && getTableInstanceForExpand(_this); _this.notRenderCellIndex = []; return _this; } Table.prototype.getChildContext = function getChildContext() { return { notRenderCellIndex: this.notRenderCellIndex || [], lockType: this.props.lockType }; }; Table.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) { var state = {}; if (typeof nextProps.sort !== 'undefined') { state.sort = nextProps.sort; } return state; }; Table.prototype.componentDidMount = function componentDidMount() { this.notRenderCellIndex = []; }; Table.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState, nextContext) { if (nextProps.pure) { var isEqual = (0, _shallowElementEquals2.default)(nextProps, this.props) && _util.obj.shallowEqual(nextState, this.state) && _util.obj.shallowEqual(nextContext, this.context); return !isEqual; } return true; }; Table.prototype.componentDidUpdate = function componentDidUpdate() { this.notRenderCellIndex = []; }; Table.prototype.normalizeChildrenState = function normalizeChildrenState(props) { var columns = props.columns; if (props.children) { columns = this.normalizeChildren(props); } return this.fetchInfoFromBinaryChildren(columns); }; // 将React结构化数据提取props转换成数组 Table.prototype.normalizeChildren = function normalizeChildren(props) { var columns = props.columns; var getChildren = function getChildren(children) { var ret = []; Children.forEach(children, function (child) { if (child) { var _props = (0, _extends3.default)({}, child.props); if (child.ref) { _props.ref = child.ref; } if (!(child && ['function', 'object'].indexOf((0, _typeof3.default)(child.type)) > -1 && (child.type._typeMark === 'column' || child.type._typeMark === 'columnGroup'))) { _util.log.warning('Use <Table.Column/>, <Table.ColumnGroup/> as child.'); } ret.push(_props); if (child.props.children) { _props.children = getChildren(child.props.children); } } }); return ret; }; if (props.children) { columns = getChildren(props.children); } return columns; }; Table.prototype.fetchInfoFromBinaryChildren = function fetchInfoFromBinaryChildren(children) { var hasGroupHeader = false; var flatChildren = [], groupChildren = [], getChildren = function getChildren() { var propsChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; var level = arguments[1]; groupChildren[level] = groupChildren[level] || []; propsChildren.forEach(function (child) { if (child.children) { hasGroupHeader = true; getChildren(child.children, level + 1); } else { flatChildren.push(child); } groupChildren[level].push(child); }); }, getColSpan = function getColSpan(children, colSpan) { colSpan = colSpan || 0; children.forEach(function (child) { if (child.children) { colSpan = getColSpan(child.children, colSpan); } else { colSpan += 1; } }); return colSpan; }; getChildren(children, 0); groupChildren.forEach(function (groupChild, i) { groupChild.forEach(function (child, j) { var colSpan = void 0; var children = child.children; if (children) { colSpan = getColSpan(children); child.colSpan = colSpan; groupChildren[i][j] = child; } }); }); var _props2 = this.props, lockType = _props2.lockType, lengths = _props2.lengths; var start = lockType === 'right' ? lengths.origin - lengths.right : 0; this.addColIndex(flatChildren, start); return { flatChildren: flatChildren, groupChildren: groupChildren, hasGroupHeader: hasGroupHeader }; }; Table.prototype.renderColGroup = function renderColGroup(flatChildren) { var cols = flatChildren.map(function (col, index) { var width = col.width; var style = {}; if (width) { style = { width: width }; } return _react2.default.createElement('col', { style: style, key: index }); }); return _react2.default.createElement( 'colgroup', { key: 'table-colgroup' }, cols ); }; // 通过头部和扁平的结构渲染表格 Table.prototype.renderTable = function renderTable(groupChildren, flatChildren) { if (flatChildren.length || !flatChildren.length && !this.props.lockType) { var _props3 = this.props, hasHeader = _props3.hasHeader, components = _props3.components, prefix = _props3.prefix, wrapperContent = _props3.wrapperContent, filterParams = _props3.filterParams, locale = _props3.locale, dataSource = _props3.dataSource, emptyContent = _props3.emptyContent, loading = _props3.loading, primaryKey = _props3.primaryKey, cellProps = _props3.cellProps, rowProps = _props3.rowProps, onRowClick = _props3.onRowClick, onRowMouseEnter = _props3.onRowMouseEnter, onRowMouseLeave = _props3.onRowMouseLeave, expandedIndexSimulate = _props3.expandedIndexSimulate, pure = _props3.pure, rtl = _props3.rtl, crossline = _props3.crossline, sortIcons = _props3.sortIcons, tableWidth = _props3.tableWidth; var sort = this.state.sort; var _components$Header = components.Header, Header = _components$Header === undefined ? _header2.default : _components$Header, _components$Wrapper = components.Wrapper, Wrapper = _components$Wrapper === undefined ? _wrapper2.default : _components$Wrapper, _components$Body = components.Body, Body = _components$Body === undefined ? _body2.default : _components$Body; var colGroup = this.renderColGroup(flatChildren); return [_react2.default.createElement('div', { key: prefix + 'table-column-resize-proxy', ref: this.getResizeProxyDomRef, className: prefix + 'table-column-resize-proxy' }), _react2.default.createElement( Wrapper, { key: prefix + 'table-wrapper', colGroup: colGroup, ref: this.getWrapperRef, prefix: prefix, tableWidth: tableWidth }, hasHeader ? _react2.default.createElement(Header, { prefix: prefix, rtl: rtl, pure: pure, affixRef: this.getAffixRef, colGroup: colGroup, className: prefix + 'table-header', filterParams: filterParams, tableEl: this.tableEl, columns: groupChildren, locale: locale, headerCellRef: this.getHeaderCellRef, components: components, onFilter: this.onFilter, sort: sort, onResizeChange: this.onResizeChange, onSort: this.onSort, sortIcons: sortIcons, tableWidth: tableWidth, resizeProxyDomRef: this.resizeProxyDomRef }) : null, _react2.default.createElement(Body, { prefix: prefix, rtl: rtl, pure: pure, crossline: crossline, colGroup: colGroup, className: prefix + 'table-body', components: components, loading: loading, emptyContent: emptyContent, getCellProps: cellProps, primaryKey: primaryKey, getRowProps: rowProps, columns: flatChildren, rowRef: this.getRowRef, cellRef: this.getCellRef, onRowClick: onRowClick, expandedIndexSimulate: expandedIndexSimulate, tableEl: this.tableEl, onRowMouseEnter: onRowMouseEnter, onRowMouseLeave: onRowMouseLeave, dataSource: dataSource, locale: locale, onBodyMouseOver: this.onBodyMouseOver, onBodyMouseOut: this.onBodyMouseOut, tableWidth: tableWidth }), wrapperContent )]; } else { return null; } }; /** * @param event * @returns {Object} { rowIndex: string; colIndex: string } */ Table.prototype.render = function render() { var _classnames; var ret = this.normalizeChildrenState(this.props); this.groupChildren = ret.groupChildren; this.flatChildren = ret.flatChildren; /* eslint-disable no-unused-vars, prefer-const */ var table = this.renderTable(ret.groupChildren, ret.flatChildren), _props4 = this.props, className = _props4.className, style = _props4.style, hasBorder = _props4.hasBorder, isZebra = _props4.isZebra, loading = _props4.loading, size = _props4.size, hasHeader = _props4.hasHeader, prefix = _props4.prefix, dataSource = _props4.dataSource, entireDataSource = _props4.entireDataSource, onSort = _props4.onSort, onResizeChange = _props4.onResizeChange, onRowClick = _props4.onRowClick, onRowMouseEnter = _props4.onRowMouseEnter, onRowMouseLeave = _props4.onRowMouseLeave, onFilter = _props4.onFilter, rowProps = _props4.rowProps, cellProps = _props4.cellProps, scrollToRow = _props4.scrollToRow, primaryKey = _props4.primaryKey, components = _props4.components, wrapperContent = _props4.wrapperContent, lockType = _props4.lockType, locale = _props4.locale, expandedIndexSimulate = _props4.expandedIndexSimulate, refs = _props4.refs, pure = _props4.pure, rtl = _props4.rtl, emptyContent = _props4.emptyContent, filterParams = _props4.filterParams, columns = _props4.columns, sortIcons = _props4.sortIcons, _props4$loadingCompon = _props4.loadingComponent, LoadingComponent = _props4$loadingCompon === undefined ? _loading2.default : _props4$loadingCompon, tableLayout = _props4.tableLayout, tableWidth = _props4.tableWidth, ref = _props4.ref, others = (0, _objectWithoutProperties3.default)(_props4, ['className', 'style', 'hasBorder', 'isZebra', 'loading', 'size', 'hasHeader', 'prefix', 'dataSource', 'entireDataSource', 'onSort', 'onResizeChange', 'onRowClick', 'onRowMouseEnter', 'onRowMouseLeave', 'onFilter', 'rowProps', 'cellProps', 'scrollToRow', 'primaryKey', 'components', 'wrapperContent', 'lockType', 'locale', 'expandedIndexSimulate', 'refs', 'pure', 'rtl', 'emptyContent', 'filterParams', 'columns', 'sortIcons', 'loadingComponent', 'tableLayout', 'tableWidth', 'ref']), cls = (0, _classnames3.default)((_classnames = {}, _classnames[prefix + 'table'] = true, _classnames[prefix + 'table-' + size] = size, _classnames[prefix + 'table-layout-' + tableLayout] = tableLayout, _classnames['only-bottom-border'] = !hasBorder, _classnames['no-header'] = !hasHeader, _classnames.zebra = isZebra, _classnames[className] = className, _classnames)); if (rtl) { others.dir = 'rtl'; } var content = _react2.default.createElement( 'div', (0, _extends3.default)({ className: cls, style: style, ref: ref || this.getTableEl }, _util.obj.pickOthers(Object.keys(Table.propTypes), others)), table ); if (loading) { var loadingClassName = prefix + 'table-loading'; return _react2.default.createElement( LoadingComponent, { className: loadingClassName }, content ); } return content; }; return Table; }(_react2.default.Component), _class.Column = _column2.default, _class.ColumnGroup = _columnGroup2.default, _class.Header = _header2.default, _class.Body = _body2.default, _class.Wrapper = _wrapper2.default, _class.Row = _row2.default, _class.Cell = _cell2.default, _class.Filter = _filter2.default, _class.Sort = _sort2.default, _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, { /** * 样式类名的品牌前缀 */ prefix: _propTypes2.default.string, pure: _propTypes2.default.bool, rtl: _propTypes2.default.bool, /** * 表格元素的 table-layout 属性,设为 fixed 表示内容不会影响列的布局 */ tableLayout: _propTypes2.default.oneOf(['fixed', 'auto']), /** * 表格的总长度,可以这么用:设置表格总长度 、设置部分列的宽度,这样表格会按照剩余空间大小,自动其他列分配宽度 */ tableWidth: _propTypes2.default.number, /** * 自定义类名 */ className: _propTypes2.default.string, /** * 自定义内联样式 */ style: _propTypes2.default.object, /** * 尺寸 small为紧凑模式 */ size: _propTypes2.default.oneOf(['small', 'medium']), /** * 表格展示的数据源 */ dataSource: _propTypes2.default.array, entireDataSource: _propTypes2.default.array, /** * 点击表格每一行触发的事件 * @param {Object} record 该行所对应的数据 * @param {Number} index 该行所对应的序列 * @param {Event} e DOM事件对象 */ onRowClick: _propTypes2.default.func, /** * 悬浮在表格每一行的时候触发的事件 * @param {Object} record 该行所对应的数据 * @param {Number} index 该行所对应的序列 * @param {Event} e DOM事件对象 */ onRowMouseEnter: _propTypes2.default.func, /** * 离开表格每一行的时候触发的事件 * @param {Object} record 该行所对应的数据 * @param {Number} index 该行所对应的序列 * @param {Event} e DOM事件对象 */ onRowMouseLeave: _propTypes2.default.func, /** * 点击列排序触发的事件 * @param {String} dataIndex 指定的排序的字段 * @param {String} order 排序对应的顺序, 有`desc`和`asc`两种 */ onSort: _propTypes2.default.func, /** * 点击过滤确认按钮触发的事件 * @param {Object} filterParams 过滤的字段信息 */ onFilter: _propTypes2.default.func, /** * 重设列尺寸的时候触发的事件 * @param {String} dataIndex 指定重设的字段 * @param {Number} value 列宽变动的数值 */ onResizeChange: _propTypes2.default.func, /** * 设置每一行的属性,如果返回值和其他针对行操作的属性冲突则无效。 * @param {Object} record 该行所对应的数据 * @param {Number} index 该行所对应的序列 * @returns {Object} 需要设置的行属性 */ rowProps: _propTypes2.default.func, /** * 设置单元格的属性,通过该属性可以进行合并单元格 * @param {Number} rowIndex 该行所对应的序列 * @param {Number} colIndex 该列所对应的序列 * @param {String} dataIndex 该列所对应的字段名称 * @param {Object} record 该行对应的记录 * @returns {Object} 返回td元素的所支持的属性对象 */ cellProps: _propTypes2.default.func, /** * 表格是否具有边框 */ hasBorder: _propTypes2.default.bool, /** * 表格是否具有头部 */ hasHeader: _propTypes2.default.bool, /** * 表格是否是斑马线 */ isZebra: _propTypes2.default.bool, /** * 表格是否在加载中 */ loading: _propTypes2.default.bool, /** * 自定义 Loading 组件 * 请务必传递 props, 使用方式: loadingComponent={props => <Loading {...props}/>} * @param {LoadingProps} props 需要透传给组件的参数 * @return {React.ReactNode} 展示的组件 */ loadingComponent: _propTypes2.default.func, /** * 当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}} * 示例: * 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中 * `<Table filterParams={{id: {selectedKeys: ['one']}}}/>` */ filterParams: _propTypes2.default.object, /** * 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{[dataIndex]: 'asc' | 'desc' } , 例如 {id: 'desc'} */ sort: _propTypes2.default.object, /** * 自定义排序按钮,例如上下排布的: `{desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />}` */ sortIcons: _propTypes2.default.object, /** * 自定义国际化文案对象 * @property {String} ok 过滤器中确认按钮文案 * @property {String} reset 过滤器中重置按钮文案 * @property {String} empty 没有数据情况下 table内的文案 * @property {String} asc 排序升序状态下的文案 * @property {String} desc 排序将序状态下的文案 * @property {String} expanded 可折叠行,展开状态下的文案 * @property {String} folded 可折叠行,折叠状态下的文案 * @property {String} filter 过滤器文案 * @property {String} selectAll header里全选的按钮文案 */ locale: _propTypes2.default.object, components: _propTypes2.default.object, /** * 等同于写子组件 Table.Column ,子组件优先级更高 */ columns: _propTypes2.default.array, /** * 设置数据为空的时候的表格内容展现 */ emptyContent: _propTypes2.default.node, /** * dataSource当中数据的主键,如果给定的数据源中的属性不包含该主键,会造成选择状态全部选中 */ primaryKey: _propTypes2.default.oneOfType([_propTypes2.default.symbol, _propTypes2.default.string]), lockType: _propTypes2.default.oneOf(['left', 'right']), wrapperContent: _propTypes2.default.any, refs: _propTypes2.default.object, /** * 额外渲染行的渲染函数 * @param {Object} record 该行所对应的数据 * @param {Number} index 该行所对应的序列 * @returns {Element} 渲染内容 */ expandedRowRender: _propTypes2.default.func, /** * 设置行是否可展开,设置 false 为不可展开 * @param {Object} record 该行所对应的数据 * @param {Number} index 该行所对应的序列 * @returns {Boolean} 是否可展开 */ rowExpandable: _propTypes2.default.func, /** * 额外渲染行的缩进 */ expandedRowIndent: _propTypes2.default.array, /** * 是否显示点击展开额外渲染行的+号按钮 */ hasExpandedRowCtrl: _propTypes2.default.bool, /** * 设置额外渲染行的属性 * @param {Object} record 该行所对应的数据 * @param {Number} index 该行所对应的序列 * @returns {Object} 额外渲染行的属性 */ getExpandedColProps: _propTypes2.default.func, /** * 当前展开的 Expand行 或者 Tree行 , 传入此属性为受控状态,一般配合 onRowOpen 使用 */ openRowKeys: _propTypes2.default.array, /** * 默认情况下展开的 Expand行 或者 Tree行,非受控模式 * @version 1.23.22 */ defaultOpenRowKeys: _propTypes2.default.array, /** * 在 Expand行 或者 Tree行 展开或者收起的时候触发的事件 * @param {Array} openRowKeys 展开的渲染行的key * @param {String} currentRowKey 当前点击的渲染行的key * @param {Boolean} expanded 当前点击是展开还是收起 * @param {Object} currentRecord 当前点击额外渲染行的记录 */ onRowOpen: _propTypes2.default.func, onExpandedRowClick: _propTypes2.default.func, /** * 表头是否固定,该属性配合maxBodyHeight使用,当内容区域的高度超过maxBodyHeight的时候,在内容区域会出现滚动条 */ fixedHeader: _propTypes2.default.bool, /** * 最大内容区域的高度,在`fixedHeader`为`true`的时候,超过这个高度会出现滚动条 */ maxBodyHeight: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), /** * 是否启用选择模式 * @property {Function} getProps `Function(record, index)=>Object` 获取selection的默认属性 * @property {Function} onChange `Function(selectedRowKeys:Array, records:Array)` 选择改变的时候触发的事件,**注意:** 其中records只会包含当前dataSource的数据,很可能会小于selectedRowKeys的长度。 * @property {Function} onSelect `Function(selected:Boolean, record:Object, records:Array)` 用户手动选择/取消选择某行的回调 * @property {Function} onSelectAll `Function(selected:Boolean, records:Array)` 用户手动选择/取消选择所有行的回调 * @property {Array} selectedRowKeys 设置了此属性,将rowSelection变为受控状态,接收值为该行数据的primaryKey的值 * @property {String} mode 选择selection的模式, 可选值为`single`, `multiple`,默认为`multiple` * @property {Function} columnProps `Function()=>Object` 选择列 的props,例如锁列、对齐等,可使用`Table.Column` 的所有参数 * @property {Function} titleProps `Function()=>Object` 选择列 表头的props,仅在 `multiple` 模式下生效 * @property {Function} titleAddons `Function()=>Node` 选择列 表头添加的元素,在`single` `multiple` 下都生效 */ rowSelection: _propTypes2.default.object, /** * 表头是否是sticky */ stickyHeader: _propTypes2.default.bool, /** * 距离窗口顶部达到指定偏移量后触发 */ offsetTop: _propTypes2.default.number, /** * affix组件的的属性 */ affixProps: _propTypes2.default.object, /** * 在tree模式下的缩进尺寸, 仅在isTree为true时候有效 */ indent: _propTypes2.default.number, /** * 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table */ isTree: _propTypes2.default.bool, /** * 是否开启虚拟滚动 */ useVirtual: _propTypes2.default.bool, rowHeight: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.func]), /** * 滚动到第几行,需要保证行高相同。1.22.15 版本之前仅在虚拟滚动场景下生效,之后在所有情况下生效 * @version 1.22.15 */ scrollToRow: _propTypes2.default.number, /** * 在内容区域滚动的时候触发的函数 */ onBodyScroll: _propTypes2.default.func, /** * 开启时,getExpandedColProps() / rowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回,否则返回真实index(0,2,4,6... / 1,3,5,7...) */ expandedIndexSimulate: _propTypes2.default.bool, /** * 在 hover 时出现十字参考轴,适用于表头比较复杂,需要做表头分类的场景。 */ crossline: _propTypes2.default.bool, lengths: _propTypes2.default.object }), _class.defaultProps = { dataSource: [], onRowClick: noop, onRowMouseEnter: noop, onRowMouseLeave: noop, onSort: noop, onFilter: noop, onResizeChange: noop, size: 'medium', rowProps: noop, cellProps: noop, prefix: 'next-', hasBorder: true, hasHeader: true, isZebra: false, loading: false, expandedIndexSimulate: false, primaryKey: 'id', components: {}, locale: _zhCn2.default.Table, crossline: false }, _class.childContextTypes = { notRenderCellIndex: _propTypes2.default.array, lockType: _propTypes2.default.oneOf(['left', 'right']) }, _class.contextTypes = { getTableInstance: _propTypes2.default.func, getTableInstanceForFixed: _propTypes2.default.func, getTableInstanceForVirtual: _propTypes2.default.func, getTableInstanceForExpand: _propTypes2.default.func }, _temp); Table.displayName = 'Table'; exports.default = (0, _reactLifecyclesCompat.polyfill)(Table); module.exports = exports['default'];