Add clampSelectedValue in date and datetime mode (#54)

* Upgrade deps

* Add clamp function to core

* Create cold-flies-burn.md

* Replace toBeTruthy() with toBe(true)

* Add clampSelectedValue in date and datetime mode

* Create green-rocks-compare.md

* Clamp calendar value with clamp function

* Update DatePicker.tsx

.changeset/cold-flies-burn.md

@@ -0,0 +1,5 @@
+---
+"@tempocal/core": minor
+---
+
+Add clamp function to core

.changeset/green-rocks-compare.md

@@ -0,0 +1,6 @@
+---
+"@tempocal/react": minor
+"@tempocal/www": minor
+---
+
+Add clampSelectedValue in date and datetime mode

packages/core/package.json

@@ -24,7 +24,7 @@
     "@js-temporal/polyfill": "^0.4.1",
     "tsup": "^5.12.5",
     "vite": "^2.9.5",
-    "vitest": "^0.8.5"
+    "vitest": "^0.9.3"
   },
   "peerDependencies": {
     "@js-temporal/polyfill": ">=0.4.0"

packages/core/src/clamp.ts

@@ -0,0 +1,25 @@
+import { Temporal } from "@js-temporal/polyfill";
+
+export function clamp<
+  Value extends Temporal.PlainDate | Temporal.PlainDateTime
+>(value: Value, minValue?: Value, maxValue?: Value) {
+  if (
+    minValue &&
+    Temporal[
+      value instanceof Temporal.PlainDate ? "PlainDate" : "PlainDateTime"
+    ].compare(value, minValue) < 0
+  ) {
+    return minValue;
+  }
+
+  if (
+    maxValue &&
+    Temporal[
+      value instanceof Temporal.PlainDate ? "PlainDate" : "PlainDateTime"
+    ].compare(value, maxValue) > 0
+  ) {
+    return maxValue;
+  }
+
+  return value;
+}

packages/core/tempocal-core.ts

@@ -1,3 +1,4 @@
+export * from "./src/clamp";
 export * from "./src/dateToTemporal";
 export * from "./src/getCalendarMonthDateRange";
 export * from "./src/getFirstDayOfWeek";

packages/core/test/clamp.test.ts

@@ -0,0 +1,281 @@
+import { Temporal } from "@js-temporal/polyfill";
+import { expect, test } from "vitest";
+import { clamp } from "../src/clamp";
+
+test("clamp (PlainDate, unbounded)", () => {
+  const result = clamp(
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDate).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDate.from({
+        year: 2022,
+        month: 2,
+        day: 2,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDate, before min)", () => {
+  const result = clamp(
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 1,
+    }),
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDate).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDate.from({
+        year: 2022,
+        month: 2,
+        day: 2,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDate, after min)", () => {
+  const result = clamp(
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 3,
+    }),
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDate).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDate.from({
+        year: 2022,
+        month: 2,
+        day: 3,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDate, before max)", () => {
+  const result = clamp(
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+    }),
+    undefined,
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 4,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDate).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDate.from({
+        year: 2022,
+        month: 2,
+        day: 2,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDate, after max)", () => {
+  const result = clamp(
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 5,
+    }),
+    undefined,
+    Temporal.PlainDate.from({
+      year: 2022,
+      month: 2,
+      day: 4,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDate).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDate.from({
+        year: 2022,
+        month: 2,
+        day: 4,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDateTime, unbounded)", () => {
+  const result = clamp(
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 2,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDateTime).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDateTime.from({
+        year: 2022,
+        month: 2,
+        day: 2,
+        hour: 2,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDateTime, before min)", () => {
+  const result = clamp(
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 1,
+    }),
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 2,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDateTime).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDateTime.from({
+        year: 2022,
+        month: 2,
+        day: 2,
+        hour: 2,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDateTime, after min)", () => {
+  const result = clamp(
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 3,
+    }),
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 2,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDateTime).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDateTime.from({
+        year: 2022,
+        month: 2,
+        day: 2,
+        hour: 3,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDateTime, before max)", () => {
+  const result = clamp(
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 1,
+    }),
+    undefined,
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 2,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDateTime).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDateTime.from({
+        year: 2022,
+        month: 2,
+        day: 2,
+        hour: 1,
+      })
+    )
+  ).toBe(true);
+});
+
+test("clamp (PlainDateTime, after max)", () => {
+  const result = clamp(
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 3,
+    }),
+    undefined,
+    Temporal.PlainDateTime.from({
+      year: 2022,
+      month: 2,
+      day: 2,
+      hour: 2,
+    })
+  );
+
+  expect(result instanceof Temporal.PlainDateTime).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDateTime.from({
+        year: 2022,
+        month: 2,
+        day: 2,
+        hour: 2,
+      })
+    )
+  ).toBe(true);
+});

packages/core/test/dateToTemporal.test.ts

@@ -17,5 +17,5 @@ test("dateToTemporal", () => {
         millisecond: 600,
       })
     )
-  ).toBeTruthy();
+  ).toBe(true);
 });

packages/core/test/getCalendarMonthDateRange.test.ts

@@ -21,7 +21,7 @@ test("getCalendarMonthDateRange (without rollover)", () => {
         day: 1,
       })
     )
-  ).toBeTruthy();
+  ).toBe(true);
 
   expect(
     end.equals(
@@ -31,7 +31,7 @@ test("getCalendarMonthDateRange (without rollover)", () => {
         day: 31,
       })
     )
-  ).toBeTruthy();
+  ).toBe(true);
 });
 
 test("getCalendarMonthDateRange (with rollover)", () => {
@@ -53,7 +53,7 @@ test("getCalendarMonthDateRange (with rollover)", () => {
         day: 26,
       })
     )
-  ).toBeTruthy();
+  ).toBe(true);
 
   expect(
     end.equals(
@@ -63,5 +63,5 @@ test("getCalendarMonthDateRange (with rollover)", () => {
         day: 6,
       })
     )
-  ).toBeTruthy();
+  ).toBe(true);
 });

packages/core/test/getFirstDayOfWeek.test.ts

@@ -22,7 +22,7 @@ test("getFirstDayOfWeek (startOfWeek = 7)", () => {
         day: 27,
       })
     )
-  ).toBeTruthy();
+  ).toBe(true);
 });
 
 test("getFirstDayOfWeek (startOfWeek = 6)", () => {
@@ -45,5 +45,5 @@ test("getFirstDayOfWeek (startOfWeek = 6)", () => {
         day: 26,
       })
     )
-  ).toBeTruthy();
+  ).toBe(true);
 });

packages/core/test/getMonthEndDate.test.ts

@@ -19,5 +19,5 @@ test("getMonthEndDate", () => {
         day: 31,
       })
     )
-  ).toBeTruthy();
+  ).toBe(true);
 });