@azrico/reactgrid 1.3.8 → 1.3.10

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.3.10](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.3.10) (2023-08-19)
+
+
+### Features
+
+* DataGridSearchWrapper ([ebf3acf](https://github.com/Azrideus/azrico-reactgrid/commit/ebf3acff5f90c45090fad86be8e83e28744dd9dd))
+* editable can be a function ([6ea857e](https://github.com/Azrideus/azrico-reactgrid/commit/6ea857e4f403d2a334dc5e74065f6b8033277ca4))
+
+
+### Bug Fixes
+
+* DataGridDelayedSizeWrapper actual delayed ([2ddfd2f](https://github.com/Azrideus/azrico-reactgrid/commit/2ddfd2fb58c90bd906e1330f22f0ef7468d34afb))
+* onCellSelectionChange ([95c8f54](https://github.com/Azrideus/azrico-reactgrid/commit/95c8f540e94dde0c7e245fb29fb6afc7172957ec))
+* styling ([9018f75](https://github.com/Azrideus/azrico-reactgrid/commit/9018f7593e253720f751f52855a2d956dfc578ed))
+
+### [1.3.9](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.3.9) (2023-08-19)
+
+
+### Features
+
+* editable can be a function ([6ea857e](https://github.com/Azrideus/azrico-reactgrid/commit/6ea857e4f403d2a334dc5e74065f6b8033277ca4))
+
+
+### Bug Fixes
+
+* DataGridDelayedSizeWrapper actual delayed ([2ddfd2f](https://github.com/Azrideus/azrico-reactgrid/commit/2ddfd2fb58c90bd906e1330f22f0ef7468d34afb))
+* onCellSelectionChange ([95c8f54](https://github.com/Azrideus/azrico-reactgrid/commit/95c8f540e94dde0c7e245fb29fb6afc7172957ec))
+* styling ([9018f75](https://github.com/Azrideus/azrico-reactgrid/commit/9018f7593e253720f751f52855a2d956dfc578ed))
+
 ### [1.3.8](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.3.8) (2023-08-19)
 
 

package/dist/src/example.js

@@ -140,7 +140,6 @@ function ExampleGrid() {
     }];
   }, []);
   return _react.default.createElement(_DataGrid.default, {
-    dark: true,
     delayedSize: true,
     // details_dataSource={details_dataSource}
     dataSource: dataSource,
@@ -156,6 +155,7 @@ function ExampleGrid() {
     editableColumns: editableColumns,
     editable: true,
     onEditComplete: onEditComplete,
+    advancedFilterFields: ['name'],
     // leftColumns={leftColumns}
     gridOptions: {
       // defaultFilterValue: filterValue,

package/dist/src/themes/base_styles.css

@@ -12,6 +12,13 @@
 .azgrid-nooverflow {
 	overflow: hidden;
 }
+.azgrid-flexed {
+	flex: 1;
+}
+.azgrid-flexlayout {
+	display: flex;
+	flex-direction: column;
+}
 .azgrid-testborder {
 	border: 3px solid red;
 }
@@ -29,3 +36,17 @@
 	transition-delay: 200ms;
 	transition-duration: 0ms;
 }
+
+.azgrid-searcharea {
+	margin: 5px;
+	font-size: large;
+}
+.azgrid-searcharea label {
+	gap: 5px;
+	display: flex;
+	align-items: center;
+}
+.azgrid-searcharea label input {
+	padding: 5px;
+	font-size: large;
+}

package/dist/src/views/DataGrid.d.ts

@@ -68,6 +68,7 @@ export type AzGridProps = {
     skip?: number;
     limit?: number;
     editable?: boolean | ((editValue: any, cellProps: any) => boolean);
+    advancedFilterFields?: string[];
     loading?: boolean;
     dark?: boolean;
     delayedSize?: boolean;

package/dist/src/views/DataGrid.js

@@ -14,9 +14,11 @@ var _func_grid = require("../func/func_grid");
 var _controls = require("@azrico/controls");
 var _react = _interopRequireWildcard(require("react"));
 var _func_child = require("../func/func_child");
+var _object = require("@azrico/object");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _reactUseSize = require("react-use-size");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -54,8 +56,8 @@ function AzGrid(props) {
   const last_cache_info = _react.default.useRef();
   const dataSource = _react.default.useCallback(async dt => {
     return await (0, _func_grid.ApplyDataSource)(props.dataSource, {
-      skip: dt.skip,
-      limit: dt.limit,
+      skip: dt === null || dt === void 0 ? void 0 : dt.skip,
+      limit: dt === null || dt === void 0 ? void 0 : dt.limit,
       cached_data: cached_data,
       last_cache_info: last_cache_info
     });
@@ -241,12 +243,19 @@ function DataGridSizeWrapper(props) {
       ...props
     });
   } else {
-    return _react.default.createElement(DataGridCore, {
+    return _react.default.createElement(DataGridNormalSizeWrapper, {
       ...props
     });
   }
 }
 /* -------------------------------------------------------------------------- */
+function DataGridNormalSizeWrapper(props) {
+  return props.advancedFilterFields ? _react.default.createElement(DataGridSearchWrapper, {
+    ...props
+  }) : _react.default.createElement(DataGridCore, {
+    ...props
+  });
+}
 function DataGridDelayedSizeWrapper(props) {
   const {
     ref,
@@ -255,26 +264,70 @@ function DataGridDelayedSizeWrapper(props) {
   } = (0, _reactUseSize.useComponentSize)();
   return _react.default.createElement("div", {
     ref: ref,
-    className: 'azgrid-filler'
+    className: 'azgrid-filler azgrid-nooverflow '
   }, _react.default.createElement("div", {
-    className: 'azgrid-delayedresize',
+    className: 'azgrid-delayedresize azgrid-flexlayout',
     style: {
       height: height,
       width: width
     }
-  }, _react.default.createElement(DataGridCore, {
+  }, props.advancedFilterFields ? _react.default.createElement(DataGridSearchWrapper, {
+    ...props
+  }) : _react.default.createElement(DataGridCore, {
     ...props
   })));
 }
+function DataGridSearchWrapper(props) {
+  const [search, set_search] = _react.default.useState('');
+  const [filteredData, set_filteredData] = _react.default.useState([]);
+  const [evaluatedDataSource, set_evaluatedDataSource] = _react.default.useState([]);
+  const try_search = _react.default.useCallback((0, _lodash.default)((ds, v) => {
+    if (!Array.isArray(ds)) return;
+    const visibleColumns = props.gridRef.current.visibleColumns;
+    const columns_to_search = (0, _object.array_intersection)(props.advancedFilterFields || [], visibleColumns.map(r => r.id));
+    const lowerSearchText = v && v.toLowerCase();
+    let newData = [];
+    if (!lowerSearchText) newData = ds;else newData = ds.filter(p => {
+      for (let index = 0; index < columns_to_search.length; index++) {
+        const col = columns_to_search[index];
+        const v = (p[col] + '').toLowerCase(); // get string value
+        if (v && v.indexOf(lowerSearchText) == -1) return false;
+      }
+      return true;
+    });
+    set_filteredData(newData);
+  }, 1000), []);
+  _react.default.useEffect(() => {
+    (0, _object.fn_eval)(props.dataSource).then(({
+      data
+    }) => set_evaluatedDataSource(data));
+  }, [props.dataSource]);
+  _react.default.useEffect(() => {
+    try_search(evaluatedDataSource, search);
+  }, [search, evaluatedDataSource]);
+  return _react.default.createElement("div", {
+    className: 'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'
+  }, _react.default.createElement("form", {
+    className: 'azgrid-searcharea'
+  }, _react.default.createElement("label", null, "Search", _react.default.createElement("input", {
+    type: "text",
+    name: "name",
+    value: search,
+    onChange: e => set_search(e.target.value)
+  }))), _react.default.createElement(DataGridCore, {
+    ...props,
+    dataSource: filteredData
+  }));
+}
 function DataGridCore(props) {
   return _react.default.createElement("div", {
-    className: (0, _clsx.default)(props.className, 'azgrid-filler')
+    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 => props.gridRef.current = ref ? ref.current : null,
-    className: 'azgrid-filler',
+    className: 'azgrid-flexed',
     columns: props.columns,
     dataSource: props.dataSource
   }), props.children);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.3.8",
+	"version": "1.3.10",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -29,12 +29,13 @@
 		"typescript": "^4.8.4"
 	},
 	"dependencies": {
-		"@azrico/controls": "^1.5.58",
-		"@azrico/object": "^1.4.35",
+		"@azrico/controls": "^1.5.60",
+		"@azrico/object": "^1.4.67",
 		"@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"
 	},

package/src/example.tsx

@@ -129,7 +129,6 @@ export function ExampleGrid() {
 
 	return (
 		<AzGrid
-			dark
 			delayedSize
 			// details_dataSource={details_dataSource}
 			dataSource={dataSource}
@@ -145,6 +144,7 @@ export function ExampleGrid() {
 			editableColumns={editableColumns}
 			editable={true}
 			onEditComplete={onEditComplete}
+			advancedFilterFields={['name']}
 			// leftColumns={leftColumns}
 			gridOptions={
 				{

package/src/themes/base_styles.css

@@ -12,6 +12,13 @@
 .azgrid-nooverflow {
 	overflow: hidden;
 }
+.azgrid-flexed {
+	flex: 1;
+}
+.azgrid-flexlayout {
+	display: flex;
+	flex-direction: column;
+}
 .azgrid-testborder {
 	border: 3px solid red;
 }
@@ -29,3 +36,17 @@
 	transition-delay: 200ms;
 	transition-duration: 0ms;
 }
+
+.azgrid-searcharea {
+	margin: 5px;
+	font-size: large;
+}
+.azgrid-searcharea label {
+	gap: 5px;
+	display: flex;
+	align-items: center;
+}
+.azgrid-searcharea label input {
+	padding: 5px;
+	font-size: large;
+}

package/src/views/DataGrid.tsx

@@ -28,13 +28,14 @@ import {
 	TypeRowSelection,
 } from '@inovua/reactdatagrid-community/types';
 import { fix_parent_child_relations, func_selection } from '../func/func_child';
-import { fn_eval, object_equals } from '@azrico/object';
+import { array_intersection, fn_eval } from '@azrico/object';
 
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 import clsx from 'clsx';
 import { useComponentSize } from 'react-use-size';
 
+import debounce from 'lodash.debounce';
 /* -------------------------------------------------------------------------- */
 
 /* -------------------------------------------------------------------------- */
@@ -112,8 +113,9 @@ export type AzGridProps = {
 	limit?: number;
 	//
 	editable?: boolean | ((editValue: any, cellProps: any) => boolean);
-
+	advancedFilterFields?: string[];
 	//
+
 	loading?: boolean;
 	dark?: boolean;
 	delayedSize?: boolean;
@@ -184,8 +186,8 @@ export function AzGrid(props: AzGridProps) {
 	const dataSource = React.useCallback(
 		async (dt) => {
 			return await ApplyDataSource(props.dataSource, {
-				skip: dt.skip,
-				limit: dt.limit,
+				skip: dt?.skip,
+				limit: dt?.limit,
 				cached_data: cached_data,
 				last_cache_info: last_cache_info,
 			});
@@ -405,30 +407,99 @@ function DataGridSizeWrapper(props: DataGridWrapperProps) {
 	if (props.delayedSize) {
 		return <DataGridDelayedSizeWrapper {...props} />;
 	} else {
-		return <DataGridCore {...props} />;
+		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'}>
-			<div className={'azgrid-delayedresize'} style={{ height: height, width: width }}>
-				<DataGridCore {...props} />
+		<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 [search, set_search] = React.useState('');
+	const [filteredData, set_filteredData] = React.useState<any[]>([]);
+	const [evaluatedDataSource, set_evaluatedDataSource] = React.useState<any[]>([]);
+
+	const try_search = React.useCallback(
+		debounce((ds, v) => {
+			if (!Array.isArray(ds)) return;
+			const visibleColumns = props.gridRef.current.visibleColumns;
+			const columns_to_search: string[] = array_intersection(
+				props.advancedFilterFields || [],
+				visibleColumns.map((r) => r.id)
+			);
+			const lowerSearchText = v && v.toLowerCase();
+			let newData: any[] = [];
+
+			if (!lowerSearchText) newData = ds;
+			else
+				newData = ds.filter((p) => {
+					for (let index = 0; index < columns_to_search.length; index++) {
+						const col = columns_to_search[index];
+						const v = (p[col] + '').toLowerCase(); // get string value
+
+						if (v && v.indexOf(lowerSearchText) == -1) return false;
+					}
+					return true;
+				});
+			set_filteredData(newData);
+		}, 1000),
+		[]
+	);
+	React.useEffect(() => {
+		fn_eval(props.dataSource).then(({ data }) => set_evaluatedDataSource(data));
+	}, [props.dataSource]);
+	React.useEffect(() => {
+		try_search(evaluatedDataSource, search);
+	}, [search, evaluatedDataSource]);
+
+	return (
+		<div className={'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'}>
+			<form className={'azgrid-searcharea'}>
+				<label>
+					Search
+					<input
+						type="text"
+						name="name"
+						value={search}
+						onChange={(e) => set_search(e.target.value)}
+					/>
+				</label>
+			</form>
+			<DataGridCore {...props} dataSource={filteredData} />
+		</div>
+	);
+}
 function DataGridCore(props: DataGridWrapperProps) {
 	return (
-		<div className={clsx(props.className, 'azgrid-filler')}>
+		<div className={clsx(props.className, 'azgrid-flexed', 'azgrid-flexlayout')}>
 			<ReactDataGrid
 				{...props.static_gridOptions}
 				{...props.dynamic_gridOptions}
 				rowIndexColumn
 				handle={(ref) => (props.gridRef.current = ref ? ref.current : null)}
-				className={'azgrid-filler'}
+				className={'azgrid-flexed'}
 				columns={props.columns}
 				dataSource={props.dataSource}
 			/>