@etsoo/materialui 1.0.31 → 1.0.33

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__/NotifierMUTests.tsx +4 -2
  2. package/lib/NotifierMU.js +16 -12
  3. package/lib/app/ReactApp.d.ts +5 -1
  4. package/package.json +8 -8
  5. package/src/NotifierMU.tsx +81 -45
  6. package/src/app/ReactApp.ts +6 -0
package/__tests__/NotifierMUTests.tsx CHANGED
@@ -118,7 +118,8 @@ test('Prompt tests', async () => {
118
118
  act(() => {
119
119
  // Add the notification
120
120
  notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
121
- type: 'switch'
121
+ type: 'switch',
122
+ inputProps: { required: false }
122
123
  });
123
124
  });
124
125
 
@@ -146,7 +147,8 @@ test('Prompt tests with form submit', async () => {
146
147
  act(() => {
147
148
  // Add the notification
148
149
  notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
149
- type: 'switch'
150
+ type: 'switch',
151
+ inputProps: { required: false }
150
152
  });
151
153
  });
152
154
 
package/lib/NotifierMU.js CHANGED
@@ -37,7 +37,7 @@ export class NotificationMU extends NotificationReact {
37
37
  createAlert(_props, className) {
38
38
  var _a;
39
39
  const labels = Labels.NotificationMU;
40
- const { inputs, fullScreen, fullWidth = true, maxWidth, okLabel = labels.alertOK, primaryButton } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
40
+ const { buttons, inputs, fullScreen, fullWidth = true, maxWidth, okLabel = labels.alertOK, primaryButton } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
41
41
  let title = this.title;
42
42
  let icon;
43
43
  if (this.type === NotificationMessageType.Success) {
@@ -62,6 +62,10 @@ export class NotificationMU extends NotificationReact {
62
62
  // Setup callback
63
63
  if (this.renderSetup)
64
64
  this.renderSetup(setupProps);
65
+ // Callback
66
+ const callback = async (_event) => {
67
+ await this.returnValue(undefined);
68
+ };
65
69
  return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
66
70
  React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
67
71
  icon,
@@ -69,15 +73,15 @@ export class NotificationMU extends NotificationReact {
69
73
  React.createElement(DialogContent, null,
70
74
  React.createElement(DialogContentText, null, this.content),
71
75
  inputs),
72
- React.createElement(DialogActions, null,
73
- React.createElement(LoadingButton, { ...setupProps, onClick: async () => await this.returnValue(undefined), autoFocus: true, ...primaryButton }, okLabel))));
76
+ React.createElement(DialogActions, null, buttons ? (buttons(callback)) : (React.createElement(LoadingButton, { ...setupProps, onClick: callback, autoFocus: true, ...primaryButton }, okLabel)))));
74
77
  }
75
78
  // Create confirm
76
79
  createConfirm(_props, className) {
77
80
  var _a, _b;
78
81
  const labels = Labels.NotificationMU;
79
82
  const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
80
- const { okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
83
+ const { buttons, okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
84
+ const callback = async (_event, value) => await this.returnValue(value);
81
85
  return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
82
86
  React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
83
87
  React.createElement(Help, { color: "action" }),
@@ -85,9 +89,9 @@ export class NotificationMU extends NotificationReact {
85
89
  React.createElement(DialogContent, null,
86
90
  React.createElement(DialogContentText, null, this.content),
87
91
  inputs),
88
- React.createElement(DialogActions, null,
89
- cancelButton && (React.createElement(LoadingButton, { color: "secondary", onClick: async () => await this.returnValue(false) }, cancelLabel)),
90
- React.createElement(LoadingButton, { color: "primary", onClick: async () => await this.returnValue(true), autoFocus: true, ...primaryButton }, okLabel))));
92
+ React.createElement(DialogActions, null, buttons ? (buttons(callback)) : (React.createElement(React.Fragment, null,
93
+ cancelButton && (React.createElement(LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false) }, cancelLabel)),
94
+ React.createElement(LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButton }, okLabel))))));
91
95
  }
