From 655bcc8d1590ed6e353c103eaa7526ce53371a30 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Sat, 30 Sep 2023 20:57:22 +0200
Subject: [PATCH] Use new JSX transform in all sample and test suites

---
 test/LocaleOptions.tsx | 305 +++++++++++++++++++++++++++++------------
 test/Test.tsx          | 217 ++++++++++++-----------------
 test/index.tsx         |   2 +-
 3 files changed, 307 insertions(+), 217 deletions(-)

diff --git a/test/LocaleOptions.tsx b/test/LocaleOptions.tsx
index 564c5d8d..15d4f5f7 100644
--- a/test/LocaleOptions.tsx
+++ b/test/LocaleOptions.tsx
@@ -1,104 +1,231 @@
-import React, { useRef } from 'react';
+import { useCallback, useState } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
 
-type LocaleOptionsProps = {
-  locale: string | undefined;
-  setLocale: (locale: string | undefined) => void;
-};
+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';
 
-export default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps) {
-  const customLocale = useRef<HTMLInputElement>(null);
+import { formatDate } from './shared/dateFormatter.js';
 
-  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const { value: nextLocale } = event.target;
+import './Test.css';
 
-    if (nextLocale === 'undefined') {
-      setLocale(undefined);
-    } else {
-      setLocale(nextLocale);
-    }
-  }
+import type { LooseValue, Value, View } from './shared/types.js';
 
-  function onCustomChange(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
+const now = new Date();
 
-    const input = customLocale.current;
-    const { value: nextLocale } = input as HTMLInputElement;
+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;
+  }
+};
 
-    setLocale(nextLocale);
+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;
   }
+};
+
+const nineteenNinetyFive = new Date(1995, now.getUTCMonth() + 1, 15, 12);
+const fifteenthOfNextMonth = new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12);
+
+/* eslint-disable no-console */
+
+type ReturnValue = 'start' | 'end' | 'range';
+
+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 renderDate = (dateToRender: string | Date | null) => {
+      if (dateToRender instanceof Date) {
+        return formatDate(locale, dateToRender);
+      }
+      return dateToRender;
+    };
+
+    if (Array.isArray(value)) {
+      return <p>{`Chosen date range: ${renderDate(value[0])} - ${renderDate(value[1])}`}</p>;
+    }
 
-  function resetLocale() {
-    setLocale(undefined);
+    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 (
-    <fieldset>
-      <legend>Locale</legend>
-
-      <div>
-        <input
-          checked={locale === undefined}
-          id="localeDefault"
-          name="locale"
-          onChange={onChange}
-          type="radio"
-          value="undefined"
-        />
-        <label htmlFor="localeDefault">Auto</label>
-      </div>
-      <div>
-        <input
-          checked={locale === 'en-US'}
-          id="localeEnUS"
-          name="locale"
-          onChange={onChange}
-          type="radio"
-          value="en-US"
-        />
-        <label htmlFor="localeEnUS">en-US</label>
-      </div>
-      <div>
-        <input
-          checked={locale === 'fr-FR'}
-          id="localeFrFR"
-          name="locale"
-          onChange={onChange}
-          type="radio"
-          value="fr-FR"
-        />
-        <label htmlFor="localeFrFR">fr-FR</label>
-      </div>
-      <div>
-        <input
-          checked={locale === 'ar-EG'}
-          id="localeArEG"
-          name="locale"
-          onChange={onChange}
-          type="radio"
-          value="ar-EG"
-        />
-        <label htmlFor="localeArEG">ar-EG</label>
+    <div className="Test">
+      <header>
+        <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
+            selectRange={selectRange}
+            setSelectRange={setSelectRange}
+            setValue={setValue}
+            value={value}
+          />
+          <ViewOptions
+            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('Calendar triggered submitting the form.');
+              console.log(event);
+            }}
+          >
+            <p>Controlled:</p>
+            <Calendar
+              {...commonProps}
+              activeStartDate={activeStartDate}
+              value={value}
+              view={view}
+            />
+            <p>Uncontrolled:</p>
+            <Calendar
+              {...commonProps}
+              defaultActiveStartDate={activeStartDate}
+              defaultValue={value}
+              defaultView={view}
+            />
+          </form>
+          {renderDebugInfo()}
+        </main>
       </div>
