@azrico/reactgrid 1.4.1 → 1.5.2

package/dist/src/views/DataGrid.js

@@ -19,6 +19,7 @@ var _useGridEvents = require("../hooks/useGridEvents");
 var _useColumnData = require("../hooks/useColumnData");
 var _useDatasource = require("../hooks/useDatasource");
 var _useGridSearch = require("../hooks/useGridSearch");
+var _func_a11y = require("../func/func_a11y");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
@@ -39,29 +40,40 @@ const forcedOptions = {
   theme: 'default-light'
 };
 const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
+// consumer callbacks forwarded to the grid; wrapped so a new function doesn't re-render the grid
+const callback_option_names = ['onSkipChange', 'onLimitChange', 'onEditComplete', 'onSelectionChange', 'onCellSelectionChange'];
+// props DataGridCore renders from, other props don't need to re-render the grid
+const core_prop_names = ['className', 'static_gridOptions', 'dynamic_gridOptions', 'columns', 'dataSource', 'gridRef', 'liveGridRef', 'allowChildRows', 'theme', 'dark', 'children'];
 /* -------------------------------------------------------------------------- */
 function AzGrid(props) {
   const gridRefBackup = _react.default.useRef(null);
   const gridRef = props.gridRef || gridRefBackup;
+  const liveGridRef = _react.default.useRef(null);
+  const latestProps = _react.default.useRef(props);
+  latestProps.current = props;
   /* -------------------------------------------------------------------------- */
   /*                                   Columns                                  */
   /* -------------------------------------------------------------------------- */
   const cached_columns = (0, _useColumnData.useColumnData)(props);
   const dataSource = (0, _useDatasource.useDataSource)(props.dataSource, props);
+  const a11y_columns = _react.default.useMemo(() => cached_columns.map(col => (0, _func_a11y.apply_column_a11y)(col, {
+    gridEditable: !!props.editable
+  })), [cached_columns, props.editable]);
   /* -------------------------------------------------------------------------- */
   /*                                 Row changes                                */
   /* -------------------------------------------------------------------------- */
   const base_gridOptions = _react.default.useMemo(() => {
     const firstcolumn = cached_columns[0];
     const licenseKey = props.licenseKey || (0, _func_grid.get_default_key)();
-    const events = {
-      onSkipChange: props.onSkipChange,
-      onLimitChange: props.onLimitChange,
-      onEditComplete: props.onEditComplete
-    };
+    // call the latest consumer callback, only passed when the consumer gave one
+    const events = {};
+    callback_option_names.forEach(name => {
+      if (props[name]) events[name] = (...args) => {
+        var _latestProps$current$, _latestProps$current;
+        return (_latestProps$current$ = (_latestProps$current = latestProps.current)[name]) === null || _latestProps$current$ === void 0 ? void 0 : _latestProps$current$.call(_latestProps$current, ...args);
+      };
+    });
     const extra_ops = {
-      onSelectionChange: props.onSelectionChange,
-      onCellSelectionChange: props.onCellSelectionChange,
       licenseKey: licenseKey,
       editable: props.editable,
       treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
@@ -72,7 +84,7 @@ function AzGrid(props) {
       ...events,
       ...extra_ops
     };
-  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.onEditComplete]);
+  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.licenseKey, ...callback_option_names.map(name => !!props[name])]);
   const static_gridOptions = _react.default.useMemo(() => {
     const finalres = {
       ...base_gridOptions,
@@ -93,9 +105,10 @@ function AzGrid(props) {
   return _react.default.createElement(DataGridEventsWrapper, {
     ...props,
     gridRef: gridRef,
+    liveGridRef: liveGridRef,
     static_gridOptions: static_gridOptions,
     dynamic_gridOptions: dynamic_gridOptions,
-    columns: cached_columns,
+    columns: a11y_columns,
     dataSource: dataSource,
     highlightedRow: props.highlightedRow
   });
@@ -126,6 +139,7 @@ function DataGridEventsWrapper(props) {
     onRowClick,
     onRowContextMenu,
     onRenderRow,
+    onRenderLoadMask,
     update_menuRow,
     menuAnchorEl,
     menuRow
@@ -135,19 +149,47 @@ function DataGridEventsWrapper(props) {
    * Merge click events into grid options
    */
   const static_gridOptions = _react.default.useMemo(() => {
+    const opts = props.static_gridOptions || {};
     const events = {
       onRowClick: onRowClick,
       onRowContextMenu: onRowContextMenu
     };
+    // internal row attributes first, consumer's onRenderRow last so it can override them
+    const consumerOnRenderRow = opts.onRenderRow;
     const renderProps = {
-      onRenderRow: onRenderRow
+      onRenderRow: consumerOnRenderRow ? rowProps => {
+        onRenderRow(rowProps);
+        consumerOnRenderRow(rowProps);
+      } : onRenderRow,
+      // track loading for aria-busy, the consumer's renderLoadMask (if any) still renders the mask
+      renderLoadMask: maskProps => {
+        onRenderLoadMask(maskProps);
+        return opts.renderLoadMask ? opts.renderLoadMask(maskProps) : undefined;
+      }
     };
+    const gridEditable = !!props.editable;
+    const a11yProps = {
+      headerProps: {
+        role: 'row',
+        'aria-rowindex': 1,
+        ...opts.headerProps
+      },
+      rowIndexColumn: (0, _func_a11y.apply_column_a11y)(typeof opts.rowIndexColumn === 'object' ? opts.rowIndexColumn : {}, {
+        role: 'rowheader',
+        gridEditable
+      })
+    };
+    if (opts.checkboxColumn) a11yProps.checkboxColumn = (0, _func_a11y.apply_column_a11y)(typeof opts.checkboxColumn === 'object' ? opts.checkboxColumn : {}, {
+      gridEditable,
+      markReadonly: false
+    });
     return {
-      ...props.static_gridOptions,
+      ...opts,
       ...events,
-      ...renderProps
+      ...renderProps,
+      ...a11yProps
     };
-  }, [props.static_gridOptions]);
+  }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow, onRenderLoadMask]);
   /* -------------------------------------------------------------------------- */
   //TODO ContextMenu not from mui...
   return _react.default.createElement("div", {
@@ -242,7 +284,7 @@ function DataGridSearchWrapper(props) {
   const {
     element,
     filteredData
-  } = (0, _useGridSearch.useGridSearch)(props.gridRef.current, props);
+  } = (0, _useGridSearch.useGridSearch)(props);
   return _react.default.createElement("div", {
     className: 'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'
   }, element, _react.default.createElement(DataGridCore, {
@@ -250,17 +292,24 @@ function DataGridSearchWrapper(props) {
     dataSource: filteredData
   }));
 }
-function DataGridCore(props) {
+const DataGridCore = _react.default.memo(DataGridCoreView, (prev, next) => core_prop_names.every(name => prev[name] === next[name]));
+function DataGridCoreView(props) {
   var _props$theme3;
+  const {
+    gridRef,
+    liveGridRef
+  } = props;
+  const handle = _react.default.useCallback(ref => {
+    if (ref) gridRef.current = ref.current;
+    if (liveGridRef) liveGridRef.current = ref;
+  }, [gridRef, liveGridRef]);
   return _react.default.createElement("div", {
     className: (0, _clsx.default)(props.className, 'azgrid-flexed', 'azgrid-flexlayout')
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
     ...props.static_gridOptions,
     ...props.dynamic_gridOptions,
-    rowIndexColumn: true,
-    handle: ref => {
-      if (ref) props.gridRef.current = ref.current;
-    },
+    rowIndexColumn: props.static_gridOptions.rowIndexColumn || true,
+    handle: handle,
     theme: "default-light",
     className: (0, _clsx.default)('azgrid azgrid-flexed', props.allowChildRows && 'azgrid-tree', `azgrid-theme-${(_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 ? _props$theme3 : props.dark ? 'dark' : 'light'}`),
     columns: props.columns,

package/package.json

@@ -1,68 +1,68 @@
-{
-	"name": "@azrico/reactgrid",
-	"version": "1.4.1",
-	"main": "dist/index.js",
-	"description": "React Datagrid",
-	"author": "Azrideus <MehrdadTavangar@gmail.com>",
-	"homepage": ".",
-	"scripts": {
-		"start": "react-scripts start",
-		"build": "tsc && yarn cp_themes && babel dist --out-dir dist",
-		"test": "rem",
-		"check:theme": "node config/check-theme.cjs",
-		"theme:generate": "node config/generate-theme.cjs",
-		"cp_themes": "copyfiles ./src/themes/* ./dist/"
-	},
-	"config-overrides-path": "../../config/config-overrides.js",
-	"devDependencies": {
-		"@babel/cli": "^7.13.14",
-		"@babel/core": "^7.13.15",
-		"@babel/eslint-parser": "^7.12.17",
-		"@babel/node": "^7.13.13",
-		"@babel/plugin-proposal-class-properties": "^7.12.13",
-		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-		"@babel/preset-env": "^7.13.15",
-		"@babel/preset-typescript": "^7.14.5",
-		"@mui/material": "*",
-		"@types/react": "^18.0.25",
-		"@types/react-dom": "^18.0.8",
-		"react-dom": "^18.2.0",
-		"react-scripts": "^5.0.1",
-		"typescript": "^4.8.4"
-	},
-	"dependencies": {
-		"@azrico/controls": "1.6.1",
-		"@azrico/object": "^1.4.97",
-		"@emotion/react": "^11.9.3",
-		"@emotion/styled": "^11.9.3",
-		"@inovua/reactdatagrid-enterprise": "^5.10.2",
-		"clsx": "^2.0.0",
-		"lodash.debounce": "^4.0.8",
-		"react": "^18.2.0",
-		"react-use-size": "^3.0.1"
-	},
-	"peerDependencies": {
-		"@azrico/controls": ">=1.6.1",
-		"@azrico/object": ">=1.4.97",
-		"@emotion/react": ">=11.9.3",
-		"@emotion/styled": ">=11.9.3",
-		"@inovua/reactdatagrid-enterprise": ">=5.10.2",
-		"@mui/material": ">=5.0.0 <8.0.0",
-		"clsx": ">=1.2.1",
-		"react": ">=18.2.0",
-		"react-use-size": ">=3.0.1"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"packageManager": "yarn@4.10.2"
+{
+	"name": "@azrico/reactgrid",
+	"version": "1.5.2",
+	"main": "dist/index.js",
+	"description": "React Datagrid",
+	"author": "Azrideus <MehrdadTavangar@gmail.com>",
+	"homepage": ".",
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "tsc && yarn cp_themes && babel dist --out-dir dist",
+		"test": "rem",
+		"check:theme": "node config/check-theme.cjs",
+		"theme:generate": "node config/generate-theme.cjs",
+		"cp_themes": "copyfiles ./src/themes/* ./dist/"
+	},
+	"config-overrides-path": "../../config/config-overrides.js",
+	"devDependencies": {
+		"@babel/cli": "^7.13.14",
+		"@babel/core": "^7.13.15",
+		"@babel/eslint-parser": "^7.12.17",
+		"@babel/node": "^7.13.13",
+		"@babel/plugin-proposal-class-properties": "^7.12.13",
+		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+		"@babel/preset-env": "^7.13.15",
+		"@babel/preset-typescript": "^7.14.5",
+		"@mui/material": "*",
+		"@types/react": "^18.0.25",
+		"@types/react-dom": "^18.0.8",
+		"react-dom": "^18.2.0",
+		"react-scripts": "^5.0.1",
+		"typescript": "^4.8.4"
+	},
+	"dependencies": {
+		"@azrico/controls": "1.6.1",
+		"@azrico/object": "^1.4.97",
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@inovua/reactdatagrid-enterprise": "^5.10.2",
+		"clsx": "^2.0.0",
+		"lodash.debounce": "^4.0.8",
+		"react": "^18.2.0",
+		"react-use-size": "^3.0.1"
+	},
+	"peerDependencies": {
+		"@azrico/controls": ">=1.6.1",
+		"@azrico/object": ">=1.4.97",
+		"@emotion/react": ">=11.9.3",
+		"@emotion/styled": ">=11.9.3",
+		"@inovua/reactdatagrid-enterprise": ">=5.10.2",
+		"@mui/material": ">=5.0.0 <8.0.0",
+		"clsx": ">=1.2.1",
+		"react": ">=18.2.0",
+		"react-use-size": ">=3.0.1"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"packageManager": "yarn@4.10.2"
 }