Use new JSX transform in all sample and test suites

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>
   );
 }