-      <form onSubmit={onCustomChange}>
-        <label htmlFor="customLocale">Custom locale:</label>
-        &nbsp;
-        <input
-          key={locale}
-          defaultValue={locale}
-          id="customLocale"
-          name="customLocale"
-          pattern="^[a-z]{2}(-[A-Z0-9]{2,3})?$"
-          ref={customLocale}
-          type="text"
-        />
-        &nbsp;
-        <button style={{ display: 'none' }} type="submit">
-          Set locale
-        </button>
-        <button disabled={locale === undefined} onClick={resetLocale} type="button">
-          Reset locale
-        </button>
-      </form>
-    </fieldset>
+    </div>
   );
 }
diff --git a/test/Test.tsx b/test/Test.tsx
index 75967535..127fbcd1 100644
--- a/test/Test.tsx
+++ b/test/Test.tsx
@@ -1,141 +1,104 @@
-import React, { useRef, useState } from 'react';
-import DatePicker from 'react-date-picker';
-import 'react-date-picker/dist/DatePicker.css';
-import 'react-calendar/dist/Calendar.css';
+import { useRef } from 'react';
 
-import ValidityOptions from './ValidityOptions.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 type { Detail, LooseValue } from './shared/types.js';
+type LocaleOptionsProps = {
+  locale: string | undefined;
+  setLocale: (locale: string | undefined) => void;
+};
 
-const now = new Date();
+export default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps) {
+  const customLocale = useRef<HTMLInputElement>(null);
 
-const ariaLabelProps = {
-  calendarAriaLabel: 'Toggle calendar',
-  clearAriaLabel: 'Clear value',
-  dayAriaLabel: 'Day',
-  monthAriaLabel: 'Month',
-  nativeInputAriaLabel: 'Date',
-  yearAriaLabel: 'Year',
-};
+  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const { value: nextLocale } = event.target;
 
-const placeholderProps = {
-  dayPlaceholder: 'dd',
-  monthPlaceholder: 'mm',
-  yearPlaceholder: 'yyyy',
-};
+    if (nextLocale === 'undefined') {
+      setLocale(undefined);
+    } else {
+      setLocale(nextLocale);
+    }
+  }
 
-const nineteenNinetyFive = new Date(1995, now.getUTCMonth() + 1, 15, 12);
-const fifteenthOfNextMonth = new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12);
+  function onCustomChange(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
 
-/* eslint-disable no-console */
+    const input = customLocale.current;
+    const { value: nextLocale } = input as HTMLInputElement;
 
-type ReturnValue = 'start' | 'end' | 'range';
+    setLocale(nextLocale);
+  }
 
