Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
class DeliveryRow extends React.Component {
constructor(props) {
super(props);
this.state = {
isBookable: this.props.isBookable,
isBooked: this.props.isBooked,
bookedDate: this.props.details.booked_date,
};
this.updateBookable = this.updateBookable.bind(this);
this.updateBooked = this.updateBooked.bind(this);
this.handleDateChange = this.handleDateChange.bind(this);
}
componentWillMount() {
console.log('...componentWillMount function')
console.log(this.state.isBookable);
if(this.state.isBookable) {
console.log('bookable');
this.setState({ isBookedDisabled: false });
} else {
console.log('not bookable');
this.setState({ isBookedDisabled: true });
}
}
updateBookable() {
console.log('...updateBookable() function');
console.log(this.state.isBookable);
this.setState(prevState => ({ isBookable: !prevState.isBookable }));
if(this.state.isBookable) {
console.log('bookable');
console.log(this.state.isBookable);
// this.setState({ isBookedDisabled: false });
} else {
console.log('not bookable');
// this.setState({ isBookedDisabled: true });
// this.setState({ isBooked: false });
}
}
updateBooked() {
}
handleDateChange = date => {
this.setState({ bookedDate: date });
};
render() {
const details = this.props.details;
const isSelected = this.props.isSelected;
const isBookable = this.state.isBookable;
const isBooked = this.state.isBooked;
const isBookedDisabled = this.state.isBookedDisabled;
return (
<TableRow key={details.id}>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} onClick={this.props.selectedAction} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
{details.consignment}
</TableCell>
<TableCell>
{details.order_ref}
</TableCell>
<TableCell><Checkbox checked={isBookable} onClick={this.updateBookable} /></TableCell>
<TableCell>
{isBookedDisabled ? <Checkbox checked={isBooked} onClick={this.updateBooked} disabled /> : <Checkbox checked={isBooked} onClick={this.updateBooked}/>}
</TableCell>
<TableCell>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<MuiThemeProvider theme={materialTheme}>
<div className="picker">
<DatePicker
keyboard
clearable
format="Do MMM YYYY"
value={this.state.bookedDate}
onChange={this.handleDateChange}
InputProps={{ disableUnderline: true }}
/>
</div>
</MuiThemeProvider>
</MuiPickersUtilsProvider>
</TableCell>
</TableRow>
);
}
}
DeliveryRow.propTypes = {
details: PropTypes.object,
isSelected: PropTypes.bool,
};
export default DeliveryRow;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.