commit
9a802f1715
|
@ -69,7 +69,7 @@ class Table extends React.Component {
|
|||
index={index}
|
||||
key={index}
|
||||
model={this.props.model}
|
||||
onChange={this.handleRowChange.bind(this, index)}
|
||||
onChange={this.props.onChange ? this.handleRowChange.bind(this) : undefined}
|
||||
onSelect={this.handleRowSelect.bind(this, index)}
|
||||
selectable={this.props.selectable}
|
||||
selected={this.props.selected.indexOf(index) !== -1}
|
||||
|
|
|
@ -5,7 +5,8 @@ import style from './style';
|
|||
const TableHead = ({model, onSelect, selectable, selected}) => {
|
||||
let selectCell;
|
||||
const contentCells = Object.keys(model).map((key) => {
|
||||
return <th key={key}>{key}</th>;
|
||||
const name = model[key].title || key;
|
||||
return <th key={key}>{name}</th>;
|
||||
});
|
||||
|
||||
if (selectable) {
|
||||
|
|
|
@ -7,6 +7,7 @@ import style from './style';
|
|||
class TableRow extends React.Component {
|
||||
static propTypes = {
|
||||
data: React.PropTypes.object,
|
||||
index: React.PropTypes.number,
|
||||
model: React.PropTypes.object,
|
||||
onChange: React.PropTypes.func,
|
||||
onSelect: React.PropTypes.func,
|
||||
|
@ -14,9 +15,10 @@ class TableRow extends React.Component {
|
|||
selected: React.PropTypes.bool
|
||||
};
|
||||
|
||||
handleInputChange = (key, type, event) => {
|
||||
handleInputChange = (index, key, type, event) => {
|
||||
const value = type === 'checkbox' ? event.target.checked : event.target.value;
|
||||
this.props.onChange(key, value);
|
||||
const onChange = this.props.model[key].onChange || this.props.onChange;
|
||||
onChange(index, key, value);
|
||||
};
|
||||
|
||||
renderSelectCell () {
|
||||
|
@ -37,7 +39,13 @@ class TableRow extends React.Component {
|
|||
|
||||
renderCell (key) {
|
||||
const value = this.props.data[key];
|
||||
if (this.props.onChange) {
|
||||
|
||||
// if the value is a valid React element return it directly, since it
|
||||
// cannot be edited and should not be converted to a string...
|
||||
if (React.isValidElement(value)) { return value; }
|
||||
|
||||
const onChange = this.props.model[key].onChange || this.props.onChange;
|
||||
if (onChange) {
|
||||
return this.renderInput(key, value);
|
||||
} else if (value) {
|
||||
return value.toString();
|
||||
|
@ -45,13 +53,14 @@ class TableRow extends React.Component {
|
|||
}
|
||||
|
||||
renderInput (key, value) {
|
||||
const index = this.props.index;
|
||||
const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
|
||||
const inputValue = utils.prepareValueForInput(value, inputType);
|
||||
const checked = inputType === 'checkbox' && value ? true : null;
|
||||
return (
|
||||
<input
|
||||
checked={checked}
|
||||
onChange={this.handleInputChange.bind(null, key, inputType)}
|
||||
onChange={this.handleInputChange.bind(null, index, key, inputType)}
|
||||
type={inputType}
|
||||
value={inputValue}
|
||||
/>
|
||||
|
|
|
@ -3,15 +3,16 @@ import Table from '../../components/table';
|
|||
|
||||
const UserModel = {
|
||||
name: {type: String},
|
||||
twitter: {type: String},
|
||||
twitter: {type: String, title: '@twitter'},
|
||||
birthdate: {type: Date},
|
||||
cats: {type: Number},
|
||||
cats: {type: Number, onChange (...args) { console.log('changes:', ...args); } },
|
||||
dogs: {type: Number},
|
||||
owner: {type: Boolean}
|
||||
owner: {type: Boolean },
|
||||
image: {title: <img src='https://pbs.twimg.com/profile_images/579415786994839552/aE3uhPPr.jpg' width={50} height={50}/>}
|
||||
};
|
||||
|
||||
const users = [
|
||||
{name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
|
||||
{name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1, image: <img src='http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg' width={50} height={50}/>},
|
||||
{name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, owner: true}
|
||||
];
|
||||
|
||||
|
|
Loading…
Reference in New Issue