@azrico/reactgrid 1.2.12 → 1.2.14

package/src/views/DataGrid.tsx

@@ -15,6 +15,7 @@ import {
 import { ContextMenu, ConvertableToMenuItem } from '@azrico/controls';
 import React, { useCallback, useState } from 'react';
 import {
+	TypeCellSelection,
 	TypeColumn,
 	TypeDataGridProps,
 	TypeDataSource,
@@ -41,11 +42,13 @@ export type CellDefinition = any;
 export type RowDefinition = any;
 export type RowProps = TypeRowProps;
 export type RowSelectionValue = TypeRowSelection;
+export type CellSelectionValue = TypeCellSelection;
 export type DataRowDefinition = any;
 export type FilterTypes = TypeFilterTypes;
 export type FilterValues = TypeFilterValue;
 export type DataSourceDefinition = TypeDataSource;
 export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
+export type OnCellSelectionChangeFunc = (s: { [key: string]: boolean }) => void;
 export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
 /* -------------------------------------------------------------------------- */
 type loose_column_names = {
@@ -66,7 +69,7 @@ type customColumnData = {
 	name: string;
 	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
 };
-type GridOptions = Partial<TypeDataGridProps>;
+export type AzGridOptions = Partial<TypeDataGridProps>;
 /* -------------------------------------------------------------------------- */
 export type AzGridProps = {
 	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
@@ -77,7 +80,7 @@ export type AzGridProps = {
 	licenseKey?: string;
 
 	gridRef?: any;
-	gridOptions?: GridOptions;
+	gridOptions?: AzGridOptions;
 
 	columns?: LooseColumnDefinition[];
 	columnExtensions?: Partial<LooseColumnDefinition>;
@@ -93,9 +96,11 @@ export type AzGridProps = {
 	RowDetail?: RowDetailsFunc;
 
 	selected?: RowSelectionValue;
+	cellSelection?: CellSelectionValue;
 	/* -------------------------------------------------------------------------- */
 	onEditComplete?: (editInfo: TypeEditInfo) => void;
 	onSelectionChange?: OnSelectionChangeFunc;
+	onCellSelectionChange?: OnCellSelectionChangeFunc;
 
 	onRowClick?: (rowIndex: number, row: any) => void;
 	onRowDoubleClick?: (rowIndex: number, row: any) => void;
@@ -126,14 +131,14 @@ type DataGridProps = ModifyFields<
 type DataGridWrapperProps = ModifyFields<
 	DataGridProps,
 	{
-		static_gridOptions: GridOptions;
-		dynamic_gridOptions: GridOptions;
+		static_gridOptions: AzGridOptions;
+		dynamic_gridOptions: AzGridOptions;
 		children?: React.ReactNode;
 	}
 >;
 /* -------------------------------------------------------------------------- */
 
-const defaultOptions: GridOptions = {
+const defaultOptions: AzGridOptions = {
 	//filterTypes: defaultfilterTypes,
 	remoteFilter: false,
 	remoteSort: false,
@@ -144,12 +149,12 @@ const defaultOptions: GridOptions = {
 	rowIndexColumn: true,
 	rowHeight: 35,
 };
-const forcedOptions: GridOptions = {
+const forcedOptions: AzGridOptions = {
 	idProperty: '__table_id',
 	nodesProperty: '__children',
 };
 
-const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
+const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
 /* -------------------------------------------------------------------------- */
 export function AzGrid(props: AzGridProps) {
 	const gridRefBackup = React.useRef<any>(null);
@@ -186,16 +191,18 @@ export function AzGrid(props: AzGridProps) {
 		[props.dataSource]
 	);
 
-	const base_gridOptions = React.useMemo<GridOptions>(() => {
+	const base_gridOptions = React.useMemo<AzGridOptions>(() => {
 		const firstcolumn = cached_columns[0];
 		const licenseKey = props.licenseKey || get_default_key();
-		const events: GridOptions = {
+		const events: AzGridOptions = {
 			onSkipChange: props.onSkipChange,
 			onLimitChange: props.onLimitChange,
 			onEditComplete: props.onEditComplete,
 		};
-		const extra_ops: GridOptions = {
+		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,
@@ -211,11 +218,11 @@ export function AzGrid(props: AzGridProps) {
 		props.onEditComplete,
 	]);
 
-	const static_gridOptions = React.useMemo<GridOptions>(() => {
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
 		return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
 	}, [props.gridOptions, base_gridOptions, forcedOptions]);
 
-	const dynamic_gridOptions = React.useMemo<GridOptions>(
+	const dynamic_gridOptions = React.useMemo<AzGridOptions>(
 		() => {
 			const res = {};
 			dynamic_option_names.map((r) => {
@@ -302,8 +309,8 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	/**
 	 * Merge click events into grid options
 	 */
-	const static_gridOptions = React.useMemo<GridOptions>(() => {
-		const events: GridOptions = {
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const events: AzGridOptions = {
 			onRowClick: onRowClick,
 			onRowContextMenu: onRowContextMenu,
 		};
@@ -370,7 +377,7 @@ function DataGridDetailsWrapper(props: DataGridWrapperProps) {
 	/**
 	 * Merge details into grid
 	 */
-	const static_gridOptions = React.useMemo<GridOptions>(() => {
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
 		const finalresult = props.static_gridOptions || {};
 		finalresult['renderDetailsGrid'] = renderDetailsGrid;
 		return finalresult;
@@ -425,6 +432,7 @@ function DataGridFlexSize(props: DataGridWrapperProps) {
 				className={'azgrid-filler'}
 				columns={props.columns}
 				dataSource={props.dataSource}
+				onCellSelectionChange
 			/>
 			{props.children}
 		</div>

package/dist/src/themes/base_styles.css

@@ -1,30 +0,0 @@
-.azgrid-container {
-	height: 100%;
-	width: 100%;
-}
-.azgrid-borderbox {
-	box-sizing: border-box;
-}
-.azgrid-filler {
-	height: 100%;
-	width: 100%;
-}
-.azgrid-nooverflow {
-	overflow: hidden;
-}
-.azgrid-testborder {
-	border: 3px solid red;
-}
-.azgrid-pad50px {
-	padding: 50px;
-}
-.azgrid-nopad {
-	padding: 0;
-}
-.azgrid-nomargin {
-	margin: 0;
-}
-.azgrid-delayedresize {
-	transition-property: 'width,height';
-	transition-delay: 200ms;
-}

package/dist/src/themes/grid.css

@@ -1,20 +0,0 @@
-/* .InovuaReactDataGrid {
-	--grid-bg: '#fff';
-}
-.InovuaReactDataGrid {
-	background: var(--grid-bg) !important;
-}
-.InovuaReactDataGrid__header {
-	background: var(--grid-bg) !important;
-}
-.InovuaReactDataGrid__row {
-	background: var(--grid-bg) !important;
-}
-.InovuaReactDataGrid__cell {
-	background: var(--grid-bg) !important;
-} */
-.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
-	height: 100%;
-	display: flex;
-	align-items: center;
-}