ref: datepicker multi fields

InseeFr · Oct 30, 2023 · e638ce9 · e638ce9
1 parent 357c85c
commit e638ce9
Show file tree

Hide file tree

Showing 9 changed files with 453 additions and 94 deletions.
diff --git a/src/components/datepicker/html/DatepickerField.tsx b/src/components/datepicker/html/DatepickerField.tsx
@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import type { ChangeEventHandler } from 'react';
+
+type Props = {
+	id: string;
+	label: string;
+	description: string;
+	max?: number;
+	onChange: (value: number) => void;
+	value?: number;
+	readOnly?: boolean;
+	disabled?: boolean;
+};
+
+export function DatepickerField({
+	label,
+	id,
+	description,
+	onChange,
+	value,
+	max,
+	readOnly,
+	disabled,
+}: Props) {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+		if (
+			!Number.isNaN(e.target.valueAsNumber) &&
+			((max && e.target.valueAsNumber > max) || e.target.valueAsNumber < 1)
+		) {
+			return;
+		}
+		onChange(e.target.valueAsNumber);
+	};
+	return (
+		<div
+			className={classNames(
+				'lunaticDatepickerField',
+				!max && 'lunaticDatepickerFieldLarge'
+			)}
+		>
+			<label htmlFor={id}>
+				{label}
+				<span className="lunaticDatepickerHint">{description}</span>
+			</label>
+			<input
+				id={id}
+				type="number"
+				min={1}
+				max={max}
+				readOnly={readOnly}
+				disabled={disabled}
+				value={Number.isNaN(value) ? '' : value}
+				onChange={handleChange}
+				onFocus={(e) => e.target.select()}
+			/>
+		</div>
+	);
+}
diff --git a/src/components/datepicker/html/__snapshots__/datepicker.spec.tsx.snap b/src/components/datepicker/html/__snapshots__/datepicker.spec.tsx.snap
@@ -1,34 +1,226 @@
 // Vitest Snapshot v1
 
-exports[`Datepicker > renders without crashing 1`] = `
+exports[`Datepicker > should render properly with format YYYY 1`] = `
 <div>
   <div
     class="lunatic-input"
   >
-    <input
-      aria-labelledby="lunatic-datepicker-datepicker"
-      class="lunatic-datepicker"
-      id="datepicker"
-      type="date"
-      value="1999-01-01"
-    />
+    <div
+      class="lunaticDatepickerFields"
+    >
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickerday"
+        >
+          Jour
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 14
+          </span>
+        </label>
+        <input
+          id="datepickerday"
+          max="31"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickermonth"
+        >
+          Mois
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 07
+          </span>
+        </label>
+        <input
+          id="datepickermonth"
+          max="12"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField lunaticDatepickerFieldLarge"
+      >
+        <label
+          for="datepickeryear"
+        >
+          Année
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 2023
+          </span>
+        </label>
+        <input
+          id="datepickeryear"
+          min="1"
+          type="number"
+          value="1999"
+        />
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`Datepicker > should handle readOnly 1`] = `
+exports[`Datepicker > should render properly with format YYYY-MM 1`] = `
 <div>
   <div
     class="lunatic-input"
   >
-    <input
-      aria-labelledby="lunatic-datepicker-Datepicker"
-      class="lunatic-datepicker readOnly"
-      id="Datepicker"
-      readonly=""
-      type="date"
-      value="1980-01-19"
-    />
+    <div
+      class="lunaticDatepickerFields"
+    >
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickerday"
+        >
+          Jour
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 14
+          </span>
+        </label>
+        <input
+          id="datepickerday"
+          max="31"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickermonth"
+        >
+          Mois
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 07
+          </span>
+        </label>
+        <input
+          id="datepickermonth"
+          max="12"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField lunaticDatepickerFieldLarge"
+      >
+        <label
+          for="datepickeryear"
+        >
+          Année
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 2023
+          </span>
+        </label>
+        <input
+          id="datepickeryear"
+          min="1"
+          type="number"
+          value="1999"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Datepicker > should render properly with format YYYY-MM-DD 1`] = `
+<div>
+  <div
+    class="lunatic-input"
+  >
+    <div
+      class="lunaticDatepickerFields"
+    >
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickerday"
+        >
+          Jour
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 14
+          </span>
+        </label>
+        <input
+          id="datepickerday"
+          max="31"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickermonth"
+        >
+          Mois
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 07
+          </span>
+        </label>
+        <input
+          id="datepickermonth"
+          max="12"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField lunaticDatepickerFieldLarge"
+      >
+        <label
+          for="datepickeryear"
+        >
+          Année
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 2023
+          </span>
+        </label>
+        <input
+          id="datepickeryear"
+          min="1"
+          type="number"
+          value="1999"
+        />
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/datepicker/html/datepicker-container.tsx b/src/components/datepicker/html/datepicker-container.tsx
diff --git a/src/components/datepicker/html/datepicker-input.tsx b/src/components/datepicker/html/datepicker-input.tsx
diff --git a/src/components/datepicker/html/datepicker.scss b/src/components/datepicker/html/datepicker.scss
@@ -1 +1,19 @@
-// see input.scss
+.lunaticDatepickerFields {
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.lunaticDatepickerField input {
+  width: 2.5em;
+}
+
+.lunaticDatepickerFieldLarge input {
+  width: 4.5em;
+}
+
+.lunaticDatepickerHint {
+  display: block;
+  font-weight: 400;
+  font-size: .9em;
+}