mautourco-components 0.2.4 → 0.2.7

package/src/components/molecules/Calendar/TimePicker.tsx

@@ -1,174 +1,174 @@
-import React, { useState, useEffect } from "react";
-
-export interface TimePickerProps {
-  label?: string;
-  hour?: string;
-  minute?: string;
-  meridiem?: "AM" | "PM";
-  state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
-  disabled?: boolean;
-  errorMessage?: string;
-  successMessage?: string;
-  onChange?: (hour: string, minute: string, meridiem: "AM" | "PM") => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-const clampTwoDigits = (val: string) => {
-  return val.replace(/\D/g, "").slice(-2);
-};
-
-const TimePicker: React.FC<TimePickerProps> = ({
-  label = "Time",
-  hour = "",
-  minute = "",
-  meridiem = "AM",
-  state = "default",
-  disabled = false,
-  onChange,
-  onFocus,
-  onBlur,
-}) => {
-  const [localHour, setLocalHour] = useState<string>(hour);
-  const [localMinute, setLocalMinute] = useState<string>(minute);
-  const [localMeridiem, setLocalMeridiem] = useState<"AM" | "PM">(meridiem);
-  const [isFocused, setIsFocused] = useState(false);
-  const [isTyping, setIsTyping] = useState(false);
-
-  // Keep local state in sync when parent props change (e.g. Clear button)
-  useEffect(() => {
-    if (hour !== localHour) setLocalHour(hour);
-  }, [hour]);
-
-  useEffect(() => {
-    if (minute !== localMinute) setLocalMinute(minute);
-  }, [minute]);
-
-  useEffect(() => {
-    if (meridiem !== localMeridiem) setLocalMeridiem(meridiem);
-  }, [meridiem]);
-
-  const finalState = disabled ? "disabled" : state;
-  const displayState =
-    isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
-
-  const emitChange = (h: string, m: string, mm: "AM" | "PM") => {
-    onChange?.(h, m, mm);
-  };
-
-  const handleHourChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const raw = clampTwoDigits(e.target.value);
-    if (raw === "") {
-      setLocalHour("");
-      setIsTyping(true);
-      emitChange("", localMinute, localMeridiem);
-      return;
-    }
-    let num = Number(raw || 0);
-    if (num > 12) num = 12;
-    const val = String(num).padStart(2, "0");
-    setLocalHour(val);
-    setIsTyping(true);
-    emitChange(val, localMinute, localMeridiem);
-  };
-
-  const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const raw = clampTwoDigits(e.target.value);
-    if (raw === "") {
-      setLocalMinute("");
-      setIsTyping(true);
-      emitChange(localHour, "", localMeridiem);
-      return;
-    }
-    let num = Number(raw || 0);
-    if (num > 59) num = 59;
-    const val = String(num).padStart(2, "0");
-    setLocalMinute(val);
-    setIsTyping(true);
-    emitChange(localHour, val, localMeridiem);
-  };
-
-  const handleMeridiemClick = (value: "AM" | "PM") => {
-    if (disabled) return;
-    setLocalMeridiem(value);
-    emitChange(localHour, localMinute, value);
-  };
-
-  const handleFocus = () => {
-    setIsFocused(true);
-    onFocus?.();
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    setIsTyping(false);
-    onBlur?.();
-  };
-
-  return (
-    <div className={`time-picker-wrapper`} data-state={displayState}>
-      {label && <div className="time-picker__div">{label}</div>}
-
-      <div className={`time-picker time-picker--${displayState}`}>
-        <input
-          className="time-picker__input"
-          type="text"
-          inputMode="numeric"
-          pattern="[0-9]*"
-          value={localHour}
-          placeholder="00"
-          onChange={handleHourChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          disabled={disabled}
-          aria-label="Hour"
-          data-unit="hour"
-        />
-
-        <div className="time-picker__colon">:</div>
-
-        <input
-          className="time-picker__input"
-          type="text"
-          inputMode="numeric"
-          pattern="[0-9]*"
-          value={localMinute}
-          placeholder="00"
-          onChange={handleMinuteChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          disabled={disabled}
-          aria-label="Minute"
-          data-unit="minute"
-        />
-
-        <div
-          className="time-picker__am-pm"
-          role="tablist"
-          aria-label="AM/PM selector"
-        >
-          <button
-            type="button"
-            className={`time-picker__seg time-picker__seg--left ${localMeridiem === "AM" ? "time-picker__seg--selected" : ""}`}
-            onClick={() => handleMeridiemClick("AM")}
-            disabled={disabled}
-            aria-pressed={localMeridiem === "AM"}
-          >
-            AM
-          </button>
-          <button
-            type="button"
-            className={`time-picker__seg time-picker__seg--right ${localMeridiem === "PM" ? "time-picker__seg--selected" : ""}`}
-            onClick={() => handleMeridiemClick("PM")}
-            disabled={disabled}
-            aria-pressed={localMeridiem === "PM"}
-          >
-            PM
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TimePicker;
+import React, { useState, useEffect } from "react";
+
+export interface TimePickerProps {
+  label?: string;
+  hour?: string;
+  minute?: string;
+  meridiem?: "AM" | "PM";
+  state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+  disabled?: boolean;
+  errorMessage?: string;
+  successMessage?: string;
+  onChange?: (hour: string, minute: string, meridiem: "AM" | "PM") => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+const clampTwoDigits = (val: string) => {
+  return val.replace(/\D/g, "").slice(-2);
+};
+
+const TimePicker: React.FC<TimePickerProps> = ({
+  label = "Time",
+  hour = "",
+  minute = "",
+  meridiem = "AM",
+  state = "default",
+  disabled = false,
+  onChange,
+  onFocus,
+  onBlur,
+}) => {
+  const [localHour, setLocalHour] = useState<string>(hour);
+  const [localMinute, setLocalMinute] = useState<string>(minute);
+  const [localMeridiem, setLocalMeridiem] = useState<"AM" | "PM">(meridiem);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+
+  // Keep local state in sync when parent props change (e.g. Clear button)
+  useEffect(() => {
+    if (hour !== localHour) setLocalHour(hour);
+  }, [hour]);
+
+  useEffect(() => {
+    if (minute !== localMinute) setLocalMinute(minute);
+  }, [minute]);
+
+  useEffect(() => {
+    if (meridiem !== localMeridiem) setLocalMeridiem(meridiem);
+  }, [meridiem]);
+
+  const finalState = disabled ? "disabled" : state;
+  const displayState =
+    isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+
+  const emitChange = (h: string, m: string, mm: "AM" | "PM") => {
+    onChange?.(h, m, mm);
+  };
+
+  const handleHourChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = clampTwoDigits(e.target.value);
+    if (raw === "") {
+      setLocalHour("");
+      setIsTyping(true);
+      emitChange("", localMinute, localMeridiem);
+      return;
+    }
+    let num = Number(raw || 0);
+    if (num > 12) num = 12;
+    const val = String(num).padStart(2, "0");
+    setLocalHour(val);
+    setIsTyping(true);
+    emitChange(val, localMinute, localMeridiem);
+  };
+
+  const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = clampTwoDigits(e.target.value);
+    if (raw === "") {
+      setLocalMinute("");
+      setIsTyping(true);
+      emitChange(localHour, "", localMeridiem);
+      return;
+    }
+    let num = Number(raw || 0);
+    if (num > 59) num = 59;
+    const val = String(num).padStart(2, "0");
+    setLocalMinute(val);
+    setIsTyping(true);
+    emitChange(localHour, val, localMeridiem);
+  };
+
+  const handleMeridiemClick = (value: "AM" | "PM") => {
+    if (disabled) return;
+    setLocalMeridiem(value);
+    emitChange(localHour, localMinute, value);
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setIsTyping(false);
+    onBlur?.();
+  };
+
+  return (
+    <div className={`time-picker-wrapper`} data-state={displayState}>
+      {label && <div className="time-picker__div">{label}</div>}
+
+      <div className={`time-picker time-picker--${displayState}`}>
+        <input
+          className="time-picker__input"
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          value={localHour}
+          placeholder="00"
+          onChange={handleHourChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          aria-label="Hour"
+          data-unit="hour"
+        />
+
+        <div className="time-picker__colon">:</div>
+
+        <input
+          className="time-picker__input"
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          value={localMinute}
+          placeholder="00"
+          onChange={handleMinuteChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          aria-label="Minute"
+          data-unit="minute"
+        />
+
+        <div
+          className="time-picker__am-pm"
+          role="tablist"
+          aria-label="AM/PM selector"
+        >
+          <button
+            type="button"
+            className={`time-picker__seg time-picker__seg--left ${localMeridiem === "AM" ? "time-picker__seg--selected" : ""}`}
+            onClick={() => handleMeridiemClick("AM")}
+            disabled={disabled}
+            aria-pressed={localMeridiem === "AM"}
+          >
+            AM
+          </button>
+          <button
+            type="button"
+            className={`time-picker__seg time-picker__seg--right ${localMeridiem === "PM" ? "time-picker__seg--selected" : ""}`}
+            onClick={() => handleMeridiemClick("PM")}
+            disabled={disabled}
+            aria-pressed={localMeridiem === "PM"}
+          >
+            PM
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TimePicker;