92
96
  createMessageColor() {
93
97
  if (this.type === NotificationMessageType.Danger)
@@ -119,7 +123,7 @@ export class NotificationMU extends NotificationReact {
119
123
  var _a, _b;
120
124
  const labels = Labels.NotificationMU;
121
125
  const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.promptTitle;
122
- const { cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton, ...rest } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
126
+ const { buttons, cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton, inputProps } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
123
127
  const inputRef = React.createRef();
124
128
  const errorRef = React.createRef();
125
129
  const setError = (error) => {
@@ -187,13 +191,13 @@ export class NotificationMU extends NotificationReact {
187
191
  let value = undefined;
188
192
  if (inputs == null) {
189
193
  if (type === 'switch') {
190
- localInputs = (React.createElement(Switch, { inputRef: inputRef, ...rest, value: "true", autoFocus: true, required: true }));
194
+ localInputs = (React.createElement(Switch, { inputRef: inputRef, ...inputProps, value: "true", autoFocus: true, required: true }));
191
195
  }
192
196
  else if (type === 'slider') {
193
197
  localInputs = React.createElement(Slider, { onChange: (_e, v) => (value = v) });
194
198
  }
195
199
  else {
196
- localInputs = (React.createElement(TextField, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...rest }));
200
+ localInputs = (React.createElement(TextField, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...inputProps }));
197
201
  }
198
202
  }
199
203
  else {
@@ -213,13 +217,13 @@ export class NotificationMU extends NotificationReact {
213
217
  React.createElement(DialogContentText, null, this.content),
214
218
  localInputs,
215
219
  React.createElement(Typography, { variant: "caption", display: "block", ref: errorRef, color: (theme) => theme.palette.error.main })),
216
- React.createElement(DialogActions, null,
220
+ React.createElement(DialogActions, null, buttons ? (buttons(handleSubmit)) : (React.createElement(React.Fragment, null,
217
221
  cancelButton && (React.createElement(Button, { color: "secondary", onClick: () => {
218
222
  if (this.onReturn)
219
223
  this.onReturn(undefined);
220
224
  this.dismiss();
221
225
  } }, cancelLabel)),
222
- React.createElement(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButton }, okLabel)))));
226
+ React.createElement(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButton }, okLabel)))))));
223
227
  }
224
228
  // Create loading
225
229
  createLoading(_props, className) {
package/lib/app/ReactApp.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CoreApp, IActionResult, IApp, IAppSettings, ICoreApp, IUser } from '@etsoo/appscript';
2
- import { NotificationReturn } from '@etsoo/notificationbase';
2
+ import { INotifier, NotificationReturn } from '@etsoo/notificationbase';
3
3
  import { DataTypes } from '@etsoo/shared';
4
4
  import React from 'react';
5
5
  import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from '@etsoo/react';
@@ -24,6 +24,10 @@ export declare function ReactAppStateDetector(props: IStateProps): React.Functio
24
24
  * React implemented base
25
25
  */
