Sha256: e8d9762f53f768ae38e3d6738058e1412013a285f330022b1bfd490f5e1b7825
Contents?: true
Size: 1.88 KB
Versions: 18
Compression:
Stored size: 1.88 KB
Contents
import React from "react";
import PropTypes from "prop-types";
import DateRangeSelect from "./DateRangeSelect";
export default class PageDates extends React.Component {
constructor(props) {
super(props);
this.state = {
has_dates: (props.starts_at ? true : false),
all_day: !!props.all_day
};
this.toggleAllDay = this.toggleAllDay.bind(this);
this.toggleHasDates = this.toggleHasDates.bind(this);
}
toggleHasDates() {
this.setState({ has_dates: !this.state.has_dates });
}
toggleAllDay() {
this.setState({ all_day: !this.state.all_day });
}
timeToString(time) {
return time.toTimeString().slice(0, 5);
}
render() {
return (
<div className="page-dates field">
<input type="hidden"
name="page[all_day]"
value={(this.state.has_dates && this.state.all_day) ? "1" : "0"} />
<label>
Dates
</label>
<div className="toggles">
<label className="has-dates-toggle">
<input type="checkbox"
checked={this.state.has_dates}
onChange={this.toggleHasDates} />
Enabled
</label>
<label className={!this.state.has_dates && "disabled"}>
<input type="checkbox"
disabled={!this.state.has_dates}
checked={this.state.all_day}
onChange={this.toggleAllDay} />
All day event
</label>
</div>
<DateRangeSelect objectName="page"
startsAt={this.props.starts_at}
endsAt={this.props.ends_at}
disabled={!this.state.has_dates}
disableTime={this.state.all_day}
/>
</div>
);
}
}
PageDates.propTypes = {
starts_at: PropTypes.string,
ends_at: PropTypes.string,
all_day: PropTypes.bool
};
Version data entries
18 entries across 18 versions & 1 rubygems