@azrico/reactgrid 1.0.23 → 1.1.1

package/dist/src/example.js

@@ -25,20 +25,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const columns = [{
-  name: 'username',
-  title: 'Username',
-  editor: 'input'
-}, {
-  name: 'job',
-  title: 'Job'
-}, {
-  name: 'age',
-  title: 'Age',
-  editor: 'input'
-}, {
-  title: 'Example',
-  field: 'example',
-  editor: 'input'
+  name: 'name',
+  title: 'Category',
+  defaultFlex: 1
 }];
 const leftColumns = ['username', 'row'];
 const customColumns = [{
@@ -47,13 +36,19 @@ const customColumns = [{
     return _react.default.createElement("div", null, "test");
   }
 }];
+const filterValue = [{
+  name: 'name',
+  operator: 'contains',
+  type: 'string',
+  value: ''
+}];
 const contextMenuItems = ['test'];
 function getData() {
   const fd = [];
-  for (let index = 0; index < 16; index++) {
+  for (let index = 0; index < 200; index++) {
     fd.push({
       __table_id: String(index),
-      username: 'user-' + index,
+      name: 'user-' + index,
       age: 20
     });
     if (index % 5 == 0) {
@@ -61,7 +56,7 @@ function getData() {
       fd.push({
         __table_id: sub_selfid,
         __parent__table_id: String(index),
-        username: 'sub-' + index,
+        name: 'sub-' + index,
         age: 20
       });
       if (index % 2 == 0) {
@@ -69,7 +64,7 @@ function getData() {
         fd.push({
           __table_id: sub2_selfid,
           __parent__table_id: sub_selfid,
-          username: 'sub2-' + index,
+          name: 'sub2-' + index,
           age: 20
         });
       }
@@ -77,6 +72,7 @@ function getData() {
   }
   return fd;
 }
+//TODO REMOTE FILTER OFF ?
 function ExampleGrid() {
   const [selected, setSelected] = _react.default.useState(null);
   const onSelectionChange = _react.default.useCallback(({
@@ -89,42 +85,24 @@ function ExampleGrid() {
     return await new Promise(resolve => {
       setTimeout(() => {
         console.log('end loading');
-        resolve({
-          data: getData(),
-          count: 999
-        });
+        resolve(getData());
       }, 1000);
     });
   }, []);
-  return _react.default.createElement("div", null, _react.default.createElement(_DataGrid.default, {
-    dark: true,
-    allowChildRows: true,
-    onSelectionChange: onSelectionChange,
-    selected: selected,
-    contextMenuItems: contextMenuItems,
-    customColumns: customColumns,
-    columns: columns,
-    leftColumns: leftColumns,
-    gridOptions: {
-      pagination: 'remote',
-      defaultLimit: 100,
-      limit: 100,
-      pageSizes: [100],
-      rowIndexColumn: true,
-      checkboxColumn: true
-    },
-    dataSource: dataSource
-  }), _react.default.createElement(_DataGrid.default, {
+  return _react.default.createElement(_DataGrid.default, {
     dark: true,
     allowChildRows: true,
-    onSelectionChange: onSelectionChange,
-    selected: selected,
+    // onSelectionChange={onSelectionChange}
+    // selected={selected}
     contextMenuItems: contextMenuItems,
     customColumns: customColumns,
     columns: columns,
     leftColumns: leftColumns,
     gridOptions: {
-      pagination: 'remote',
+      defaultFilterValue: filterValue,
+      remoteFilter: false,
+      multiSelect: true,
+      pagination: 'local',
       defaultLimit: 100,
       limit: 100,
       pageSizes: [100],
@@ -132,7 +110,7 @@ function ExampleGrid() {
       checkboxColumn: true
     },
     dataSource: dataSource
-  }));
+  });
 }
 var _default = ExampleGrid;
 exports.default = _default;

package/dist/src/index.js

@@ -17,8 +17,14 @@ Object.keys(_DataGrid).forEach(function (key) {
     }
   });
 });
+var _example = _interopRequireDefault(require("./example"));
+var _react = _interopRequireDefault(require("react"));
+var _client = _interopRequireDefault(require("react-dom/client"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var _default = _DataGrid.default; // const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-// root.render(<ExampleGrid />);
-exports.default = _default;
+/* -------------------------------------------------------------------------- */
+var _default = _DataGrid.default;
+exports.default = _default;
+const root = _client.default.createRoot(document.getElementById('root'));
+root.render(_react.default.createElement(_example.default, null));

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

@@ -4,7 +4,7 @@ import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
 import '../themes/base_styles.css';
 import '../themes/grid.css';
 import React from 'react';
-import { TypeColumn, TypeDataGridProps, TypeDataSource, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
+import { TypeColumn, TypeDataGridProps, TypeDataSource, TypeFilterTypes, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 export type ColumnDefinition = TypeColumn;
 export type CellDefinition = any;
@@ -12,6 +12,7 @@ export type RowDefinition = any;
 export type RowProps = TypeRowProps;
 export type RowSelectionValue = TypeRowSelection;
 export type DataRowDefinition = any;
+export type FilterTypes = TypeFilterTypes;
 export type DataSourceDefinition = TypeDataSource;
 export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
 export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;

package/dist/src/views/DataGrid.js

@@ -15,9 +15,28 @@ var _helpers = require("../func/helpers");
 var _controls = require("@azrico/controls");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _object = require("@azrico/object");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* -------------------------------------------------------------------------- */
+// const defaultfilterTypes: FilterTypes = {
+// 	string: {
+// 		type: 'string',
+// 		emptyValue: '',
+// 		operators: [
+// 			{
+// 				name: 'contains',
+// 				fn: ({ value, filterValue, data }) => {
+// 					console.log('fn');
+// 					return !filterValue ? true : value.indexOf(filterValue) != -1;
+// 				},
+// 			},
+// 		],
+// 	},
+// };
 const defaultOptions = {
+  //filterTypes: defaultfilterTypes,
+  remoteFilter: false,
+  remoteSort: false,
   rowReorderColumn: false,
   resizable: true,
   rowIndexColumn: true
@@ -42,18 +61,48 @@ function AzGrid(props) {
   /* -------------------------------------------------------------------------- */
   /*                                 Row changes                                */
   /* -------------------------------------------------------------------------- */
+  const cached_data = _react.default.useRef();
+  const last_cache_info = _react.default.useRef();
   const dataSource = _react.default.useCallback(async dt => {
     let result_data = undefined;
-    if (typeof props.dataSource === 'function') {
-      result_data = await props.dataSource(dt);
+    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 (!(0, _object.object_equals)(last_cache_info.current, cacheInfo)) {
+      //console.log('invalid cache', cacheInfo);
+      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') {
+        result_data = await props.dataSource(dt);
+      } else result_data = props.dataSource;
     }
+    //making sure the datasource is a valid object :
     if (!result_data) result_data = [];
     if (Array.isArray(result_data) || typeof result_data !== 'object') result_data = {
       data: result_data
     };
     if (!Array.isArray(result_data.data)) result_data.data = [result_data.data];
-    if (props.allowChildRows) result_data.data = (0, _helpers.fix_parent_child_relations)(result_data.data);
+    //no need to fix parent/child when using cache (it should be already fixed)
+    if (!isUsingCache && props.allowChildRows) result_data.data = (0, _helpers.fix_parent_child_relations)(result_data.data);
     if (!result_data.count) result_data.count = result_data.data.length;
+    //update cache
+    cached_data.current = result_data;
     return result_data;
   }, [props.dataSource]);
   return _react.default.createElement(DataGrid, {
@@ -72,6 +121,7 @@ function DataGrid(props) {
     contextMenuItems
   } = props;
   /* -------------------------------------------------------------------------- */
+  const gridRef = _react.default.useRef(null);
   const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
   const [menuRow, set_menuRow] = _react.default.useState(null);
   /* -------------------------------------------------------------------------- */
@@ -145,6 +195,7 @@ function DataGrid(props) {
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
     ...static_gridOptions,
     ...dynamic_gridOptions,
+    handle: ref => gridRef.current = ref ? ref.current : null,
     className: 'azgrid-filler',
     columns: columns,
     dataSource: dataSource

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.0.23",
+	"version": "1.1.1",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -30,6 +30,7 @@
 	},
 	"dependencies": {
 		"@azrico/controls": "1.3.0",
+		"@azrico/object": "^1.3.1",
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
 		"@inovua/reactdatagrid-enterprise": "^5.8.0",

package/src/example.tsx

@@ -5,11 +5,12 @@ import { LooseColumnDefinition } from './views/DataGrid';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-const columns: LooseColumnDefinition[] = [
-	{ name: 'username', title: 'Username', editor: 'input' },
-	{ name: 'job', title: 'Job' },
-	{ name: 'age', title: 'Age', editor: 'input' },
-	{ title: 'Example', field: 'example', editor: 'input' },
+const columns = [
+	{
+		name: 'name',
+		title: 'Category',
+		defaultFlex: 1,
+	},
 ];
 const leftColumns = ['username', 'row'];
 const customColumns = [
@@ -20,18 +21,26 @@ const customColumns = [
 		},
 	},
 ];
+const filterValue = [
+	{
+		name: 'name',
+		operator: 'contains',
+		type: 'string',
+		value: '',
+	},
+];
 
 const contextMenuItems = ['test'];
 function getData() {
 	const fd: any[] = [];
-	for (let index = 0; index < 16; index++) {
-		fd.push({ __table_id: String(index), username: 'user-' + index, age: 20 });
+	for (let index = 0; index < 200; index++) {
+		fd.push({ __table_id: String(index), name: 'user-' + index, age: 20 });
 		if (index % 5 == 0) {
 			const sub_selfid = 's' + index;
 			fd.push({
 				__table_id: sub_selfid,
 				__parent__table_id: String(index),
-				username: 'sub-' + index,
+				name: 'sub-' + index,
 				age: 20,
 			});
 			if (index % 2 == 0) {
@@ -39,7 +48,7 @@ function getData() {
 				fd.push({
 					__table_id: sub2_selfid,
 					__parent__table_id: sub_selfid,
-					username: 'sub2-' + index,
+					name: 'sub2-' + index,
 					age: 20,
 				});
 			}
@@ -47,7 +56,7 @@ function getData() {
 	}
 	return fd;
 }
-
+//TODO REMOTE FILTER OFF ?
 export function ExampleGrid() {
 	const [selected, setSelected] = React.useState(null);
 
@@ -60,52 +69,34 @@ export function ExampleGrid() {
 		return await new Promise((resolve) => {
 			setTimeout(() => {
 				console.log('end loading');
-				resolve({ data: getData(), count: 999 });
+				resolve(getData());
 			}, 1000);
 		});
 	}, []);
 
 	return (
-		<div>
-			<AzGrid
-				dark
-				allowChildRows
-				onSelectionChange={onSelectionChange}
-				selected={selected}
-				contextMenuItems={contextMenuItems}
-				customColumns={customColumns}
-				columns={columns}
-				leftColumns={leftColumns}
-				gridOptions={{
-					pagination: 'remote',
-					defaultLimit: 100,
-					limit: 100,
-					pageSizes: [100],
-					rowIndexColumn: true,
-					checkboxColumn: true,
-				}}
-				dataSource={dataSource}
-			/>
-			<AzGrid
-				dark
-				allowChildRows
-				onSelectionChange={onSelectionChange}
-				selected={selected}
-				contextMenuItems={contextMenuItems}
-				customColumns={customColumns}
-				columns={columns}
-				leftColumns={leftColumns}
-				gridOptions={{
-					pagination: 'remote',
-					defaultLimit: 100,
-					limit: 100,
-					pageSizes: [100],
-					rowIndexColumn: true,
-					checkboxColumn: true,
-				}}
-				dataSource={dataSource}
-			/>
-		</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}
+		/>
 	);
 }
 export default ExampleGrid;

package/src/index.tsx

@@ -7,5 +7,5 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 export default AzGrid;
 
-// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-// root.render(<ExampleGrid />);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(<ExampleGrid />);

package/src/views/DataGrid.tsx

@@ -9,6 +9,7 @@ import {
 	TypeColumn,
 	TypeDataGridProps,
 	TypeDataSource,
+	TypeFilterTypes,
 	TypeRowDetailsInfo,
 	TypeRowProps,
 	TypeRowSelection,
@@ -19,6 +20,7 @@ import { ContextMenu } from '@azrico/controls';
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 import clsx from 'clsx';
+import { object_equals } from '@azrico/object';
 import { useResizeDetector } from 'react-resize-detector';
 
 /* -------------------------------------------------------------------------- */
@@ -33,6 +35,7 @@ export type RowDefinition = any;
 export type RowProps = TypeRowProps;
 export type RowSelectionValue = TypeRowSelection;
 export type DataRowDefinition = any;
+export type FilterTypes = TypeFilterTypes;
 export type DataSourceDefinition = TypeDataSource;
 export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
 export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
@@ -99,10 +102,28 @@ type DataGridProps = ModifyFields<
 	}
 >;
 /* -------------------------------------------------------------------------- */
+// const defaultfilterTypes: FilterTypes = {
+// 	string: {
+// 		type: 'string',
+// 		emptyValue: '',
+// 		operators: [
+// 			{
+// 				name: 'contains',
+// 				fn: ({ value, filterValue, data }) => {
+// 					console.log('fn');
+// 					return !filterValue ? true : value.indexOf(filterValue) != -1;
+// 				},
+// 			},
+// 		],
+// 	},
+// };
 const defaultOptions: GridOptions = {
+	//filterTypes: defaultfilterTypes,
+	remoteFilter: false,
+	remoteSort: false,
+
 	rowReorderColumn: false,
 	resizable: true,
-
 	rowIndexColumn: true,
 };
 const forcedOptions: GridOptions = {
@@ -132,22 +153,57 @@ export function AzGrid(props: AzGridProps) {
 	/* -------------------------------------------------------------------------- */
 	/*                                 Row changes                                */
 	/* -------------------------------------------------------------------------- */
+
+	const cached_data = React.useRef<any>();
+	const last_cache_info = React.useRef<any>();
+
 	const dataSource = React.useCallback(
 		async (dt) => {
 			let result_data: any = undefined;
-			if (typeof props.dataSource === 'function') {
-				result_data = await props.dataSource(dt);
+
+			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);
+				cached_data.current = undefined;
+				last_cache_info.current = cacheInfo;
 			}
-			if (!result_data) result_data = [];
 
+			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') {
+					result_data = await props.dataSource(dt);
+				} else result_data = props.dataSource;
+			}
+
+			//making sure the datasource is a valid object :
+			if (!result_data) result_data = [];
 			if (Array.isArray(result_data) || typeof result_data !== 'object')
 				result_data = { data: result_data };
 
 			if (!Array.isArray(result_data.data)) result_data.data = [result_data.data];
-			if (props.allowChildRows)
+
+			//no need to fix parent/child when using cache (it should be already fixed)
+			if (!isUsingCache && props.allowChildRows)
 				result_data.data = fix_parent_child_relations(result_data.data);
+
 			if (!result_data.count) result_data.count = (result_data.data as Array<any>).length;
 
+			//update cache
+			cached_data.current = result_data;
 			return result_data;
 		},
 		[props.dataSource]
@@ -167,6 +223,7 @@ function DataGrid(props: DataGridProps) {
 	const { columns, dataSource, dark, contextMenuItems } = props;
 
 	/* -------------------------------------------------------------------------- */
+	const gridRef = React.useRef<any>(null);
 
 	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
 	const [menuRow, set_menuRow] = React.useState<any>(null);
@@ -245,6 +302,7 @@ function DataGrid(props: DataGridProps) {
 			<ReactDataGrid
 				{...static_gridOptions}
 				{...dynamic_gridOptions}
+				handle={(ref) => (gridRef.current = ref ? ref.current : null)}
 				className={'azgrid-filler'}
 				columns={columns}
 				dataSource={dataSource}