sprinklers3/client/components/ScheduleView/index.tsx

import { observer } from "mobx-react";
import * as React from "react";
import { Form } from "semantic-ui-react";

import {
  DateOfYear,
  Schedule,
  TimeOfDay,
  Weekday
} from "@common/sprinklersRpc";
import ScheduleDate from "./ScheduleDate";
import ScheduleTimes from "./ScheduleTimes";
import WeekdaysView from "./WeekdaysView";

import "@client/styles/ScheduleView";
import { action } from "mobx";

export interface ScheduleViewProps {
  label?: string | React.ReactNode | undefined;
  schedule: Schedule;
  editing?: boolean;
}

@observer
export default class ScheduleView extends React.Component<ScheduleViewProps> {
  render() {
    const { schedule, label } = this.props;
    const editing = this.props.editing || false;

    let labelNode: React.ReactNode;
    if (typeof label === "string") {
      labelNode = <label>{label}</label>;
    } else if (label != null) {
      labelNode = label;
    }

    return (
      <Form.Field className="scheduleView">
        {labelNode}
        <ScheduleTimes
          times={schedule.times}
          editing={editing}
          onChange={this.updateTimes}
        />
        <WeekdaysView
          weekdays={schedule.weekdays}
          editing={editing}
          onChange={this.updateWeekdays}
        />
        <ScheduleDate
          label="From"
          date={schedule.from}
          editing={editing}
          onChange={this.updateFromDate}
        />
        <ScheduleDate
          label="To"
          date={schedule.to}
          editing={editing}
          onChange={this.updateToDate}
        />
      </Form.Field>
    );
  }

  @action.bound
  private updateTimes(newTimes: TimeOfDay[]) {
    this.props.schedule.times = newTimes;
  }

  @action.bound
  private updateWeekdays(newWeekdays: Weekday[]) {
    this.props.schedule.weekdays = newWeekdays;
  }

  @action.bound
  private updateFromDate(newFromDate: DateOfYear | null) {
    this.props.schedule.from = newFromDate;
  }

  @action.bound
  private updateToDate(newToDate: DateOfYear | null) {
    this.props.schedule.to = newToDate;
  }
}