sprinklers3/client/components/ScheduleView/TimeInput.tsx

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

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

const HTML_TIME_INPUT_FORMAT = "HH:mm";

function timeOfDayToHtmlDateInput(tod: TimeOfDay): string {
  return moment(tod).format(HTML_TIME_INPUT_FORMAT);
}

export interface TimeInputProps {
  value: TimeOfDay;
  index: number;
  onChange: (newValue: TimeOfDay, index: number) => void;
}

export interface TimeInputState {
  rawValue: string;
  lastTime: TimeOfDay | null;
}

export default class TimeInput extends React.Component<
  TimeInputProps,
  TimeInputState
> {
  static getDerivedStateFromProps(
    props: TimeInputProps,
    state: TimeInputState
  ): Partial<TimeInputState> {
    if (!TimeOfDay.equals(props.value, state.lastTime)) {
      return {
        lastTime: props.value,
        rawValue: timeOfDayToHtmlDateInput(props.value)
      };
    }
    return {};
  }

  constructor(p: any) {
    super(p);
    this.state = { rawValue: "", lastTime: null };
  }

  render() {
    return (
      <Input
        type="time"
        value={this.state.rawValue}
        onChange={this.onChange}
        onBlur={this.onBlur}
      />
    );
  }

  private onChange = (
    e: React.SyntheticEvent<HTMLInputElement>,
    data: InputOnChangeData
  ) => {
    this.setState({
      rawValue: data.value
    });
  };

  private onBlur: React.FocusEventHandler<HTMLInputElement> = e => {
    const m = moment(this.state.rawValue, HTML_TIME_INPUT_FORMAT);
    if (m.isValid()) {
      this.props.onChange(TimeOfDay.fromMoment(m), this.props.index);
    } else {
      this.setState({ rawValue: timeOfDayToHtmlDateInput(this.props.value) });
    }
  };
}