@azrico/reactgrid 1.3.52 → 1.3.54

package/dist/src/example.js

@@ -22,8 +22,7 @@ Object.keys(_DataGrid).forEach(function (key) {
 });
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const columns = [{
   name: 'name',
   title: 'Name',

package/dist/src/index.js

@@ -63,8 +63,7 @@ var _example = _interopRequireDefault(require("./example"));
 var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /* -------------------------------------------------------------------------- */
 //
 var _default = exports.default = _DataGrid.default;

package/dist/src/themes/grid.css

@@ -9,15 +9,22 @@
 	--grid-bg-hover: oklch(var(--b2, 94.75% 0.014 277.06));
 	--grid-bg-hover2: oklch(var(--b3, 94.75% 0.014 277.06));
 	--grid-fg-hover: oklch(var(--bc, 23.5% 0 0));
-}.InovuaReactDataGrid--theme-amber-dark {
+}
+
+.InovuaReactDataGrid--theme-amber-dark {
 	--grid-bg: #313943;
 	--grid-fg: #c5cae9;
 	--grid-bg-hover: oklch(var(--b2, 40.8% 0.011 128.75));
 	--grid-fg-hover: #ececec;
 }
 .InovuaReactDataGrid__row {
+	border: none !important;
+	border-top-width: 0 !important;
+	border-bottom-width: 0 !important;
 	color: var(--grid-fg);
-	border-top-width: 1px;
+}
+.InovuaReactDataGrid__cell {
+	border: 0.1px solid rgba(1, 1, 1, 0.1) !important ;
 }
 .InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--odd {
 	background-color: #fafafa;

package/dist/src/views/index.js

@@ -17,6 +17,5 @@ Object.keys(_DataGrid).forEach(function (key) {
     }
   });
 });
-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 && {}.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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 var _default = exports.default = _DataGrid.default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.3.52",
+	"version": "1.3.54",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -61,5 +61,5 @@
 			"last 1 safari version"
 		]
 	},
-	"packageManager": "yarn@3.5.0"
+	"packageManager": "yarn@4.10.2"
 }

package/public/manifest.json

@@ -1,9 +1,9 @@
-{
-	"short_name": "AzGrid",
-	"name": "React Grid Wrapper",
-	"icons": [],
-	"start_url": "./index.html",
-	"display": "standalone",
-	"theme_color": "#000000",
-	"background_color": "#ffffff"
-}
+{
+	"short_name": "AzGrid",
+	"name": "React Grid Wrapper",
+	"icons": [],
+	"start_url": "./index.html",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+}

package/src/hooks/useColumnData.ts

@@ -1,34 +1,34 @@
-import React from 'react';
-import {
-	AzGridProps,
-	DataGridWrapperProps,
-	GridType,
-	LooseColumnDefinition,
-} from '../types/types';
-import { applyColumnData, find_realData, get_row_id } from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-export function useColumnData(
-	inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps
-) {
-	if (inputOrProps == null) return [];
-	if (Array.isArray(inputOrProps)) return useThisColumnData(inputOrProps);
-	return usePropsColumnData(inputOrProps);
-}
-function useThisColumnData(cols: any[]) {
-	return React.useMemo(() => {
-		return applyColumnData(cols);
-	}, [cols]);
-}
-function usePropsColumnData(props: AzGridProps) {
-	return React.useMemo(() => {
-		return applyColumnData(props);
-	}, [
-		props.columns,
-		props.leftColumns,
-		props.rightColumns,
-		props.editableColumns,
-		props.columnExtensions,
-		props.customColumns,
-	]);
-}
+import React from 'react';
+import {
+	AzGridProps,
+	DataGridWrapperProps,
+	GridType,
+	LooseColumnDefinition,
+} from '../types/types';
+import { applyColumnData, find_realData, get_row_id } from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+
+export function useColumnData(
+	inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps
+) {
+	if (inputOrProps == null) return [];
+	if (Array.isArray(inputOrProps)) return useThisColumnData(inputOrProps);
+	return usePropsColumnData(inputOrProps);
+}
+function useThisColumnData(cols: any[]) {
+	return React.useMemo(() => {
+		return applyColumnData(cols);
+	}, [cols]);
+}
+function usePropsColumnData(props: AzGridProps) {
+	return React.useMemo(() => {
+		return applyColumnData(props);
+	}, [
+		props.columns,
+		props.leftColumns,
+		props.rightColumns,
+		props.editableColumns,
+		props.columnExtensions,
+		props.customColumns,
+	]);
+}

