@etsoo/react 1.6.53 → 1.6.55

package/lib/components/GridColumn.d.ts

@@ -1,3 +1,4 @@
+import { EntityStatus } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { GridLoaderStates } from './GridLoader';
@@ -16,6 +17,16 @@ export type GridAlign = 'center' | 'inherit' | 'justify' | 'left' | 'right';
  * @param type Data type
  */
 export declare const GridAlignGet: (align?: GridAlign, type?: GridDataType) => GridAlign | undefined;
+/**
+ * Grid deleted cell box style
+ * @param data Data
+ * @returns Result
+ */
+export declare const GridDeletedCellBoxStyle: (data: undefined | {
+    status: EntityStatus;
+} | {
+    entityStatus: EntityStatus;
+}) => React.CSSProperties;
 /**
  * Grid cell value type
  */
@@ -161,6 +172,10 @@ export type GridColumn<T> = {
      * Cell renderer
      */
     cellRenderer?: (props: GridCellRendererProps<T>) => React.ReactNode;
+    /**
+     * Cell box style
+     */
+    cellBoxStyle?: ((data: T | undefined) => React.CSSProperties) | React.CSSProperties;
     /**
      * Render props
      */

package/lib/components/GridColumn.js

@@ -1,3 +1,4 @@
+import { EntityStatus } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 /**
  * Grid data type
@@ -21,3 +22,20 @@ export const GridAlignGet = (align, type) => {
     }
     return align;
 };
+/**
+ * Grid deleted cell box style
+ * @param data Data
+ * @returns Result
+ */
+export const GridDeletedCellBoxStyle = (data) => {
+    if (data == null)
+        return {};
+    const status = 'status' in data
+        ? data.status
+        : 'entityStatus' in data
+            ? data.entityStatus
+            : EntityStatus.Normal;
+    if (status >= EntityStatus.Inactivated)
+        return { textDecoration: 'line-through', color: 'red' };
+    return {};
+};

package/lib/components/ScrollerList.js

@@ -33,6 +33,7 @@ export const ScrollerList = (props) => {
         updateRows(rows);
     };
     // States
+    const batchSize = GridSizeGet(loadBatchSize, height);
     const stateRefs = React.useRef({
         autoLoad,
         currentPage: 0,
@@ -41,7 +42,7 @@ export const ScrollerList = (props) => {
         isNextPageLoading: false,
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderByAsc,
-        batchSize: GridSizeGet(loadBatchSize, height),
+        batchSize: batchSize,
         selectedItems: [],
         idCache: {}
     });
@@ -69,7 +70,7 @@ export const ScrollerList = (props) => {
             state.isMounted = true;
             const newItems = result.length;
             state.lastLoadedItems = newItems;
-            state.hasNextPage = newItems >= loadBatchSize;
+            state.hasNextPage = newItems >= batchSize;
             state.isNextPageLoading = false;
             if (pageAdd === 0) {
                 // New items

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.6.53",
+    "version": "1.6.55",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -53,7 +53,7 @@
         "@etsoo/appscript": "^1.3.82",
         "@etsoo/notificationbase": "^1.1.24",
         "@etsoo/shared": "^1.1.92",
-        "@types/react": "^18.0.28",
+        "@types/react": "^18.0.29",
         "@types/react-dom": "^18.0.11",
         "@types/react-window": "^1.8.5",
         "react": "^18.2.0",
@@ -73,6 +73,6 @@
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "ts-jest": "^29.0.5",
-        "typescript": "^4.9.5"
+        "typescript": "^5.0.2"
     }
 }

package/src/components/GridColumn.ts

@@ -1,3 +1,4 @@
+import { EntityStatus } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { GridLoaderStates } from './GridLoader';
@@ -32,6 +33,29 @@ export const GridAlignGet = (align?: GridAlign, type?: GridDataType) => {
     return align;
 };
 
+/**
+ * Grid deleted cell box style
+ * @param data Data
+ * @returns Result
+ */
+export const GridDeletedCellBoxStyle = (
+    data: undefined | { status: EntityStatus } | { entityStatus: EntityStatus }
+): React.CSSProperties => {
+    if (data == null) return {};
+
+    const status =
+        'status' in data
+            ? data.status
+            : 'entityStatus' in data
+            ? data.entityStatus
+            : EntityStatus.Normal;
+
+    if (status >= EntityStatus.Inactivated)
+        return { textDecoration: 'line-through', color: 'red' };
+
+    return {};
+};
+
 /**
  * Grid cell value type
  */
@@ -207,6 +231,13 @@ export type GridColumn<T> = {
      */
     cellRenderer?: (props: GridCellRendererProps<T>) => React.ReactNode;
 
+    /**
+     * Cell box style
+     */
+    cellBoxStyle?:
+        | ((data: T | undefined) => React.CSSProperties)
+        | React.CSSProperties;
+
     /**
      * Render props
      */

package/src/components/ScrollerList.tsx

@@ -154,6 +154,7 @@ export const ScrollerList = <
     };
 
     // States
+    const batchSize = GridSizeGet(loadBatchSize, height);
     const stateRefs = React.useRef<GridLoaderStates<T>>({
         autoLoad,
         currentPage: 0,
@@ -162,7 +163,7 @@ export const ScrollerList = <
         isNextPageLoading: false,
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderByAsc,
-        batchSize: GridSizeGet(loadBatchSize, height),
+        batchSize: batchSize,
         selectedItems: [],
         idCache: {}
     });
@@ -195,7 +196,7 @@ export const ScrollerList = <
 
             const newItems = result.length;
             state.lastLoadedItems = newItems;
-            state.hasNextPage = newItems >= loadBatchSize;
+            state.hasNextPage = newItems >= batchSize;
             state.isNextPageLoading = false;
 
             if (pageAdd === 0) {