@addev-be/ui 0.6.9 → 0.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

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

@@ -34,6 +34,7 @@ export const useDataGrid = <R,>(
     onSortsChanged,
     loadCopyRows,
     onSelectionChange,
+    onSelectedRowsChanged,
     selectable,
     initialSorts,
   } = props;
@@ -87,6 +88,9 @@ export const useDataGrid = <R,>(
   useEffect(() => {
     onSelectionChange?.(selectedKeys);
   }, [onSelectionChange, selectedKeys]);
+  useEffect(() => {
+    onSelectedRowsChanged?.(selectedRows);
+  }, [onSelectedRowsChanged, selectedRows]);
 
   const toggleSelection = useCallback(
     (key: string) => {

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

@@ -1,7 +1,13 @@
 import * as styles from './styles';
 
-import { Context, useRef } from 'react';
-import { DataGridContextProps, DataGridProps } from './types';
+import {
+  Context,
+  ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
 
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
@@ -12,12 +18,15 @@ 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>>;
-}) => {
+export const DataGridInner = <R,>(
+  {
+    contextOverride,
+    ...props
+  }: DataGridProps<R> & {
+    contextOverride?: Partial<DataGridContextProps<R>>;
+  },
+  ref: ForwardedRef<DataGridRefProps<R>>
+) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const { className } = props;
   const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
@@ -28,8 +37,17 @@ export const DataGrid = <R,>({
     gridTemplateColumns,
     sortedRows,
     onVisibleRowsChange,
+    refresh,
   } = contextProps;
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh,
+    }),
+    [refresh]
+  );
+
   const hasFooter = Object.values(columns).some((col) => col.footer);
 
   const rowTemplate = DataGridRowTemplate;
@@ -58,3 +76,5 @@ export const DataGrid = <R,>({
     </DataGridContext.Provider>
   );
 };
+
+export const DataGrid = forwardRef(DataGridInner);

package/src/components/data/DataGrid/types.ts

@@ -73,6 +73,7 @@ export type DataGridProps<R> = {
   editable?: boolean;
   onRowDoubleClick?: (row: R, e: MouseEvent) => void;
   onSelectionChange?: (keys: string[]) => void;
+  onSelectedRowsChanged?: (rows: R[]) => void;
   getAllIds?: () => Promise<string[]>;
   onFiltersChanged?: (filters: DataGridFilters) => void;
   onSortsChanged?: (sorts: Record<string, DataGridSort>) => void;
@@ -268,3 +269,5 @@ export type DataGridRowTemplateProps<R> = {
   toggleSelection?: () => void;
   context: DataGridContext<R>;
 };
+
+export type DataGridRefProps<R> = Pick<DataGridContextProps<R>, 'refresh'>;

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

@@ -8,20 +8,33 @@ import {
 import {
   DataGridFilters,
   DataGridFooterFunction,
+  DataGridRefProps,
   DataGridSort,
 } from '../DataGrid/types';
+import {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import _, { debounce } from 'lodash';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { DataGrid } from '../DataGrid';
 import { SqlRequestDataGridProps } from './types';
 import { convertSqlFiltersToConditions } from './helpers';
 import { isColumnVisible } from '../DataGrid/helpers';
 
-export const SqlRequestDataGrid = <R,>({
-  onSelectionChange: onSelectionChangeFromProps,
-  ...props
-}: SqlRequestDataGridProps<R>) => {
+export const SqlRequestDataGridInner = <R,>(
+  {
+    onSelectionChange: onSelectionChangeFromProps,
+    ...props
+  }: SqlRequestDataGridProps<R>,
+  ref: ForwardedRef<DataGridRefProps<R>>
+) => {
   const currentRows = useRef<R[]>([]);
   const [rows, setRows] = useState<R[]>([]);
   const [start, setStart] = useState(0);
@@ -331,6 +344,14 @@ export const SqlRequestDataGrid = <R,>({
     [footers, setFooters, footerFunctions]
   );
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh,
+    }),
+    [refresh]
+  );
+
   return (
     <DataGrid
       onVisibleRowsChange={onVisibleRowsChanged}
@@ -349,3 +370,5 @@ export const SqlRequestDataGrid = <R,>({
     />
   );
 };
+
+export const SqlRequestDataGrid = forwardRef(SqlRequestDataGridInner);

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

@@ -5,22 +5,34 @@ import {
   OrderByDTO,
   useSqlRequestHandler,
 } from '../../../services/sqlRequests';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { SqlRequestGridProps, SqlRequestGridRefProps } from './types';
 
-import { SqlRequestGridProps } from './types';
 import { VirtualScroller } from '../VirtualScroller';
 import { debounce } from 'lodash';
 import { isColumnVisible } from '../DataGrid/helpers';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export const SqlRequestGrid = <R, P extends object = {}>({
-  rowHeight = styles.DEFAULT_ROW_HEIGHT,
-  itemsPerRow,
-  itemTemplate,
-  itemProps,
-  gap,
-  ...props
-}: SqlRequestGridProps<R, P>) => {
+export const SqlRequestGridInner = <R, P extends object = {}>(
+  {
+    rowHeight = styles.DEFAULT_ROW_HEIGHT,
+    itemsPerRow,
+    itemTemplate,
+    itemProps,
+    gap,
+    ...props
+  }: SqlRequestGridProps<R, P>,
+  ref: ForwardedRef<SqlRequestGridRefProps>
+) => {
   const currentRows = useRef<R[]>([]);
   const [rows, setRows] = useState<R[]>([]);
   const [start, setStart] = useState(0);
@@ -128,6 +140,21 @@ export const SqlRequestGrid = <R, P extends object = {}>({
     [length, start]
   );
 
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setCount(-1);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh,
+    }),
+    [refresh]
+  );
+
   return (
     <styles.SqlRequestGridContainer>
       <VirtualScroller
@@ -143,3 +170,5 @@ export const SqlRequestGrid = <R, P extends object = {}>({
     </styles.SqlRequestGridContainer>
   );
 };
+
+export const SqlRequestGrid = forwardRef(SqlRequestGridInner);

package/src/components/data/SqlRequestGrid/types.ts

@@ -44,3 +44,7 @@ export type SqlRequestGridProps<R, P extends object = {}> = {
   parser?: (row: SqlRequestRow<R>) => R;
   itemProps: P;
 };
+
+export type SqlRequestGridRefProps = {
+  refresh: () => void;
+};

package/src/typings.d.ts

@@ -4,3 +4,10 @@
 export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+}