package/src/hooks/useDatasource.ts

@@ -1,25 +1,25 @@
-import React from 'react';
-import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
-import {
-	applyColumnData,
-	ApplyDataSource,
-	find_realData,
-	get_row_id,
-} from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-export function useDataSource(ds: any, props: AzGridProps) {
-	const cached_data = React.useRef<any>();
-	const last_cache_info = React.useRef<any>();
-	return React.useCallback(
-		async (dt) => {
-			return await ApplyDataSource(ds, {
-				skip: dt?.skip,
-				limit: dt?.limit,
-				cached_data: cached_data,
-				last_cache_info: last_cache_info,
-			});
-		},
-		[ds]
-	);
-}
+import React from 'react';
+import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
+import {
+	applyColumnData,
+	ApplyDataSource,
+	find_realData,
+	get_row_id,
+} from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+
+export function useDataSource(ds: any, props: AzGridProps) {
+	const cached_data = React.useRef<any>();
+	const last_cache_info = React.useRef<any>();
+	return React.useCallback(
+		async (dt) => {
+			return await ApplyDataSource(ds, {
+				skip: dt?.skip,
+				limit: dt?.limit,
+				cached_data: cached_data,
+				last_cache_info: last_cache_info,
+			});
+		},
+		[ds]
+	);
+}

package/src/hooks/useGridEvents.ts

@@ -1,96 +1,96 @@
-import React from 'react';
-import { DataGridWrapperProps, GridType } from '../types/types';
-import { find_realData, get_row_id } from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-function useGridMenuRow() {
-	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
-	const [menuRow, set_menuRow] = React.useState<any>(null);
-	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
-		set_menuRow(r || null);
-		set_menuAnchorEl(el || null);
-	}, []);
-	return { update_menuRow, menuAnchorEl, menuRow };
-}
-export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
-	const click_data = React.useRef<any>(null);
-	const { update_menuRow, menuAnchorEl, menuRow } = useGridMenuRow();
-
-	const refreshColumn = React.useCallback(
-		(col: string) => {
-			const dt = grid.ungroupedData;
-			for (let index = 0; index < dt.length; index++) {
-				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
-			}
-		},
-		[grid]
-	);
-	const refresh = React.useCallback(() => {
-		const dt = grid.ungroupedData;
-		for (let index = 0; index < dt.length; index++) {
-			(grid as any).setItemAt(index, {}, { replace: false });
-		}
-	}, [grid]);
-
-	React.useEffect(() => {
-		if (!grid) return;
-		grid['refresh'] = refresh;
-		grid['refreshColumn'] = refreshColumn;
-	}, [grid, props.dataSource, refresh, refreshColumn]);
-	/* -------------------------------------------------------------------------- */
-	/*                                   events                                   */
-	/* -------------------------------------------------------------------------- */
-	const onRowClick = React.useCallback(
-		(rowProps, event) => {
-			const nowDate = Date.now();
-			const lastclick: number = click_data.current[get_row_id(rowProps)];
-			if (lastclick) {
-				const diffTime = Math.abs(nowDate - lastclick);
-				if (diffTime < 400) {
-					click_data.current[get_row_id(rowProps)] = null;
-					return (
-						props.onRowDoubleClick &&
-						props.onRowDoubleClick(rowProps.rowIndex, rowProps.data)
-					);
-				}
-			}
-
-			click_data.current[get_row_id(rowProps)] = nowDate;
-			return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-		},
-		[props.onRowClick, props.onRowDoubleClick]
-	);
-
-	React.useEffect(() => {
-		click_data.current = {};
-	}, [props.dataSource]);
-
-	/* ------------------------------- ContextMenu ------------------------------ */
-	const onRowContextMenu = React.useCallback((rowProps, event) => {
-		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
-			update_menuRow(null, null);
-			return true;
-		}
-		event.preventDefault();
-
-		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
-		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
-		update_menuRow(realRow, anEl);
-		return false;
-	}, []);
-
-	/* -------------------------------------------------------------------------- */
-	const onRenderRow = React.useCallback((rowProps) => {
-		// save the original handlers to be called later
-		rowProps['data-row-id'] = get_row_id(rowProps.data);
-	}, []);
-
-	return {
-		onRowClick,
-		onRowContextMenu,
-		onRenderRow,
-		update_menuRow,
-		menuAnchorEl,
-		menuRow,
-	};
-}
+import React from 'react';
+import { DataGridWrapperProps, GridType } from '../types/types';
+import { find_realData, get_row_id } from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+
+function useGridMenuRow() {
+	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
+	const [menuRow, set_menuRow] = React.useState<any>(null);
+	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
+		set_menuRow(r || null);
+		set_menuAnchorEl(el || null);
+	}, []);
+	return { update_menuRow, menuAnchorEl, menuRow };
+}
+export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
+	const click_data = React.useRef<any>(null);
+	const { update_menuRow, menuAnchorEl, menuRow } = useGridMenuRow();
+
+	const refreshColumn = React.useCallback(
+		(col: string) => {
+			const dt = grid.ungroupedData;
+			for (let index = 0; index < dt.length; index++) {
+				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
+			}
+		},
+		[grid]
+	);
+	const refresh = React.useCallback(() => {
+		const dt = grid.ungroupedData;
+		for (let index = 0; index < dt.length; index++) {
+			(grid as any).setItemAt(index, {}, { replace: false });
+		}
+	}, [grid]);
+
+	React.useEffect(() => {
+		if (!grid) return;
+		grid['refresh'] = refresh;
+		grid['refreshColumn'] = refreshColumn;
+	}, [grid, props.dataSource, refresh, refreshColumn]);
+	/* -------------------------------------------------------------------------- */
+	/*                                   events                                   */
+	/* -------------------------------------------------------------------------- */
+	const onRowClick = React.useCallback(
+		(rowProps, event) => {
+			const nowDate = Date.now();
+			const lastclick: number = click_data.current[get_row_id(rowProps)];
+			if (lastclick) {
+				const diffTime = Math.abs(nowDate - lastclick);
+				if (diffTime < 400) {
+					click_data.current[get_row_id(rowProps)] = null;
+					return (
+						props.onRowDoubleClick &&
+						props.onRowDoubleClick(rowProps.rowIndex, rowProps.data)
+					);
+				}
+			}
+
+			click_data.current[get_row_id(rowProps)] = nowDate;
+			return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+		},
+		[props.onRowClick, props.onRowDoubleClick]
+	);
+
+	React.useEffect(() => {
+		click_data.current = {};
+	}, [props.dataSource]);
+
+	/* ------------------------------- ContextMenu ------------------------------ */
+	const onRowContextMenu = React.useCallback((rowProps, event) => {
+		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
+			update_menuRow(null, null);
+			return true;
+		}
+		event.preventDefault();
+
+		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
+		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
+		update_menuRow(realRow, anEl);
+		return false;
+	}, []);
+
+	/* -------------------------------------------------------------------------- */
+	const onRenderRow = React.useCallback((rowProps) => {
+		// save the original handlers to be called later
+		rowProps['data-row-id'] = get_row_id(rowProps.data);
+	}, []);
+
+	return {
+		onRowClick,
+		onRowContextMenu,
+		onRenderRow,
+		update_menuRow,
+		menuAnchorEl,
+		menuRow,
+	};
+}

