input[type="date"] とよく似た何かを作ってみる #

import { Dayjs } from "dayjs";
import { Typography } from "ingred-ui";
import { ChangeEvent, forwardRef, KeyboardEvent, memo, RefObject } from "react";
import { InputContainer, InputElement } from "./styled";
import { Selected, YMD } from "../types";

type Props = {
  date: Dayjs;
  focus: boolean;
  valid: boolean;
  selected: Selected;
  yearRef: RefObject<HTMLInputElement>;
  monthRef: RefObject<HTMLInputElement>;
  dayRef: RefObject<HTMLInputElement>;
  onFocus: () => void;
  onBlur: () => void;
  onKeyDown: (type: YMD) => (event: KeyboardEvent<HTMLInputElement>) => void; // for developer
  handleChange: (type: YMD) => (event: ChangeEvent<HTMLInputElement>) => void; // for user
};

const Input = forwardRef<HTMLDivElement, Props>(
  (
    {
      focus,
      valid,
      selected,
      yearRef,
      monthRef,
      dayRef,
      onFocus,
      onBlur,
      onKeyDown,
      handleChange,
    },
    ref
  ) => (
    <InputContainer ref={ref} focus={focus} valid={valid}>
      <InputElement
        placeholder="yyyy"
        ref={yearRef}
        count={4}
        value={selected.y}
        maxLength={4}
        pattern="[0-9]*"
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={handleChange("y")}
        onKeyDown={onKeyDown("y")}
      />
      <Typography component="span" color="gray">
        /
      </Typography>
      <InputElement
        placeholder="mm"
        ref={monthRef}
        count={2}
        value={selected.m}
        maxLength={2}
        pattern="[0-9]*"
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={handleChange("m")}
        onKeyDown={onKeyDown("m")}
      />
      <Typography component="span" color="gray">
        /
      </Typography>
      <InputElement
        placeholder="dd"
        ref={dayRef}
        count={2}
        value={selected.d}
        maxLength={2}
        pattern="[0-9]*"
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={handleChange("d")}
        onKeyDown={onKeyDown("d")}
      />
    </InputContainer>
  )
);

export const CommonInput = memo(Input);

import { Dayjs } from "dayjs";
import { FC } from "react";
import { useInput } from "./hooks";
import { CommonInput } from "./CommonInput";

type Props = {
  date: Dayjs;
  onChange?: (date: Dayjs) => void;
};

export const Input: FC<Props> = ({ date, onChange }) => {
  const {
    ref,
    yearRef,
    monthRef,
    dayRef,
    focus,
    selected,
    valid,
    handleChange,
    onFocus,
    onBlur,
    onKeyDown,
  } = useInput(date, onChange);

  return (
    <CommonInput
      ref={ref}
      date={date}
      focus={focus}
      valid={valid}
      selected={selected}
      yearRef={yearRef}
      monthRef={monthRef}
      dayRef={dayRef}
      handleChange={handleChange}
      onFocus={onFocus}
      onBlur={onBlur}
      onKeyDown={onKeyDown}
    />
  );
};

import { Dayjs } from "dayjs";
import { Flex, Spacer, Typography } from "ingred-ui";
import { FC } from "react";
import { CommonInput } from "./CommonInput";
import { AllowedKeys } from "../constants";
import { useInput } from "./hooks";
import { Range } from "../types";

type Props = {
  date: Range;
  onChange: ({ startDate, endDate }: Range) => void;
};

export const InputRange: FC<Props> = ({ date, onChange }) => {
  const handleChangeStartDate = (newDate: Dayjs) => {
    onChange({ ...date, startDate: newDate });
  };

  const handleChangeEndDate = (newDate: Dayjs) => {
    onChange({ ...date, endDate: newDate });
  };

  const handleStartKeyDown = (k: AllowedKeys) => {
    if (k === AllowedKeys.ArrowRight) {
      endYearRef.current?.setSelectionRange(0, 0);
      setTimeout(() => {
        endYearRef.current?.focus();
      }, 0);
    }
  };

  const handleEndKeyDown = (k: AllowedKeys) => {
    if (k === AllowedKeys.ArrowLeft) {
      startDayRef.current?.setSelectionRange(
        startDayRef.current?.value.length,
        startDayRef.current?.value.length
      );
      setTimeout(() => {
        startDayRef.current?.focus();
      }, 0);
    }
  };

  // 開始日付用
  const {
    ref: startRef,
    yearRef: startYearRef,
    monthRef: startMonthRef,
    dayRef: startDayRef,
    focus: startFocus,
    selected: startSelected,
    valid: startValid,
    handleChange: handleChangeStart,
    onFocus: onFocusStart,
    onBlur: onBlurStart,
    onKeyDown: onKeyDownStart,
  } = useInput(date.startDate, handleChangeStartDate, handleStartKeyDown);

  // 終了日付用
  const {
    ref: endRef,
    yearRef: endYearRef,
    monthRef: endMonthRef,
    dayRef: endDayRef,
    focus: endFocus,
    selected: endSelected,
    valid: endValid,
    handleChange: handleChangeEnd,
    onFocus: onFocusEnd,
    onBlur: onBlurEnd,
    onKeyDown: onKeyDownEnd,
  } = useInput(date.endDate, handleChangeEndDate, handleEndKeyDown);

  return (
    <Flex display="flex">
      <CommonInput
        ref={startRef}
        date={date.startDate}
        focus={startFocus}
        valid={startValid}
        selected={startSelected}
        yearRef={startYearRef}
        monthRef={startMonthRef}
        dayRef={startDayRef}
        handleChange={handleChangeStart}
        onFocus={onFocusStart}
        onBlur={onBlurStart}
        onKeyDown={onKeyDownStart}
      />
      <Spacer pr={1} pl={1}>
        <Typography component="span" color="gray">
          -
        </Typography>
      </Spacer>
      <CommonInput
        ref={endRef}
        date={date.endDate}
        focus={endFocus}
        valid={endValid}
        selected={endSelected}
        yearRef={endYearRef}
        monthRef={endMonthRef}
        dayRef={endDayRef}
        handleChange={handleChangeEnd}
        onFocus={onFocusEnd}
        onBlur={onBlurEnd}
        onKeyDown={onKeyDownEnd}
      />
    </Flex>
  );
};

import dayjs from "dayjs";
import { createTheme, ThemeProvider, Typography } from "ingred-ui";
import { useState } from "react";
import { Input } from "./Input";

function App() {
  const theme = createTheme();
  const [date, setDate] = useState(dayjs());

  return (
    <ThemeProvider theme={theme}>
      <Typography weight="bold">
        selected: {date.format("YYYY-MM-DD")}
      </Typography>
      <Input date={date} onChange={setDate} />
    </ThemeProvider>
  );
}

export default App;

import dayjs from "dayjs";
import { createTheme, ThemeProvider, Typography } from "ingred-ui";
import { useState } from "react";
import { InputRange } from "./Input";

function App() {
  const theme = createTheme();
  const [dateRange, setDateRange] = useState({
    startDate: dayjs(),
    endDate: dayjs().add(1, "week"),
  });

  return (
    <ThemeProvider theme={theme}>
      <Typography weight="bold">
        selected: {dateRange.startDate.format("YYYY-MM-DD")} -
        {dateRange.endDate.format("YYYY-MM-DD")}
      </Typography>
      <InputRange date={dateRange} onChange={setDateRange} />
    </ThemeProvider>
  );
}

export default App;