sprinklers3/app/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 rawValue = props.date == null ? "" :
                moment(props.date).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 {
            let dayString: string;
            if (date) {
                const format = (date.year === 0) ? "M/D" : "l";
                dayString = moment(date).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));
    }

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