@tsiky/components-r19 1.1.0 → 1.3.0

package/src/components/EntryControl/EntryControl.tsx

@@ -1,117 +1,117 @@
-'use client';
-import React, { useEffect, useRef, useState } from 'react';
-import styles from './EntryControl.module.css';
-
-export interface EntryControlProps {
-  onDateChange?: (isoString: string) => void;
-  onSearch?: (query: string) => void;
-  initialDate?: string;
-}
-
-export default function EntryControl({ onDateChange, onSearch, initialDate }: EntryControlProps) {
-  const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [datetime, setDatetime] = useState<string>(initialDate ?? '');
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      const target = e.target as Node | null;
-      if (containerRef.current && target && !containerRef.current.contains(target)) {
-        setShowPicker(false);
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  useEffect(() => {
-    if (initialDate) setDatetime(initialDate);
-  }, [initialDate]);
-
-  const handleToggle = () => setShowPicker((v) => !v);
-
-  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = e.target.value;
-    setDatetime(v);
-    onDateChange?.(v);
-  };
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onSearch?.(e.target.value);
-  };
-
-  return (
-    <div className={styles.wrapper} ref={containerRef}>
-      <div className={styles.leftGroup}>
-        <button
-          type='button'
-          className={`${styles.filterButton} ${showPicker ? styles.open : ''}`}
-          onClick={handleToggle}
-          aria-expanded={showPicker}
-          aria-haspopup='dialog'
-          aria-controls='entry-datetime'
-        >
-          <span>Entry time</span>
-          <svg
-            className={styles.filterIcon}
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            width='14'
-            height='14'
-            aria-hidden
-          >
-            <path fill='currentColor' d='M10 18h4v-2h-4v2zm-7-8v2h18V10H3zm3-6v2h12V4H6z' />
-          </svg>
-        </button>
-
-        <div className={styles.infoText}>Confidence interval: step ± 15' / exit ± 30'</div>
-
-        {/* pickerContainer est maintenant inline sur grands écrans, absolute sur petits */}
-        {showPicker && (
-          <div
-            className={styles.pickerContainer}
-            role='dialog'
-            aria-label='Choisir la date et l’heure'
-          >
-            <label className={styles.pickerLabel} htmlFor='entry-datetime'>
-              <span className={styles.srOnly}>Choisir la date et l’heure</span>
-            </label>
-            <input
-              id='entry-datetime'
-              className={styles.datetime}
-              type='datetime-local'
-              value={datetime}
-              onChange={handleDateChange}
-              aria-label='Date et heure d’entrée'
-            />
-          </div>
-        )}
-      </div>
-
-      <div className={styles.rightGroup}>
-        <div className={styles.searchInputWrap}>
-          <input
-            className={styles.searchInput}
-            placeholder='Search...'
-            onChange={handleSearch}
-            aria-label='Search'
-          />
-          <svg
-            className={styles.searchIcon}
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            width='16'
-            height='16'
-            aria-hidden
-          >
-            <path
-              fill='currentColor'
-              d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79L20 20.49 21.49 19l-5.99-5zM10 15.5A5.5 5.5 0 1115.5 10 5.5 5.5 0 0110 15.5z'
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './EntryControl.module.css';
+
+export interface EntryControlProps {
+  onDateChange?: (isoString: string) => void;
+  onSearch?: (query: string) => void;
+  initialDate?: string;
+}
+
+export default function EntryControl({ onDateChange, onSearch, initialDate }: EntryControlProps) {
+  const [showPicker, setShowPicker] = useState<boolean>(false);
+  const [datetime, setDatetime] = useState<string>(initialDate ?? '');
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      const target = e.target as Node | null;
+      if (containerRef.current && target && !containerRef.current.contains(target)) {
+        setShowPicker(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (initialDate) setDatetime(initialDate);
+  }, [initialDate]);
+
+  const handleToggle = () => setShowPicker((v) => !v);
+
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = e.target.value;
+    setDatetime(v);
+    onDateChange?.(v);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSearch?.(e.target.value);
+  };
+
+  return (
+    <div className={styles.wrapper} ref={containerRef}>
+      <div className={styles.leftGroup}>
+        <button
+          type='button'
+          className={`${styles.filterButton} ${showPicker ? styles.open : ''}`}
+          onClick={handleToggle}
+          aria-expanded={showPicker}
+          aria-haspopup='dialog'
+          aria-controls='entry-datetime'
+        >
+          <span>Entry time</span>
+          <svg
+            className={styles.filterIcon}
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width='14'
+            height='14'
+            aria-hidden
+          >
+            <path fill='currentColor' d='M10 18h4v-2h-4v2zm-7-8v2h18V10H3zm3-6v2h12V4H6z' />
+          </svg>
+        </button>
+
+        <div className={styles.infoText}>Confidence interval: step ± 15' / exit ± 30'</div>
+
+        {/* pickerContainer est maintenant inline sur grands écrans, absolute sur petits */}
+        {showPicker && (
+          <div
+            className={styles.pickerContainer}
+            role='dialog'
+            aria-label='Choisir la date et l’heure'
+          >
+            <label className={styles.pickerLabel} htmlFor='entry-datetime'>
+              <span className={styles.srOnly}>Choisir la date et l’heure</span>
+            </label>
+            <input
+              id='entry-datetime'
+              className={styles.datetime}
+              type='datetime-local'
+              value={datetime}
+              onChange={handleDateChange}
+              aria-label='Date et heure d’entrée'
+            />
+          </div>
+        )}
+      </div>
+
+      <div className={styles.rightGroup}>
+        <div className={styles.searchInputWrap}>
+          <input
+            className={styles.searchInput}
+            placeholder='Search...'
+            onChange={handleSearch}
+            aria-label='Search'
+          />
+          <svg
+            className={styles.searchIcon}
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width='16'
+            height='16'
+            aria-hidden
+          >
+            <path
+              fill='currentColor'
+              d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79L20 20.49 21.49 19l-5.99-5zM10 15.5A5.5 5.5 0 1115.5 10 5.5 5.5 0 0110 15.5z'
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}