'use strict';
import React from 'react';
import jQuery from 'jquery';
import Table from 'rc-table';
import Menu from 'rc-menu';
import Dropdown from '../dropdown';
let AntTable = React.createClass({
getInitialState() {
return {
selectedRowKeys: [],
loading: false,
filters: [],
data: []
};
},
getDefaultProps() {
return {
prefixCls: 'ant-table',
useFixedHeader: false,
rowSelection: null,
size: 'normal'
};
},
renderMenus(items) {
let menuItems = items.map((item) => {
return
{item.text};
});
return menuItems;
},
toggleSortOrder(order, column) {
if (column.sortOrder === order) {
column.sortOrder = '';
} else {
column.sortOrder = order;
}
if (column.sorter) {
column.sorter.call(this, column.sortOrder);
}
},
handleFilter(column) {
if (column.onFilter) {
column.onFilter.call(this, column.filters);
}
},
handleSelectFilter(column, selected) {
column.filters = column.filters || [];
column.filters.push(selected);
},
handleDeselectFilter(column, key) {
column.filters = column.filters || [];
var index = column.filters.indexOf(key);
if (index !== -1) {
column.filters.splice(index, 1);
}
},
renderColumnsDropdown() {
this.props.columns = this.props.columns.map((column) => {
if (!column.originTitle) {
column.originTitle = column.title;
}
let filterDropdown, menus, sortButton;
if (column.filter) {
menus = ;
let dropdownSelectedClass = '';
if (column.filters && column.filters.length > 0) {
dropdownSelectedClass = 'ant-table-filter-selected';
}
filterDropdown =
;
}
if (column.sorter) {
sortButton =
;
}
column.title = [
column.originTitle,
sortButton,
filterDropdown
];
return column;
});
},
handleSelect(e) {
let checked = e.currentTarget.checked;
let currentRowIndex = e.currentTarget.parentElement.parentElement.rowIndex;
let selectedRow = this.props.data[currentRowIndex - 1];
if (checked) {
this.state.selectedRowKeys.push(currentRowIndex);
} else {
this.state.selectedRowKeys = this.state.selectedRowKeys.filter(function(i){
return currentRowIndex !== i;
});
}
this.setState({
selectedRowKeys: this.state.selectedRowKeys
});
if (this.props.rowSelection.onSelect) {
this.props.rowSelection.onSelect(selectedRow, checked);
}
},
handleSelectAllRow(e) {
let checked = e.currentTarget.checked;
this.setState({
selectedRowKeys: checked ? this.props.data.map(function(item, i) {
return i + 1;
}) : []
});
if (this.props.rowSelection.onSelectAll) {
this.props.rowSelection.onSelectAll(checked);
}
},
renderSelectionCheckBox(value, record, index) {
let checked = this.state.selectedRowKeys.indexOf(index + 1) >= 0;
let checkbox = ;
return checkbox;
},
fetch: function(url) {
this.props.resolve = this.props.resolve || function(data) {
return data || [];
};
let dataSource = url || this.props.dataSource;
if (dataSource) {
this.setState({
loading: true
});
jQuery.ajax({
url: dataSource,
success: (result) => {
result = this.props.resolve.call(this, result);
if (this.isMounted()) {
this.setState({
data: result
});
}
},
complete: () => {
this.setState({
loading: false
});
}
});
}
},
componentDidMount() {
this.fetch();
},
render() {
if (this.props.rowSelection) {
let checked = this.props.data.every(function(item, i) {
return this.state.selectedRowKeys.indexOf(i + 1) >= 0;
}, this);
let checkboxAll = ;
let selectionColumn = {
key: 'selection-column',
title: checkboxAll,
width: 60,
render: this.renderSelectionCheckBox
};
if (this.props.columns[0] &&
this.props.columns[0].key === 'selection-column') {
this.props.columns[0] = selectionColumn;
} else {
this.props.columns.unshift(selectionColumn);
}
}
var classString = '';
if (this.props.loading) {
classString += ' ant-table-loading';
}
if (this.props.size === 'small') {
classString += ' ant-table-small';
}
this.renderColumnsDropdown();
return ;
}
});
export default AntTable;