@etsoo/materialui 1.5.78 → 1.5.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/cjs/DataGridEx.js +13 -13
  2. package/lib/cjs/ResponsibleContainer.js +4 -4
  3. package/lib/mjs/DataGridEx.js +13 -13
  4. package/lib/mjs/ResponsibleContainer.js +4 -4
  5. package/package.json +1 -1
  6. package/src/DataGridEx.tsx +17 -16
  7. package/src/ResponsibleContainer.tsx +4 -4
package/lib/cjs/DataGridEx.js CHANGED
@@ -44,20 +44,20 @@ const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
44
44
  }
45
45
  });
46
46
  };
47
- const rowItems = (div, callback) => {
47
+ const rowItem = (div, callback) => {
48
48
  const row = div.dataset["row"];
49
49
  if (div.parentElement == null || row == null)
50
50
  return;
51
- doRowItems(div.parentElement, parseFloat(row), callback);
51
+ doRowItem(div.parentElement, parseFloat(row), callback);
52
52
  };
53
- const doRowItems = (parent, rowIndex, callback) => {
54
- if (parent == null || rowIndex == null)
53
+ const doRowItem = (parent, rowIndex, callback) => {
54
+ if (parent == null || parent.parentElement == null || rowIndex == null)
55
55
  return;
56
- parent
57
- ?.querySelectorAll(`div[role="row"][aria-rowindex="${rowIndex}"]`)
58
- .forEach((rowItem) => {
59
- callback(rowItem);
60
- });
56
+ // New react-window version uses an extra div
57
+ // <div role="row" aria-rowindex="1">...</div>
58
+ const row = parent.parentElement?.querySelector(`div[role="row"] > div[data-row="${rowIndex}"]`);
59
+ if (row)
60
+ callback(row);
61
61
  };
62
62
  /**
63
63
  * Extended datagrid columns calculation
@@ -211,22 +211,22 @@ function DataGridEx(props) {
211
211
  if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current)
212
212
  return;
213
213
  if (selectedRowIndex.current != -1) {
214
- doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
214
+ doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
215
215
  preDiv.classList.remove("DataGridEx-Selected");
216
216
  });
217
217
  }
218
- rowItems(div, (currentDiv) => {
218
+ rowItem(div, (currentDiv) => {
219
219
  currentDiv.classList.add("DataGridEx-Selected");
220
220
  });
221
221
  selectedRowIndex.current = rowIndex;
222
222
  };
223
223
  const handleMouseOver = (event) => {
224
- rowItems(event.currentTarget, (div) => {
224
+ rowItem(event.currentTarget, (div) => {
225
225
  div.classList.add("DataGridEx-Hover");
226
226
  });
227
227
  };
228
228
  const handleMouseOut = (event) => {
229
- rowItems(event.currentTarget, (div) => {
229
+ rowItem(event.currentTarget, (div) => {
230
230
  div.classList.remove("DataGridEx-Hover");
231
231
  });
232
232
  };
package/lib/cjs/ResponsibleContainer.js CHANGED
@@ -38,15 +38,15 @@ function ResponsibleContainer(props) {
38
38
  // Refs
39
39
  const refs = react_1.default.useRef({});
40
40
  const state = refs.current;
41
+ // Screen size detection
42
+ const showDataGrid = (0, useMediaQuery_1.default)("(min-width:600px)");
41
43
  const mRefs = (0, react_2.useCombinedRefs)(mRef, (ref) => {
42
44
  if (ref == null)
43
45
  return;
44
46
  state.ref = ref;
45
- if (ref.element && elementReady)
46
- elementReady(ref.element, true);
47
+ if (ref.element)
48
+ elementReady?.(ref.element, showDataGrid);
47
49
  });
48
- // Screen size detection
49
- const showDataGrid = (0, useMediaQuery_1.default)("(min-width:600px)");
50
50
  // Update mounted state
51
51
  react_1.default.useEffect(() => {
52
52
  return () => {
package/lib/mjs/DataGridEx.js CHANGED
@@ -37,20 +37,20 @@ const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
37
37
  }
38
38
  });
39
39
  };
40
- const rowItems = (div, callback) => {
40
+ const rowItem = (div, callback) => {
41
41
  const row = div.dataset["row"];
42
42
  if (div.parentElement == null || row == null)
43
43
  return;
44
- doRowItems(div.parentElement, parseFloat(row), callback);
44
+ doRowItem(div.parentElement, parseFloat(row), callback);
45
45
  };
46
- const doRowItems = (parent, rowIndex, callback) => {
47
- if (parent == null || rowIndex == null)
46
+ const doRowItem = (parent, rowIndex, callback) => {
47
+ if (parent == null || parent.parentElement == null || rowIndex == null)
48
48
  return;
49
- parent
50
- ?.querySelectorAll(`div[role="row"][aria-rowindex="${rowIndex}"]`)
51
- .forEach((rowItem) => {
52
- callback(rowItem);
53
- });
49
+ // New react-window version uses an extra div
50
+ // <div role="row" aria-rowindex="1">...</div>
51
+ const row = parent.parentElement?.querySelector(`div[role="row"] > div[data-row="${rowIndex}"]`);
52
+ if (row)
53
+ callback(row);
54
54
  };
55
55
  /**
56
56
  * Extended datagrid columns calculation
@@ -204,22 +204,22 @@ export function DataGridEx(props) {
204
204
  if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current)
205
205
  return;
206
206
  if (selectedRowIndex.current != -1) {
207
- doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
207
+ doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
208
208
  preDiv.classList.remove("DataGridEx-Selected");
209
209
  });
210
210
  }
211
- rowItems(div, (currentDiv) => {
211
+ rowItem(div, (currentDiv) => {
212
212
  currentDiv.classList.add("DataGridEx-Selected");
213
213
  });
214
214
  selectedRowIndex.current = rowIndex;
215
215
  };
216
216
  const handleMouseOver = (event) => {
217
- rowItems(event.currentTarget, (div) => {
217
+ rowItem(event.currentTarget, (div) => {
218
218
  div.classList.add("DataGridEx-Hover");
219
219
  });
220
220
  };
221
221
  const handleMouseOut = (event) => {
222
- rowItems(event.currentTarget, (div) => {
222
+ rowItem(event.currentTarget, (div) => {
223
223
  div.classList.remove("DataGridEx-Hover");
224
224
  });
225
225
  };
package/lib/mjs/ResponsibleContainer.js CHANGED
@@ -32,15 +32,15 @@ export function ResponsibleContainer(props) {
32
32
  // Refs
33
33
  const refs = React.useRef({});
34
34
  const state = refs.current;
35
+ // Screen size detection
36
+ const showDataGrid = useMediaQuery("(min-width:600px)");
35
37
  const mRefs = useCombinedRefs(mRef, (ref) => {
36
38
  if (ref == null)
37
39
  return;
38
40
  state.ref = ref;
39
- if (ref.element && elementReady)
40
- elementReady(ref.element, true);
41
+ if (ref.element)
42
+ elementReady?.(ref.element, showDataGrid);
41
43
  });
42
- // Screen size detection
43
- const showDataGrid = useMediaQuery("(min-width:600px)");
44
44
  // Update mounted state
45
45
  React.useEffect(() => {
46
46
  return () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.78",
3
+ "version": "1.5.79",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
package/src/DataGridEx.tsx CHANGED
@@ -188,29 +188,30 @@ const createGridStyle = (
188
188
  });
189
189
  };
190
190
 
191
- const rowItems = (
191
+ const rowItem = (
192
192
  div: HTMLDivElement,
193
193
  callback: (div: HTMLDivElement) => void
194
194
  ) => {
195
195
  const row = div.dataset["row"];
196
196
  if (div.parentElement == null || row == null) return;
197
- doRowItems(div.parentElement, parseFloat(row), callback);
197
+ doRowItem(div.parentElement, parseFloat(row), callback);
198
198
  };
199
199
 
200
- const doRowItems = (
200
+ const doRowItem = (
201
201
  parent: HTMLElement,
202
202
  rowIndex: number,
203
203
  callback: (div: HTMLDivElement) => void
204
204
  ) => {
205
- if (parent == null || rowIndex == null) return;
206
-
207
- parent
208
- ?.querySelectorAll<HTMLDivElement>(
209
- `div[role="row"][aria-rowindex="${rowIndex}"]`
210
- )
211
- .forEach((rowItem) => {
212
- callback(rowItem);
213
- });
205
+ if (parent == null || parent.parentElement == null || rowIndex == null)
206
+ return;
207
+
208
+ // New react-window version uses an extra div
209
+ // <div role="row" aria-rowindex="1">...</div>
210
+ const row = parent.parentElement?.querySelector<HTMLDivElement>(
211
+ `div[role="row"] > div[data-row="${rowIndex}"]`
212
+ );
213
+
214
+ if (row) callback(row);
214
215
  };
215
216
 
216
217
  /**
@@ -507,12 +508,12 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
507
508
  if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current) return;
508
509
 
509
510
  if (selectedRowIndex.current != -1) {
510
- doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
511
+ doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
511
512
  preDiv.classList.remove("DataGridEx-Selected");
512
513
  });
513
514
  }
514
515
 
515
- rowItems(div, (currentDiv) => {
516
+ rowItem(div, (currentDiv) => {
516
517
  currentDiv.classList.add("DataGridEx-Selected");
517
518
  });
518
519
 
@@ -520,13 +521,13 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
520
521
  };
521
522
 
522
523
  const handleMouseOver = (event: React.MouseEvent<HTMLDivElement>) => {
523
- rowItems(event.currentTarget, (div) => {
524
+ rowItem(event.currentTarget, (div) => {
524
525
  div.classList.add("DataGridEx-Hover");
525
526
  });
526
527
  };
527
528
 
528
529
  const handleMouseOut = (event: React.MouseEvent<HTMLDivElement>) => {
529
- rowItems(event.currentTarget, (div) => {
530
+ rowItem(event.currentTarget, (div) => {
530
531
  div.classList.remove("DataGridEx-Hover");
531
532
  });
532
533
  };
package/src/ResponsibleContainer.tsx CHANGED
@@ -208,16 +208,16 @@ export function ResponsibleContainer<T extends object, F>(
208
208
  const refs = React.useRef<LocalRefs<T>>({});
209
209
  const state = refs.current;
210
210
 
211
+ // Screen size detection
212
+ const showDataGrid = useMediaQuery("(min-width:600px)");
213
+
211
214
  const mRefs = useCombinedRefs(mRef, (ref: GridMethodRef<T>) => {
212
215
  if (ref == null) return;
213
216
  state.ref = ref;
214
217
 
215
- if (ref.element && elementReady) elementReady(ref.element, true);
218
+ if (ref.element) elementReady?.(ref.element, showDataGrid);
216
219
  });
217
220
 
218
- // Screen size detection
219
- const showDataGrid = useMediaQuery("(min-width:600px)");
220
-
221
221
  // Update mounted state
222
222
  React.useEffect(() => {
223
223
  return () => {