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

Solve conflicts

old
Javi Velasco 2015-11-11 10:30:22 +01:00
parent b61619b6a3 0fe79fdd2f
commit 4fdfc0aeef
8 changed files with 64 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/table/index.jsx
View File

@ -22,9 +22,9 @@ class Table extends React.Component {
};
state = {
all: false,
dataSource: utils.cloneObject(this.props.dataSource),
selected: false,
selected_rows: []
selected_index: []
};
componentWillReceiveProps = (next_props) => {
@ -36,29 +36,29 @@ class Table extends React.Component {
handleRowChange = (event, row, key, value) => {
const dataSource = this.state.dataSource;
dataSource[row.props.index][key] = value;
this.setState({ dataSource: dataSource });
this.setState({ dataSource });
if (this.props.onChange) {
this.props.onChange(event, this, row);
this.props.onChange(event, dataSource[row.props.index], dataSource);
}
};
handleRowSelect = (event, instance) => {
if (this.props.onSelect) {
const index = instance.props.index;
const selected_rows = this.state.selected_rows;
const selected = selected_rows.indexOf(index) === -1;
if (selected) {
selected_rows.push(index);
this.props.onSelect(event, instance.props.data);
} else {
delete selected_rows[selected_rows.indexOf(index)];
}
this.setState({ selected_rows: selected_rows });
const index = instance.props.index;
const selected_index = this.state.selected_index;
const selected = selected_index.indexOf(index) === -1;
if (selected) {
selected_index.push(index);
} else {
delete selected_index[selected_index.indexOf(index)];
}
this.setState({ selected_index: selected_index });
this.props.onSelect(event, this.getSelected());
};
handleRowsSelect = (event) => {
this.setState({ selected: !this.state.selected });
const all = !this.state.all;
this.setState({ all });
this.props.onSelect(event, this.getSelected(all));
};
isChanged = (data, base) => {
@ -71,13 +71,21 @@ class Table extends React.Component {
return changed;
};
getSelected = (all = false) => {
const rows = [];
this.state.dataSource.map((row, index) => {
if (all || this.state.selected_index.indexOf(index) !== -1) rows.push(row);
});
return rows;
}
renderHead () {
if (this.props.heading) {
return (
<Head
model={this.props.model}
onSelect={this.props.onSelect ? this.handleRowsSelect : null}
selected={this.state.selected}
selected={this.state.all}
/>
);
}
@ -97,7 +105,7 @@ class Table extends React.Component {
model={this.props.model}
onChange={this.props.onChange ? this.handleRowChange : null}
onSelect={this.props.onSelect ? this.handleRowSelect : null}
selected={this.state.selected || this.state.selected_rows.indexOf(index) !== -1}
selected={this.state.all || this.state.selected_index.indexOf(index) !== -1}
/>
);
})
@ -115,18 +123,6 @@ class Table extends React.Component {
</table>
);
}
getValue () {
return this.state.dataSource;
}
getSelected () {
const rows = [];
this.state.dataSource.map((row, index) => {
if (this.state.selected_rows.indexOf(index) !== -1) rows.push(row);
});
return rows;
}
}
export default Table;

7
components/table/readme.md
View File

@ -41,10 +41,3 @@ const TableTest = () => (
| `heading` | `Bool` | `true` | If true, component will show a heading using model field names.|
| `onChange` | `Function` | | Callback function that is fired when the components's value changes.|
| `onSelect` | `Function` | | Callback function when selects a determinate row.|
## Methods
This component has state to control how is it rendered and the values currently selected. It exposes the following instance methods:
- `getValue` is used to retrieve the current dataSource.
- `getSelected` is used to retrieve the current rows selected.

2
components/tabs/tab.jsx
View File

@ -17,7 +17,7 @@ class Tab extends React.Component {
};
componentDidMount () {
this.active(this.props.active);
if (this.props.active) this.active(this.props.active);
}
componentWillReceiveProps (next_props) {

16
components/tabs/tabs.jsx
View File

@ -20,16 +20,13 @@ class Tabs extends React.Component {
componentDidMount () {
setTimeout(() => {
this.setState({pointer: this._pointerPosition(this.state.index)});
this.setState({pointer: this._pointerPosition(this.props.index)});
}, 20);
}
componentWillReceiveProps (next_props) {
const index = next_props.index || this.state.index;
this.setState({
index,
pointer: this._pointerPosition(index)
});
this.setState({ index, pointer: this._pointerPosition(index) });
}
_pointerPosition (index = 0) {
@ -48,7 +45,7 @@ class Tabs extends React.Component {
index,
pointer: this._pointerPosition(index)
});
if (this.props.onChange) this.props.onChange(this);
if (this.props.onChange) this.props.onChange(index);
};
renderLabels (labels) {
@ -91,13 +88,6 @@ class Tabs extends React.Component {
</div>
);
}
active (value) {
this.setState({active: value});
if (this.props.onActive && value) {
this.props.onActive(this);
}
}
}
export default Tabs;

4
docs/app/components/layout/main/modules/examples/table_example_1.txt
View File

@ -18,8 +18,8 @@ const users = [
{name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
];
const handleSelect = (event, row, instance) => {
alert(row.twitter);
const handleSelect = (event, selected) => {
alert(selected.length);
};
const TableTest = () => (

12
spec/components/table.jsx
View File

@ -12,18 +12,17 @@ const UserModel = {
const users = [
{name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
{name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true},
{name: 'chinorro'}
{name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
];
class TableTest extends React.Component {
handleTableChange = (event, instance, row) => {
console.log('handleTableChange', instance.getValue(), row);
handleTableChange = (event, row, dataSource) => {
console.log('handleTableChange', row, dataSource);
};
handleTableRowSelect = (event, row) => {
console.log('handleTableRowSelect', row, this.refs.table.getSelected());
handleTableRowSelect = (event, selected) => {
console.log('handleTableRowSelect', selected);
};
render () {
@ -32,7 +31,6 @@ class TableTest extends React.Component {
<h5>Table</h5>
<p style={{marginBottom: '10px'}}>Organized data.</p>
<Table
ref='table'
model={UserModel}
dataSource={users}
onChange={this.handleTableChange}

39
spec/components/tabs.jsx
View File

@ -1,19 +1,32 @@
import React from 'react';
import { Tabs, Tab } from '../../components/tabs';
const TabsTest = () => (
<section>
<h5>Tabs</h5>
<p>This tabs can be disabled or hidden</p>
class TabsTest extends React.Component {
<Tabs>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary'><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
</section>
);
state = {
index: 1
};
handleTabsOnChange = (index) => {
console.log('handleTabsOnChange', index);
};
render () {
return (
<section>
<h5>Tabs</h5>
<p>This tabs can be disabled or hidden</p>
<Tabs index={this.state.index} onChange={this.handleTabsOnChange}>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary'><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
</section>
);
}
}
export default TabsTest;

2
spec/root.jsx
View File

@ -35,7 +35,7 @@ const _hrefProject = () => {
const Root = () => (
<App className={style.app}>
<AppBarToolbox fixed flat className={style.appbar}>
<h1>React Toolbox <small>Spec 0.11.4</small></h1>
<h1>React Toolbox <small>Spec 0.11.5</small></h1>
<ButtonToolbox
accent
className={style.github}