@azrico/reactgrid 1.3.40 → 1.3.42

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src';
+import { AzGrid } from './src';
+export default AzGrid;

package/dist/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _src = require("./src");
+Object.keys(_src).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _src[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _src[key];
+    }
+  });
+});
+var _default = exports.default = _src.AzGrid;

package/dist/src/example.d.ts

@@ -0,0 +1,4 @@
+export * from './views/DataGrid';
+import React from 'react';
+export declare function ExampleGrid(): React.JSX.Element;
+export default ExampleGrid;

package/dist/src/example.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ExampleGrid: true
+};
+exports.ExampleGrid = ExampleGrid;
+exports.default = void 0;
+var _DataGrid = _interopRequireWildcard(require("./views/DataGrid"));
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[key];
+    }
+  });
+});
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const columns = [{
+  name: 'name',
+  title: 'Name',
+  defaultFlex: 1
+}, {
+  name: 'job',
+  title: 'Job',
+  type: 'combo',
+  items: ['None', 'Engineer', 'Doctor'],
+  defaultFlex: 1
+}, {
+  name: 'age',
+  title: 'Age',
+  type: 'number',
+  defaultFlex: 1
+}];
+const editableColumns = ['job', 'age'];
+function getData(delta, max = 200) {
+  const fd = [];
+  for (let index = 0; index < max; index++) {
+    const currentObject = {
+      __table_id: String(index),
+      name: 'user-' + index,
+      age: 5 + index,
+      job: 'None'
+    };
+    if (delta[index] && typeof delta[index] === 'object') {
+      for (const key in delta[index]) {
+        currentObject[key] = delta[index][key];
+      }
+    }
+    const childrows = [];
+    if (index % 5 == 0) {
+      const sub_selfid = 's' + index;
+      childrows.push({
+        __table_id: sub_selfid,
+        __parent__table_id: String(index),
+        name: 'sub-' + index,
+        age: 20
+      });
+    }
+    currentObject['__children'] = childrows;
+    fd.push(currentObject);
+  }
+  return fd;
+}
+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.useMemo(() => getData(delta), []);
+  // const dataSource = React.useCallback(
+  // 	async (dt) => {
+  // 		//console.log('Start loading');
+  // 		return await new Promise((resolve) => {
+  // 			setTimeout(() => {
+  // 				resolve(getData(delta));
+  // 			}, 1000);
+  // 		});
+  // 	},
+  // 	[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;
+    let new_rd = delta[rowId];
+    if (!new_rd) new_rd = {};
+    new_rd[columnId] = value;
+    set_delta(d => {
+      return {
+        ...d,
+        [rowId]: new_rd
+      };
+    });
+  }
+  const onRowDoubleClick = _react.default.useCallback((index, rowdata) => {
+    console.log('dbl', (rowdata === null || rowdata === void 0 ? void 0 : rowdata.data) || rowdata);
+  }, []);
+  const onRowClick = _react.default.useCallback((index, rowdata) => {
+    //console.log(rowdata?.data || rowdata);
+  }, []);
+  _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]);
+  const contextMenuItems = _react.default.useCallback(product => {
+    return [{
+      type: 'text',
+      content: product.name
+    }];
+  }, []);
+  return _react.default.createElement(_DataGrid.default, {
+    delayedSize: true,
+    dark: true,
+    // details_dataSource={details_dataSource}
+    dataSource: dataSource,
+    details_columns: columns,
+    onRowClick: onRowClick,
+    onRowDoubleClick: onRowDoubleClick,
+    allowChildRows: true,
+    // onSelectionChange={onSelectionChange}
+    // selected={selected}
+    contextMenuItems: contextMenuItems,
+    customColumns: customColumns,
+    columns: columns,
+    editableColumns: editableColumns,
+    editable: true,
+    onEditComplete: onEditComplete,
+    advancedFilterFields: ['name'],
+    // leftColumns={leftColumns}
+    gridOptions: {
+      // defaultFilterValue: filterValue,
+      // remoteFilter: false,
+      // multiSelect: true,
+      // pagination: 'local',
+      // defaultLimit: 100,
+      // limit: 100,
+      // pageSizes: [100],
+      // rowIndexColumn: true,
+      // checkboxColumn: true,
+    }
+  });
+}
+var _default = exports.default = ExampleGrid;

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

