Add useTemporalState

packages/react/src/useTemporalState.ts

@@ -0,0 +1,54 @@
+import { Temporal } from "@js-temporal/polyfill";
+import { dateToTemporal } from "@tempocal/core";
+import * as React from "react";
+
+export function useTemporalState<Mode extends "date" | "datetime">(
+  mode: Mode,
+  initialState: Date | Temporal.PlainDateTime | Temporal.PlainDateTimeLike
+): readonly [
+  Mode extends "date" ? Temporal.PlainDate : Temporal.PlainDateTime,
+  (
+    value: Mode extends "date"
+      ? Temporal.PlainDate | Temporal.PlainDateLike
+      : Temporal.PlainDateTime | Temporal.PlainDateTimeLike
+  ) => void
+] {
+  const [temporalValue, setTemporalValue] = React.useState(() => {
+    if (mode === "date") {
+      return initialState instanceof Date
+        ? dateToTemporal(initialState).toPlainDate()
+        : initialState instanceof Temporal.PlainDate
+        ? initialState
+        : Temporal.PlainDate.from(initialState);
+    }
+
+    return initialState instanceof Date
+      ? dateToTemporal(initialState)
+      : initialState instanceof Temporal.PlainDateTime
+      ? initialState
+      : Temporal.PlainDateTime.from(initialState);
+  });
+
+  const updateTemporalValue = React.useCallback(
+    (
+      value: Mode extends "date"
+        ? Temporal.PlainDate | Temporal.PlainDateLike
+        : Temporal.PlainDateTime | Temporal.PlainDateTimeLike
+    ) => {
+      if (
+        value instanceof Temporal.PlainDate ||
+        value instanceof Temporal.PlainDateTime
+      ) {
+        setTemporalValue(value);
+
+        return;
+      }
+
+      setTemporalValue(temporalValue.with(value));
+    },
+    [temporalValue]
+  );
+
+  // @ts-expect-error Help.
+  return [temporalValue, updateTemporalValue];
+}

packages/react/tempocal-react.ts

@@ -1,2 +1,3 @@
 export * from "./src/Calendar";
 export * from "./src/useTempocal";
+export * from "./src/useTemporalState";

packages/react/test/useTempocal.test.ts

@@ -36,16 +36,6 @@ test("useTempocal", () => {
     )
   ).toBe(true);
 
-  expect(
-    result.current.calendarProps.value.equals(
-      Temporal.PlainDate.from({
-        year: 2022,
-        month: 4,
-        day: 15,
-      })
-    )
-  ).toBe(true);
-
   expect(result.current.years).deep.equal([]);
   expect(result.current.months).toHaveLength(12);
   expect(result.current.hours).toHaveLength(24);