UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

652 lines (568 loc) 22.4 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props'); var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); var _shallowequal = require('shallowequal'); var _shallowequal2 = _interopRequireDefault(_shallowequal); var _merge = require('lodash/merge'); var _merge2 = _interopRequireDefault(_merge); var _componentClasses = require('component-classes'); var _componentClasses2 = _interopRequireDefault(_componentClasses); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _vueTypes = require('../../_util/vue-types'); var _vueTypes2 = _interopRequireDefault(_vueTypes); var _utils = require('./utils'); var _warning = require('../../_util/warning'); var _warning2 = _interopRequireDefault(_warning); var _addEventListener = require('../../vc-util/Dom/addEventListener'); var _addEventListener2 = _interopRequireDefault(_addEventListener); var _ColumnManager = require('./ColumnManager'); var _ColumnManager2 = _interopRequireDefault(_ColumnManager); var _HeadTable = require('./HeadTable'); var _HeadTable2 = _interopRequireDefault(_HeadTable); var _BodyTable = require('./BodyTable'); var _BodyTable2 = _interopRequireDefault(_BodyTable); var _ExpandableTable = require('./ExpandableTable'); var _ExpandableTable2 = _interopRequireDefault(_ExpandableTable); var _propsUtil = require('../../_util/props-util'); var _BaseMixin = require('../../_util/BaseMixin'); var _BaseMixin2 = _interopRequireDefault(_BaseMixin); var _vue = require('vue'); var _vue2 = _interopRequireDefault(_vue); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } exports['default'] = { name: 'Table', mixins: [_BaseMixin2['default']], provide: function provide() { return { 'table-store': this.store, table: this }; }, props: (0, _propsUtil.initDefaultProps)({ data: _vueTypes2['default'].array, useFixedHeader: _vueTypes2['default'].bool, columns: _vueTypes2['default'].array, prefixCls: _vueTypes2['default'].string, bodyStyle: _vueTypes2['default'].object, rowKey: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].func]), rowClassName: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].func]), customRow: _vueTypes2['default'].func, customHeaderRow: _vueTypes2['default'].func, // onRowClick: PropTypes.func, // onRowDoubleClick: PropTypes.func, // onRowContextMenu: PropTypes.func, // onRowMouseEnter: PropTypes.func, // onRowMouseLeave: PropTypes.func, showHeader: _vueTypes2['default'].bool, title: _vueTypes2['default'].func, id: _vueTypes2['default'].string, footer: _vueTypes2['default'].func, emptyText: _vueTypes2['default'].any, scroll: _vueTypes2['default'].object, rowRef: _vueTypes2['default'].func, getBodyWrapper: _vueTypes2['default'].func, components: _vueTypes2['default'].shape({ table: _vueTypes2['default'].any, header: _vueTypes2['default'].shape({ wrapper: _vueTypes2['default'].any, row: _vueTypes2['default'].any, cell: _vueTypes2['default'].any }), body: _vueTypes2['default'].shape({ wrapper: _vueTypes2['default'].any, row: _vueTypes2['default'].any, cell: _vueTypes2['default'].any }) }), expandIconAsCell: _vueTypes2['default'].bool, expandedRowKeys: _vueTypes2['default'].array, expandedRowClassName: _vueTypes2['default'].func, defaultExpandAllRows: _vueTypes2['default'].bool, defaultExpandedRowKeys: _vueTypes2['default'].array, expandIconColumnIndex: _vueTypes2['default'].number, expandedRowRender: _vueTypes2['default'].func, childrenColumnName: _vueTypes2['default'].string, indentSize: _vueTypes2['default'].number, expandRowByClick: _vueTypes2['default'].bool, expandIcon: _vueTypes2['default'].func, tableLayout: _vueTypes2['default'].string, transformCellText: _vueTypes2['default'].func }, { data: [], useFixedHeader: false, rowKey: 'key', rowClassName: function rowClassName() { return ''; }, prefixCls: 'rc-table', bodyStyle: {}, showHeader: true, scroll: {}, rowRef: function rowRef() { return null; }, emptyText: function emptyText() { return 'No Data'; }, customHeaderRow: function customHeaderRow() {} }), data: function data() { this.preData = [].concat((0, _toConsumableArray3['default'])(this.data)); this.store = _vue2['default'].observable({ currentHoverKey: null, fixedColumnsHeadRowsHeight: [], fixedColumnsBodyRowsHeight: {}, expandedRowsHeight: {}, expandedRowKeys: [] }); return { columnManager: new _ColumnManager2['default'](this.columns), sComponents: (0, _merge2['default'])({ table: 'table', header: { wrapper: 'thead', row: 'tr', cell: 'th' }, body: { wrapper: 'tbody', row: 'tr', cell: 'td' } }, this.components) }; }, watch: { components: function components() { this._components = (0, _merge2['default'])({ table: 'table', header: { wrapper: 'thead', row: 'tr', cell: 'th' }, body: { wrapper: 'tbody', row: 'tr', cell: 'td' } }, this.components); }, columns: function columns(val) { if (val) { this.columnManager.reset(val); } }, data: function data(val) { var _this = this; if (val.length === 0 && this.hasScrollX()) { this.$nextTick(function () { _this.resetScrollX(); }); } } }, // static childContextTypes = { // table: PropTypes.any, // components: PropTypes.any, // }, created: function created() { var _this2 = this; ['rowClick', 'rowDoubleclick', 'rowContextmenu', 'rowMouseenter', 'rowMouseleave'].forEach(function (name) { (0, _warning2['default'])((0, _propsUtil.getListeners)(_this2)[name] === undefined, name + ' is deprecated, please use customRow instead.'); }); (0, _warning2['default'])(this.getBodyWrapper === undefined, 'getBodyWrapper is deprecated, please use custom components instead.'); this.setScrollPosition('left'); this.debouncedWindowResize = (0, _utils.debounce)(this.handleWindowResize, 150); }, mounted: function mounted() { var _this3 = this; this.$nextTick(function () { if (_this3.columnManager.isAnyColumnsFixed()) { _this3.handleWindowResize(); _this3.resizeEvent = (0, _addEventListener2['default'])(window, 'resize', _this3.debouncedWindowResize); } // https://github.com/ant-design/ant-design/issues/11635 if (_this3.ref_headTable) { _this3.ref_headTable.scrollLeft = 0; } if (_this3.ref_bodyTable) { _this3.ref_bodyTable.scrollLeft = 0; } }); }, updated: function updated() { var _this4 = this; this.$nextTick(function () { if (_this4.columnManager.isAnyColumnsFixed()) { _this4.handleWindowResize(); if (!_this4.resizeEvent) { _this4.resizeEvent = (0, _addEventListener2['default'])(window, 'resize', _this4.debouncedWindowResize); } } }); }, beforeDestroy: function beforeDestroy() { if (this.resizeEvent) { this.resizeEvent.remove(); } if (this.debouncedWindowResize) { this.debouncedWindowResize.cancel(); } }, methods: { getRowKey: function getRowKey(record, index) { var rowKey = this.rowKey; var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey]; (0, _warning2['default'])(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; }, setScrollPosition: function setScrollPosition(position) { this.scrollPosition = position; if (this.tableNode) { var prefixCls = this.prefixCls; if (position === 'both') { (0, _componentClasses2['default'])(this.tableNode).remove(new RegExp('^' + prefixCls + '-scroll-position-.+$')).add(prefixCls + '-scroll-position-left').add(prefixCls + '-scroll-position-right'); } else { (0, _componentClasses2['default'])(this.tableNode).remove(new RegExp('^' + prefixCls + '-scroll-position-.+$')).add(prefixCls + '-scroll-position-' + position); } } }, setScrollPositionClassName: function setScrollPositionClassName() { var node = this.ref_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'); } }, isTableLayoutFixed: function isTableLayoutFixed() { var _$props = this.$props, tableLayout = _$props.tableLayout, _$props$columns = _$props.columns, columns = _$props$columns === undefined ? [] : _$props$columns, useFixedHeader = _$props.useFixedHeader, _$props$scroll = _$props.scroll, scroll = _$props$scroll === undefined ? {} : _$props$scroll; if (typeof tableLayout !== 'undefined') { return tableLayout === 'fixed'; } // if one column is ellipsis, use fixed table layout to fix align issue if (columns.some(function (_ref) { var ellipsis = _ref.ellipsis; return !!ellipsis; })) { return true; } // if header fixed, use fixed table layout to fix align issue if (useFixedHeader || scroll.y) { return true; } // if scroll.x is number/px/% width value, we should fixed table layout // to avoid long word layout broken issue if (scroll.x && scroll.x !== true && scroll.x !== 'max-content') { return true; } return false; }, handleWindowResize: function handleWindowResize() { this.syncFixedTableRowHeight(); this.setScrollPositionClassName(); }, syncFixedTableRowHeight: function syncFixedTableRowHeight() { var tableRect = this.tableNode.getBoundingClientRect(); // If tableNode's height less than 0, suppose it is hidden and don't recalculate rowHeight. // see: https://github.com/ant-design/ant-design/issues/4836 if (tableRect.height !== undefined && tableRect.height <= 0) { return; } var prefixCls = this.prefixCls; var headRows = this.ref_headTable ? this.ref_headTable.querySelectorAll('thead') : this.ref_bodyTable.querySelectorAll('thead'); var bodyRows = this.ref_bodyTable.querySelectorAll('.' + prefixCls + '-row') || []; var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) { return row.getBoundingClientRect().height ? row.getBoundingClientRect().height - 0.5 : 'auto'; }); var state = this.store; var fixedColumnsBodyRowsHeight = [].reduce.call(bodyRows, function (acc, row) { var rowKey = row.getAttribute('data-row-key'); var height = row.getBoundingClientRect().height || state.fixedColumnsBodyRowsHeight[rowKey] || 'auto'; acc[rowKey] = height; return acc; }, {}); if ((0, _shallowequal2['default'])(state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2['default'])(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) { return; } this.store.fixedColumnsHeadRowsHeight = fixedColumnsHeadRowsHeight; this.store.fixedColumnsBodyRowsHeight = fixedColumnsBodyRowsHeight; }, resetScrollX: function resetScrollX() { if (this.ref_headTable) { this.ref_headTable.scrollLeft = 0; } if (this.ref_bodyTable) { this.ref_bodyTable.scrollLeft = 0; } }, hasScrollX: function hasScrollX() { var _scroll = this.scroll, scroll = _scroll === undefined ? {} : _scroll; return 'x' in scroll; }, handleBodyScrollLeft: function handleBodyScrollLeft(e) { // Fix https://github.com/ant-design/ant-design/issues/7635 if (e.currentTarget !== e.target) { return; } var target = e.target; var _scroll2 = this.scroll, scroll = _scroll2 === undefined ? {} : _scroll2; var ref_headTable = this.ref_headTable, ref_bodyTable = this.ref_bodyTable; if (target.scrollLeft !== this.lastScrollLeft && scroll.x) { if (target === ref_bodyTable && ref_headTable) { ref_headTable.scrollLeft = target.scrollLeft; } else if (target === ref_headTable && ref_bodyTable) { ref_bodyTable.scrollLeft = target.scrollLeft; } this.setScrollPositionClassName(); } // Remember last scrollLeft for scroll direction detecting. this.lastScrollLeft = target.scrollLeft; }, handleBodyScrollTop: function handleBodyScrollTop(e) { var target = e.target; // Fix https://github.com/ant-design/ant-design/issues/9033 if (e.currentTarget !== target) { return; } var _scroll3 = this.scroll, scroll = _scroll3 === undefined ? {} : _scroll3; var ref_headTable = this.ref_headTable, ref_bodyTable = this.ref_bodyTable, ref_fixedColumnsBodyLeft = this.ref_fixedColumnsBodyLeft, ref_fixedColumnsBodyRight = this.ref_fixedColumnsBodyRight; if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== ref_headTable) { var scrollTop = target.scrollTop; if (ref_fixedColumnsBodyLeft && target !== ref_fixedColumnsBodyLeft) { ref_fixedColumnsBodyLeft.scrollTop = scrollTop; } if (ref_fixedColumnsBodyRight && target !== ref_fixedColumnsBodyRight) { ref_fixedColumnsBodyRight.scrollTop = scrollTop; } if (ref_bodyTable && target !== ref_bodyTable) { ref_bodyTable.scrollTop = scrollTop; } } // Remember last scrollTop for scroll direction detecting. this.lastScrollTop = target.scrollTop; }, handleBodyScroll: function handleBodyScroll(e) { this.handleBodyScrollLeft(e); this.handleBodyScrollTop(e); }, handleWheel: function handleWheel(event) { var _$props$scroll2 = this.$props.scroll, scroll = _$props$scroll2 === undefined ? {} : _$props$scroll2; if (window.navigator.userAgent.match(/Trident\/7\./) && scroll.y) { event.preventDefault(); var wd = event.deltaY; var target = event.target; var bodyTable = this.ref_bodyTable, fixedColumnsBodyLeft = this.ref_fixedColumnsBodyLeft, fixedColumnsBodyRight = this.ref_fixedColumnsBodyRight; var scrollTop = 0; if (this.lastScrollTop) { scrollTop = this.lastScrollTop + wd; } else { scrollTop = wd; } if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) { fixedColumnsBodyLeft.scrollTop = scrollTop; } if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) { fixedColumnsBodyRight.scrollTop = scrollTop; } if (bodyTable && target !== bodyTable) { bodyTable.scrollTop = scrollTop; } } }, // saveChildrenRef(name, node) { // this[`ref_${name}`] = node; // }, saveRef: function saveRef(name) { var _this5 = this; return function (node) { _this5['ref_' + name] = node; }; }, saveTableNodeRef: function saveTableNodeRef(node) { this.tableNode = node; }, renderMainTable: function renderMainTable() { var h = this.$createElement; var scroll = this.scroll, prefixCls = this.prefixCls; var isAnyColumnsFixed = this.columnManager.isAnyColumnsFixed(); var scrollable = isAnyColumnsFixed || scroll.x || scroll.y; var table = [this.renderTable({ columns: this.columnManager.groupedColumns(), isAnyColumnsFixed: isAnyColumnsFixed }), this.renderEmptyText(), this.renderFooter()]; return scrollable ? h( 'div', { 'class': prefixCls + '-scroll' }, [table] ) : table; }, renderLeftFixedTable: function renderLeftFixedTable() { var h = this.$createElement; var prefixCls = this.prefixCls; return h( 'div', { 'class': prefixCls + '-fixed-left' }, [this.renderTable({ columns: this.columnManager.leftColumns(), fixed: 'left' })] ); }, renderRightFixedTable: function renderRightFixedTable() { var h = this.$createElement; var prefixCls = this.prefixCls; return h( 'div', { 'class': prefixCls + '-fixed-right' }, [this.renderTable({ columns: this.columnManager.rightColumns(), fixed: 'right' })] ); }, renderTable: function renderTable(options) { var h = this.$createElement; var columns = options.columns, fixed = options.fixed, isAnyColumnsFixed = options.isAnyColumnsFixed; var prefixCls = this.prefixCls, _scroll4 = this.scroll, scroll = _scroll4 === undefined ? {} : _scroll4; var tableClassName = scroll.x || fixed ? prefixCls + '-fixed' : ''; var headTable = h(_HeadTable2['default'], { key: 'head', attrs: { columns: columns, fixed: fixed, tableClassName: tableClassName, handleBodyScrollLeft: this.handleBodyScrollLeft, expander: this.expander } }); var bodyTable = h(_BodyTable2['default'], { key: 'body', attrs: { columns: columns, fixed: fixed, tableClassName: tableClassName, getRowKey: this.getRowKey, handleWheel: this.handleWheel, handleBodyScroll: this.handleBodyScroll, expander: this.expander, isAnyColumnsFixed: isAnyColumnsFixed } }); return [headTable, bodyTable]; }, renderTitle: function renderTitle() { var h = this.$createElement; var title = this.title, prefixCls = this.prefixCls, data = this.data; return title ? h( 'div', { 'class': prefixCls + '-title', key: 'title' }, [title(data)] ) : null; }, renderFooter: function renderFooter() { var h = this.$createElement; var footer = this.footer, prefixCls = this.prefixCls, data = this.data; return footer ? h( 'div', { 'class': prefixCls + '-footer', key: 'footer' }, [footer(data)] ) : null; }, renderEmptyText: function renderEmptyText() { var h = this.$createElement; var emptyText = this.emptyText, prefixCls = this.prefixCls, data = this.data; if (data.length) { return null; } var emptyClassName = prefixCls + '-placeholder'; return h( 'div', { 'class': emptyClassName, key: 'emptyText' }, [typeof emptyText === 'function' ? emptyText() : emptyText] ); } }, render: function render() { var _classNames, _this6 = this; var h = arguments[0]; var props = (0, _propsUtil.getOptionProps)(this); var columnManager = this.columnManager, getRowKey = this.getRowKey; var prefixCls = props.prefixCls; var tableClassName = (0, _classnames2['default'])(props.prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-fixed-header', props.useFixedHeader || props.scroll && props.scroll.y), (0, _defineProperty3['default'])(_classNames, prefixCls + '-scroll-position-left ' + prefixCls + '-scroll-position-right', this.scrollPosition === 'both'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-scroll-position-' + this.scrollPosition, this.scrollPosition !== 'both'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-layout-fixed', this.isTableLayoutFixed()), _classNames)); var hasLeftFixed = columnManager.isAnyColumnsLeftFixed(); var hasRightFixed = columnManager.isAnyColumnsRightFixed(); var expandableTableProps = { props: (0, _extends3['default'])({}, props, { columnManager: columnManager, getRowKey: getRowKey }), on: (0, _propsUtil.getListeners)(this), scopedSlots: { 'default': function _default(expander) { _this6.expander = expander; return h( 'div', (0, _babelHelperVueJsxMergeProps2['default'])([{ directives: [{ name: 'ant-ref', value: _this6.saveTableNodeRef }] }, { 'class': tableClassName // style={props.style} // id={props.id} }]), [_this6.renderTitle(), h( 'div', { 'class': prefixCls + '-content' }, [_this6.renderMainTable(), hasLeftFixed && _this6.renderLeftFixedTable(), hasRightFixed && _this6.renderRightFixedTable()] )] ); } } }; return h(_ExpandableTable2['default'], expandableTableProps); } }; /* eslint-disable camelcase */