@azrico/reactgrid 1.1.2 → 1.1.4

package/dist/src/example.js

@@ -72,24 +72,24 @@ function getData() {
   }
   return fd;
 }
-//TODO REMOTE FILTER OFF ?
 function ExampleGrid() {
-  const [selected, setSelected] = _react.default.useState(null);
-  const onSelectionChange = _react.default.useCallback(({
-    selected
-  }) => {
-    setSelected(selected);
-  }, []);
+  const [ds_reset, set_ds_reset] = _react.default.useState(0);
   const dataSource = _react.default.useCallback(async dt => {
-    console.log('Start loading');
+    //console.log('Start loading');
     return await new Promise(resolve => {
       setTimeout(() => {
-        console.log('end loading');
+        //console.log('end loading');
         resolve(getData());
       }, 1000);
     });
-  }, []);
-  return _react.default.createElement(_DataGrid.default, {
+  }, [ds_reset]);
+  function rst_ds() {
+    //console.log('rst_ds');
+    set_ds_reset(s => s + 1);
+  }
+  return _react.default.createElement("div", null, _react.default.createElement("div", {
+    onClick: rst_ds
+  }, "RESET"), _react.default.createElement(_DataGrid.default, {
     dark: true,
     allowChildRows: true,
     // onSelectionChange={onSelectionChange}
@@ -110,7 +110,7 @@ function ExampleGrid() {
       checkboxColumn: true
     },
     dataSource: dataSource
-  });
+  }));
 }
 var _default = ExampleGrid;
 exports.default = _default;

package/dist/src/themes/grid.css

@@ -13,3 +13,8 @@
 .InovuaReactDataGrid__cell {
 	background: var(--grid-bg) !important;
 } */
+.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
+	height: 100%;
+	display: flex;
+	align-items: center;
+}

package/dist/src/views/DataGrid.d.ts

@@ -58,6 +58,7 @@ export type AzGridProps = {
     loading?: boolean;
     dark?: boolean;
     allowChildRows?: boolean;
+    looseCacheCheck?: boolean;
     className?: string;
 };
 export declare function AzGrid(props: AzGridProps): JSX.Element;

package/dist/src/views/DataGrid.js

