@addev-be/ui 0.2.2 → 0.2.6

package/src/components/data/DataGrid/DataGridHeaderCell.tsx

@@ -1,166 +1,167 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import {
-  ArrowDownAZIcon,
-  ArrowUpZAIcon,
-  ArrowsUpDownIcon,
-  FilterFullIcon,
-  FilterIcon,
-} from '../../../Icons';
-import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
-
-import { DataGridFilterMenu } from './DataGridFilterMenu';
-import { DataGridHeaderCellProps } from './types';
-import { Dropdown } from '../../layout';
-import { IconButton } from '../../forms/IconButton';
-import { useDataGridContext } from './hooks';
-import { useUi } from '../../../providers';
-
-export const DataGridHeaderCell = <R,>({
-  columnKey,
-  columnIndex,
-  column,
-  context,
-}: DataGridHeaderCellProps<R>) => {
-  const { getElementScreenRect } = useUi();
-  const contextValue = useDataGridContext(context);
-  const {
-    filters = {},
-    sorts = {},
-    setSorts,
-    setColumnWidth,
-    saveSettings,
-    headerColor,
-  } = contextValue;
-  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
-
-  /** SORTING */
-  const SortIcon = sorts[columnKey]
-    ? sorts[columnKey] === 'desc'
-      ? ArrowUpZAIcon
-      : ArrowDownAZIcon
-    : ArrowsUpDownIcon;
-
-  const onSortButtonClicked = useCallback(
-    (columnKey: string) => {
-      const sort = sorts[columnKey];
-      if (!sort || sort === 'desc') {
-        setSorts({ [columnKey]: 'asc' });
-      } else {
-        setSorts({ [columnKey]: 'desc' });
-      }
-    },
-    [setSorts, sorts]
-  );
-
-  /** RESIZING */
-
-  const [isResizing, setIsResizing] = useState(false);
-  const resizingOffset = useRef(0);
-
-  const onResizeStart = useCallback(
-    (e: MouseEvent) => {
-      resizingOffset.current = e.screenX - (column.width || 150);
-      setIsResizing(true);
-    },
-    [column.width]
-  );
-
-  const onResizeMove = useCallback(
-    (e: MouseEvent) => {
-      if (isResizing) {
-        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
-        setColumnWidth(columnKey, newWidth);
-      }
-    },
-    [columnKey, isResizing, setColumnWidth]
-  );
-
-  const onResizeEnd = useCallback(() => {
-    setIsResizing(false);
-    saveSettings();
-  }, [saveSettings]);
-
-  const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
-  const filterDropdown = useMemo(() => {
-    if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
-      return null;
-    }
-    const filterButtonRect = getElementScreenRect(filterButtonRef.current);
-    filterButtonRect.x += window.scrollX;
-    filterButtonRect.y += window.scrollY;
-    return (
-      <Dropdown
-        $sourceRect={filterButtonRect}
-        onClose={() => setIsFilterDropdownVisible(false)}
-        $width={320}
-        $height={[200, 320]}
-        $autoPositionX
-      >
-        <DataGridFilterMenu
-          columnKey={columnKey}
-          columnIndex={columnIndex}
-          context={context}
-          onClose={() => setIsFilterDropdownVisible(false)}
-        />
-      </Dropdown>
-    );
-  }, [
-    columnIndex,
-    columnKey,
-    context,
-    getElementScreenRect,
-    isFilterDropdownVisible,
-  ]);
-
-  const onFilterButtonClicked = useCallback(() => {
-    setIsFilterDropdownVisible(true);
-  }, []);
-
-  return (
-    <styles.DataGridHeaderCellContainer
-      $headerColor={headerColor}
-      $isResizing={isResizing}
-    >
-      {filterDropdown}
-      <span>{column.name}</span>
-      {!!column.sortGetter && (
-        <IconButton
-          color={headerColor}
-          size="small"
-          icon={SortIcon}
-          onClick={() => onSortButtonClicked?.(columnKey)}
-        />
-      )}
-      {!!column.filter && (
-        <IconButton
-          size="small"
-          ref={filterButtonRef}
-          icon={
-            filters[columnKey]?.values.length > 0 ? FilterFullIcon : FilterIcon
-          }
-          color={filters[columnKey]?.values.length > 0 ? 'danger' : headerColor}
-          onClick={onFilterButtonClicked}
-        />
-      )}
-      {column.resizable !== false && (
-        <>
-          <styles.DataGridResizeGrip
-            className={isResizing ? 'active' : ''}
-            $headerColor={headerColor}
-            onMouseDown={onResizeStart}
-          />
-          {isResizing && (
-            <styles.ResizeBackdrop
-              onMouseMove={onResizeMove}
-              onMouseUp={onResizeEnd}
-            />
-          )}
-        </>
-      )}
-    </styles.DataGridHeaderCellContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import {
+  ArrowDownAZIcon,
+  ArrowUpZAIcon,
+  ArrowsUpDownIcon,
+  FilterFullIcon,
+  FilterIcon,
+} from '../../../Icons';
+import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+
+import { DataGridFilterMenu } from './DataGridFilterMenu';
+import { DataGridHeaderCellProps } from './types';
+import { Dropdown } from '../../layout';
+import { IconButton } from '../../forms/IconButton';
+import { useDataGridContext } from './hooks';
+import { useUi } from '../../../providers';
+
+export const DataGridHeaderCell = <R,>({
+  columnKey,
+  columnIndex,
+  column,
+  context,
+}: DataGridHeaderCellProps<R>) => {
+  const { getElementScreenRect } = useUi();
+  const contextValue = useDataGridContext(context);
+  const {
+    filters = {},
+    sorts = {},
+    setSorts,
+    setColumnWidth,
+    saveSettings,
+    headerColor,
+  } = contextValue;
+  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  /** SORTING */
+  const SortIcon = sorts[columnKey]
+    ? sorts[columnKey] === 'desc'
+      ? ArrowUpZAIcon
+      : ArrowDownAZIcon
+    : ArrowsUpDownIcon;
+
+  const onSortButtonClicked = useCallback(
+    (columnKey: string) => {
+      const sort = sorts[columnKey];
+      if (!sort || sort === 'desc') {
+        setSorts({ [columnKey]: 'asc' });
+      } else {
+        setSorts({ [columnKey]: 'desc' });
+      }
+    },
+    [setSorts, sorts]
+  );
+
+  /** RESIZING */
+
+  const [isResizing, setIsResizing] = useState(false);
+  const resizingOffset = useRef(0);
+
+  const onResizeStart = useCallback(
+    (e: MouseEvent) => {
+      resizingOffset.current = e.screenX - (column.width || 150);
+      setIsResizing(true);
+    },
+    [column.width]
+  );
+
+  const onResizeMove = useCallback(
+    (e: MouseEvent) => {
+      if (isResizing) {
+        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
+        setColumnWidth(columnKey, newWidth);
+      }
+    },
+    [columnKey, isResizing, setColumnWidth]
+  );
+
+  const onResizeEnd = useCallback(() => {
+    setIsResizing(false);
+    saveSettings();
+  }, [saveSettings]);
+
+  const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
+  const filterDropdown = useMemo(() => {
+    if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
+      return null;
+    }
+    const filterButtonRect = getElementScreenRect(filterButtonRef.current);
+    filterButtonRect.x += window.scrollX;
+    filterButtonRect.y += window.scrollY;
+    return (
+      <Dropdown
+        $sourceRect={filterButtonRect}
+        onClose={() => setIsFilterDropdownVisible(false)}
+        $width={320}
+        $height={[200, 320]}
+        $autoPositionX
+      >
+        <DataGridFilterMenu
+          columnKey={columnKey}
+          columnIndex={columnIndex}
+          context={context}
+          onClose={() => setIsFilterDropdownVisible(false)}
+        />
+      </Dropdown>
+    );
+  }, [
+    columnIndex,
+    columnKey,
+    context,
+    getElementScreenRect,
+    isFilterDropdownVisible,
+  ]);
+
+  const onFilterButtonClicked = useCallback(() => {
+    setIsFilterDropdownVisible(true);
+  }, []);
+
+  const hasFilters = filters[columnKey]?.values.length > 0;
+
+  return (
+    <styles.DataGridHeaderCellContainer
+      $headerColor={headerColor}
+      $isResizing={isResizing}
+    >
+      {filterDropdown}
+      <span>{column.name}</span>
+      {!!column.sortGetter && (
+        <IconButton
+          color={headerColor}
+          size="small"
+          icon={SortIcon}
+          onClick={() => onSortButtonClicked?.(columnKey)}
+        />
+      )}
+      {!!column.filter && (
+        <IconButton
+          size="small"
+          className={hasFilters ? 'danger' : ''}
+          ref={filterButtonRef}
+          icon={hasFilters ? FilterFullIcon : FilterIcon}
+          color={hasFilters ? 'danger' : headerColor}
+          onClick={onFilterButtonClicked}
+        />
+      )}
+      {column.resizable !== false && (
+        <>
+          <styles.DataGridResizeGrip
+            className={isResizing ? 'active' : ''}
+            $headerColor={headerColor}
+            onMouseDown={onResizeStart}
+          />
+          {isResizing && (
+            <styles.ResizeBackdrop
+              onMouseMove={onResizeMove}
+              onMouseUp={onResizeEnd}
+            />
+          )}
+        </>
+      )}
+    </styles.DataGridHeaderCellContainer>
+  );
+};

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

