import React from 'react';
import Table from 'rc-table';
import Checkbox from '../checkbox';
import Radio from '../radio';
import FilterDropdown from './filterDropdown';
import Pagination from '../pagination';
import Icon from '../icon';
import objectAssign from 'object-assign';
import Spin from '../spin';
import classNames from 'classnames';
import { flatArray } from './util';
function noop() {
}
const defaultLocale = {
filterTitle: '筛选',
filterConfirm: '确定',
filterReset: '重置',
emptyText: '暂无数据',
};
const defaultPagination = {
pageSize: 10,
current: 1,
onChange: noop,
onShowSizeChange: noop,
};
let AntTable = React.createClass({
getInitialState() {
return {
// 减少状态
selectedRowKeys: this.props.selectedRowKeys || [],
filters: {},
selectionDirty: false,
sortColumn: '',
sortOrder: '',
sorter: null,
radioIndex: null,
pagination: this.hasPagination() ?
objectAssign({
size: this.props.size,
}, defaultPagination, this.props.pagination) :
{},
};
},
getDefaultProps() {
return {
dataSource: [],
prefixCls: 'ant-table',
useFixedHeader: false,
rowSelection: null,
className: '',
size: 'large',
loading: false,
bordered: false,
indentSize: 20,
onChange: noop,
locale: {}
};
},
propTypes: {
dataSource: React.PropTypes.array,
prefixCls: React.PropTypes.string,
useFixedHeader: React.PropTypes.bool,
rowSelection: React.PropTypes.object,
className: React.PropTypes.string,
size: React.PropTypes.string,
loading: React.PropTypes.bool,
bordered: React.PropTypes.bool,
onChange: React.PropTypes.func,
locale: React.PropTypes.object,
},
getDefaultSelection() {
if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) {
return [];
}
return this.getFlatCurrentPageData()
.filter(item => this.props.rowSelection.getCheckboxProps(item).defaultChecked)
.map((record, rowIndex) => this.getRecordKey(record, rowIndex));
},
componentWillReceiveProps(nextProps) {
if (('pagination' in nextProps) && nextProps.pagination !== false) {
this.setState({
pagination: objectAssign({}, defaultPagination, this.state.pagination, nextProps.pagination)
});
}
// dataSource 的变化会清空选中项
if ('dataSource' in nextProps &&
nextProps.dataSource !== this.props.dataSource) {
this.setState({
selectionDirty: false,
});
}
if (nextProps.rowSelection &&
'selectedRowKeys' in nextProps.rowSelection) {
this.setState({
selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [],
});
}
},
setSelectedRowKeys(selectedRowKeys) {
if (this.props.rowSelection &&
!('selectedRowKeys' in this.props.rowSelection)) {
this.setState({ selectedRowKeys });
}
if (this.props.rowSelection && this.props.rowSelection.onChange) {
const data = this.getFlatCurrentPageData();
const selectedRows = data.filter(
(row, i) => selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0
);
this.props.rowSelection.onChange(selectedRowKeys, selectedRows);
}
},
hasPagination() {
return this.props.pagination !== false;
},
toggleSortOrder(order, column) {
let sortColumn = this.state.sortColumn;
let sortOrder = this.state.sortOrder;
let sorter;
// 只同时允许一列进行排序,否则会导致排序顺序的逻辑问题
let isSortColumn = this.isSortColumn(column);
if (!isSortColumn) { // 当前列未排序
sortOrder = order;
sortColumn = column;
} else { // 当前列已排序
if (sortOrder === order) { // 切换为未排序状态
sortOrder = '';
sortColumn = null;
} else { // 切换为排序状态
sortOrder = order;
}
}
if (typeof column.sorter === 'function') {
sorter = (a, b) => {
let result = column.sorter(a, b);
if (result !== 0) {
return (sortOrder === 'descend') ? -result : result;
}
return a.index - b.index;
};
}
const newState = {
sortOrder,
sortColumn,
sorter,
};
this.setState(newState);
this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
},
handleFilter(column, nextFilters) {
const filters = objectAssign({}, this.state.filters, {
[this.getColumnKey(column)]: nextFilters
});
// Remove filters not in current columns
const currentColumnKeys = this.props.columns.map(c => this.getColumnKey(c));
Object.keys(filters).forEach((columnKey) => {
if (currentColumnKeys.indexOf(columnKey) < 0) {
delete filters[columnKey];
}
});
const newState = {
selectionDirty: false,
filters
};
this.setState(newState);
this.setSelectedRowKeys([]);
this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
},
handleSelect(record, rowIndex, e) {
const checked = e.target.checked;
const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
let key = this.getRecordKey(record, rowIndex);
if (checked) {
selectedRowKeys.push(this.getRecordKey(record, rowIndex));
} else {
selectedRowKeys = selectedRowKeys.filter((i) => {
return key !== i;
});
}
this.setState({
selectionDirty: true,
});
this.setSelectedRowKeys(selectedRowKeys);
if (this.props.rowSelection.onSelect) {
let data = this.getFlatCurrentPageData();
let selectedRows = data.filter((row, i) => {
return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
});
this.props.rowSelection.onSelect(record, checked, selectedRows);
}
},
handleRadioSelect(record, rowIndex, e) {
const checked = e.target.checked;
const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
let key = this.getRecordKey(record, rowIndex);
selectedRowKeys = [key];
this.setState({
radioIndex: key,
selectionDirty: true,
});
this.setSelectedRowKeys(selectedRowKeys);
if (this.props.rowSelection.onSelect) {
let data = this.getFlatCurrentPageData();
let selectedRows = data.filter((row, i) => {
return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
});
this.props.rowSelection.onSelect(record, checked, selectedRows);
}
},
handleSelectAllRow(e) {
const checked = e.target.checked;
const data = this.getFlatCurrentPageData();
const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
const changableRowKeys = data.filter(item =>
!this.props.rowSelection.getCheckboxProps ||
!this.props.rowSelection.getCheckboxProps(item).disabled
).map((item, i) => this.getRecordKey(item, i));
// 记录变化的列
const changeRowKeys = [];
if (checked) {
changableRowKeys.forEach(key => {
if (selectedRowKeys.indexOf(key) < 0) {
selectedRowKeys.push(key);
changeRowKeys.push(key);
}
});
} else {
changableRowKeys.forEach(key => {
if (selectedRowKeys.indexOf(key) >= 0) {
selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
changeRowKeys.push(key);
}
});
}
this.setState({
selectionDirty: true,
});
this.setSelectedRowKeys(selectedRowKeys);
if (this.props.rowSelection.onSelectAll) {
const selectedRows = data.filter((row, i) =>
selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0);
const changeRows = data.filter((row, i) =>
changeRowKeys.indexOf(this.getRecordKey(row, i)) >= 0);
this.props.rowSelection.onSelectAll(checked, selectedRows, changeRows);
}
},
handlePageChange(current) {
let pagination = objectAssign({}, this.state.pagination);
if (current) {
pagination.current = current;
} else {
pagination.current = pagination.current || 1;
}
pagination.onChange(pagination.current);
const newState = {
selectionDirty: false,
pagination
};
this.setState(newState);
this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
},
onRadioChange(ev) {
this.setState({
radioIndex: ev.target.value
});
},
renderSelectionRadio(value, record, index) {
let rowIndex = this.getRecordKey(record, index); // 从 1 开始
let props = {};
if (this.props.rowSelection.getCheckboxProps) {
props = this.props.rowSelection.getCheckboxProps.call(this, record);
}
let checked;
if (this.state.selectionDirty) {
checked = this.state.radioIndex === rowIndex;
} else {
checked = (this.state.radioIndex === rowIndex ||
this.getDefaultSelection().indexOf(rowIndex) >= 0);
}
return (