26
26
  export interface IReactAppBase {
27
+ /**
28
+ * Override Notifier as React specific
29
+ */
30
+ readonly notifier: INotifier<React.ReactNode, NotificationReactCallProps>;
27
31
  /**
28
32
  * User state
29
33
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.0.31",
3
+ "version": "1.0.33",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -51,9 +51,9 @@
51
51
  "@emotion/css": "^11.10.0",
52
52
  "@emotion/react": "^11.10.4",
53
53
  "@emotion/styled": "^11.10.4",
54
- "@etsoo/appscript": "^1.2.98",
55
- "@etsoo/notificationbase": "^1.1.8",
56
- "@etsoo/react": "^1.6.4",
54
+ "@etsoo/appscript": "^1.2.99",
55
+ "@etsoo/notificationbase": "^1.1.10",
56
+ "@etsoo/react": "^1.6.9",
57
57
  "@etsoo/shared": "^1.1.58",
58
58
  "@mui/icons-material": "^5.10.6",
59
59
  "@mui/material": "^5.10.7",
@@ -75,10 +75,10 @@
75
75
  "react-window": "^1.8.7"
76
76
  },
77
77
  "devDependencies": {
78
- "@babel/cli": "^7.18.10",
79
- "@babel/core": "^7.19.1",
78
+ "@babel/cli": "^7.19.3",
79
+ "@babel/core": "^7.19.3",
80
80
  "@babel/plugin-transform-runtime": "^7.19.1",
81
- "@babel/preset-env": "^7.19.1",
81
+ "@babel/preset-env": "^7.19.3",
82
82
  "@babel/runtime-corejs3": "^7.19.1",
83
83
  "@testing-library/jest-dom": "^5.16.5",
84
84
  "@testing-library/react": "^13.4.0",
@@ -92,6 +92,6 @@
92
92
  "jest": "^29.0.3",
93
93
  "jest-environment-jsdom": "^29.0.3",
94
94
  "ts-jest": "^29.0.2",
95
- "typescript": "^4.8.3"
95
+ "typescript": "^4.8.4"
96
96
  }
97
97
  }
package/src/NotifierMU.tsx CHANGED
@@ -73,6 +73,7 @@ export class NotificationMU extends NotificationReact {
73
73
  const labels = Labels.NotificationMU;
74
74
 
75
75
  const {
76
+ buttons,
76
77
  inputs,
77
78
  fullScreen,
78
79
  fullWidth = true,
@@ -104,6 +105,13 @@ export class NotificationMU extends NotificationReact {
104
105
  // Setup callback
105
106
  if (this.renderSetup) this.renderSetup(setupProps);
106
107
 
108
+ // Callback
109
+ const callback = async (
110
+ _event: React.MouseEvent<HTMLButtonElement>
111
+ ) => {
112
+ await this.returnValue(undefined);
113
+ };
114
+
107
115
  return (
108
116
  <Dialog
109
117
  key={this.id}
@@ -123,14 +131,18 @@ export class NotificationMU extends NotificationReact {
123
131
  {inputs}
124
132
  </DialogContent>
125
133
  <DialogActions>
126
- <LoadingButton
127
- {...setupProps}
128
- onClick={async () => await this.returnValue(undefined)}
129
- autoFocus
130
- {...primaryButton}
131
- >
132
- {okLabel}
133
- </LoadingButton>
134
+ {buttons ? (
135
+ buttons(callback)
136
+ ) : (
137
+ <LoadingButton
138
+ {...setupProps}
139
+ onClick={callback}
140
+ autoFocus
141
+ {...primaryButton}
142
+ >
143
+ {okLabel}
144
+ </LoadingButton>
145
+ )}
134
146
  </DialogActions>
135
147
  </Dialog>
136
148
  );
@@ -142,6 +154,7 @@ export class NotificationMU extends NotificationReact {
142
154
  const title = this.title ?? labels.confirmTitle;
143
155
 
144
156
  const {
157
+ buttons,
145
158
  okLabel = labels.confirmYes,
146
159
  cancelLabel = labels.confirmNo,
147
160
  cancelButton = true,
@@ -152,6 +165,11 @@ export class NotificationMU extends NotificationReact {
152
165
  primaryButton
153
166
  } = this.inputProps ?? {};
154
167
 
168
+ const callback = async (
169
+ _event: React.MouseEvent<HTMLButtonElement>,
170
+ value: boolean
171
+ ) => await this.returnValue(value);
172
+
155
173
  return (
156
174
  <Dialog
157
175
  key={this.id}
@@ -171,22 +189,32 @@ export class NotificationMU extends NotificationReact {
171
189
  {inputs}
172
190
  </DialogContent>
173
191
  <DialogActions>
174
- {cancelButton && (
175
- <LoadingButton
176
- color="secondary"
177
- onClick={async () => await this.returnValue(false)}
178
- >
179
- {cancelLabel}
180
- </LoadingButton>
192
+ {buttons ? (
193
+ buttons(callback)
194
+ ) : (
195
+ <React.Fragment>
196
+ {cancelButton && (
197
+ <LoadingButton
198
+ color="secondary"
199
+ onClick={async (event) =>
200
+ await callback(event, false)
201
+ }
202
+ >
203
+ {cancelLabel}
204
+ </LoadingButton>
205
+ )}
206
+ <LoadingButton
207
+ color="primary"
208
+ onClick={async (event) =>
209
+ await callback(event, true)
210
+ }
211
+ autoFocus
212
+ {...primaryButton}
213
+ >
214
+ {okLabel}
215
+ </LoadingButton>
216
+ </React.Fragment>
181
217
  )}
182
- <LoadingButton
183
- color="primary"
184
- onClick={async () => await this.returnValue(true)}
185
- autoFocus
186
- {...primaryButton}
187
- >
188
- {okLabel}
189
- </LoadingButton>
190
218
  </DialogActions>
191
219
  </Dialog>
192
220
  );
@@ -231,6 +259,7 @@ export class NotificationMU extends NotificationReact {
231
259
  const title = this.title ?? labels.promptTitle;
232
260
 
233
261
  const {
262
+ buttons,
234
263
  cancelLabel = labels.promptCancel,
235
264
  okLabel = labels.promptOK,
236
265
  cancelButton = true,
@@ -240,7 +269,7 @@ export class NotificationMU extends NotificationReact {
240
269
  fullWidth = true,
241
270
  maxWidth,
242
271
  primaryButton,
243
- ...rest
272
+ inputProps
244
273
  } = this.inputProps ?? {};
245
274
 
246
275
  const inputRef = React.createRef<HTMLInputElement>();
@@ -322,7 +351,7 @@ export class NotificationMU extends NotificationReact {
322
351
  localInputs = (
323
352
  <Switch
324
353
  inputRef={inputRef}
325
- {...rest}
354
+ {...inputProps}
326
355
  value="true"
327
356
  autoFocus
328
357
  required
@@ -340,7 +369,7 @@ export class NotificationMU extends NotificationReact {
340
369
  fullWidth
341
370
  type={type}
342
371
  required
343
- {...rest}
372
+ {...inputProps}
344
373
  />
345
374
  );
346
375
  }
@@ -384,26 +413,33 @@ export class NotificationMU extends NotificationReact {
384
413
  />
385
414
  </DialogContent>
386
415
  <DialogActions>
387
- {cancelButton && (
388
- <Button
389
- color="secondary"
390
- onClick={() => {
391
- if (this.onReturn) this.onReturn(undefined);
392
- this.dismiss();
393
- }}
394
- >
395
- {cancelLabel}
396
- </Button>
416
+ {buttons ? (
417
+ buttons(handleSubmit)
418
+ ) : (
419
+ <React.Fragment>
420
+ {cancelButton && (
421
+ <Button
422
+ color="secondary"
423
+ onClick={() => {
424
+ if (this.onReturn)
425
+ this.onReturn(undefined);
426
+ this.dismiss();
427
+ }}
428
+ >
429
+ {cancelLabel}
430
+ </Button>
431
+ )}
432
+ <LoadingButton
433
+ color="primary"
434
+ autoFocus
435
+ onClick={handleSubmit}
436
+ name="okButton"
437
+ {...primaryButton}
438
+ >
439
+ {okLabel}
440
+ </LoadingButton>
441
+ </React.Fragment>
397
442
  )}
398
- <LoadingButton
399
- color="primary"
400
- autoFocus
401
- onClick={handleSubmit}
402
- name="okButton"
403
- {...primaryButton}
404
- >
405
- {okLabel}
406
- </LoadingButton>
407
443
  </DialogActions>
408
444
  </form>
409
445
  </Dialog>
package/src/app/ReactApp.ts CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  IUser
10
10
  } from '@etsoo/appscript';
11
11
  import {
12
+ INotifier,
12
13
  NotificationMessageType,
13
14
  NotificationRenderProps,
14
15
  NotificationReturn
@@ -87,6 +88,11 @@ export function ReactAppStateDetector(props: IStateProps) {
87
88
  * React implemented base
88
89
  */
89
90
  export interface IReactAppBase {
91
+ /**
92
+ * Override Notifier as React specific
93
+ */
94
+ readonly notifier: INotifier<React.ReactNode, NotificationReactCallProps>;
95
+
90
96
  /**
91
97
  * User state
92
98
  */