@@ -66,7 +66,6 @@ function AzGrid(props) {
   const dataSource = _react.default.useCallback(async dt => {
     let result_data = undefined;
     let isUsingCache = false;
-    //console.log(dt);
     const cacheInfo = {
       ds: props.dataSource,
       skip: dt.skip,
@@ -74,18 +73,15 @@ function AzGrid(props) {
     };
     //check if we can used cached data
     //if the datasource is changed since last render, we should invalidate cache
-    if (!(0, _object.object_equals)(last_cache_info.current, cacheInfo)) {
-      //console.log('invalid cache', cacheInfo);
+    if (!validateCache(last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
       cached_data.current = undefined;
       last_cache_info.current = cacheInfo;
     }
     if (cached_data.current) {
       //cache is valid, use the cache
-      //console.log('use cache', cached_data.current);
       isUsingCache = true;
       result_data = cached_data.current;
     } else {
-      //console.log('use ds');
       //cache is invalid, use the datasource again
       isUsingCache = false;
       if (typeof props.dataSource === 'function') {
@@ -225,6 +221,13 @@ function get_col_name(obj) {
 function get_default_key() {
   return 'ExpiryDate=2999-01-01,Z=1040577552';
 }
+//check if two cache objects are the same
+function validateCache(current, old, looseCheck = false) {
+  if (!old || !(0, _object.object_equals)(current, old)) return false;
+  if (looseCheck) return true;
+  if (current.ds != old.ds) return false;
+  return true;
+}
 /**
  * merges together all different props for columns
  * to build a single final column data array

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.1.2",
+	"version": "1.1.4",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/example.tsx

@@ -56,47 +56,54 @@ function getData() {
 	}
 	return fd;
 }
-//TODO REMOTE FILTER OFF ?
+
 export function ExampleGrid() {
-	const [selected, setSelected] = React.useState(null);
+	const [ds_reset, set_ds_reset] = React.useState(0);
 
-	const onSelectionChange = React.useCallback(({ selected }) => {
-		setSelected(selected);
-	}, []);
+	const dataSource = React.useCallback(
+		async (dt) => {
+			//console.log('Start loading');
+			return await new Promise((resolve) => {
+				setTimeout(() => {
+					//console.log('end loading');
+					resolve(getData());
+				}, 1000);
+			});
+		},
+		[ds_reset]
+	);
 
-	const dataSource = React.useCallback(async (dt) => {
-		console.log('Start loading');
-		return await new Promise((resolve) => {
-			setTimeout(() => {
-				console.log('end loading');
-				resolve(getData());
-			}, 1000);
-		});
-	}, []);
+	function rst_ds() {
+		//console.log('rst_ds');
+		set_ds_reset((s) => s + 1);
+	}
 
 	return (
-		<AzGrid
-			dark
-			allowChildRows
-			// onSelectionChange={onSelectionChange}
-			// selected={selected}
-			contextMenuItems={contextMenuItems}
-			customColumns={customColumns}
-			columns={columns}
-			leftColumns={leftColumns}
-			gridOptions={{
-				defaultFilterValue: filterValue,
-				remoteFilter: false,
-				multiSelect: true,
-				pagination: 'local',
-				defaultLimit: 100,
-				limit: 100,
-				pageSizes: [100],
-				rowIndexColumn: true,
-				checkboxColumn: true,
-			}}
-			dataSource={dataSource}
-		/>
+		<div>
+			<div onClick={rst_ds}>RESET</div>
+			<AzGrid
+				dark
+				allowChildRows
+				// onSelectionChange={onSelectionChange}
+				// selected={selected}
+				contextMenuItems={contextMenuItems}
+				customColumns={customColumns}
+				columns={columns}
+				leftColumns={leftColumns}
+				gridOptions={{
+					defaultFilterValue: filterValue,
+					remoteFilter: false,
+					multiSelect: true,
+					pagination: 'local',
+					defaultLimit: 100,
+					limit: 100,
+					pageSizes: [100],
+					rowIndexColumn: true,
+					checkboxColumn: true,
+				}}
+				dataSource={dataSource}
+			/>
+		</div>
 	);
 }
 export default ExampleGrid;

package/src/themes/grid.css

@@ -13,3 +13,8 @@
 .InovuaReactDataGrid__cell {
 	background: var(--grid-bg) !important;
 } */
+.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
+	height: 100%;
+	display: flex;
+	align-items: center;
+}

package/src/views/DataGrid.tsx

@@ -90,7 +90,7 @@ export type AzGridProps = {
 	loading?: boolean;
 	dark?: boolean;
 	allowChildRows?: boolean;
-
+	looseCacheCheck?: boolean;
 	className?: string;
 };
 
@@ -162,28 +162,23 @@ export function AzGrid(props: AzGridProps) {
 			let result_data: any = undefined;
 
 			let isUsingCache = false;
-			//console.log(dt);
+
 			const cacheInfo = { ds: props.dataSource, skip: dt.skip, limit: dt.limit };
 			//check if we can used cached data
 			//if the datasource is changed since last render, we should invalidate cache
-			if (!object_equals(last_cache_info.current, cacheInfo)) {
-				//console.log('invalid cache', cacheInfo);
+			if (!validateCache(last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
 				cached_data.current = undefined;
 				last_cache_info.current = cacheInfo;
 			}
 
 			if (cached_data.current) {
 				//cache is valid, use the cache
-				//console.log('use cache', cached_data.current);
-
 				isUsingCache = true;
 				result_data = cached_data.current;
 			} else {
-				//console.log('use ds');
-
 				//cache is invalid, use the datasource again
-				isUsingCache = false;
 
+				isUsingCache = false;
 				if (typeof props.dataSource === 'function') {
 					result_data = await props.dataSource(dt);
 				} else result_data = props.dataSource;
@@ -339,6 +334,15 @@ function get_default_key() {
 	return 'ExpiryDate=2999-01-01,Z=1040577552';
 }
 
+//check if two cache objects are the same
+function validateCache(current: any, old: any, looseCheck = false) {
+	if (!old || !object_equals(current, old)) return false;
+
+	if (looseCheck) return true;
+
+	if (current.ds != old.ds) return false;
+	return true;
+}
 /**
  * merges together all different props for columns
  * to build a single final column data array