@addev-be/ui 0.14.0 → 0.14.2

package/src/components/data/DataGrid/DataGridFilterMenu/FilterValuesScroller.tsx

@@ -1,131 +1,131 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import * as styles from './styles';
-
-import {
-  DataGridFilterCheckbox,
-  DataGridFilterFormatter,
-  DataGridFilterGroup,
-  DataGridFilterRenderer,
-  DataGridFilterValue,
-} from '../types';
-import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { debounce } from 'lodash';
-import { useElementSize } from '../../../../hooks';
-
-const CheckboxTemplate = ({
-  selectedValues,
-  value,
-  index,
-  style,
-  onToggle,
-}: {
-  selectedValues: DataGridFilterValue[];
-  value: DataGridFilterCheckbox;
-  index: number;
-  style?: React.CSSProperties;
-  onToggle?: (values: DataGridFilterValue[]) => void;
-}) => {
-  const checked = useMemo(
-    () => value.values.every((v) => selectedValues.includes(v)),
-    [selectedValues, value.values]
-  );
-  return (
-    <styles.FilterValueContainer
-      key={index}
-      style={{ ...style, paddingLeft: `${value.level}rem` }}
-      title={value.title}
-      onClick={() => onToggle?.(value.values)}
-    >
-      <input type="checkbox" checked={checked} readOnly />
-      <span>{value.displayValue || '(Vides)'}</span>
-    </styles.FilterValueContainer>
-  );
-};
-
-type FilterValuesScrollerProps = {
-  values: DataGridFilterValue[];
-  rowHeight?: number;
-  formatter: DataGridFilterFormatter;
-  renderer: DataGridFilterRenderer;
-  onRangeChange?: (startIndex: number, length: number) => void;
-  onToggle?: (values: DataGridFilterValue[]) => void;
-  selectedValues?: DataGridFilterValue[];
-  groups?: DataGridFilterGroup[];
-};
-
-export const FilterValuesScroller = ({
-  values,
-  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
-  onRangeChange,
-  onToggle,
-  formatter = defaultRendererAndFormatter,
-  renderer = defaultRendererAndFormatter,
-  selectedValues = [],
-  groups,
-}: FilterValuesScrollerProps) => {
-  const scrollableRef = useRef<HTMLDivElement | null>(null);
-  const { height } = useElementSize(scrollableRef.current);
-
-  const tolerance = 20;
-  const [scrollTop, setScrollTop] = useState(0);
-  const index = Math.floor(scrollTop / rowHeight);
-  const length = Math.ceil(height / rowHeight);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onScroll = useCallback(
-    debounce((e: React.UIEvent<HTMLDivElement>) => {
-      const target = e.target as HTMLDivElement;
-      setScrollTop(() => target.scrollTop);
-    }, 50),
-    []
-  );
-
-  const checkboxes = useMemo(
-    () => getCheckboxes(values, '', renderer, formatter, groups),
-    [values, groups, renderer, formatter]
-  );
-  const visibleCheckboxes = useMemo(
-    () => [
-      {
-        title: 'Sélectionner tout',
-        values: checkboxes.map((checkbox) => checkbox.values).flat(),
-        displayValue: 'Sélectionner tout',
-        level: 0,
-      },
-      ...checkboxes.slice(
-        Math.max(0, index - tolerance),
-        index + length + 1 + tolerance
-      ),
-    ],
-    [checkboxes, index, length, tolerance]
-  );
-  const firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
-
-  useEffect(() => {
-    onRangeChange?.(index, length);
-  }, [index, length, onRangeChange]);
-
-  return (
-    <styles.FilterValuesScrollerContainer
-      ref={scrollableRef}
-      onScroll={onScroll}
-      $rowHeight={rowHeight}
-    >
-      <div style={{ height: `${checkboxes.length * rowHeight}px` }}>
-        {visibleCheckboxes.map((value, index) => (
-          <CheckboxTemplate
-            style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
-            key={index}
-            selectedValues={selectedValues}
-            value={value}
-            index={index}
-            onToggle={onToggle}
-          />
-        ))}
-      </div>
-    </styles.FilterValuesScrollerContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as styles from './styles';
+
+import {
+  DataGridFilterCheckbox,
+  DataGridFilterFormatter,
+  DataGridFilterGroup,
+  DataGridFilterRenderer,
+  DataGridFilterValue,
+} from '../types';
+import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { debounce } from 'lodash';
+import { useElementSize } from '../../../../hooks';
+
+const CheckboxTemplate = ({
+  selectedValues,
+  value,
+  index,
+  style,
+  onToggle,
+}: {
+  selectedValues: DataGridFilterValue[];
+  value: DataGridFilterCheckbox;
+  index: number;
+  style?: React.CSSProperties;
+  onToggle?: (values: DataGridFilterValue[]) => void;
+}) => {
+  const checked = useMemo(
+    () => value.values.every((v) => selectedValues.includes(v)),
+    [selectedValues, value.values]
+  );
+  return (
+    <styles.FilterValueContainer
+      key={index}
+      style={{ ...style, paddingLeft: `${value.level}rem` }}
+      title={value.title}
+      onClick={() => onToggle?.(value.values)}
+    >
+      <input type="checkbox" checked={checked} readOnly />
+      <span>{value.displayValue || '(Vides)'}</span>
+    </styles.FilterValueContainer>
+  );
+};
+
+type FilterValuesScrollerProps = {
+  values: DataGridFilterValue[];
+  rowHeight?: number;
+  formatter: DataGridFilterFormatter;
+  renderer: DataGridFilterRenderer;
+  onRangeChange?: (startIndex: number, length: number) => void;
+  onToggle?: (values: DataGridFilterValue[]) => void;
+  selectedValues?: DataGridFilterValue[];
+  groups?: DataGridFilterGroup[];
+};
+
+export const FilterValuesScroller = ({
+  values,
+  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
+  onRangeChange,
+  onToggle,
+  formatter = defaultRendererAndFormatter,
+  renderer = defaultRendererAndFormatter,
+  selectedValues = [],
+  groups,
+}: FilterValuesScrollerProps) => {
+  const scrollableRef = useRef<HTMLDivElement | null>(null);
+  const { height } = useElementSize(scrollableRef.current);
+
+  const tolerance = 20;
+  const [scrollTop, setScrollTop] = useState(0);
+  const index = Math.floor(scrollTop / rowHeight);
+  const length = Math.ceil(height / rowHeight);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onScroll = useCallback(
+    debounce((e: React.UIEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLDivElement;
+      setScrollTop(() => target.scrollTop);
+    }, 50),
+    []
+  );
+
+  const checkboxes = useMemo(
+    () => getCheckboxes(values, '', renderer, formatter, groups),
+    [values, groups, renderer, formatter]
+  );
+  const visibleCheckboxes = useMemo(
+    () => [
+      {
+        title: 'Sélectionner tout',
+        values: checkboxes.map((checkbox) => checkbox.values).flat(),
+        displayValue: 'Sélectionner tout',
+        level: 0,
+      },
+      ...checkboxes.slice(
+        Math.max(0, index - tolerance),
+        index + length + 1 + tolerance
+      ),
+    ],
+    [checkboxes, index, length, tolerance]
+  );
+  const firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
+
+  useEffect(() => {
+    onRangeChange?.(index, length);
+  }, [index, length, onRangeChange]);
+
+  return (
+    <styles.FilterValuesScrollerContainer
+      ref={scrollableRef}
+      onScroll={onScroll}
+      $rowHeight={rowHeight}
+    >
+      <div style={{ height: `${checkboxes.length * rowHeight}px` }}>
+        {visibleCheckboxes.map((value, index) => (
+          <CheckboxTemplate
+            style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
+            key={index}
+            selectedValues={selectedValues}
+            value={value}
+            index={index}
+            onToggle={onToggle}
+          />
+        ))}
+      </div>
+    </styles.FilterValuesScrollerContainer>
+  );
+};

package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx

@@ -1,78 +1,81 @@
-import { DataGridContext, DataGridFilter } from '../types';
-import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
-import { useCallback, useState } from 'react';
-
-import { Button } from '../../../forms';
-import { FilterModalContent } from '../FilterModalContent';
-import { Modal } from '../../../layout/Modal';
-import { useDataGridContext } from '../hooks';
-
-export const useFilterModal = <R,>({
-  columnKey,
-  context,
-  onClose,
-}: {
-  columnKey: string;
-  context: DataGridContext<R>;
-  onClose?: () => void;
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { filters = {}, columns, setFilters } = useDataGridContext<R>(context);
-  const column = columns[columnKey];
-  const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
-    filters[columnKey] ?? column?.filter
-  );
-
-  const openModal = useCallback(() => {
-    setIsVisible(true);
-  }, []);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-    onClose?.();
-  }, [onClose]);
-
-  const onClearClicked = useCallback(() => {
-    const newFilters = { ...filters };
-    delete newFilters[columnKey];
-    setFilters(newFilters);
-    closeModal();
-  }, [closeModal, columnKey, filters, setFilters]);
-
-  const onApplyClicked = useCallback(() => {
-    setFilters({ ...filters, [columnKey]: currentFilter });
-    closeModal();
-  }, [closeModal, columnKey, currentFilter, filters, setFilters]);
-
-  const onCancelClicked = useCallback(() => {
-    closeModal();
-  }, [closeModal]);
-
-  const modal = isVisible ? (
-    <Modal>
-      <Modal.Header>Filtrer "{column.name}"</Modal.Header>
-      <Modal.ContentWithIcon>
-        <FilterIcon fill="var(--color-primary-400)" />
-        <FilterModalContent
-          filter={currentFilter}
-          onFilterChanged={setCurrentFilter}
-        />
-      </Modal.ContentWithIcon>
-      <Modal.Buttons>
-        <Button $color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
-          Supprimer
-        </Button>
-        <Button
-          style={{ marginLeft: 'auto' }}
-          $color="primary"
-          icon={FilterIcon}
-          onClick={onApplyClicked}
-        >
-          Filtrer
-        </Button>
-        <Button onClick={onCancelClicked}>Annuler</Button>
-      </Modal.Buttons>
-    </Modal>
-  ) : null;
-
-  return { openModal, closeModal, modal };
-};
+import {
+  DataGridColumnWithFilter,
+  DataGridContext,
+  DataGridFilter,
+} from '../types';
+import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../../../forms';
+import { FilterModalContent } from '../FilterModalContent';
+import { Modal } from '../../../layout/Modal';
+import { useDataGridContext } from '../hooks';
+
+export const useFilterModal = <R,>({
+  column,
+  context,
+  onClose,
+}: {
+  column: DataGridColumnWithFilter<R>;
+  context: DataGridContext<R>;
+  onClose?: () => void;
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const { filters = {}, setFilters } = useDataGridContext<R>(context);
+  const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
+    column.filter
+  );
+
+  const openModal = useCallback(() => {
+    setIsVisible(true);
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+  }, [onClose]);
+
+  const onClearClicked = useCallback(() => {
+    const newFilters = { ...filters };
+    delete newFilters[column.key];
+    setFilters(newFilters);
+    closeModal();
+  }, [closeModal, column.key, filters, setFilters]);
+
+  const onApplyClicked = useCallback(() => {
+    setFilters({ ...filters, [column.key]: currentFilter });
+    closeModal();
+  }, [closeModal, column.key, currentFilter, filters, setFilters]);
+
+  const onCancelClicked = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+
+  const modal = isVisible ? (
+    <Modal>
+      <Modal.Header>Filtrer "{column.name}"</Modal.Header>
+      <Modal.ContentWithIcon>
+        <FilterIcon fill="var(--color-primary-400)" />
+        <FilterModalContent
+          filter={currentFilter}
+          onFilterChanged={setCurrentFilter}
+        />
+      </Modal.ContentWithIcon>
+      <Modal.Buttons>
+        <Button $color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
+          Supprimer
+        </Button>
+        <Button
+          style={{ marginLeft: 'auto' }}
+          $color="primary"
+          icon={FilterIcon}
+          onClick={onApplyClicked}
+        >
+          Filtrer
+        </Button>
+        <Button onClick={onCancelClicked}>Annuler</Button>
+      </Modal.Buttons>
+    </Modal>
+  ) : null;
+
+  return { openModal, closeModal, modal };
+};