package/src/hooks/useGridSearch.tsx

@@ -1,79 +1,79 @@
-import React from 'react';
-import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
-import debounce from 'lodash.debounce';
-import { array_intersection, fn_eval } from '@azrico/object';
-
-export function useGridSearch(grid: GridType, props: DataGridWrapperProps) {
-	const [search, set_search] = React.useState('');
-	const [filteredData, set_filteredData] = React.useState<any>([]);
-	const currentSearch = React.useRef('');
-	const currentDS = React.useRef<any[]>([]);
-
-	const try_search = React.useCallback(
-		debounce(() => {
-			if (!Array.isArray(currentDS.current)) {
-				return;
-			}
-			let newData: any[] = [];
-			if (currentSearch.current) {
-				const visibleColumns = grid.visibleColumns;
-				const columns_to_search: string[] = array_intersection(
-					props.advancedFilterFields || [],
-					visibleColumns.map((r) => r.id)
-				);
-				const lowerSearchText = currentSearch.current.toLowerCase().trim();
-				if (!lowerSearchText || columns_to_search.length === 0)
-					newData = currentDS.current;
-				else {
-					newData = currentDS.current.filter((p) => {
-						for (let index = 0; index < columns_to_search.length; index++) {
-							const col = columns_to_search[index];
-							const v = (p[col] + '').toLowerCase(); //value of column
-							if (v && v.indexOf(lowerSearchText) != -1) {
-								//if one column is matching then the row is a match
-								return true;
-							}
-						}
-						return false;
-					});
-				}
-			} else newData = currentDS.current;
-			set_filteredData(newData);
-		}, 1000),
-		[grid]
-	);
-	React.useEffect(() => {
-		fn_eval(props.dataSource).then((r) => {
-			currentDS.current = typeof r === 'object' ? r.data || r : r;
-			searchIfNeeded();
-		});
-	}, [props.dataSource]);
-
-	React.useEffect(() => {
-		currentSearch.current = search;
-		searchIfNeeded();
-	}, [search]);
-
-	function searchIfNeeded() {
-		if (!search) {
-			set_filteredData(props.dataSource);
-		} else try_search();
-	}
-
-	const element = (
-		<>
-			<form className={'azgrid-searcharea'}>
-				<label>
-					Search
-					<input
-						type="text"
-						name="name"
-						value={search}
-						onChange={(e) => set_search(e.target.value)}
-					/>
-				</label>
-			</form>
-		</>
-	);
-	return { filteredData, element };
-}
+import React from 'react';
+import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
+import debounce from 'lodash.debounce';
+import { array_intersection, fn_eval } from '@azrico/object';
+
+export function useGridSearch(grid: GridType, props: DataGridWrapperProps) {
+	const [search, set_search] = React.useState('');
+	const [filteredData, set_filteredData] = React.useState<any>([]);
+	const currentSearch = React.useRef('');
+	const currentDS = React.useRef<any[]>([]);
+
+	const try_search = React.useCallback(
+		debounce(() => {
+			if (!Array.isArray(currentDS.current)) {
+				return;
+			}
+			let newData: any[] = [];
+			if (currentSearch.current) {
+				const visibleColumns = grid.visibleColumns;
+				const columns_to_search: string[] = array_intersection(
+					props.advancedFilterFields || [],
+					visibleColumns.map((r) => r.id)
+				);
+				const lowerSearchText = currentSearch.current.toLowerCase().trim();
+				if (!lowerSearchText || columns_to_search.length === 0)
+					newData = currentDS.current;
+				else {
+					newData = currentDS.current.filter((p) => {
+						for (let index = 0; index < columns_to_search.length; index++) {
+							const col = columns_to_search[index];
+							const v = (p[col] + '').toLowerCase(); //value of column
+							if (v && v.indexOf(lowerSearchText) != -1) {
+								//if one column is matching then the row is a match
+								return true;
+							}
+						}
+						return false;
+					});
+				}
+			} else newData = currentDS.current;
+			set_filteredData(newData);
+		}, 1000),
+		[grid]
+	);
+	React.useEffect(() => {
+		fn_eval(props.dataSource).then((r) => {
+			currentDS.current = typeof r === 'object' ? r.data || r : r;
+			searchIfNeeded();
+		});
+	}, [props.dataSource]);
+
+	React.useEffect(() => {
+		currentSearch.current = search;
+		searchIfNeeded();
+	}, [search]);
+
+	function searchIfNeeded() {
+		if (!search) {
+			set_filteredData(props.dataSource);
+		} else try_search();
+	}
+
+	const element = (
+		<>
+			<form className={'azgrid-searcharea'}>
+				<label>
+					Search
+					<input
+						type="text"
+						name="name"
+						value={search}
+						onChange={(e) => set_search(e.target.value)}
+					/>
+				</label>
+			</form>
+		</>
+	);
+	return { filteredData, element };
+}

package/src/themes/grid.css

@@ -9,15 +9,22 @@
 	--grid-bg-hover: oklch(var(--b2, 94.75% 0.014 277.06));
 	--grid-bg-hover2: oklch(var(--b3, 94.75% 0.014 277.06));
 	--grid-fg-hover: oklch(var(--bc, 23.5% 0 0));
-}.InovuaReactDataGrid--theme-amber-dark {
+}
+
+.InovuaReactDataGrid--theme-amber-dark {
 	--grid-bg: #313943;
 	--grid-fg: #c5cae9;
 	--grid-bg-hover: oklch(var(--b2, 40.8% 0.011 128.75));
 	--grid-fg-hover: #ececec;
 }
 .InovuaReactDataGrid__row {
+	border: none !important;
+	border-top-width: 0 !important;
+	border-bottom-width: 0 !important;
 	color: var(--grid-fg);
-	border-top-width: 1px;
+}
+.InovuaReactDataGrid__cell {
+	border: 0.1px solid rgba(1, 1, 1, 0.1) !important ;
 }
 .InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--odd {
 	background-color: #fafafa;