@azrico/reactgrid 1.2.5 → 1.2.7

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [1.2.7](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.6...v1.2.7) (2023-02-26)
+
+### 1.2.6 (2023-02-26)
+
+
+### Features
+
+* added datasource Support ([4270ac1](https://github.com/Azrideus/azrico-reactgrid/commit/4270ac19623ef4c7404f0475825647c63ca98ffb))
+* added inovua grid ([a178208](https://github.com/Azrideus/azrico-reactgrid/commit/a178208975212d16ce9feff359b09a6d8926b54d))
+* added onLimitChange ([4b16681](https://github.com/Azrideus/azrico-reactgrid/commit/4b1668194776ebec51cdf9af0969132d5883d79a))
+* added skip and limit values ([87a975c](https://github.com/Azrideus/azrico-reactgrid/commit/87a975cad9803b4d41d770c0758d6b4d09946a53))
+* fixed dataSource ([ce5a4fe](https://github.com/Azrideus/azrico-reactgrid/commit/ce5a4fe09809aeddeeb0305d48b5294b1e9654b2))
+
+
+### Bug Fixes
+
+* added get_col_name ([c7ff2da](https://github.com/Azrideus/azrico-reactgrid/commit/c7ff2daab8bf2ddf3c5fcbe6b47c7876d9ed9f88))
+* added support for promise DS ([b684c26](https://github.com/Azrideus/azrico-reactgrid/commit/b684c2635d59f5d5dde129ed6425ce30abbeebed))
+* coyp styles to dist ([23694f2](https://github.com/Azrideus/azrico-reactgrid/commit/23694f23634eb0b4038f399b1b2cd5c57992b64b))
+* fixed fix_parent_child_relations ([f165179](https://github.com/Azrideus/azrico-reactgrid/commit/f1651797e2adfc2dfbe1905b8c858b150c842dfa))
+* fixed package for publish ([95b8f46](https://github.com/Azrideus/azrico-reactgrid/commit/95b8f46e672174928aa4d8cd6c4924553eb025e5))
+* no null rows ([e85511b](https://github.com/Azrideus/azrico-reactgrid/commit/e85511beb98c884a3820dfae7c2c57891910b6d1))
+* removed extra styles from maincode ([7ee097e](https://github.com/Azrideus/azrico-reactgrid/commit/7ee097e4b7db1209490ce29bdb25fc605dfa7db3))

package/dist/src/example.js

@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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: 'name',
-  title: 'Category',
+  title: 'Name',
   defaultFlex: 1
 }, {
   name: 'job',
@@ -41,10 +41,10 @@ const columns = [{
 }];
 const editableColumns = ['job', 'age'];
 const contextMenuItems = ['test'];
-function getData(delta) {
+function getData(delta, max = 200) {
   const fd = [];
   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,
@@ -82,6 +82,7 @@ function getData(delta) {
 function ExampleGrid() {
   const [ds_reset, set_ds_reset] = _react.default.useState(0);
   const [delta, set_delta] = _react.default.useState({});
+  const [delayed_reload, set_delayed_reload] = _react.default.useState(false);
   const dataSource = _react.default.useCallback(async dt => {
     //console.log('Start loading');
     return await new Promise(resolve => {
@@ -90,6 +91,14 @@ function ExampleGrid() {
       }, 1000);
     });
   }, [ds_reset, delta]);
+  const details_dataSource = _react.default.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,
@@ -113,20 +122,30 @@ function ExampleGrid() {
   const onRowClick = _react.default.useCallback((index, rowdata) => {
     //console.log(rowdata?.data || rowdata);
   }, []);
-  function rst_ds() {
-    //console.log('rst_ds');
-    set_ds_reset(s => s + 1);
-  }
+  _react.default.useEffect(() => {
+    setTimeout(() => {
+      set_delayed_reload(true);
+    }, 2000);
+  }, []);
+  const customColumns = _react.default.useMemo(() => {
+    if (!delayed_reload) return [];
+    return [{
+      name: 'name',
+      render: r => r.value + '^'
+    }];
+  }, [delayed_reload]);
   return _react.default.createElement(_DataGrid.default, {
     dark: true,
     delayedSize: true,
+    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/dist/src/func/{helpers.js → func_child.js}

@@ -14,6 +14,9 @@ function get_selfId(obj) {
 //given an array of rows, fixes parent,child relations
 function fix_parent_child_relations(rows) {
   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 = rows.filter(r => r != null).map(r => {
     return {
       parent: get_parentId(r),
@@ -22,14 +25,15 @@ function fix_parent_child_relations(rows) {
     };
   });
   const top_level_rows = 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 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);
-  //console.log(result);
-  return result;
+  return top_level_rows.map(r => r.data);
 }
 function assign_children(row, all_rows) {
   const my_children = all_rows.filter(s => row.self == s.parent);

package/dist/src/func/func_grid.d.ts

@@ -0,0 +1,38 @@
+import { ColumnDefinition } from '../views/DataGrid';
+export type MakeWriteable<Type> = {
+    -readonly [Key in keyof Type]: Type[Key];
+};
+export type ModifyFields<T, R> = Omit<T, keyof R> & R;
+export declare function ApplyDataSource(datasource: any, props: any): Promise<any>;
+/**
+ * merges together all different props for columns
+ * to build a single final column data array
+ * @param column_data
+ * @returns
+ */
+export declare function ApplyColumnData(column_data: any): ColumnDefinition[];
+export declare function to_datasource(arr: any[], idProperty: string, valueAsID?: boolean): any[];
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+export declare function get_col_name(obj: any): string;
+/**
+ * Gets header of a column
+ * @param obj
+ * @returns
+ */
+export declare function get_col_header(obj: any): string;
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+export declare function get_row_id(obj: any): any;
+/**
+ * Gets default activation key for grid plugin
+ * @returns
+ */
+export declare function get_default_key(): string;
+export declare function validateCache(current: any, old: any, looseCheck?: boolean): boolean;

package/dist/src/func/func_grid.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ApplyColumnData = ApplyColumnData;
+exports.ApplyDataSource = ApplyDataSource;
+exports.get_col_header = get_col_header;
+exports.get_col_name = get_col_name;
+exports.get_default_key = get_default_key;
+exports.get_row_id = get_row_id;
+exports.to_datasource = to_datasource;
+exports.validateCache = validateCache;
+var _BoolEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/BoolEditor"));
+var _NumericEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/NumericEditor"));
+var _SelectEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/SelectEditor"));
+var _object = require("@azrico/object");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const defaultColumnOptions = {
+  draggable: false,
+  lockable: false,
+  editable: false
+};
+async function ApplyDataSource(datasource, props) {
+  let result_data = undefined;
+  let isUsingCache = false;
+  const cacheInfo = {
+    ds: datasource,
+    skip: props.skip,
+    limit: props.limit
+  };
+  //check if we can used cached data
+  //if the datasource is changed since last render, we should invalidate cache
+  if (!validateCache(props.last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
+    props.cached_data.current = undefined;
+    props.last_cache_info.current = cacheInfo;
+  }
+  if (props.cached_data.current) {
+    //cache is valid, use the cache
+    isUsingCache = true;
+    result_data = props.cached_data.current;
+  } else {
+    //cache is invalid, use the datasource again
+    isUsingCache = false;
+    if (typeof datasource === 'function') {
+      result_data = await datasource(props);
+    } else result_data = 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) if (!result_data.count)
+    //result_data.data = fix_parent_child_relations(result_data.data);
+    result_data.count = result_data.data.length;
+  //update cache
+  props.cached_data.current = result_data;
+  return result_data;
+}
+/**
+ * merges together all different props for columns
+ * to build a single final column data array
+ * @param column_data
+ * @returns
+ */
+function ApplyColumnData(column_data) {
+  const final_columns = [];
+  if (!column_data) column_data = {};
+  if (Array.isArray(column_data)) column_data = {
+    columns: column_data
+  };
+  let mcols = column_data.columns || [];
+  let mcolExts = column_data.columnExtensions || [];
+  let rightColumns = column_data.rightColumns || [];
+  let leftColumns = column_data.leftColumns || [];
+  let editableColumns = column_data.editableColumns || [];
+  let customColumns = column_data.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;
+}

package/dist/src/index.js

@@ -19,9 +19,6 @@ Object.keys(_DataGrid).forEach(function (key) {
 });
 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; }
-// import ExampleGrid from './example';
-// import React from 'react';
-// import ReactDOM from 'react-dom/client';
 /* -------------------------------------------------------------------------- */
 var _default = _DataGrid.default; // const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
 // root.render(<ExampleGrid />);

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

@@ -5,7 +5,7 @@ import '../themes/base_styles.css';
 import '../themes/grid.css';
 import { ConvertableToMenuItem } from '@azrico/controls';
 import React from 'react';
-import { TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
+import { TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeFilterValue, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 export type ColumnDefinition = TypeColumn;
 export type CellDefinition = any;
@@ -14,6 +14,7 @@ export type RowProps = TypeRowProps;
 export type RowSelectionValue = TypeRowSelection;
 export type DataRowDefinition = any;
 export type FilterTypes = TypeFilterTypes;
+export type FilterValues = TypeFilterValue;
 export type DataSourceDefinition = TypeDataSource;
 export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
 export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
@@ -36,6 +37,9 @@ type customColumnData = {
 type GridOptions = Partial<TypeDataGridProps>;
 export type AzGridProps = {
     dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+    details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+    details_columns?: LooseColumnDefinition[];
+    details_filter?: FilterValues;
     licenseKey?: string;
     gridRef?: any;
     gridOptions?: GridOptions;
@@ -66,16 +70,4 @@ export type AzGridProps = {
     className?: string;
 };
 export declare function AzGrid(props: AzGridProps): JSX.Element;
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-export declare function get_col_name(obj: any): string;
-/**
- * Gets header of a column
- * @param obj
- * @returns
- */
-export declare function get_col_header(obj: any): string;
 export default AzGrid;