GeneIT/geneit_app/src/widgets/forms/DateInput.tsx

import { Stack, TextField, Typography } from "@mui/material";
import { NumberConstraint, ServerApi } from "../../api/ServerApi";
import { DateValue, fmtDate } from "../../api/MemberApi";
import { PropEdit } from "./PropEdit";

export function DateInput(p: {
  id: string;
  label: string;
  editable: boolean;
  value?: DateValue;
  onValueChange: (newVal: DateValue) => void;
}): React.ReactElement {
  if (!p.editable) {
    if (!p.value) return <></>;

    return (
      <PropEdit editable={false} label={p.label} value={fmtDate(p.value!)} />
    );
  }

  return (
    <Stack direction={"row"}>
      <Typography
        variant="caption"
        style={{ display: "flex", alignItems: "center", flex: 10 }}
      >
        {p.label}
      </Typography>
      <TextField
        required
        id={`${p.id}-day`}
        label="Jour"
        value={p.value?.day}
        error={isValErr(p.value?.day, ServerApi.Config.constraints.date_day)}
        variant="filled"
        style={{ flex: 20 }}
        type="number"
        onChange={(e) => {
          const val = Number(e.target.value);
          p.onValueChange({
            day: val > 0 ? val : undefined,
            month: p.value?.month,
            year: p.value?.year,
          });
        }}
        inputProps={{
          min: ServerApi.Config.constraints.date_day.min,
          max: ServerApi.Config.constraints.date_day.max,
        }}
      />
      <Separator />
      <TextField
        required
        id={`${p.id}-month`}
        label="Mois"
        value={p.value?.month}
        error={isValErr(
          p.value?.month,
          ServerApi.Config.constraints.date_month
        )}
        variant="filled"
        style={{ flex: 20 }}
        type="number"
        onChange={(e) => {
          const val = Number(e.target.value);
          p.onValueChange({
            day: p.value?.day,
            month: val > 0 ? val : undefined,
            year: p.value?.year,
          });
        }}
        inputProps={{
          min: ServerApi.Config.constraints.date_month.min,
          max: ServerApi.Config.constraints.date_month.max,
        }}
      />
      <Separator />
      <TextField
        required
        id={`${p.id}-year`}
        label="Année"
        value={p.value?.year}
        onChange={(e) => {
          const val = Number(e.target.value);
          p.onValueChange({
            day: p.value?.day,
            month: p.value?.month,
            year: val > 0 ? val : undefined,
          });
        }}
        error={isValErr(p.value?.year, ServerApi.Config.constraints.date_year)}
        variant="filled"
        style={{ flex: 30 }}
        type="number"
        inputProps={{
          min: ServerApi.Config.constraints.date_year.min,
          max: ServerApi.Config.constraints.date_year.max,
        }}
      />
    </Stack>
  );
}

function Separator(): React.ReactElement {
  return (
    <Typography
      variant="body2"
      style={{
        margin: "2px",
        display: "flex",
        alignItems: "center",
        flex: 2,
        justifyContent: "center",
      }}
    >
      /
    </Typography>
  );
}

function isValErr(val: number | undefined, c: NumberConstraint): boolean {
  return (val && (val < c.min || val > c.max)) || false;
}