Use new JSX transform in all sample and test suites

wojtekmaj · Sep 30, 2023 · 3409099 · 3409099
1 parent 0f13856
commit 3409099
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 70 deletions.
diff --git a/test/LocaleOptions.tsx b/test/LocaleOptions.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 type LocaleOptionsProps = {
   locale: string | undefined;

diff --git a/test/Test.tsx b/test/Test.tsx
@@ -1,110 +1,226 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import Clock from 'react-clock';
-import 'react-clock/dist/Clock.css';
-import { useSetInterval } from '@wojtekmaj/react-hooks';
-import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils';
+import { useCallback, useState } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
 
+import DateBoundariesOptions from './DateBoundariesOptions.js';
+import MaxDetailOptions from './MaxDetailOptions.js';
+import MinDetailOptions from './MinDetailOptions.js';
 import LocaleOptions from './LocaleOptions.js';
 import ValueOptions from './ValueOptions.js';
 import ViewOptions from './ViewOptions.js';
 
-import './Test.css';
+import { formatDate } from './shared/dateFormatter.js';
 
-import type { LooseValue } from './shared/types.js';
+import './Test.css';
 
-/* eslint-disable no-console */
+import type { LooseValue, Value, View } from './shared/types.js';
 
 const now = new Date();
 
-export default function Test() {
-  const [locale, setLocale] = useState<string>();
-  const [renderHourMarks, setRenderHourMarks] = useState(true);
-  const [renderMinuteHand, setRenderMinuteHand] = useState(true);
-  const [renderMinuteMarks, setRenderMinuteMarks] = useState(true);
-  const [renderNumbers, setRenderNumbers] = useState(true);
-  const [renderSecondHand, setRenderSecondHand] = useState(true);
-  const [useMillisecondPrecision, setUseMillisecondPrecision] = useState(false);
-  const [value, setValue] = useState<LooseValue>(now);
-
-  const updateDate = useCallback(() => {
-    setValue(new Date());
-  }, []);
-
-  useSetInterval(updateDate, 1000);
-
-  useEffect(() => {
-    if (!useMillisecondPrecision) {
-      return;
-    }
+const tileClassName = ({ date, view }: { date: Date; view: View }) => {
+  switch (view) {
+    case 'month':
+      return date.getDay() === 0 || date.getDay() === 6 ? 'red' : null;
+    case 'year':
+      return date.getMonth() === 5 || date.getMonth() === 6 ? 'green' : null;
+    case 'decade':
+      return date.getFullYear() === 1991 ? 'pink' : null;
+    case 'century':
+      return date.getFullYear() === 1991 ? 'brown' : null;
+    default:
+      return null;
+  }
+};
+
+const tileContent = ({ date, view }: { date: Date; view: View }) => {
+  switch (view) {
+    case 'month':
+      return date.getDay() === 0 ? (
+        <p>
+          <small>{"It's Sunday!"}</small>
+        </p>
+      ) : null;
+    case 'year':
+      return date.getMonth() === 5 || date.getMonth() === 6 ? (
+        <p>
+          <small>Holidays</small>
+        </p>
+      ) : null;
+    case 'decade':
+      return date.getFullYear() === 1991 ? (
+        <p>
+          <small>{"Developer's birthday!"}</small>
+        </p>
+      ) : null;
+    case 'century':
+      return date.getFullYear() === 1991 ? (
+        <p>
+          <small>{"The 90's"}</small>
+        </p>
+      ) : null;
+    default:
+      return null;
+  }
+};
 
-    let animationFrame: number;
+const nineteenNinetyFive = new Date(1995, now.getUTCMonth() + 1, 15, 12);
+const fifteenthOfNextMonth = new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12);
 
-    function callback() {
-      updateDate();
-      animationFrame = requestAnimationFrame(callback);
-    }
+/* eslint-disable no-console */
 
-    animationFrame = requestAnimationFrame(callback);
+type ReturnValue = 'start' | 'end' | 'range';
 
-    return () => {
-      cancelAnimationFrame(animationFrame);
-    };
-  }, [updateDate, useMillisecondPrecision]);
+export default function Test() {
+  const [activeStartDate, setActiveStartDate] = useState<Date | undefined>(
+    new Date(now.getFullYear(), now.getMonth()),
+  );
+  const [locale, setLocale] = useState<string>();
+  const [maxDate, setMaxDate] = useState<Date | undefined>(fifteenthOfNextMonth);
+  const [maxDetail, setMaxDetail] = useState<View>('month');
+  const [minDate, setMinDate] = useState<Date | undefined>(nineteenNinetyFive);
+  const [minDetail, setMinDetail] = useState<View>('century');
+  const [returnValue /* , setReturnValue */] = useState<ReturnValue>('start');
+  const [selectRange, setSelectRange] = useState(false);
+  const [showDoubleView, setShowDoubleView] = useState(false);
+  const [showFixedNumberOfWeeks, setShowFixedNumberOfWeeks] = useState(false);
+  const [showNeighboringMonth, setShowNeighboringMonth] = useState(true);
+  const [showWeekNumbers, setShowWeekNumbers] = useState(false);
+  const [value, setValue] = useState<LooseValue>(now);
+  const [view, setView] = useState<View>('month');
+
+  const onViewOrDateChange = useCallback(
+    ({
+      activeStartDate: nextActiveStartDate,
+      view: nextView,
+    }: {
+      activeStartDate: Date | null;
+      view: View;
+    }) => {
+      console.log('Changed view to', nextView, nextActiveStartDate);
+      setActiveStartDate(nextActiveStartDate || undefined);
+      setView(nextView);
+    },
+    [],
+  );
 
   function renderDebugInfo() {
-    const renderTime = (timeToRender: string | Date | null) => {
-      if (timeToRender instanceof Date) {
-        return getHoursMinutesSeconds(timeToRender);
+    const renderDate = (dateToRender: string | Date | null) => {
+      if (dateToRender instanceof Date) {
+        return formatDate(locale, dateToRender);
       }
-      return timeToRender;
+      return dateToRender;
     };
 
-    return <p>Current time: {value ? renderTime(value) : '(none)'}</p>;
+    if (Array.isArray(value)) {
+      return <p>{`Chosen date range: ${renderDate(value[0])} - ${renderDate(value[1])}`}</p>;
+    }
+
+    return <p>{`Chosen date: ${value ? renderDate(value) : '(none)'}`}</p>;
   }
 
+  const commonProps = {
+    className: 'myCustomCalendarClassName',
+    locale,
+    maxDate,
+    maxDetail,
+    minDate,
+    minDetail,
+    onActiveStartDateChange: onViewOrDateChange,
+    onChange: (value: Value) => setValue(value),
+    onClickWeekNumber: (weekNumber: number, date: Date) => {
+      console.log('Clicked week number', weekNumber, date);
+    },
+    onDrillDown: ({
+      activeStartDate: nextActiveStartDate,
+      view: nextView,
+    }: {
+      activeStartDate: Date | null;
+      view: View;
+    }) => {
+      console.log('Drilled down to', nextView, nextActiveStartDate);
+    },
+    onDrillUp: ({
+      activeStartDate: nextActiveStartDate,
+      view: nextView,
+    }: {
+      activeStartDate: Date | null;
+      view: View;
+    }) => {
+      console.log('Drilled up to', nextView, nextActiveStartDate);
+    },
+    onViewChange: onViewOrDateChange,
+    returnValue,
+    selectRange,
+    showDoubleView,
+    showFixedNumberOfWeeks,
+    showNeighboringMonth,
+    showWeekNumbers,
+    tileClassName,
+    tileContent,
+  };
+
   return (
     <div className="Test">
       <header>
-        <h1>react-clock test page</h1>
+        <h1>react-calendar test page</h1>
       </header>
       <div className="Test__container">
         <aside className="Test__container__options">
+          <MinDetailOptions
+            maxDetail={maxDetail}
+            minDetail={minDetail}
+            setMinDetail={setMinDetail}
+          />
+          <MaxDetailOptions
+            maxDetail={maxDetail}
+            minDetail={minDetail}
+            setMaxDetail={setMaxDetail}
+          />
+          <DateBoundariesOptions
+            maxDate={maxDate}
+            minDate={minDate}
+            setMaxDate={setMaxDate}
+            setMinDate={setMinDate}
+          />
           <LocaleOptions locale={locale} setLocale={setLocale} />
-          <ValueOptions setValue={setValue} value={value} />
+          <ValueOptions
+            selectRange={selectRange}
+            setSelectRange={setSelectRange}
+            setValue={setValue}
+            value={value}
+          />
           <ViewOptions
-            renderHourMarks={renderHourMarks}
-            renderMinuteHand={renderMinuteHand}
-            renderMinuteMarks={renderMinuteMarks}
-            renderNumbers={renderNumbers}
-            renderSecondHand={renderSecondHand}
-            useMillisecondPrecision={useMillisecondPrecision}
-            setRenderHourMarks={setRenderHourMarks}
-            setRenderMinuteHand={setRenderMinuteHand}
-            setRenderMinuteMarks={setRenderMinuteMarks}
-            setRenderNumbers={setRenderNumbers}
-            setRenderSecondHand={setRenderSecondHand}
-            setUseMillisecondPrecision={setUseMillisecondPrecision}
+            setShowDoubleView={setShowDoubleView}
+            setShowFixedNumberOfWeeks={setShowFixedNumberOfWeeks}
+            setShowNeighboringMonth={setShowNeighboringMonth}
+            setShowWeekNumbers={setShowWeekNumbers}
+            showDoubleView={showDoubleView}
+            showFixedNumberOfWeeks={showFixedNumberOfWeeks}
+            showNeighboringMonth={showNeighboringMonth}
+            showWeekNumbers={showWeekNumbers}
           />
         </aside>
         <main className="Test__container__content">
           <form
             onSubmit={(event) => {
               event.preventDefault();
-              console.error('Clock triggered submitting the form.');
+              console.error('Calendar triggered submitting the form.');
               console.log(event);
             }}
           >
-            <Clock
-              className="myCustomClockClassName"
-              locale={locale}
-              renderHourMarks={renderHourMarks}
-              renderMinuteHand={renderMinuteHand}
-              renderMinuteMarks={renderMinuteMarks}
-              renderNumbers={renderNumbers}
-              renderSecondHand={renderSecondHand}
-              size={200}
-              useMillisecondPrecision={useMillisecondPrecision}
+            <p>Controlled:</p>
+            <Calendar
+              {...commonProps}
+              activeStartDate={activeStartDate}
               value={value}
+              view={view}
+            />
+            <p>Uncontrolled:</p>
+            <Calendar
+              {...commonProps}
+              defaultActiveStartDate={activeStartDate}
+              defaultValue={value}
+              defaultView={view}
             />
           </form>
           {renderDebugInfo()}

diff --git a/test/index.tsx b/test/index.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import Test from './Test.js';