vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

<Table> using the new stateless <Checkbox>

old
@soyjavi 2015-11-07 09:01:07 +07:00
parent b1fe6f6e27
commit b3150f4e74
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/table/components/head.jsx
View File

@ -7,23 +7,25 @@ class Head extends React.Component {
static propTypes = { static propTypes = {
className: React.PropTypes.string, className: React.PropTypes.string,
model: React.PropTypes.object, model: React.PropTypes.object,
onSelect: React.PropTypes.func onSelect: React.PropTypes.func,
selected: React.PropTypes.bool
}; };
static defaultProps = { static defaultProps = {
className: '', className: '',
model: {} model: {},
selected: false
}; };
handleSelectChange = (event, instance) => { handleSelectChange = (event) => {
this.props.onSelect(event, instance.getValue()); this.props.onSelect(event);
}; };
renderCellSelectable () { renderCellSelectable () {
if (this.props.onSelect) { if (this.props.onSelect) {
return ( return (
<th className={style.selectable}> <th className={style.selectable}>
<Checkbox onChange={this.handleSelectChange}/> <Checkbox onChange={this.handleSelectChange} checked={this.props.selected}/>
</th> </th>
); );
} }

4
components/table/components/row.jsx
View File

@ -43,8 +43,8 @@ class Row extends React.Component {
this.props.onChange(event, this, key, event.target.value); this.props.onChange(event, this, key, event.target.value);
}; };
handleSelectChange = (event, instance) => { handleSelectChange = (event) => {
this.props.onSelect(event, instance.getValue(), this); this.props.onSelect(event, this);
}; };
renderCell (key) { renderCell (key) {

10
components/table/index.jsx
View File

@ -42,10 +42,11 @@ class Table extends React.Component {
} }
}; };
handleRowSelect = (event, selected, instance) => { handleRowSelect = (event, instance) => {
if (this.props.onSelect) { if (this.props.onSelect) {
const selected_rows = this.state.selected_rows;
const index = instance.props.index; const index = instance.props.index;
const selected_rows = this.state.selected_rows;
const selected = selected_rows.indexOf(index) === -1;
if (selected) { if (selected) {
selected_rows.push(index); selected_rows.push(index);
this.props.onSelect(event, instance.props.data); this.props.onSelect(event, instance.props.data);
@ -56,8 +57,8 @@ class Table extends React.Component {
} }
}; };
handleRowsSelect = (event, selected) => { handleRowsSelect = (event) => {
this.setState({ selected: selected }); this.setState({ selected: !this.state.selected });
}; };
isChanged = (data, base) => { isChanged = (data, base) => {
@ -76,6 +77,7 @@ class Table extends React.Component {
<Head <Head
model={this.props.model} model={this.props.model}
onSelect={this.props.onSelect ? this.handleRowsSelect : null} onSelect={this.props.onSelect ? this.handleRowsSelect : null}
selected={this.state.selected}
/> />
); );
} }