vue-antd-ui
Version:
An enterprise-class UI design language and Vue-based implementation
136 lines (116 loc) • 4.08 kB
JavaScript
import PropTypes from '../../_util/vue-types';
import ExpandIcon from './ExpandIcon';
import BaseMixin from '../../_util/BaseMixin';
import { connect } from '../../_util/store';
var ExpandableRow = {
mixins: [BaseMixin],
name: 'ExpandableRow',
props: {
prefixCls: PropTypes.string.isRequired,
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
record: PropTypes.object.isRequired,
indentSize: PropTypes.number,
needIndentSpaced: PropTypes.bool.isRequired,
expandRowByClick: PropTypes.bool,
expanded: PropTypes.bool.isRequired,
expandIconAsCell: PropTypes.bool,
expandIconColumnIndex: PropTypes.number,
childrenColumnName: PropTypes.string,
expandedRowRender: PropTypes.func
// onExpandedChange: PropTypes.func.isRequired,
// onRowClick: PropTypes.func,
// children: PropTypes.func.isRequired,
},
beforeDestroy: function beforeDestroy() {
this.handleDestroy();
},
methods: {
hasExpandIcon: function hasExpandIcon(columnIndex) {
var expandRowByClick = this.expandRowByClick;
return !this.tempExpandIconAsCell && !expandRowByClick && columnIndex === this.tempExpandIconColumnIndex;
},
handleExpandChange: function handleExpandChange(record, event) {
var expanded = this.expanded,
rowKey = this.rowKey;
this.__emit('expandedChange', !expanded, record, event, rowKey);
},
handleDestroy: function handleDestroy() {
var rowKey = this.rowKey,
record = this.record;
this.__emit('expandedChange', false, record, null, rowKey, true);
},
handleRowClick: function handleRowClick(record, index, event) {
var expandRowByClick = this.expandRowByClick;
if (expandRowByClick) {
this.handleExpandChange(record, event);
}
this.__emit('rowClick', record, index, event);
},
renderExpandIcon: function renderExpandIcon() {
var h = this.$createElement;
var prefixCls = this.prefixCls,
expanded = this.expanded,
record = this.record,
needIndentSpaced = this.needIndentSpaced;
return h(ExpandIcon, {
attrs: {
expandable: this.expandable,
prefixCls: prefixCls,
needIndentSpaced: needIndentSpaced,
expanded: expanded,
record: record
},
on: {
'expand': this.handleExpandChange
}
});
},
renderExpandIconCell: function renderExpandIconCell(cells) {
var h = this.$createElement;
if (!this.tempExpandIconAsCell) {
return;
}
var prefixCls = this.prefixCls;
cells.push(h(
'td',
{
'class': prefixCls + '-expand-icon-cell',
key: 'rc-table-expand-icon-cell'
},
[this.renderExpandIcon()]
));
}
},
render: function render() {
var childrenColumnName = this.childrenColumnName,
expandedRowRender = this.expandedRowRender,
indentSize = this.indentSize,
record = this.record,
fixed = this.fixed,
$scopedSlots = this.$scopedSlots;
this.tempExpandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false;
this.tempExpandIconColumnIndex = fixed !== 'right' ? this.expandIconColumnIndex : -1;
var childrenData = record[childrenColumnName];
this.expandable = !!(childrenData || expandedRowRender);
var expandableRowProps = {
props: {
indentSize: indentSize,
hasExpandIcon: this.hasExpandIcon,
renderExpandIcon: this.renderExpandIcon,
renderExpandIconCell: this.renderExpandIconCell
},
on: {
rowClick: this.handleRowClick
}
};
return $scopedSlots['default'] && $scopedSlots['default'](expandableRowProps);
}
};
export default connect(function (_ref, _ref2) {
var expandedRowKeys = _ref.expandedRowKeys;
var rowKey = _ref2.rowKey;
return {
expanded: !!~expandedRowKeys.indexOf(rowKey)
};
})(ExpandableRow);