-export default function Test() {
-  const portalContainer = useRef<HTMLDivElement>(null);
-  const [disabled, setDisabled] = useState(false);
-  const [locale, setLocale] = useState<string>();
-  const [maxDate, setMaxDate] = useState<Date | undefined>(fifteenthOfNextMonth);
-  const [maxDetail, setMaxDetail] = useState<Detail>('month');
-  const [minDate, setMinDate] = useState<Date | undefined>(nineteenNinetyFive);
-  const [minDetail, setMinDetail] = useState<Detail>('century');
-  const [renderInPortal, setRenderInPortal] = useState(false);
-  const [returnValue /* , setReturnValue */] = useState<ReturnValue>('start');
-  const [required, setRequired] = useState(true);
-  const [showLeadingZeros, setShowLeadingZeros] = useState(true);
-  const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
-  const [showWeekNumbers, setShowWeekNumbers] = useState(false);
-  const [value, setValue] = useState<LooseValue>(now);
+  function resetLocale() {
+    setLocale(undefined);
+  }
 
   return (
-    <div className="Test">
-      <header>
-        <h1>react-date-picker 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}
-          />
-          <ValidityOptions
-            maxDate={maxDate}
-            minDate={minDate}
-            required={required}
-            setMaxDate={setMaxDate}
-            setMinDate={setMinDate}
-            setRequired={setRequired}
-          />
-          <LocaleOptions locale={locale} setLocale={setLocale} />
-          <ValueOptions setValue={setValue} value={value} />
-          <ViewOptions
-            disabled={disabled}
-            renderInPortal={renderInPortal}
-            setDisabled={setDisabled}
-            setRenderInPortal={setRenderInPortal}
-            setShowLeadingZeros={setShowLeadingZeros}
-            setShowNeighboringMonth={setShowNeighboringMonth}
-            setShowWeekNumbers={setShowWeekNumbers}
-            showLeadingZeros={showLeadingZeros}
-            showNeighboringMonth={showNeighboringMonth}
-            showWeekNumbers={showWeekNumbers}
-          />
-        </aside>
-        <main className="Test__container__content">
-          <form
-            onSubmit={(event) => {
-              event.preventDefault();
+    <fieldset>
+      <legend>Locale</legend>
 
-              console.warn('Calendar triggered submitting the form.');
-              console.log(event);
-            }}
-          >
-            <DatePicker
-              {...ariaLabelProps}
-              {...placeholderProps}
-              calendarClassName="myCustomCalendarClassName"
-              className="myCustomDatePickerClassName"
-              data-testid="myCustomDatePicker"
-              disabled={disabled}
-              locale={locale}
-              maxDate={maxDate}
-              maxDetail={maxDetail}
-              minDate={minDate}
-              minDetail={minDetail}
-              name="myCustomName"
-              onCalendarClose={() => console.log('Calendar closed')}
-              onCalendarOpen={() => console.log('Calendar opened')}
-              onChange={setValue}
-              portalContainer={renderInPortal ? portalContainer.current : undefined}
-              required={required}
-              returnValue={returnValue}
-              showLeadingZeros={showLeadingZeros}
-              showNeighboringMonth={showNeighboringMonth}
-              showWeekNumbers={showWeekNumbers}
-              value={value}
-            />
-            <div ref={portalContainer} />
-            <br />
-            <br />
-            <button id="submit" type="submit">
-              Submit
-            </button>
-          </form>
-        </main>
+      <div>
+        <input
+          checked={locale === undefined}
+          id="localeDefault"
+          name="locale"
+          onChange={onChange}
+          type="radio"
+          value="undefined"
+        />
+        <label htmlFor="localeDefault">Auto</label>
+      </div>
+      <div>
+        <input
+          checked={locale === 'en-US'}
+          id="localeEnUS"
+          name="locale"
+          onChange={onChange}
+          type="radio"
+          value="en-US"
+        />
+        <label htmlFor="localeEnUS">en-US</label>
+      </div>
+      <div>
+        <input
+          checked={locale === 'fr-FR'}
+          id="localeFrFR"
+          name="locale"
+          onChange={onChange}
+          type="radio"
+          value="fr-FR"
+        />
+        <label htmlFor="localeFrFR">fr-FR</label>
+      </div>
+      <div>
+        <input
+          checked={locale === 'ar-EG'}
+          id="localeArEG"
+          name="locale"
+          onChange={onChange}
+          type="radio"
+          value="ar-EG"
+        />
+        <label htmlFor="localeArEG">ar-EG</label>
       </div>
-    </div>
+      <form onSubmit={onCustomChange}>
+        <label htmlFor="customLocale">Custom locale:</label>
+        &nbsp;
+        <input
+          key={locale}
+          defaultValue={locale}
+          id="customLocale"
+          name="customLocale"
+          pattern="^[a-z]{2}(-[A-Z0-9]{2,3})?$"
+          ref={customLocale}
+          type="text"
+        />
+        &nbsp;
+        <button style={{ display: 'none' }} type="submit">
+          Set locale
+        </button>
+        <button disabled={locale === undefined} onClick={resetLocale} type="button">
+          Reset locale
+        </button>
+      </form>
+    </fieldset>
   );
 }
diff --git a/test/index.tsx b/test/index.tsx
index db9d0c1b..caf8bfe2 100644
--- 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';