@azrico/reactgrid 1.2.4 → 1.2.6

package/dist/src/views/DataGrid.js

@@ -5,40 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AzGrid = AzGrid;
 exports.default = void 0;
-exports.get_col_header = get_col_header;
-exports.get_col_name = get_col_name;
 require("@inovua/reactdatagrid-enterprise/index.css");
 require("@inovua/reactdatagrid-enterprise/theme/default-dark.css");
 require("@inovua/reactdatagrid-enterprise/theme/amber-dark.css");
 require("../themes/base_styles.css");
 require("../themes/grid.css");
+var _func_grid = require("../func/func_grid");
 var _controls = require("@azrico/controls");
 var _react = _interopRequireDefault(require("react"));
-var _helpers = require("../func/helpers");
-var _BoolEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/BoolEditor"));
-var _NumericEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/NumericEditor"));
+var _func_child = require("../func/func_child");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
-var _SelectEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/SelectEditor"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _object = require("@azrico/object");
 var _reactUseSize = require("react-use-size");
 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,
@@ -56,19 +36,16 @@ const forcedOptions = {
   idProperty: '__table_id',
   nodesProperty: '__children'
 };
-const defaultColumnOptions = {
-  draggable: false,
-  lockable: false,
-  editable: false
-};
 const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
 /* -------------------------------------------------------------------------- */
 function AzGrid(props) {
+  const gridRefBackup = _react.default.useRef(null);
+  const gridRef = props.gridRef || gridRefBackup;
   /* -------------------------------------------------------------------------- */
   /*                                   Columns                                  */
   /* -------------------------------------------------------------------------- */
   const cached_columns = _react.default.useMemo(() => {
-    return ApplyColumnData(props);
+    return (0, _func_grid.ApplyColumnData)(props);
   }, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
   /* -------------------------------------------------------------------------- */
   /*                                 Row changes                                */
@@ -76,46 +53,16 @@ function AzGrid(props) {
   const cached_data = _react.default.useRef();
   const last_cache_info = _react.default.useRef();
   const dataSource = _react.default.useCallback(async dt => {
-    let result_data = undefined;
-    let isUsingCache = false;
-    const cacheInfo = {
-      ds: props.dataSource,
+    return await (0, _func_grid.ApplyDataSource)(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 (!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
-      isUsingCache = true;
-      result_data = cached_data.current;
-    } else {
-      //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];
-    //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;
+      limit: dt.limit,
+      cached_data: cached_data,
+      last_cache_info: last_cache_info
+    });
   }, [props.dataSource]);
   const base_gridOptions = _react.default.useMemo(() => {
     const firstcolumn = cached_columns[0];
-    const licenseKey = props.licenseKey || get_default_key();
+    const licenseKey = props.licenseKey || (0, _func_grid.get_default_key)();
     const events = {
       onSkipChange: props.onSkipChange,
       onLimitChange: props.onLimitChange,
@@ -151,6 +98,7 @@ function AzGrid(props) {
   }, dynamic_option_names.map(r => props[r]));
   return _react.default.createElement(DataGridEventsWrapper, {
     ...props,
+    gridRef: gridRef,
     static_gridOptions: static_gridOptions,
     dynamic_gridOptions: dynamic_gridOptions,
     columns: cached_columns,
@@ -171,22 +119,22 @@ function DataGridEventsWrapper(props) {
   const [menuRow, set_menuRow] = _react.default.useState(null);
   /* --------------------------------- events --------------------------------- */
   const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
-    if (_helpers.func_selection.has_selection()) return;
+    if (_func_child.func_selection.has_selection()) return;
     update_menuRow(rowProps.data);
-    update_menuAnchorEl(_helpers.func_selection.getVirtualElement(event.clientX, event.clientY));
+    update_menuAnchorEl(_func_child.func_selection.getVirtualElement(event.clientX, event.clientY));
     event.preventDefault();
   }, []);
   const onRowClick = _react.default.useCallback((rowProps, event) => {
     const nowDate = Date.now();
-    const lastclick = click_data.current[get_row_id(rowProps)];
+    const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
     if (lastclick) {
       const diffTime = Math.abs(nowDate - lastclick);
       if (diffTime < 400) {
-        click_data.current[get_row_id(rowProps)] = null;
+        click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
         return props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
       }
     }
-    click_data.current[get_row_id(rowProps)] = nowDate;
+    click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
     return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
   }, [props.onRowClick, props.onRowDoubleClick]);
   _react.default.useEffect(() => {
@@ -216,18 +164,63 @@ function DataGridEventsWrapper(props) {
       ...events
     };
   }, [props.static_gridOptions, onRowClick]);
-  return _react.default.createElement(DataGridSizeWrapper, {
-    ...props,
-    static_gridOptions: static_gridOptions
-  }, _react.default.createElement(_controls.ContextMenu, {
+  const contextMenu = _react.default.createElement(_controls.ContextMenu, {
     menuAnchorEl: menuAnchorEl,
     set_menuAnchorEl: update_menuAnchorEl,
     menuRow: menuRow,
     menu_items: props.contextMenuItems
-  }), props.children);
+  });
+  if (props.details_dataSource) {
+    return _react.default.createElement(DataGridDetailsWrapper, {
+      ...props,
+      static_gridOptions: static_gridOptions
+    }, contextMenu, props.children);
+  } else {
+    return _react.default.createElement(DataGridSizeWrapper, {
+      ...props,
+      static_gridOptions: static_gridOptions
+    }, contextMenu, props.children);
+  }
+}
+function DataGridDetailsWrapper(props) {
+  const cached_details_columns = _react.default.useMemo(() => {
+    return (0, _func_grid.ApplyColumnData)(props.details_columns);
+  }, [props.details_columns]);
+  const cached_data = _react.default.useRef();
+  const last_cache_info = _react.default.useRef();
+  const dataSource = _react.default.useCallback(async dt => {
+    const res = await (0, _func_grid.ApplyDataSource)(props.details_dataSource, {
+      skip: dt.skip,
+      limit: dt.limit,
+      cached_data: cached_data,
+      last_cache_info: last_cache_info
+    });
+    console.log('ds', res);
+    return res;
+  }, [props.dataSource]);
+  const renderDetailsGrid = ({
+    data
+  }) => {
+    return _react.default.createElement(_reactdatagridEnterprise.default, {
+      defaultFilterValue: props.details_filter,
+      dataSource: dataSource,
+      columns: cached_details_columns
+    });
+  };
+  /**
+   * Merge details into grid
+   */
+  const static_gridOptions = _react.default.useMemo(() => {
+    const finalresult = props.static_gridOptions || {};
+    finalresult['renderDetailsGrid'] = renderDetailsGrid;
+    return finalresult;
+  }, [props.static_gridOptions]);
+  return _react.default.createElement(DataGridSizeWrapper, {
+    ...props,
+    static_gridOptions: static_gridOptions
+  }, props.children);
 }
 function DataGridSizeWrapper(props) {
-  // console.log(props);
   if (props.delayedSize) {
     return _react.default.createElement(DataGridDelayedSize, {
       ...props
@@ -238,8 +231,8 @@ function DataGridSizeWrapper(props) {
     });
   }
 }
+/* -------------------------------------------------------------------------- */
 function DataGridDelayedSize(props) {
-  const gridRef = _react.default.useRef(null);
   const {
     ref,
     height,
@@ -251,7 +244,7 @@ function DataGridDelayedSize(props) {
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
     ...props.static_gridOptions,
     ...props.dynamic_gridOptions,
-    handle: ref => gridRef.current = ref ? ref.current : null,
+    handle: ref => props.gridRef.current = ref ? ref.current : null,
     className: 'azgrid-delayedresize',
     style: {
       height: height,
@@ -262,13 +255,12 @@ function DataGridDelayedSize(props) {
   }), props.children);
 }
 function DataGridFlexSize(props) {
-  const gridRef = _react.default.useRef(null);
   return _react.default.createElement("div", {
     className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
     ...props.static_gridOptions,
     ...props.dynamic_gridOptions,
-    handle: ref => gridRef.current = ref ? ref.current : null,
+    handle: ref => props.gridRef.current = ref ? ref.current : null,
     className: 'azgrid-filler',
     columns: props.columns,
     dataSource: props.dataSource
@@ -278,216 +270,6 @@ function DataGridFlexSize(props) {
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
-/**
- * merges together all different props for columns
- * to build a single final column data array
- * @param props
- * @returns
- */
-function ApplyColumnData(props) {
-  const final_columns = [];
-  let mcols = props.columns || [];
-  let mcolExts = props.columnExtensions || [];
-  let rightColumns = props.rightColumns || [];
-  let leftColumns = props.leftColumns || [];
-  let editableColumns = props.editableColumns || [];
-  let customColumns = props.customColumns || [];
-  if (!Array.isArray(mcols)) return [];
-  /* ------------------------------- fix columns ------------------------------ */
-  mcols.map(r => {
-    if (r == null) return null;
-    if (typeof r === 'string') return {
-      field: r,
-      header: r
-    };
-    if (typeof r === 'object') {
-      let final_cl = {
-        name: get_col_name(r),
-        header: get_col_header(r),
-        width: r.width || undefined
-      };
-      final_cl = {
-        ...defaultColumnOptions,
-        ...r,
-        ...final_cl
-      };
-      return final_cl;
-    }
-    return null;
-  }).forEach(r => {
-    if (r != null) final_columns.push(r);
-  });
-  /* ---------------------------- apply extensions ---------------------------- */
-  if (mcolExts && Array.isArray(mcolExts)) for (let index = 0; index < mcolExts.length; index++) {
-    const ext = mcolExts[index];
-    const ext_cl = get_col_name(ext);
-    if (!ext_cl) {
-      console.warn('ColumnExtension must have a name');
-      continue;
-    }
-    const mcol = final_columns.find(s => get_col_name(s) === ext_cl);
-    if (mcol) {
-      for (const key in ext) {
-        if (!mcol[key] && key != 'name') mcol[key] = ext[key];
-      }
-    }
-    // if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
-  }
-  /* ------------------------------- frozen cols ------------------------------ */
-  if (Array.isArray(leftColumns)) {
-    for (let index = 0; index < leftColumns.length; index++) {
-      const r = get_col_name(leftColumns[index]);
-      const mcol = final_columns.find(s => get_col_name(s) === r);
-      if (mcol) {
-        mcol.locked = 'start';
-      }
-    }
-  }
-  if (Array.isArray(rightColumns)) {
-    for (let index = 0; index < rightColumns.length; index++) {
-      const r = get_col_name(rightColumns[index]);
-      const mcol = final_columns.find(s => get_col_name(s) === r);
-      if (mcol) {
-        mcol.locked = 'end';
-      }
-    }
-  }
-  /* -------------------------------- ediatable ------------------------------- */
-  if (Array.isArray(editableColumns)) {
-    for (let index = 0; index < editableColumns.length; index++) {
-      const r = get_col_name(editableColumns[index]);
-      const mcol = final_columns.find(s => get_col_name(s) === r);
-      if (mcol) {
-        mcol.editable = true;
-      }
-    }
-  }
-  for (let index = 0; index < final_columns.length; index++) {
-    const col = final_columns[index];
-    if (col.type) {
-      switch (col.type) {
-        case 'combo':
-        case 'select':
-          //@ts-ignore
-          col.editor = _SelectEditor.default;
-          break;
-        case 'number':
-        case 'numberic':
-          //@ts-ignore
-          col.editor = _NumericEditor.default;
-          break;
-        case 'truefalse':
-        case 'bool':
-          //@ts-ignore
-          col.editor = _BoolEditor.default;
-          break;
-      }
-      if (col.editable != false) col.editable = true;
-      delete col.type;
-    }
-    //@ts-ignore
-    if (!col.editorProps) col.editorProps = {};
-    if (col.items) {
-      //@ts-ignore
-      if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
-      //@ts-ignore
-      if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
-      //@ts-ignore
-      col.editorProps.dataSource = to_datasource(col.items, col.editorProps.idProperty);
-      delete col.items;
-    }
-  }
-  /* -------------------------------------------------------------------------- */
-  if (Array.isArray(customColumns)) {
-    for (let index = 0; index < customColumns.length; index++) {
-      const r = customColumns[index];
-      const rn = get_col_name(r);
-      const mcol = final_columns.find(s => get_col_name(s) === rn);
-      if (mcol) {
-        //@ts-ignore
-        mcol.render = r.render;
-      }
-    }
-  }
-  /* ------------------------------ apply renames ----------------------------- */
-  for (let index = 0; index < final_columns.length; index++) {
-    const col = final_columns[index];
-    if (!col.name) {
-      col.name = get_col_name(col);
-      delete col.field;
-      delete col.key;
-      delete col.columnName;
-      if (col.flex && !col.defaultFlex) col.defaultFlex = col.flex;
-    }
-  }
-  /* -------------------------------------------------------------------------- */
-  //console.log(final_columns);
-  return final_columns;
-}
-function to_datasource(arr, idProperty, valueAsID = true) {
-  const res = [];
-  let index = 0;
-  if (Array.isArray(arr)) {
-    arr.map(s => {
-      let elem = {};
-      if (valueAsID) elem[idProperty] = String(s).toLowerCase();else elem[idProperty] = '_cid_' + index;
-      if (typeof s === 'object') elem = {
-        ...elem,
-        ...s
-      };else elem['label'] = s;
-      res.push(elem);
-      index++;
-    });
-  }
-  return res;
-}
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-function get_col_name(obj) {
-  if (!obj) return '';
-  if (typeof obj == 'string') return obj;
-  if (typeof obj != 'object') return '';
-  return obj.name || obj.field || obj.key || obj.columnName || '';
-}
-/**
- * Gets header of a column
- * @param obj
- * @returns
- */
-function get_col_header(obj) {
-  if (!obj) return '';
-  if (typeof obj == 'string') return obj;
-  if (typeof obj != 'object') return '';
-  return obj.header || obj.title || get_col_name(obj);
-}
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-function get_row_id(obj) {
-  if (!obj) return '-1';
-  if (typeof obj == 'string') return obj;
-  if (typeof obj != 'object') return '-1';
-  return obj.__table_id || obj.id || '-1';
-}
-/**
- * Gets default activation key for grid plugin
- * @returns
- */
-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;
-}
 /* -------------------------------------------------------------------------- */
 var _default = AzGrid;
 exports.default = _default;

package/package.json

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

package/src/example.tsx

@@ -9,7 +9,7 @@ import { getFormControlUtilityClasses } from '@mui/material';
 const columns = [
 	{
 		name: 'name',
-		title: 'Category',
+		title: 'Name',
 		defaultFlex: 1,
 	},
 	{
@@ -29,10 +29,10 @@ const columns = [
 const editableColumns = ['job', 'age'];
 const contextMenuItems = ['test'];
 
-function getData(delta: any) {
+function getData(delta: any, max = 200) {
 	const fd: any[] = [];
 	console.log('Delta:', delta);
-	for (let index = 0; index < 200; index++) {
+	for (let index = 0; index < max; index++) {
 		const currentObject = {
 			__table_id: String(index),
 			name: 'user-' + index,
@@ -71,6 +71,7 @@ function getData(delta: any) {
 export function ExampleGrid() {
 	const [ds_reset, set_ds_reset] = React.useState(0);
 	const [delta, set_delta] = React.useState({});
+	const [delayed_reload, set_delayed_reload] = React.useState(false);
 
 	const dataSource = React.useCallback(
 		async (dt) => {
@@ -83,6 +84,17 @@ export function ExampleGrid() {
 		},
 		[ds_reset, delta]
 	);
+	const details_dataSource = React.useCallback(
+		async (dt) => {
+			//console.log('Start loading');
+			return await new Promise((resolve) => {
+				setTimeout(() => {
+					resolve(getData(delta, 5));
+				}, 1000);
+			});
+		},
+		[ds_reset, delta]
+	);
 
 	function onEditComplete(params) {
 		const { value, columnId, rowId, ...rest } = params;
@@ -101,22 +113,29 @@ export function ExampleGrid() {
 		//console.log(rowdata?.data || rowdata);
 	}, []);
 
-	function rst_ds() {
-		//console.log('rst_ds');
-		set_ds_reset((s) => s + 1);
-	}
+	React.useEffect(() => {
+		setTimeout(() => {
+			set_delayed_reload(true);
+		}, 2000);
+	}, []);
+	const customColumns = React.useMemo(() => {
+		if (!delayed_reload) return [];
+		return [{ name: 'name', render: (r) => r.value + '^' }];
+	}, [delayed_reload]);
 
 	return (
 		<AzGrid
 			dark
 			delayedSize
+			details_dataSource={details_dataSource}
+			details_columns={columns}
 			onRowClick={onRowClick}
 			onRowDoubleClick={onRowDoubleClick}
 			// allowChildRows
 			// onSelectionChange={onSelectionChange}
 			// selected={selected}
 			contextMenuItems={contextMenuItems}
-			// customColumns={customColumns}
+			customColumns={customColumns}
 			columns={columns}
 			editableColumns={editableColumns}
 			editable={true}

package/src/func/{helpers.ts → func_child.ts}

@@ -10,22 +10,26 @@ function get_selfId(obj) {
 //given an array of rows, fixes parent,child relations
 export function fix_parent_child_relations<T extends mrow>(rows: T[]): T[] {
 	if (!Array.isArray(rows)) rows = [];
+	const anyparentid = rows.find((r) => get_parentId(r));
+	const anyselfid = rows.find((r) => get_selfId(r));
+	if (!anyparentid || !anyselfid) return rows;
 
 	const converted_rows: converted_row[] = rows
 		.filter((r) => r != null)
 		.map((r) => {
 			return { parent: get_parentId(r), self: get_selfId(r), data: r };
 		});
-	const top_level_rows: converted_row[] = converted_rows.filter((r) => !r.parent);
 
-	//find children of top-level parents:
-	for (let index = 0; index < top_level_rows.length; index++) {
-		const mrow = top_level_rows[index];
-		assign_children(mrow, converted_rows);
+	const top_level_rows: converted_row[] = converted_rows.filter((r) => !r.parent);
+	const any_child = converted_rows.find((r) => Boolean(r.parent));
+	if (any_child) {
+		//find children of top-level parents:
+		for (let index = 0; index < top_level_rows.length; index++) {
+			const mrow = top_level_rows[index];
+			assign_children(mrow, converted_rows);
+		}
 	}
-	const result = top_level_rows.map((r) => r.data) as T[];
-	//console.log(result);
-	return result;
+	return top_level_rows.map((r) => r.data) as T[];
 }
 
 function assign_children(row: converted_row, all_rows: converted_row[]) {
@@ -37,7 +41,8 @@ function assign_children(row: converted_row, all_rows: converted_row[]) {
 			assign_children(child, all_rows);
 		}
 		row.data.__children = my_children.map((r) => r.data);
-	} else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0) row.data.__children = undefined;
+	} else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0)
+		row.data.__children = undefined;
 }
 export class func_selection {
 	static getVirtualElement(x = 0, y = 0) {
@@ -59,7 +64,10 @@ export class func_selection {
 		var text: any = '';
 		if (window.getSelection) {
 			text = window.getSelection()?.toString();
-		} else if ((document as any).selection && (document as any).selection.type != 'Control') {
+		} else if (
+			(document as any).selection &&
+			(document as any).selection.type != 'Control'
+		) {
 			text = (document as any).selection.createRange()?.text;
 		}
 		return text || '';