@addev-be/ui 0.2.5 → 0.2.7

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

@@ -1,132 +1,139 @@
-import * as styles from './styles';
-
-import { DataGridCell } from './DataGridCell';
-import { DataGridFooter } from './DataGridFooter';
-import { DataGridHeader } from './DataGridHeader';
-import { DataGridProps } from './types';
-import { VirtualScroller } from './VirtualScroller';
-import { useCallback } from 'react';
-import { useDataGrid } from './hooks';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-export const DataGrid = <R,>(props: DataGridProps<R>) => {
-  const {
-    className,
-    // onRowDoubleClick,
-    onVisibleRowsChange,
-  } = props;
-  const [contextProps, DataGridContext] = useDataGrid(props);
-  const {
-    selectedKeys,
-    setSelectedKeys,
-    columns,
-    visibleColumns,
-    rowHeight = 32,
-    headerRowHeight = 40,
-    scrollableRef,
-    onScroll,
-    rowKeyGetter,
-  } = contextProps;
-
-  const hasFooter = Object.values(columns).some((col) => col.footer);
-
-  const setRowSelection = useCallback(
-    (row: R, selected: boolean) => {
-      const key = rowKeyGetter(row);
-      if (selected) {
-        if (!selectedKeys.includes(key))
-          setSelectedKeys([...selectedKeys, key]);
-      } else {
-        setSelectedKeys(selectedKeys.filter((p) => p !== key));
-      }
-    },
-    [rowKeyGetter, selectedKeys, setSelectedKeys]
-  );
-
-  const rowTemplate = useCallback(
-    (row: R, rowIndex: number) => {
-      if (!row) {
-        return (
-          <styles.DataGridRow key={`loading-row-${rowIndex}`}>
-            {!!props.selectable && (
-              <styles.LoadingCell className="animate-pulse">
-                <div />
-              </styles.LoadingCell>
-            )}
-            {visibleColumns.map((_, index) => (
-              <styles.LoadingCell
-                className="animate-pulse"
-                key={`loading-${rowIndex}-${index}`}
-              >
-                <div />
-              </styles.LoadingCell>
-            ))}
-          </styles.DataGridRow>
-        );
-      }
-      const key = rowKeyGetter(row);
-      const { className, style } = props.rowClassNameGetter?.(row) ?? {
-        className: '',
-        style: undefined,
-      };
-      return (
-        <styles.DataGridRow key={key}>
-          {!!props.selectable && (
-            <styles.SelectionCell key="__select_checkbox__">
-              <input
-                type="checkbox"
-                value={key as string}
-                checked={selectedKeys.includes(key)}
-                onChange={(e) => setRowSelection(row, e.target.checked)}
-              />
-            </styles.SelectionCell>
-          )}
-          {visibleColumns.map(([key, col], index) => (
-            <DataGridCell
-              key={`loading-${rowIndex}-${index}`}
-              {...(index === 0 ? { className, style } : {})}
-              row={row}
-              rowIndex={rowIndex}
-              column={col}
-              columnIndex={index}
-              context={DataGridContext}
-              columnKey={key}
-            />
-          ))}
-        </styles.DataGridRow>
-      );
-    },
-    [
-      DataGridContext,
-      props,
-      rowKeyGetter,
-      selectedKeys,
-      setRowSelection,
-      visibleColumns,
-    ]
-  );
-
-  return (
-    <DataGridContext.Provider value={contextProps}>
-      <styles.DataGridContainer
-        ref={scrollableRef}
-        onScroll={onScroll}
-        $headerRowHeight={headerRowHeight}
-        $rowHeight={rowHeight}
-        $rowsCount={contextProps.sortedRows.length}
-        className={className}
-      >
-        <DataGridHeader context={DataGridContext} />
-        <VirtualScroller
-          onRangeChange={onVisibleRowsChange}
-          hasFooter={hasFooter}
-          rowTemplate={rowTemplate}
-          context={DataGridContext}
-        />
-        {hasFooter && <DataGridFooter context={DataGridContext} />}
-      </styles.DataGridContainer>
-    </DataGridContext.Provider>
-  );
-};
+import * as styles from './styles';
+
+import { DataGridContextProps, DataGridProps } from './types';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridFooter } from './DataGridFooter';
+import { DataGridHeader } from './DataGridHeader';
+import { VirtualScroller } from './VirtualScroller';
+import { useCallback } from 'react';
+import { useDataGrid } from './hooks';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+export const DataGrid = <R,>({
+  contextOverride,
+  ...props
+}: DataGridProps<R> & {
+  contextOverride?: Partial<DataGridContextProps<R>>;
+}) => {
+  const {
+    className,
+    // onRowDoubleClick,
+    onVisibleRowsChange,
+  } = props;
+  const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
+  const {
+    selectedKeys,
+    setSelectedKeys,
+    columns,
+    visibleColumns,
+    rowHeight = 32,
+    headerRowHeight = 40,
+    scrollableRef,
+    onScroll,
+    rowKeyGetter,
+  } = contextProps;
+
+  const hasFooter = Object.values(columns).some((col) => col.footer);
+
+  const toggleSelection = useCallback(
+    (key: string) => {
+      if (selectedKeys.includes(key)) {
+        setSelectedKeys(selectedKeys.filter((p) => p !== key));
+      } else {
+        setSelectedKeys([...selectedKeys, key]);
+      }
+    },
+    [selectedKeys, setSelectedKeys]
+  );
+
+  const rowTemplate = useCallback(
+    (row: R, rowIndex: number) => {
+      if (!row) {
+        return (
+          <styles.DataGridRow key={`loading-row-${rowIndex}`}>
+            {!!props.selectable && (
+              <styles.LoadingCell className="animate-pulse">
+                <div />
+              </styles.LoadingCell>
+            )}
+            {visibleColumns.map((_, index) => (
+              <styles.LoadingCell
+                className="animate-pulse"
+                key={`loading-${rowIndex}-${index}`}
+              >
+                <div />
+              </styles.LoadingCell>
+            ))}
+          </styles.DataGridRow>
+        );
+      }
+      const key = rowKeyGetter(row);
+      const { className, style } = props.rowClassNameGetter?.(row) ?? {
+        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={selectedKeys.includes(key)}
+                readOnly
+              />
+            </styles.SelectionCell>
+          )}
+          {visibleColumns.map(([key, col], index) => (
+            <DataGridCell
+              key={`loading-${rowIndex}-${index}`}
+              {...(index === 0 ? { className, style } : {})}
+              row={row}
+              rowIndex={rowIndex}
+              column={col}
+              columnIndex={index}
+              context={DataGridContext}
+              columnKey={key}
+            />
+          ))}
+        </styles.DataGridRow>
+      );
+    },
+    [
+      DataGridContext,
+      props,
+      rowKeyGetter,
+      selectedKeys,
+      toggleSelection,
+      visibleColumns,
+    ]
+  );
+
+  return (
+    <DataGridContext.Provider value={contextProps}>
+      <styles.DataGridContainer
+        ref={scrollableRef}
+        onScroll={onScroll}
+        $headerRowHeight={headerRowHeight}
+        $rowHeight={rowHeight}
+        $rowsCount={contextProps.sortedRows.length}
+        className={className}
+      >
+        <DataGridHeader context={DataGridContext} />
+        <VirtualScroller
+          onRangeChange={onVisibleRowsChange}
+          hasFooter={hasFooter}
+          rowTemplate={rowTemplate}
+          context={DataGridContext}
+        />
+        {hasFooter && <DataGridFooter context={DataGridContext} />}
+      </styles.DataGridContainer>
+    </DataGridContext.Provider>
+  );
+};