@addev-be/ui 0.11.1 → 0.11.3

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

@@ -1,134 +1,134 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
-
-import { ChevronDownIcon } from '../../../Icons';
-import { DEFAULT_COLUMN_WIDTH } from './constants';
-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 = {},
-    setColumnWidth,
-    saveSettings,
-    headerColor,
-  } = contextValue;
-  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
-
-  /** RESIZING */
-
-  const [isResizing, setIsResizing] = useState(false);
-  const resizingOffset = useRef(0);
-
-  const onResizeStart = useCallback(
-    (e: MouseEvent) => {
-      resizingOffset.current =
-        e.screenX - (column.width || DEFAULT_COLUMN_WIDTH);
-      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={[250, 400]}
-        $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.filter && (
-        <IconButton
-          size="small"
-          className={hasFilters ? 'danger' : ''}
-          ref={filterButtonRef}
-          icon={ChevronDownIcon}
-          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>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+
+import { ChevronDownIcon } from '../../../Icons';
+import { DEFAULT_COLUMN_WIDTH } from './constants';
+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 = {},
+    setColumnWidth,
+    saveSettings,
+    headerColor,
+  } = contextValue;
+  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  /** RESIZING */
+
+  const [isResizing, setIsResizing] = useState(false);
+  const resizingOffset = useRef(0);
+
+  const onResizeStart = useCallback(
+    (e: MouseEvent) => {
+      resizingOffset.current =
+        e.screenX - (column.width || DEFAULT_COLUMN_WIDTH);
+      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={[250, 400]}
+        $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.filter && (
+        <IconButton
+          size="small"
+          className={hasFilters ? 'danger' : ''}
+          ref={filterButtonRef}
+          icon={ChevronDownIcon}
+          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/DataGridRowTemplate.tsx

@@ -1,70 +1,70 @@
-import * as styles from './styles';
-
-import { DataGridCell } from './DataGridCell';
-import { DataGridRowTemplateProps } from './types';
-import { VirtualScrollerTemplateProps } from '../VirtualScroller/types';
-import { useContext } from 'react';
-
-export const DataGridRowTemplate = <R,>({
-  item,
-  index,
-  context,
-}: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => {
-  const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
-    useContext(context);
-
-  if (!item) {
-    return (
-      <styles.DataGridRow key={`loading-row-${index}`}>
-        {!!props.selectable && (
-          <styles.LoadingCell className="animate-pulse">
-            <div />
-          </styles.LoadingCell>
-        )}
-        {visibleColumns.map((_, colIndex) => (
-          <styles.LoadingCell
-            className="animate-pulse"
-            key={`loading-${index}-${colIndex}`}
-          >
-            <div />
-          </styles.LoadingCell>
-        ))}
-      </styles.DataGridRow>
-    );
-  }
-  const key = rowKeyGetter(item);
-  const selected = props.selectedKeys.includes(key);
-  const { className, style } = props.rowClassNameGetter?.(item) ?? {
-    className: '',
-    style: undefined,
-  };
-  return (
-    <styles.DataGridRow key={key}>
-      {!!props.selectable && (
-        <styles.SelectionCell
-          key="__select_checkbox__"
-          onClick={() => toggleSelection(key)}
-        >
-          <input
-            type="checkbox"
-            value={key as string}
-            checked={selected}
-            readOnly
-          />
-        </styles.SelectionCell>
-      )}
-      {visibleColumns.map(([key, col], index) => (
-        <DataGridCell
-          key={`loading-${index}-${index}`}
-          {...(index === 0 ? { className, style } : {})}
-          row={item}
-          rowIndex={index}
-          column={col}
-          columnIndex={index}
-          context={context}
-          columnKey={key}
-        />
-      ))}
-    </styles.DataGridRow>
-  );
-};
+import * as styles from './styles';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridRowTemplateProps } from './types';
+import { VirtualScrollerTemplateProps } from '../VirtualScroller/types';
+import { useContext } from 'react';
+
+export const DataGridRowTemplate = <R,>({
+  item,
+  index,
+  context,
+}: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => {
+  const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
+    useContext(context);
+
+  if (!item) {
+    return (
+      <styles.DataGridRow key={`loading-row-${index}`}>
+        {!!props.selectable && (
+          <styles.LoadingCell className="animate-pulse">
+            <div />
+          </styles.LoadingCell>
+        )}
+        {visibleColumns.map((_, colIndex) => (
+          <styles.LoadingCell
+            className="animate-pulse"
+            key={`loading-${index}-${colIndex}`}
+          >
+            <div />
+          </styles.LoadingCell>
+        ))}
+      </styles.DataGridRow>
+    );
+  }
+  const key = rowKeyGetter(item);
+  const selected = props.selectedKeys.includes(key);
+  const { className, style } = props.rowClassNameGetter?.(item) ?? {
+    className: '',
+    style: undefined,
+  };
+  return (
+    <styles.DataGridRow key={key}>
+      {!!props.selectable && (
+        <styles.SelectionCell
+          key="__select_checkbox__"
+          onClick={() => toggleSelection(key)}
+        >
+          <input
+            type="checkbox"
+            value={key as string}
+            checked={selected}
+            readOnly
+          />
+        </styles.SelectionCell>
+      )}
+      {visibleColumns.map(([key, col], index) => (
+        <DataGridCell
+          key={`loading-${index}-${index}`}
+          {...(index === 0 ? { className, style } : {})}
+          row={item}
+          rowIndex={index}
+          column={col}
+          columnIndex={index}
+          context={context}
+          columnKey={key}
+        />
+      ))}
+    </styles.DataGridRow>
+  );
+};