sprinklers3/client/components/ScheduleView/ScheduleDate.tsx

import * as moment from "moment";
import * as React from "react";
import { Form, Icon, Input, InputOnChangeData } from "semantic-ui-react";

import { DateOfYear } from "@common/sprinklersRpc";

const HTML_DATE_INPUT_FORMAT = "YYYY-MM-DD";

export interface ScheduleDateProps {
  date: DateOfYear | null | undefined;
  label: string | React.ReactNode | undefined;
  editing: boolean | undefined;
  onChange: (newDate: DateOfYear | null) => void;
}

interface ScheduleDateState {
  rawValue: string | "";
  lastDate: DateOfYear | null | undefined;
}

export default class ScheduleDate extends React.Component<
  ScheduleDateProps,
  ScheduleDateState
> {
  static getDerivedStateFromProps(
    props: ScheduleDateProps,
    state: ScheduleDateState
  ): Partial<ScheduleDateState> {
    if (!DateOfYear.equals(props.date, state.lastDate)) {
      const thisYear = moment().year();
      const rawValue =
        props.date == null
          ? ""
          : moment(props.date)
              .year(thisYear)
              .format(HTML_DATE_INPUT_FORMAT);
      return { lastDate: props.date, rawValue };
    }
    return {};
  }

  constructor(p: ScheduleDateProps) {
    super(p);
    this.state = { rawValue: "", lastDate: undefined };
  }

  render() {
    const { date, label, editing } = this.props;

    let dayNode: React.ReactNode;
    if (editing) {
      // tslint:disable-line:prefer-conditional-expression
      let clearIcon: React.ReactNode | undefined;
      if (date) {
        clearIcon = <Icon name="ban" link onClick={this.onClear} />;
      }
      dayNode = (
        <Input
          type="date"
          icon={clearIcon}
          value={this.state.rawValue}
          onChange={this.onChange}
        />
      );
    } else {
      const m = moment(date || "");
      let dayString: string;
      if (m.isValid()) {
        const format = m.year() === 0 ? "M/D" : "l";
        dayString = m.format(format);
      } else {
        dayString = "N/A";
      }
      dayNode = <span>{dayString}</span>;
    }

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

    return (
      <Form.Field inline>
        {labelNode}
        {dayNode}
      </Form.Field>
    );
  }

  private onChange = (
    e: React.SyntheticEvent<HTMLInputElement>,
    data: InputOnChangeData
  ) => {
    const { onChange } = this.props;
    if (!onChange) return;
    const m = moment(data.value, HTML_DATE_INPUT_FORMAT);
    onChange(DateOfYear.fromMoment(m).with({ year: 0 }));
  };

  private onClear = () => {
    const { onChange } = this.props;
    if (!onChange) return;
    onChange(null);
  };
}