@etsoo/materialui 1.2.64 → 1.2.66

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 (6) hide show
  1. package/__tests__/SelectEx.tsx +99 -89
  2. package/lib/DataTable.js +4 -4
  3. package/lib/app/ServiceApp.js +2 -0
  4. package/package.json +15 -15
  5. package/src/DataTable.tsx +12 -4
  6. package/src/app/ServiceApp.ts +3 -0
package/__tests__/SelectEx.tsx CHANGED
@@ -1,104 +1,114 @@
1
- import React from 'react';
2
- import { SelectEx } from '../src';
3
- import { findByText, fireEvent, render, screen } from '@testing-library/react';
4
- import { ListType1, Utils } from '@etsoo/shared';
5
- import { act } from 'react-dom/test-utils';
6
-
7
- it('Render SelectEx', async () => {
8
- // Arrange
9
- type T = { id: number; name: string };
10
- const options: T[] = [
11
- { id: 1, name: 'Name 1' },
12
- { id: 2, name: 'Name 2' }
13
- ];
14
-
15
- Utils.addBlankItem(options, 'id', 'name');
16
-
17
- const itemChangeCallback = jest.fn((option, userAction) => {
18
- if (userAction) expect(option).toBeUndefined();
19
- else expect(option.id).toBe(1);
20
- });
21
-
22
- // Render component
23
- const { baseElement } = render(
24
- <SelectEx<T>
25
- options={options}
26
- name="test"
27
- onItemChange={itemChangeCallback}
28
- value={1}
29
- search
30
- labelField="name"
31
- />
32
- );
33
-
34
- expect(itemChangeCallback).toBeCalled();
35
-
36
- // Act, click to show the list
37
- const button = screen.getByRole('button');
1
+ import React from "react";
2
+ import { SelectEx } from "../src";
3
+ import { findByText, fireEvent, render, screen } from "@testing-library/react";
4
+ import { ListType1, Utils } from "@etsoo/shared";
5
+ import { act } from "react-dom/test-utils";
6
+
7
+ it("Render SelectEx", async () => {
8
+ // Arrange
9
+ type T = { id: number; name: string };
10
+ const options: T[] = [
11
+ { id: 1, name: "Name 1" },
12
+ { id: 2, name: "Name 2" }
13
+ ];
14
+
15
+ Utils.addBlankItem(options, "id", "name");
16
+
17
+ const itemChangeCallback = jest.fn((option, userAction) => {
18
+ if (userAction) expect(option).toBeUndefined();
19
+ else expect(option.id).toBe(1);
20
+ });
21
+
22
+ // Render component
23
+ const { baseElement } = render(
24
+ <SelectEx<T>
25
+ options={options}
26
+ name="test"
27
+ onItemChange={itemChangeCallback}
28
+ value={1}
29
+ search
30
+ labelField="name"
31
+ />
32
+ );
33
+
34
+ expect(itemChangeCallback).toBeCalled();
35
+
36
+ // Act, click to show the list
37
+ const button = screen.getByRole("button");
38
+
39
+ // https://davidwcai.medium.com/react-testing-library-and-the-not-wrapped-in-act-errors-491a5629193b
40
+ act(() => {
41
+ jest.useFakeTimers();
42
+
38
43
  fireEvent.mouseDown(button); // Not click
39
44
 
40
- // Get list item
41
- const itemName2 = await findByText(baseElement, 'Name 2');
42
- expect(itemName2.nodeName).toBe('SPAN');
45
+ jest.advanceTimersByTime(100);
46
+ });
47
+
48
+ /*
49
+ // Get list item
50
+ const itemName2 = await findByText(baseElement, "Name 2");
51
+ expect(itemName2.nodeName).toBe("SPAN");
43
52
 
44
- const itemBlank = await findByText(baseElement, '---');
45
- expect(itemBlank.nodeName).toBe('SPAN');
53
+ const itemBlank = await findByText(baseElement, "---");
54
+ expect(itemBlank.nodeName).toBe("SPAN");
46
55
 
47
- act(() => {
48
- itemBlank.click();
49
- });
56
+ act(() => {
57
+ itemBlank.click();
58
+ });
50
59
 
51
- expect(itemChangeCallback).toBeCalledTimes(2);
60
+ expect(itemChangeCallback).toBeCalledTimes(2);
61
+ */
52
62
  });
53
63
 
54
- it('Render multiple SelectEx', async () => {
55
- // Arrange
56
- type T = ListType1;
57
- const options: T[] = [
58
- { id: '1', label: 'Name 1' },
59
- { id: '2', label: 'Name 2' },
60
- { id: '3', label: 'Name 3' }
61
- ];
62
-
63
- const itemChangeCallback = jest.fn((option, userAction) => {
64
- if (userAction) expect(option.id).toBe('3');
65
- else expect(option.id).toBe('1');
66
- });
67
-
68
- // Render component
69
- const { baseElement } = render(
70
- <SelectEx<T>
71
- options={options}
72
- name="test"
73
- onItemChange={itemChangeCallback}
74
- value={['1', '2']}
75
- multiple
76
- />
77
- );
78
-
79
- expect(itemChangeCallback).toBeCalled();
80
-
81
- // Act, click to show the list
82
- const button = screen.getByRole('button');
83
- fireEvent.mouseDown(button); // Not click
64
+ it("Render multiple SelectEx", async () => {
65
+ // Arrange
66
+ type T = ListType1;
67
+ const options: T[] = [
68
+ { id: "1", label: "Name 1" },
69
+ { id: "2", label: "Name 2" },
70
+ { id: "3", label: "Name 3" }
71
+ ];
72
+
73
+ const itemChangeCallback = jest.fn((option, userAction) => {
74
+ if (userAction) expect(option.id).toBe("3");
75
+ else expect(option.id).toBe("1");
76
+ });
77
+
78
+ // Render component
79
+ const { baseElement } = render(
80
+ <SelectEx<T>
81
+ options={options}
82
+ name="test"
83
+ onItemChange={itemChangeCallback}
84
+ value={["1", "2"]}
85
+ multiple
86
+ />
87
+ );
88
+
89
+ expect(itemChangeCallback).toBeCalled();
90
+
91
+ // Act, click to show the list
92
+ const button = screen.getByRole("button");
93
+ fireEvent.mouseDown(button); // Not click
84
94
 
85
- // Get list item
86
- const itemName1 = await findByText(baseElement, 'Name 1');
87
- const checkbox1 = itemName1.closest('li')?.querySelector('input');
95
+ // Get list item
96
+ const itemName1 = await findByText(baseElement, "Name 1");
97
+ const checkbox1 = itemName1.closest("li")?.querySelector("input");
88
98
 
89
- expect(checkbox1?.checked).toBeTruthy();
99
+ expect(checkbox1?.checked).toBeTruthy();
90
100
 
91
- const itemName3 = await findByText(baseElement, 'Name 3');
92
- expect(itemName3.nodeName).toBe('SPAN');
101
+ const itemName3 = await findByText(baseElement, "Name 3");
102
+ expect(itemName3.nodeName).toBe("SPAN");
93
103
 
94
- // Checkbox
95
- const checkbox3 = itemName3.closest('li')?.querySelector('input');
104
+ // Checkbox
105
+ const checkbox3 = itemName3.closest("li")?.querySelector("input");
96
106
 
97
- act(() => {
98
- checkbox3?.click();
99
- });
107
+ act(() => {
108
+ checkbox3?.click();
109
+ });
100
110
 
101
- expect(checkbox3?.checked).toBeTruthy();
111
+ expect(checkbox3?.checked).toBeTruthy();
102
112
 
103
- expect(itemChangeCallback).toBeCalledTimes(2);
113
+ expect(itemChangeCallback).toBeCalledTimes(2);
104
114
  });
package/lib/DataTable.js CHANGED
@@ -9,7 +9,7 @@ import { globalApp } from "./app/ReactApp";
9
9
  export function DataTable(props) {
10
10
  var _a;
11
11
  // Destructor
12
- const { localeText = {}, onCellSelection, toolbarCreator, ...rest } = props;
12
+ const { localeText = {}, onCellSelection, toolbarCreator, onProcessRowUpdateError = (error) => console.log("onProcessRowUpdateError", error), ...rest } = props;
13
13
  // Labels
14
14
  const { noRows } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noRows")) !== null && _a !== void 0 ? _a : {};
15
15
  if (noRows && !localeText.noRowsLabel)
@@ -39,11 +39,11 @@ export function DataTable(props) {
39
39
  }
40
40
  setSelectedCellParams(params);
41
41
  }, []);
42
- return (React.createElement(DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), components: {
43
- Toolbar: toolbarCreator
42
+ return (React.createElement(DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), onProcessRowUpdateError: onProcessRowUpdateError, slots: {
43
+ toolbar: toolbarCreator
44
44
  ? ({ selectedCellParams, setCellModesModel, cellModesModel }) => toolbarCreator(selectedCellParams, setCellModesModel, cellModesModel)
45
45
  : undefined
46
- }, componentsProps: {
46
+ }, slotProps: {
47
47
  toolbar: {
48
48
  selectedCellParams,
49
49
  setCellModesModel,
package/lib/app/ServiceApp.js CHANGED
@@ -57,6 +57,8 @@ export class ServiceApp extends ReactApp {
57
57
  */
58
58
  toLoginPage(tryLogin) {
59
59
  const parameters = `?serviceId=${this.settings.serviceId}&${DomUtils.CultureField}=${this.culture}${tryLogin ? "" : "&tryLogin=false"}`;
60
+ // Make sure apply new device id for new login
61
+ this.clearDeviceId();
60
62
  if (BridgeUtils.host == null) {
61
63
  const coreUrl = this.settings.webUrl;
62
64
  window.location.href = coreUrl + parameters;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.2.64",
3
+ "version": "1.2.66",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
50
50
  "@emotion/css": "^11.11.2",
51
51
  "@emotion/react": "^11.11.1",
52
52
  "@emotion/styled": "^11.11.0",
53
- "@etsoo/appscript": "^1.4.22",
53
+ "@etsoo/appscript": "^1.4.24",
54
54
  "@etsoo/notificationbase": "^1.1.25",
55
- "@etsoo/react": "^1.6.95",
55
+ "@etsoo/react": "^1.6.96",
56
56
  "@etsoo/shared": "^1.2.7",
57
- "@mui/icons-material": "^5.11.16",
58
- "@mui/material": "^5.13.6",
59
- "@mui/x-data-grid": "^6.9.1",
57
+ "@mui/icons-material": "^5.13.7",
58
+ "@mui/material": "^5.13.7",
59
+ "@mui/x-data-grid": "^6.9.2",
60
60
  "@types/pica": "^9.0.1",
61
61
  "@types/pulltorefreshjs": "^0.1.5",
62
62
  "@types/react": "^18.2.14",
@@ -75,20 +75,20 @@
75
75
  "react-imask": "6.6.3"
76
76
  },
77
77
  "devDependencies": {
78
- "@babel/cli": "^7.22.5",
79
- "@babel/core": "^7.22.5",
80
- "@babel/plugin-transform-runtime": "^7.22.5",
81
- "@babel/preset-env": "^7.22.5",
78
+ "@babel/cli": "^7.22.6",
79
+ "@babel/core": "^7.22.8",
80
+ "@babel/plugin-transform-runtime": "^7.22.7",
81
+ "@babel/preset-env": "^7.22.7",
82
82
  "@babel/preset-react": "^7.22.5",
83
83
  "@babel/preset-typescript": "^7.22.5",
84
- "@babel/runtime-corejs3": "^7.22.5",
84
+ "@babel/runtime-corejs3": "^7.22.6",
85
85
  "@testing-library/jest-dom": "^5.16.5",
86
86
  "@testing-library/react": "^14.0.0",
87
87
  "@types/jest": "^29.5.2",
88
- "@typescript-eslint/eslint-plugin": "^5.60.1",
89
- "@typescript-eslint/parser": "^5.60.1",
90
- "jest": "^29.5.0",
91
- "jest-environment-jsdom": "^29.5.0",
88
+ "@typescript-eslint/eslint-plugin": "^5.61.0",
89
+ "@typescript-eslint/parser": "^5.61.0",
90
+ "jest": "^29.6.1",
91
+ "jest-environment-jsdom": "^29.6.1",
92
92
  "typescript": "^5.1.6"
93
93
  }
94
94
  }
package/src/DataTable.tsx CHANGED
@@ -51,7 +51,14 @@ export function DataTable<R extends GridValidRowModel = any>(
51
51
  props: DataTableProps<R>
52
52
  ) {
53
53
  // Destructor
54
- const { localeText = {}, onCellSelection, toolbarCreator, ...rest } = props;
54
+ const {
55
+ localeText = {},
56
+ onCellSelection,
57
+ toolbarCreator,
58
+ onProcessRowUpdateError = (error) =>
59
+ console.log("onProcessRowUpdateError", error),
60
+ ...rest
61
+ } = props;
55
62
 
56
63
  // Labels
57
64
  const { noRows } = globalApp?.getLabels("noRows") ?? {};
@@ -98,8 +105,9 @@ export function DataTable<R extends GridValidRowModel = any>(
98
105
  localeText={localeText}
99
106
  cellModesModel={cellModesModel}
100
107
  onCellModesModelChange={(model) => setCellModesModel(model)}
101
- components={{
102
- Toolbar: toolbarCreator
108
+ onProcessRowUpdateError={onProcessRowUpdateError}
109
+ slots={{
110
+ toolbar: toolbarCreator
103
111
  ? ({ selectedCellParams, setCellModesModel, cellModesModel }) =>
104
112
  toolbarCreator(
105
113
  selectedCellParams,
@@ -108,7 +116,7 @@ export function DataTable<R extends GridValidRowModel = any>(
108
116
  )
109
117
  : undefined
110
118
  }}
111
- componentsProps={{
119
+ slotProps={{
112
120
  toolbar: {
113
121
  selectedCellParams,
114
122
  setCellModesModel,
package/src/app/ServiceApp.ts CHANGED
@@ -95,6 +95,9 @@ export class ServiceApp<
95
95
  DomUtils.CultureField
96
96
  }=${this.culture}${tryLogin ? "" : "&tryLogin=false"}`;
97
97
 
98
+ // Make sure apply new device id for new login
99
+ this.clearDeviceId();
100
+
98
101
  if (BridgeUtils.host == null) {
99
102
  const coreUrl = this.settings.webUrl;
100
103
  window.location.href = coreUrl + parameters;