@@ -0,0 +1,29 @@
+type mrow = {
+    __parent__table_id: any;
+    __table_id: any;
+    __children?: any[];
+};
+export declare function fix_parent_child_relations<T extends mrow>(rows: T[]): T[];
+export declare class func_selection {
+    static getVirtualElement(x?: number, y?: number): {
+        getBoundingClientRect: () => {
+            width: number;
+            height: number;
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    static generateGetBoundingClientRect(x?: number, y?: number): () => {
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    static get_selectedText(): string;
+    static has_selection(): boolean;
+}
+export {};

package/dist/src/func/func_child.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fix_parent_child_relations = fix_parent_child_relations;
+exports.func_selection = void 0;
+function get_parentId(obj) {
+  var _ref, _obj$__parent__table_;
+  return (_ref = (_obj$__parent__table_ = obj.__parent__table_id) !== null && _obj$__parent__table_ !== void 0 ? _obj$__parent__table_ : obj.parent) !== null && _ref !== void 0 ? _ref : obj.parentid;
+}
+function get_selfId(obj) {
+  var _obj$__table_id;
+  return (_obj$__table_id = obj.__table_id) !== null && _obj$__table_id !== void 0 ? _obj$__table_id : obj._id;
+}
+//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),
+      self: get_selfId(r),
+      data: r
+    };
+  });
+  const top_level_rows = 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);
+    }
+  }
+  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);
+  if (my_children.length > 0) {
+    //find children of my children:
+    for (let index = 0; index < my_children.length; index++) {
+      const child = my_children[index];
+      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;
+}
+class func_selection {
+  static getVirtualElement(x = 0, y = 0) {
+    const boundsRect = func_selection.generateGetBoundingClientRect(x, y);
+    return {
+      getBoundingClientRect: boundsRect
+    };
+  }
+  static generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({
+      width: 0,
+      height: 0,
+      top: y,
+      right: x,
+      bottom: y,
+      left: x
+    });
+  }
+  static get_selectedText() {
+    var text = '';
+    if (window.getSelection) {
+      var _window$getSelection;
+      text = (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
+    } else if (document.selection && document.selection.type != 'Control') {
+      var _document$selection$c;
+      text = (_document$selection$c = document.selection.createRange()) === null || _document$selection$c === void 0 ? void 0 : _document$selection$c.text;
+    }
+    return text || '';
+  }
+  static has_selection() {
+    const slct = window.getSelection();
+    if (slct == null) return false;
+    if (slct.type == null) return func_selection.get_selectedText().length !== 0;
+    if (slct.type === 'Range') return true;
+    return false;
+  }
+}
+exports.func_selection = func_selection;

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

@@ -0,0 +1,48 @@
+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;
+export declare function set_row_id(obj: any, val: undefined | string): any;
+/**
+ * Gets default activation key for grid plugin
+ * THIS KEY IS FOR DEBUGGING PURPOSE ONLY.
+ * PROVIDE YOUR OWN KEY
+ * @returns
+ */
+export declare function get_default_key(): string;
+export declare function validateCache(current: any, old: any, looseCheck?: boolean): boolean;
+/**
+ * find the real index of the given row data
+ * sometimes when we scroll the rowData prop becomes invalid
+ * but we can manually find the correct data by reading the id from clicked item's Html props
+ * @param view
+ */
+export declare function find_realData(alldata: any[], view: any, def?: undefined): any;

package/dist/src/func/func_grid.js

@@ -0,0 +1,318 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ApplyColumnData = ApplyColumnData;
+exports.ApplyDataSource = ApplyDataSource;
+exports.find_realData = find_realData;
+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.set_row_id = set_row_id;
+exports.to_datasource = to_datasource;
+exports.validateCache = validateCache;
+var _BoolEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/BoolEditor"));
+var _SelectEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/SelectEditor"));
+var _func_child = require("./func_child");
+var _object = require("@azrico/object");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
+
+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) {
+    result_data.data = (0, _func_child.fix_parent_child_relations)(result_data.data);
+  }
+  if (!result_data.count) {
+    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];
+    const coltype = col.type;
+    delete col.type;
+    if (coltype) {
+      switch (coltype) {
+        case 'combo':
+        case 'select':
+          //@ts-ignore
+          col.editor = _SelectEditor.default;
+          break;
+        case 'int':
+        case 'number':
+        case 'numberic':
+          col.type = 'number';
+          break;
+        case 'truefalse':
+        case 'bool':
+        case 'boolean':
+          //@ts-ignore
+          col.editor = _BoolEditor.default;
+          break;
+      }
+      if (col.editable != false) col.editable = true;
+    }
+    //@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 (typeof obj === 'string') return obj;
+  if (typeof obj !== 'object' || !obj) return undefined;
+  return obj.__table_id || obj.id || undefined;
+}
+function set_row_id(obj, val) {
+  if (typeof obj != 'object') return false;
+  if (val === undefined) delete obj.__table_id;else obj.__table_id = val;
+  return obj.__table_id;
+}
+/**
+ * Gets default activation key for grid plugin
+ * THIS KEY IS FOR DEBUGGING PURPOSE ONLY.
+ * PROVIDE YOUR OWN KEY
+ * @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;
+}
+/**
+ * find the real index of the given row data
+ * @param view
+ */
+function find_realIndex(view) {
+  let current_parent = view;
+  for (let index = 0; index < 3; index++) {
+    var _current_parent;
+    current_parent = current_parent.parentElement;
+    const dataId = (_current_parent = current_parent) === null || _current_parent === void 0 ? void 0 : _current_parent.getAttribute('data-row-id');
+    if (dataId) return dataId;
+  }
+  return -1;
+}
+/**
+ * find the real index of the given row data
+ * sometimes when we scroll the rowData prop becomes invalid
+ * but we can manually find the correct data by reading the id from clicked item's Html props
+ * @param view
+ */
+function find_realData(alldata, view, def = undefined) {
+  if (!Array.isArray(alldata)) return def;
+  const rid = find_realIndex(view);
+  if (rid === -1) return def;
+  // console.log('dataSource', alldata);
+  return alldata.find(s => get_row_id(s) === rid);
+}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './views/DataGrid';
+export { get_row_id, set_row_id, get_col_name, get_col_header } from './func/func_grid';
+import AzGrid from './views/DataGrid';
+export default AzGrid;