@addev-be/ui 0.2.2 → 0.2.6

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

@@ -1,190 +1,200 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import { DataGridContext, MysqlJsonObject } from '../types';
-import { FilterIcon, FilterSlashIcon, MagnifierIcon } from '../../../../Icons';
-import { applyFilters, getDateGroups } from '../helpers';
-import { intersection, uniq, without } from 'lodash';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-
-import { FilterValuesScroller } from '../FilterValuesScroller';
-import { Input } from '../../../forms';
-import { useFilterModal } from './hooks';
-
-type FilterValuesProps<R> = {
-  columnKey: string;
-  columnIndex: number;
-  context: DataGridContext<R>;
-  onClose?: () => void;
-};
-
-export const DataGridFilterMenu = <R,>({
-  columnKey,
-  context,
-  onClose,
-}: FilterValuesProps<R>) => {
-  const { openModal, modal } = useFilterModal({ columnKey, context });
-  const {
-    filters = {},
-    rows,
-    columns,
-    setFilters,
-    filterValuesLoader,
-  } = useContext(context);
-  const column = columns[columnKey] ?? {};
-  const textFilterInputRef = useRef<HTMLInputElement>(null);
-  const [textFilter, setTextFilter] = useState('');
-
-  const [availableValues, setAvailableValues] = useState<
-    (string | number | null | MysqlJsonObject)[]
-  >([]);
-
-  useEffect(() => {
-    if (filterValuesLoader) {
-      filterValuesLoader(columnKey).then((values) => {
-        setAvailableValues(() => values);
-      });
-    } else {
-      const otherFilters = Object.entries(filters)
-        .filter(([key]) => key !== columnKey)
-        .map(([, filter]) => filter);
-      const availableRows = applyFilters(rows, otherFilters);
-      const values = availableRows.map((row) => column.filter!.getter(row));
-      setAvailableValues(() => uniq(values).sort());
-    }
-  }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
-
-  const selectedValues = useMemo(
-    () => filters?.[columnKey]?.values ?? [],
-    [columnKey, filters]
-  );
-
-  const clearFilter = useCallback(() => {
-    const newFilters = { ...filters };
-    delete newFilters[columnKey];
-    setFilters(newFilters);
-    onClose?.();
-  }, [filters, columnKey, setFilters, onClose]);
-
-  const setValuesChecked = useCallback(
-    (values: any[], checked?: boolean) => {
-      setFilters((prevFilters) => {
-        const newValues = checked
-          ? [...(prevFilters[columnKey]?.values ?? []), ...values]
-          : without(prevFilters[columnKey]?.values ?? [], ...values);
-        const newFilters = {
-          ...prevFilters,
-        };
-        if (newValues.length === 0) {
-          delete newFilters[columnKey];
-        } else {
-          newFilters[columnKey] = {
-            ...(prevFilters[columnKey] ?? column.filter),
-            operator: 'inArray',
-            values: newValues,
-          };
-        }
-        return newFilters;
-      });
-    },
-    [setFilters, columnKey, column.filter]
-  );
-
-  const toggleValues = useCallback(
-    (values: any[]) => {
-      const checked =
-        intersection(selectedValues, values).length === values.length;
-      setValuesChecked(values, !checked);
-    },
-    [setValuesChecked, selectedValues]
-  );
-
-  const formatter = useMemo(
-    () =>
-      column.filter?.formatter ?? ((v: any) => (v === null ? null : String(v))),
-    [column.filter?.formatter]
-  );
-
-  const filteredAvailableValues = useMemo(
-    () =>
-      !textFilter
-        ? availableValues
-        : availableValues.filter((value) =>
-            formatter(value)?.toLowerCase().includes(textFilter.toLowerCase())
-          ),
-    [availableValues, formatter, textFilter]
-  );
-
-  useEffect(() => {
-    if (textFilterInputRef.current) {
-      textFilterInputRef.current.focus();
-    }
-  }, []);
-
-  const checkboxesComponent = useMemo(() => {
-    if (column.type === 'date') {
-      const groups = getDateGroups(filteredAvailableValues);
-      return (
-        <FilterValuesScroller
-          values={filteredAvailableValues}
-          selectedValues={selectedValues}
-          onToggle={toggleValues}
-          formatter={formatter}
-          groups={groups}
-        />
-      );
-    }
-    return (
-      <FilterValuesScroller
-        values={filteredAvailableValues}
-        selectedValues={selectedValues}
-        onToggle={toggleValues}
-        formatter={formatter}
-      />
-    );
-  }, [
-    column.type,
-    filteredAvailableValues,
-    formatter,
-    selectedValues,
-    toggleValues,
-  ]);
-
-  return (
-    <styles.Menu onClick={(e) => e.stopPropagation()}>
-      {modal}
-      <styles.MenuItem onClick={openModal}>
-        <FilterIcon />
-        Filtrer ...
-      </styles.MenuItem>
-      <styles.MenuItem $color="danger" onClick={clearFilter}>
-        <FilterSlashIcon />
-        Supprimer le filtre
-      </styles.MenuItem>
-      <styles.InputContainer>
-        <MagnifierIcon />
-        <Input
-          ref={textFilterInputRef}
-          type="text"
-          name="search"
-          id="search"
-          placeholder="Rechercher ..."
-          value={textFilter}
-          onChange={(e) => setTextFilter(e.target.value)}
-        />
-      </styles.InputContainer>
-      <styles.CheckboxesContainer>
-        {checkboxesComponent}
-      </styles.CheckboxesContainer>
-    </styles.Menu>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { DataGridContext, DataGridFilterValue } from '../types';
+import { FilterIcon, FilterSlashIcon, MagnifierIcon } from '../../../../Icons';
+import {
+  applyFilters,
+  defaultRendererAndFormatter,
+  getDateGroups,
+} from '../helpers';
+import { intersection, uniq, without } from 'lodash';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { FilterValuesScroller } from '../FilterValuesScroller';
+import { Input } from '../../../forms';
+import { useFilterModal } from './hooks';
+
+type FilterValuesProps<R> = {
+  columnKey: string;
+  columnIndex: number;
+  context: DataGridContext<R>;
+  onClose?: () => void;
+};
+
+export const DataGridFilterMenu = <R,>({
+  columnKey,
+  context,
+  onClose,
+}: FilterValuesProps<R>) => {
+  const { openModal, modal } = useFilterModal({ columnKey, context });
+  const {
+    filters = {},
+    rows,
+    columns,
+    setFilters,
+    filterValuesLoader,
+  } = useContext(context);
+  const column = columns[columnKey] ?? {};
+  const textFilterInputRef = useRef<HTMLInputElement>(null);
+  const [textFilter, setTextFilter] = useState('');
+
+  const [availableValues, setAvailableValues] = useState<DataGridFilterValue[]>(
+    []
+  );
+
+  useEffect(() => {
+    if (filterValuesLoader) {
+      filterValuesLoader(columnKey).then((values) => {
+        setAvailableValues(() => values);
+      });
+    } else {
+      const otherFilters = Object.entries(filters)
+        .filter(([key]) => key !== columnKey)
+        .map(([, filter]) => filter);
+      const availableRows = applyFilters(rows, otherFilters);
+      const values = availableRows.map((row) => column.filter!.getter(row));
+      setAvailableValues(() => uniq(values).sort());
+    }
+  }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
+
+  const selectedValues = useMemo(
+    () => filters?.[columnKey]?.values ?? [],
+    [columnKey, filters]
+  );
+
+  const clearFilter = useCallback(() => {
+    const newFilters = { ...filters };
+    delete newFilters[columnKey];
+    setFilters(newFilters);
+    onClose?.();
+  }, [filters, columnKey, setFilters, onClose]);
+
+  const setValuesChecked = useCallback(
+    (values: any[], checked?: boolean) => {
+      setFilters((prevFilters) => {
+        const newValues = checked
+          ? [...(prevFilters[columnKey]?.values ?? []), ...values]
+          : without(prevFilters[columnKey]?.values ?? [], ...values);
+        const newFilters = {
+          ...prevFilters,
+        };
+        if (newValues.length === 0) {
+          delete newFilters[columnKey];
+        } else {
+          newFilters[columnKey] = {
+            ...(prevFilters[columnKey] ?? column.filter),
+            operator: 'inArray',
+            values: newValues,
+          };
+        }
+        return newFilters;
+      });
+    },
+    [setFilters, columnKey, column.filter]
+  );
+
+  const toggleValues = useCallback(
+    (values: DataGridFilterValue[]) => {
+      const checked =
+        intersection(selectedValues, values).length === values.length;
+      setValuesChecked(values, !checked);
+    },
+    [setValuesChecked, selectedValues]
+  );
+
+  const formatter = useMemo(
+    () => column.filter?.formatter ?? defaultRendererAndFormatter,
+    [column.filter?.formatter]
+  );
+  const renderer = useMemo(
+    () => column.filter?.renderer ?? defaultRendererAndFormatter,
+    [column.filter?.renderer]
+  );
+
+  const filteredAvailableValues = useMemo(
+    () =>
+      !textFilter
+        ? availableValues
+        : availableValues.filter((value) =>
+            formatter(value)?.toLowerCase().includes(textFilter.toLowerCase())
+          ),
+    [availableValues, formatter, textFilter]
+  );
+
+  useEffect(() => {
+    if (textFilterInputRef.current) {
+      textFilterInputRef.current.focus();
+    }
+  }, []);
+
+  const checkboxesComponent = useMemo(() => {
+    if (column.type === 'date') {
+      const groups = getDateGroups(filteredAvailableValues);
+      return (
+        <FilterValuesScroller
+          values={filteredAvailableValues}
+          selectedValues={selectedValues}
+          onToggle={toggleValues}
+          formatter={formatter}
+          renderer={renderer}
+          groups={groups}
+        />
+      );
+    }
+    return (
+      <FilterValuesScroller
+        values={filteredAvailableValues}
+        selectedValues={selectedValues}
+        onToggle={toggleValues}
+        formatter={formatter}
+        renderer={renderer}
+      />
+    );
+  }, [
+    column.type,
+    filteredAvailableValues,
+    formatter,
+    renderer,
+    selectedValues,
+    toggleValues,
+  ]);
+
+  return (
+    <styles.Menu onClick={(e) => e.stopPropagation()}>
+      {modal}
+      <styles.MenuItem onClick={openModal}>
+        <FilterIcon />
+        Filtrer ...
+      </styles.MenuItem>
+      <styles.MenuItem $color="danger" onClick={clearFilter}>
+        <FilterSlashIcon />
+        Supprimer le filtre
+      </styles.MenuItem>
+      <styles.InputContainer>
+        <MagnifierIcon />
+        <Input
+          ref={textFilterInputRef}
+          type="text"
+          name="search"
+          id="search"
+          placeholder="Rechercher ..."
+          value={textFilter}
+          onChange={(e) => setTextFilter(e.target.value)}
+        />
+      </styles.InputContainer>
+      <styles.CheckboxesContainer>
+        {checkboxesComponent}
+      </styles.CheckboxesContainer>
+    </styles.Menu>
+  );
+};

package/src/components/data/DataGrid/DataGridFilterMenu/styles.ts

@@ -1,100 +1,100 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../../providers/ThemeProvider/types';
-
-export const Menu = styled.div.attrs({
-  className: 'Menu',
-})`
-  position: absolute;
-  inset: 0;
-  color: var(--color-neutral-900);
-  border-radius: var(--rounded-md);
-  padding: var(--space-1) 0;
-  box-shadow: var(--shadow-lg);
-  background-color: var(--color-neutral-100);
-  min-width: 20em;
-  outline: 1px solid var(--color-neutral-200);
-  display: flex;
-  flex-direction: column;
-`;
-
-export const MenuItem = styled.button.attrs({
-  className: 'MenuItem',
-})<{ $color?: ThemeColor }>`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-family: var(--font-sans);
-  font-weight: normal;
-  text-align: left;
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--text-base);
-  line-height: var(--leading-6);
-  border: none;
-  cursor: pointer;
-
-  ${({ $color }) =>
-    $color
-      ? css`
-          color: var(--color-${$color}-600);
-          background-color: var(--color-neutral-100);
-          &:hover {
-            background-color: var(--color-${$color}-200);
-          }
-        `
-      : css`
-          color: var(--color-neutral-900);
-          background-color: var(--color-neutral-100);
-          &:hover {
-            background-color: var(--color-neutral-200);
-          }
-        `}
-
-  svg {
-    fill: currentColor;
-    width: var(--space-4);
-    height: var(--space-4);
-    margin-right: var(--space-2);
-  }
-`;
-
-export const InputContainer = styled.div.attrs({
-  className: 'InputContainer',
-})`
-  position: relative;
-  border-radius: var(--rounded-md);
-  padding: 0 var(--space-2);
-  margin-top: var(--space-1);
-
-  svg {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: var(--space-4);
-    display: flex;
-    align-items: center;
-    fill: var(--color-neutral-400);
-    width: var(--space-4);
-    height: var(--space-4);
-  }
-
-  input {
-    padding-left: var(--space-8);
-  }
-`;
-
-export const CheckboxesContainer = styled.div.attrs({
-  className: 'CheckboxesContainer',
-})`
-  font-weight: normal;
-  user-select: none;
-  padding: var(--space-2);
-  margin: var(--space-2);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-inner);
-  background-color: var(--color-neutral-50);
-  height: 20em;
-  overflow-y: hidden;
-  white-space: nowrap;
-`;
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../../providers/ThemeProvider/types';
+
+export const Menu = styled.div.attrs({
+  className: 'Menu',
+})`
+  position: absolute;
+  inset: 0;
+  color: var(--color-neutral-900);
+  border-radius: var(--rounded-md);
+  padding: var(--space-1) 0;
+  box-shadow: var(--shadow-lg);
+  background-color: var(--color-neutral-100);
+  min-width: 20em;
+  outline: 1px solid var(--color-neutral-200);
+  display: flex;
+  flex-direction: column;
+`;
+
+export const MenuItem = styled.button.attrs({
+  className: 'MenuItem',
+})<{ $color?: ThemeColor }>`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-family: var(--font-sans);
+  font-weight: normal;
+  text-align: left;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-base);
+  line-height: var(--leading-6);
+  border: none;
+  cursor: pointer;
+
+  ${({ $color }) =>
+    $color
+      ? css`
+          color: var(--color-${$color}-600);
+          background-color: var(--color-neutral-100);
+          &:hover {
+            background-color: var(--color-${$color}-200);
+          }
+        `
+      : css`
+          color: var(--color-neutral-900);
+          background-color: var(--color-neutral-100);
+          &:hover {
+            background-color: var(--color-neutral-200);
+          }
+        `}
+
+  svg {
+    fill: currentColor;
+    width: var(--space-4);
+    height: var(--space-4);
+    margin-right: var(--space-2);
+  }
+`;
+
+export const InputContainer = styled.div.attrs({
+  className: 'InputContainer',
+})`
+  position: relative;
+  border-radius: var(--rounded-md);
+  padding: 0 var(--space-2);
+  margin-top: var(--space-1);
+
+  svg {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: var(--space-4);
+    display: flex;
+    align-items: center;
+    fill: var(--color-neutral-400);
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+
+  input {
+    padding-left: var(--space-8);
+  }
+`;
+
+export const CheckboxesContainer = styled.div.attrs({
+  className: 'CheckboxesContainer',
+})`
+  font-weight: normal;
+  user-select: none;
+  padding: var(--space-2);
+  margin: var(--space-2);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-inner);
+  background-color: var(--color-neutral-50);
+  height: 20em;
+  overflow-y: hidden;
+  white-space: nowrap;
+`;