@@ -1,125 +1,124 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import {
-  DataGridFilter,
-  DataGridFilterOperator,
-  DataGridFilterType,
-} from '../types';
-import { Input, Select } from '../../../forms';
-import { useEffect, useRef } from 'react';
-
-// import { Select } from '../../Select';
-// import clx from 'classnames';
-
-const filterOperators: {
-  [K in DataGridFilterType]: Partial<{
-    [K2 in DataGridFilterOperator<K>]: string;
-  }>;
-} = {
-  number: {
-    equals: 'Égal à',
-    notEquals: 'Différent de',
-    greaterThan: 'Supérieur à',
-    greaterThanOrEqual: 'Supérieur ou égal à',
-    lessThan: 'Inférieur à',
-    lessThanOrEqual: 'Inférieur ou égal à',
-    inRange: "Dans l'intervalle",
-  },
-  text: {
-    equals: 'Égal à',
-    notEquals: 'Différent de',
-    contains: 'Contient',
-    notContains: 'Ne contient pas',
-    startsWith: 'Commence par',
-    endsWith: 'Finit par',
-  },
-};
-
-type FilterModalContentProps<
-  R,
-  T extends DataGridFilterType = DataGridFilterType
-> = {
-  filter: DataGridFilter<R, T>;
-  onFilterChanged: (filter: DataGridFilter<R, T>) => void;
-};
-
-export const FilterModalContent = <
-  R,
-  T extends DataGridFilterType = DataGridFilterType
->({
-  filter,
-  onFilterChanged,
-}: FilterModalContentProps<R, T>) => {
-  const value1Ref = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    setTimeout(() => value1Ref.current?.focus(), 100);
-  }, []);
-
-  if (!filter) return null;
-
-  const { operator, type, values } = filter;
-  return (
-    <styles.FilterModalContentContainer>
-      <label htmlFor="filterOperator">
-        <span>Opérateur :</span>
-        <Select
-          name="filterOperator"
-          items={Object.entries(filterOperators[filter.type])}
-          itemKey={0}
-          itemLabel={1}
-          value={String(operator)}
-          className="text-sm"
-          onChange={(e) =>
-            onFilterChanged({ ...filter, operator: e.target.value as any })
-          }
-        />
-      </label>
-      <label htmlFor="filterValue1">
-        <span>{operator === 'inRange' ? 'Entre' : 'Valeur'} :</span>
-        <Input
-          ref={value1Ref}
-          name="filterValue1"
-          type={filter.type}
-          value={values[0] ?? ''}
-          // className={(type === 'number' ? 'w-24 ' : '') + 'text-sm'}
-          onChange={(e) => {
-            const newValues = [...values];
-            newValues[0] =
-              type === 'number'
-                ? Number(e.target.value)
-                : (String(e.target.value) as any);
-            onFilterChanged({
-              ...filter,
-              values: newValues,
-            });
-          }}
-        />
-      </label>
-      {operator === 'inRange' && (
-        <label htmlFor="filterValue2">
-          <span>et</span>
-          <input
-            name="filterValue2"
-            type={filter.type}
-            value={values[1] ?? ''}
-            // className="text-sm w-24"
-            onChange={(e) => {
-              const newValues = [...values];
-              newValues[0] =
-                type === 'number'
-                  ? Number(e.target.value)
-                  : (String(e.target.value) as any);
-              onFilterChanged({
-                ...filter,
-                values: newValues,
-              });
-            }}
-          />
-        </label>
-      )}
-    </styles.FilterModalContentContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import {
+  DataGridFilter,
+  DataGridFilterOperator,
+  DataGridFilterType,
+} from '../types';
+import { Input, Select } from '../../../forms';
+import { useEffect, useRef } from 'react';
+
+// import { Select } from '../../Select';
+// import clx from 'classnames';
+
+const filterOperators: {
+  [K in DataGridFilterType]: Partial<{
+    [K2 in DataGridFilterOperator<K>]: string;
+  }>;
+} = {
+  number: {
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    greaterThan: 'Supérieur à',
+    greaterThanOrEqual: 'Supérieur ou égal à',
+    lessThan: 'Inférieur à',
+    lessThanOrEqual: 'Inférieur ou égal à',
+    inRange: "Dans l'intervalle",
+  },
+  text: {
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    contains: 'Contient',
+    notContains: 'Ne contient pas',
+    startsWith: 'Commence par',
+    endsWith: 'Finit par',
+  },
+};
+
+type FilterModalContentProps = {
+  filter: DataGridFilter;
+  onFilterChanged: (filter: DataGridFilter) => void;
+};
+
+export const FilterModalContent = ({
+  filter,
+  onFilterChanged,
+}: FilterModalContentProps) => {
+  const value1Ref = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    setTimeout(() => value1Ref.current?.focus(), 100);
+  }, []);
+
+  if (!filter) return null;
+
+  const { operator, type, values } = filter;
+  return (
+    <styles.FilterModalContentContainer>
+      <label htmlFor="filterOperator">
+        <span>Opérateur :</span>
+        <Select
+          name="filterOperator"
+          items={Object.entries(filterOperators[filter.type])}
+          itemKey={0}
+          itemLabel={1}
+          value={String(operator)}
+          className="text-sm"
+          onChange={(e) =>
+            onFilterChanged({ ...filter, operator: e.target.value as any })
+          }
+        />
+      </label>
+      <label htmlFor="filterValue1">
+        <span>{operator === 'inRange' ? 'Entre' : 'Valeur'} :</span>
+        <Input
+          ref={value1Ref}
+          name="filterValue1"
+          type={filter.type}
+          value={values[0] ?? ''}
+          onChange={(e) => {
+            if (type === 'number') {
+              const newValues = [...values];
+              newValues[0] = Number(e.target.value);
+              onFilterChanged({
+                ...filter,
+                values: newValues,
+              });
+            } else {
+              const newValues = [...values];
+              newValues[0] = String(e.target.value) as any;
+              onFilterChanged({
+                ...filter,
+                values: newValues,
+              });
+            }
+          }}
+        />
+      </label>
+      {operator === 'inRange' && (
+        <label htmlFor="filterValue2">
+          <span>et</span>
+          <input
+            name="filterValue2"
+            type={filter.type}
+            value={values[1] ?? ''}
+            // className="text-sm w-24"
+            onChange={(e) => {
+              const newValues = [...values];
+              newValues[0] =
+                type === 'number'
+                  ? Number(e.target.value)
+                  : (String(e.target.value) as any);
+              onFilterChanged({
+                ...filter,
+                values: newValues,
+              });
+            }}
+          />
+        </label>
+      )}
+    </styles.FilterModalContentContainer>
+  );
+};

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

@@ -1,22 +1,22 @@
-import styled from 'styled-components';
-
-export const FilterModalContentContainer = styled.div.attrs({
-  className: 'FilterModalContentContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  font-size: var(--text-base);
-  gap: var(--space-1);
-
-  & > label {
-    display: flex;
-    flex-direction: row;
-    gap: var(--space-1);
-    align-items: center;
-
-    & > span {
-      font-weight: bold;
-      width: var(--space-32);
-    }
-  }
-`;
+import styled from 'styled-components';
+
+export const FilterModalContentContainer = styled.div.attrs({
+  className: 'FilterModalContentContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  font-size: var(--text-base);
+  gap: var(--space-1);
+
+  & > label {
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-1);
+    align-items: center;
+
+    & > span {
+      font-weight: bold;
+      width: var(--space-32);
+    }
+  }
+`;