@azrico/reactgrid 1.4.1 → 1.5.2

package/src/views/DataGrid.tsx

@@ -1,286 +1,362 @@
-import '@inovua/reactdatagrid-enterprise/index.css';
-import '../themes/base_styles.css';
-import '../themes/grid.css';
-import { get_default_key } from '../func/func_grid';
-import { ContextMenu } from '@azrico/controls/context-menu';
-import React from 'react';
-import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
-
-import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
-import clsx from 'clsx';
-import { useComponentSize } from 'react-use-size';
-
-import { AzGridOptions, AzGridProps, DataGridWrapperProps } from '../types/types';
-import { useGridEvents } from '../hooks/useGridEvents';
-import { useColumnData } from '../hooks/useColumnData';
-import { useDataSource } from '../hooks/useDatasource';
-import { useGridSearch } from '../hooks/useGridSearch';
-/* -------------------------------------------------------------------------- */
-
-/* -------------------------------------------------------------------------- */
-
-const defaultOptions: AzGridOptions = {
-	//filterTypes: defaultfilterTypes,
-	remoteFilter: false,
-	remoteSort: false,
-	editStartEvent: 'click',
-	rowReorderColumn: false,
-	resizable: true,
-	columnUserSelect: true,
-	rowIndexColumn: true,
-	rowHeight: 35,
-};
-const forcedOptions: AzGridOptions = {
-	idProperty: '__table_id',
-	nodesProperty: '__children',
-	theme: 'default-light',
-};
-
-const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
-/* -------------------------------------------------------------------------- */
-export function AzGrid(props: AzGridProps) {
-	const gridRefBackup = React.useRef<any>(null);
-	const gridRef = props.gridRef || gridRefBackup;
-
-	/* -------------------------------------------------------------------------- */
-	/*                                   Columns                                  */
-	/* -------------------------------------------------------------------------- */
-	const cached_columns = useColumnData(props);
-	const dataSource = useDataSource(props.dataSource, props);
-	/* -------------------------------------------------------------------------- */
-	/*                                 Row changes                                */
-	/* -------------------------------------------------------------------------- */
-
-	const base_gridOptions = React.useMemo<AzGridOptions>(() => {
-		const firstcolumn = cached_columns[0];
-		const licenseKey = props.licenseKey || get_default_key();
-		const events: AzGridOptions = {
-			onSkipChange: props.onSkipChange,
-			onLimitChange: props.onLimitChange,
-			onEditComplete: props.onEditComplete,
-		};
-		const extra_ops: AzGridOptions = {
-			onSelectionChange: props.onSelectionChange,
-			onCellSelectionChange: props.onCellSelectionChange,
-
-			licenseKey: licenseKey,
-			editable: props.editable as any, //bug in types of the plugin
-			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
-			renderRowDetails: props.RowDetail,
-		};
-		return { ...defaultOptions, ...events, ...extra_ops };
-	}, [
-		cached_columns,
-		props.allowChildRows,
-		props.editable,
-		props.RowDetail,
-		props.onEditComplete,
-	]);
-
-	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
-		const finalres = { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
-
-		//append filter types instead of replacing it
-		if (finalres.filterTypes)
-			finalres.filterTypes = Object.assign(
-				{},
-				ReactDataGrid.defaultProps.filterTypes,
-				finalres.filterTypes
-			);
-
-		return finalres;
-	}, [props.gridOptions, base_gridOptions, forcedOptions]);
-
-	const dynamic_gridOptions = React.useMemo<AzGridOptions>(
-		() => {
-			const res = {};
-			dynamic_option_names.map((r) => {
-				res[r] = props[r];
-			});
-			return res;
-		},
-		dynamic_option_names.map((r) => props[r])
-	);
-
-	return (
-		<DataGridEventsWrapper
-			{...props}
-			gridRef={gridRef}
-			static_gridOptions={static_gridOptions}
-			dynamic_gridOptions={dynamic_gridOptions}
-			columns={cached_columns}
-			dataSource={dataSource}
-			highlightedRow={props.highlightedRow}
-		/>
-	);
-}
-
-/* -------------------------------------------------------------------------- */
-/**
- * Wrapper for menu events
- * @param props
- * @returns
- */
-function DataGridEventsWrapper(props: DataGridWrapperProps) {
-	const scopeRef = React.useRef<HTMLDivElement>(null);
-	const hostTheme = useTheme();
-	// Keep the existing context menu and its portal in this grid's CSS scope.
-	const menuTheme = React.useMemo(
-		() => createTheme(hostTheme, {
-			components: { MuiPopper: { defaultProps: { container: () => scopeRef.current } } },
-		}),
-		[hostTheme]
-	);
-	const themeClass = `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`;
-	/* -------------------------------------------------------------------------- */
-	const {
-		onRowClick,
-		onRowContextMenu,
-		onRenderRow,
-		update_menuRow,
-		menuAnchorEl,
-		menuRow,
-	} = useGridEvents(props.gridRef.current, props);
-	/* -------------------------------------------------------------------------- */
-	/**
-	 * Merge click events into grid options
-	 */
-	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
-		const events: AzGridOptions = {
-			onRowClick: onRowClick,
-			onRowContextMenu: onRowContextMenu,
-		};
-
-		const renderProps: any = {
-			onRenderRow: onRenderRow,
-		};
-		return {
-			...props.static_gridOptions,
-			...events,
-			...renderProps,
-		};
-	}, [props.static_gridOptions]);
-
-	/* -------------------------------------------------------------------------- */
-	//TODO ContextMenu not from mui...
-	return (
-		<div ref={scopeRef} className={clsx('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)}>
-			<ThemeProvider theme={menuTheme}>
-				<ContextMenu
-					classname="azgrid-context-menu"
-					menuAnchorEl={menuAnchorEl}
-					menuRow={menuRow}
-					close={update_menuRow}
-					dontAutoClose={false}
-					menu_items={props.contextMenuItems as any}
-				/>
-			</ThemeProvider>
-			{props.details_dataSource ? (
-				<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions} />
-			) : (
-				<DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />
-			)}
-		</div>
-	);
-}
-
-function DataGridDetailsWrapper(props: DataGridWrapperProps) {
-	const cached_details_columns = useColumnData(props.details_columns);
-	const details_dataSource = useDataSource(props.details_dataSource, props);
-	const renderDetailsGrid = ({ data }) => {
-		return (
-			<ReactDataGrid
-				theme="default-light"
-				className={clsx('azgrid', `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`)}
-				defaultFilterValue={props.details_filter}
-				dataSource={details_dataSource}
-				columns={cached_details_columns}
-			/>
-		);
-	};
-
-	/**
-	 * Merge details into grid
-	 */
-	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
-		const finalresult = props.static_gridOptions || {};
-		finalresult['renderDetailsGrid'] = renderDetailsGrid;
-		return finalresult;
-	}, [props.static_gridOptions, props.theme, props.dark]);
-
-	return <DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />;
-}
-
-function DataGridSizeWrapper(props: DataGridWrapperProps) {
-	if (props.delayedSize) {
-		return <DataGridDelayedSizeWrapper {...props} />;
-	} else {
-		return <DataGridNormalSizeWrapper {...props} />;
-	}
-}
-
-/* -------------------------------------------------------------------------- */
-function DataGridNormalSizeWrapper(props: DataGridWrapperProps) {
-	return props.advancedFilterFields ? (
-		<DataGridSearchWrapper {...props} />
-	) : (
-		<DataGridCore {...props} />
-	);
-}
-function DataGridDelayedSizeWrapper(props: DataGridWrapperProps) {
-	const { ref, height, width } = useComponentSize();
-	return (
-		<div ref={ref} className={'azgrid-filler azgrid-nooverflow '}>
-			<div
-				className={'azgrid-delayedresize azgrid-flexlayout'}
-				style={{ height: height, width: width }}
-			>
-				{props.advancedFilterFields ? (
-					<DataGridSearchWrapper {...props} />
-				) : (
-					<DataGridCore {...props} />
-				)}
-			</div>
-		</div>
-	);
-}
-function DataGridSearchWrapper(props: DataGridWrapperProps) {
-	const { element, filteredData } = useGridSearch(props.gridRef.current, props);
-
-	return (
-		<div className={'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'}>
-			{element}
-			<DataGridCore {...props} dataSource={filteredData} />
-		</div>
-	);
-}
-function DataGridCore(props: DataGridWrapperProps) {
-	return (
-		<div className={clsx(props.className, 'azgrid-flexed', 'azgrid-flexlayout')}>
-			<ReactDataGrid
-				{...props.static_gridOptions}
-				{...props.dynamic_gridOptions}
-				rowIndexColumn
-				handle={(ref) => {
-					if (ref) props.gridRef.current = ref.current as any;
-				}}
-				theme="default-light"
-				className={clsx(
-					'azgrid azgrid-flexed',
-					props.allowChildRows && 'azgrid-tree',
-					`azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`
-				)}
-				columns={props.columns}
-				dataSource={props.dataSource}
-			/>
-			{props.children}
-		</div>
-	);
-}
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-
-/* -------------------------------------------------------------------------- */
-export default AzGrid;
+import '@inovua/reactdatagrid-enterprise/index.css';
+import '../themes/base_styles.css';
+import '../themes/grid.css';
+import { get_default_key } from '../func/func_grid';
+import { ContextMenu } from '@azrico/controls/context-menu';
+import React from 'react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+
+import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
+import clsx from 'clsx';
+import { useComponentSize } from 'react-use-size';
+
+import { AzGridOptions, AzGridProps, DataGridWrapperProps } from '../types/types';
+import { useGridEvents } from '../hooks/useGridEvents';
+import { useColumnData } from '../hooks/useColumnData';
+import { useDataSource } from '../hooks/useDatasource';
+import { useGridSearch } from '../hooks/useGridSearch';
+import { apply_column_a11y } from '../func/func_a11y';
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------- */
+
+const defaultOptions: AzGridOptions = {
+	//filterTypes: defaultfilterTypes,
+	remoteFilter: false,
+	remoteSort: false,
+	editStartEvent: 'click',
+	rowReorderColumn: false,
+	resizable: true,
+	columnUserSelect: true,
+	rowIndexColumn: true,
+	rowHeight: 35,
+};
+const forcedOptions: AzGridOptions = {
+	idProperty: '__table_id',
+	nodesProperty: '__children',
+	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',
+];
+/* -------------------------------------------------------------------------- */
+export function AzGrid(props: AzGridProps) {
+	const gridRefBackup = React.useRef<any>(null);
+	const gridRef = props.gridRef || gridRefBackup;
+	const liveGridRef = React.useRef<any>(null);
+	const latestProps = React.useRef(props);
+	latestProps.current = props;
+
+	/* -------------------------------------------------------------------------- */
+	/*                                   Columns                                  */
+	/* -------------------------------------------------------------------------- */
+	const cached_columns = useColumnData(props);
+	const dataSource = useDataSource(props.dataSource, props);
+	const a11y_columns = React.useMemo(
+		() => cached_columns.map((col) => apply_column_a11y(col, { gridEditable: !!props.editable })),
+		[cached_columns, props.editable]
+	);
+	/* -------------------------------------------------------------------------- */
+	/*                                 Row changes                                */
+	/* -------------------------------------------------------------------------- */
+
+	const base_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const firstcolumn = cached_columns[0];
+		const licenseKey = props.licenseKey || get_default_key();
+		// call the latest consumer callback, only passed when the consumer gave one
+		const events: AzGridOptions = {};
+		callback_option_names.forEach((name) => {
+			if (props[name])
+				events[name] = (...args: any[]) => latestProps.current[name]?.(...args);
+		});
+		const extra_ops: AzGridOptions = {
+			licenseKey: licenseKey,
+			editable: props.editable as any, //bug in types of the plugin
+			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+			renderRowDetails: props.RowDetail,
+		};
+		return { ...defaultOptions, ...events, ...extra_ops };
+	}, [
+		cached_columns,
+		props.allowChildRows,
+		props.editable,
+		props.RowDetail,
+		props.licenseKey,
+		...callback_option_names.map((name) => !!props[name]),
+	]);
+
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const finalres = { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
+
+		//append filter types instead of replacing it
+		if (finalres.filterTypes)
+			finalres.filterTypes = Object.assign(
+				{},
+				ReactDataGrid.defaultProps.filterTypes,
+				finalres.filterTypes
+			);
+
+		return finalres;
+	}, [props.gridOptions, base_gridOptions, forcedOptions]);
+
+	const dynamic_gridOptions = React.useMemo<AzGridOptions>(
+		() => {
+			const res = {};
+			dynamic_option_names.map((r) => {
+				res[r] = props[r];
+			});
+			return res;
+		},
+		dynamic_option_names.map((r) => props[r])
+	);
+
+	return (
+		<DataGridEventsWrapper
+			{...props}
+			gridRef={gridRef}
+			liveGridRef={liveGridRef}
+			static_gridOptions={static_gridOptions}
+			dynamic_gridOptions={dynamic_gridOptions}
+			columns={a11y_columns}
+			dataSource={dataSource}
+			highlightedRow={props.highlightedRow}
+		/>
+	);
+}
+
+/* -------------------------------------------------------------------------- */
+/**
+ * Wrapper for menu events
+ * @param props
+ * @returns
+ */
+function DataGridEventsWrapper(props: DataGridWrapperProps) {
+	const scopeRef = React.useRef<HTMLDivElement>(null);
+	const hostTheme = useTheme();
+	// Keep the existing context menu and its portal in this grid's CSS scope.
+	const menuTheme = React.useMemo(
+		() => createTheme(hostTheme, {
+			components: { MuiPopper: { defaultProps: { container: () => scopeRef.current } } },
+		}),
+		[hostTheme]
+	);
+	const themeClass = `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`;
+	/* -------------------------------------------------------------------------- */
+	const {
+		onRowClick,
+		onRowContextMenu,
+		onRenderRow,
+		onRenderLoadMask,
+		update_menuRow,
+		menuAnchorEl,
+		menuRow,
+	} = useGridEvents(props.gridRef.current, props);
+	/* -------------------------------------------------------------------------- */
+	/**
+	 * Merge click events into grid options
+	 */
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const opts: any = props.static_gridOptions || {};
+		const events: AzGridOptions = {
+			onRowClick: onRowClick,
+			onRowContextMenu: onRowContextMenu,
+		};
+
+		// internal row attributes first, consumer's onRenderRow last so it can override them
+		const consumerOnRenderRow = opts.onRenderRow;
+		const renderProps: any = {
+			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: any = {
+			headerProps: { role: 'row', 'aria-rowindex': 1, ...opts.headerProps },
+			rowIndexColumn: apply_column_a11y(
+				typeof opts.rowIndexColumn === 'object' ? opts.rowIndexColumn : {},
+				{ role: 'rowheader', gridEditable }
+			),
+		};
+		if (opts.checkboxColumn)
+			a11yProps.checkboxColumn = apply_column_a11y(
+				typeof opts.checkboxColumn === 'object' ? opts.checkboxColumn : {},
+				{ gridEditable, markReadonly: false }
+			);
+
+		return {
+			...opts,
+			...events,
+			...renderProps,
+			...a11yProps,
+		};
+	}, [
+		props.static_gridOptions,
+		props.editable,
+		onRowClick,
+		onRowContextMenu,
+		onRenderRow,
+		onRenderLoadMask,
+	]);
+
+	/* -------------------------------------------------------------------------- */
+	//TODO ContextMenu not from mui...
+	return (
+		<div ref={scopeRef} className={clsx('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)}>
+			<ThemeProvider theme={menuTheme}>
+				<ContextMenu
+					classname="azgrid-context-menu"
+					menuAnchorEl={menuAnchorEl}
+					menuRow={menuRow}
+					close={update_menuRow}
+					dontAutoClose={false}
+					menu_items={props.contextMenuItems as any}
+				/>
+			</ThemeProvider>
+			{props.details_dataSource ? (
+				<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions} />
+			) : (
+				<DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />
+			)}
+		</div>
+	);
+}
+
+function DataGridDetailsWrapper(props: DataGridWrapperProps) {
+	const cached_details_columns = useColumnData(props.details_columns);
+	const details_dataSource = useDataSource(props.details_dataSource, props);
+	const renderDetailsGrid = ({ data }) => {
+		return (
+			<ReactDataGrid
+				theme="default-light"
+				className={clsx('azgrid', `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`)}
+				defaultFilterValue={props.details_filter}
+				dataSource={details_dataSource}
+				columns={cached_details_columns}
+			/>
+		);
+	};
+
+	/**
+	 * Merge details into grid
+	 */
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const finalresult = props.static_gridOptions || {};
+		finalresult['renderDetailsGrid'] = renderDetailsGrid;
+		return finalresult;
+	}, [props.static_gridOptions, props.theme, props.dark]);
+
+	return <DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />;
+}
+
+function DataGridSizeWrapper(props: DataGridWrapperProps) {
+	if (props.delayedSize) {
+		return <DataGridDelayedSizeWrapper {...props} />;
+	} else {
+		return <DataGridNormalSizeWrapper {...props} />;
+	}
+}
+
+/* -------------------------------------------------------------------------- */
+function DataGridNormalSizeWrapper(props: DataGridWrapperProps) {
+	return props.advancedFilterFields ? (
+		<DataGridSearchWrapper {...props} />
+	) : (
+		<DataGridCore {...props} />
+	);
+}
+function DataGridDelayedSizeWrapper(props: DataGridWrapperProps) {
+	const { ref, height, width } = useComponentSize();
+	return (
+		<div ref={ref} className={'azgrid-filler azgrid-nooverflow '}>
+			<div
+				className={'azgrid-delayedresize azgrid-flexlayout'}
+				style={{ height: height, width: width }}
+			>
+				{props.advancedFilterFields ? (
+					<DataGridSearchWrapper {...props} />
+				) : (
+					<DataGridCore {...props} />
+				)}
+			</div>
+		</div>
+	);
+}
+function DataGridSearchWrapper(props: DataGridWrapperProps) {
+	const { element, filteredData } = useGridSearch(props);
+
+	return (
+		<div className={'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'}>
+			{element}
+			<DataGridCore {...props} dataSource={filteredData} />
+		</div>
+	);
+}
+const DataGridCore = React.memo(DataGridCoreView, (prev, next) =>
+	core_prop_names.every((name) => prev[name] === next[name])
+);
+function DataGridCoreView(props: DataGridWrapperProps) {
+	const { gridRef, liveGridRef } = props;
+	const handle = React.useCallback(
+		(ref) => {
+			if (ref) gridRef.current = ref.current as any;
+			if (liveGridRef) liveGridRef.current = ref as any;
+		},
+		[gridRef, liveGridRef]
+	);
+	return (
+		<div className={clsx(props.className, 'azgrid-flexed', 'azgrid-flexlayout')}>
+			<ReactDataGrid
+				{...props.static_gridOptions}
+				{...props.dynamic_gridOptions}
+				rowIndexColumn={props.static_gridOptions.rowIndexColumn || true}
+				handle={handle}
+				theme="default-light"
+				className={clsx(
+					'azgrid azgrid-flexed',
+					props.allowChildRows && 'azgrid-tree',
+					`azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`
+				)}
+				columns={props.columns}
+				dataSource={props.dataSource}
+			/>
+			{props.children}
+		</div>
+	);
+}
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------- */
+export default AzGrid;