@etsoo/materialui 1.2.63 → 1.2.65
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.
- package/__tests__/SelectEx.tsx +99 -89
- package/lib/DataTable.js +4 -4
- package/lib/HiSelector.js +1 -1
- package/lib/HiSelectorTL.js +1 -1
- package/package.json +15 -15
- package/src/DataTable.tsx +12 -4
- package/src/HiSelector.tsx +1 -1
- package/src/HiSelectorTL.tsx +1 -1
package/__tests__/SelectEx.tsx
CHANGED
|
@@ -1,104 +1,114 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { SelectEx } from
|
|
3
|
-
import { findByText, fireEvent, render, screen } from
|
|
4
|
-
import { ListType1, Utils } from
|
|
5
|
-
import { act } from
|
|
6
|
-
|
|
7
|
-
it(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
|
|
45
|
-
|
|
53
|
+
const itemBlank = await findByText(baseElement, "---");
|
|
54
|
+
expect(itemBlank.nodeName).toBe("SPAN");
|
|
46
55
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
56
|
+
act(() => {
|
|
57
|
+
itemBlank.click();
|
|
58
|
+
});
|
|
50
59
|
|
|
51
|
-
|
|
60
|
+
expect(itemChangeCallback).toBeCalledTimes(2);
|
|
61
|
+
*/
|
|
52
62
|
});
|
|
53
63
|
|
|
54
|
-
it(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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
|
-
|
|
86
|
-
|
|
87
|
-
|
|
95
|
+
// Get list item
|
|
96
|
+
const itemName1 = await findByText(baseElement, "Name 1");
|
|
97
|
+
const checkbox1 = itemName1.closest("li")?.querySelector("input");
|
|
88
98
|
|
|
89
|
-
|
|
99
|
+
expect(checkbox1?.checked).toBeTruthy();
|
|
90
100
|
|
|
91
|
-
|
|
92
|
-
|
|
101
|
+
const itemName3 = await findByText(baseElement, "Name 3");
|
|
102
|
+
expect(itemName3.nodeName).toBe("SPAN");
|
|
93
103
|
|
|
94
|
-
|
|
95
|
-
|
|
104
|
+
// Checkbox
|
|
105
|
+
const checkbox3 = itemName3.closest("li")?.querySelector("input");
|
|
96
106
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
107
|
+
act(() => {
|
|
108
|
+
checkbox3?.click();
|
|
109
|
+
});
|
|
100
110
|
|
|
101
|
-
|
|
111
|
+
expect(checkbox3?.checked).toBeTruthy();
|
|
102
112
|
|
|
103
|
-
|
|
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),
|
|
43
|
-
|
|
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
|
-
},
|
|
46
|
+
}, slotProps: {
|
|
47
47
|
toolbar: {
|
|
48
48
|
selectedCellParams,
|
|
49
49
|
setCellModesModel,
|
package/lib/HiSelector.js
CHANGED
package/lib/HiSelectorTL.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/materialui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.65",
|
|
4
4
|
"description": "TypeScript Material-UI Implementation",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -50,12 +50,12 @@
|
|
|
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.
|
|
53
|
+
"@etsoo/appscript": "^1.4.22",
|
|
54
54
|
"@etsoo/notificationbase": "^1.1.25",
|
|
55
|
-
"@etsoo/react": "^1.6.
|
|
55
|
+
"@etsoo/react": "^1.6.95",
|
|
56
56
|
"@etsoo/shared": "^1.2.7",
|
|
57
|
-
"@mui/icons-material": "^5.
|
|
58
|
-
"@mui/material": "^5.13.
|
|
57
|
+
"@mui/icons-material": "^5.13.7",
|
|
58
|
+
"@mui/material": "^5.13.7",
|
|
59
59
|
"@mui/x-data-grid": "^6.9.1",
|
|
60
60
|
"@types/pica": "^9.0.1",
|
|
61
61
|
"@types/pulltorefreshjs": "^0.1.5",
|
|
@@ -75,20 +75,20 @@
|
|
|
75
75
|
"react-imask": "6.6.3"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
78
|
-
"@babel/cli": "^7.22.
|
|
79
|
-
"@babel/core": "^7.22.
|
|
80
|
-
"@babel/plugin-transform-runtime": "^7.22.
|
|
81
|
-
"@babel/preset-env": "^7.22.
|
|
78
|
+
"@babel/cli": "^7.22.6",
|
|
79
|
+
"@babel/core": "^7.22.6",
|
|
80
|
+
"@babel/plugin-transform-runtime": "^7.22.6",
|
|
81
|
+
"@babel/preset-env": "^7.22.6",
|
|
82
82
|
"@babel/preset-react": "^7.22.5",
|
|
83
83
|
"@babel/preset-typescript": "^7.22.5",
|
|
84
|
-
"@babel/runtime-corejs3": "^7.22.
|
|
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.
|
|
89
|
-
"@typescript-eslint/parser": "^5.
|
|
90
|
-
"jest": "^29.
|
|
91
|
-
"jest-environment-jsdom": "^29.
|
|
92
|
-
"typescript": "^5.1.
|
|
88
|
+
"@typescript-eslint/eslint-plugin": "^5.61.0",
|
|
89
|
+
"@typescript-eslint/parser": "^5.61.0",
|
|
90
|
+
"jest": "^29.6.0",
|
|
91
|
+
"jest-environment-jsdom": "^29.6.0",
|
|
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 {
|
|
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
|
-
|
|
102
|
-
|
|
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
|
-
|
|
119
|
+
slotProps={{
|
|
112
120
|
toolbar: {
|
|
113
121
|
selectedCellParams,
|
|
114
122
|
setCellModesModel,
|
package/src/HiSelector.tsx
CHANGED