@etsoo/react 1.2.13 → 1.2.17
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__/mu/NotifierMUTests.tsx +1 -2
- package/lib/app/InputDialogProps.d.ts +2 -14
- package/lib/app/ReactApp.d.ts +19 -3
- package/lib/app/ReactApp.js +2 -7
- package/lib/mu/AutocompleteExtendedProps.d.ts +1 -1
- package/lib/mu/ComboBox.d.ts +8 -0
- package/lib/mu/ComboBox.js +18 -3
- package/lib/mu/CountdownButton.d.ts +1 -1
- package/lib/mu/DialogButton.d.ts +15 -0
- package/lib/mu/DialogButton.js +14 -7
- package/lib/mu/NotifierMU.d.ts +4 -5
- package/lib/mu/NotifierMU.js +36 -28
- package/lib/mu/SelectEx.d.ts +4 -0
- package/lib/mu/SelectEx.js +23 -9
- package/lib/mu/TextFieldEx.d.ts +3 -3
- package/lib/mu/Tiplist.d.ts +1 -1
- package/lib/notifier/Notifier.d.ts +41 -8
- package/lib/notifier/Notifier.js +3 -6
- package/package.json +9 -9
- package/src/app/InputDialogProps.ts +2 -16
- package/src/app/ReactApp.ts +23 -11
- package/src/mu/AutocompleteExtendedProps.ts +4 -1
- package/src/mu/ComboBox.tsx +32 -4
- package/src/mu/DialogButton.tsx +39 -5
- package/src/mu/NotifierMU.tsx +62 -56
- package/src/mu/NotifierPromptProps.ts +2 -0
- package/src/mu/SelectEx.tsx +29 -7
- package/src/mu/Tiplist.tsx +1 -1
- package/src/notifier/Notifier.ts +68 -16
package/lib/mu/TextFieldEx.d.ts
CHANGED
|
@@ -48,7 +48,7 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
48
48
|
* Show password button
|
|
49
49
|
*/
|
|
50
50
|
showPassword?: boolean | undefined;
|
|
51
|
-
}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "name" | "type" | "
|
|
51
|
+
}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "name" | "type" | "fullWidth" | "onScroll" | "id" | "rows" | "hidden" | "color" | "size" | "disabled" | "error" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "margin" | "variant" | "autoFocus" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "InputLabelProps" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "multiline" | "maxRows" | "minRows" | "showClear" | "showPassword"> | Pick<import("@mui/material").FilledTextFieldProps & {
|
|
52
52
|
/**
|
|
53
53
|
* On enter click
|
|
54
54
|
*/
|
|
@@ -65,7 +65,7 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
65
65
|
* Show password button
|
|
66
66
|
*/
|
|
67
67
|
showPassword?: boolean | undefined;
|
|
68
|
-
}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "name" | "type" | "
|
|
68
|
+
}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "name" | "type" | "fullWidth" | "onScroll" | "id" | "rows" | "hidden" | "color" | "size" | "disabled" | "error" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "margin" | "variant" | "autoFocus" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "InputLabelProps" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "multiline" | "maxRows" | "minRows" | "showClear" | "showPassword"> | Pick<import("@mui/material").OutlinedTextFieldProps & {
|
|
69
69
|
/**
|
|
70
70
|
* On enter click
|
|
71
71
|
*/
|
|
@@ -82,4 +82,4 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
82
82
|
* Show password button
|
|
83
83
|
*/
|
|
84
84
|
showPassword?: boolean | undefined;
|
|
85
|
-
}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "name" | "type" | "
|
|
85
|
+
}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "name" | "type" | "fullWidth" | "onScroll" | "id" | "rows" | "hidden" | "color" | "size" | "disabled" | "error" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "margin" | "variant" | "autoFocus" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "InputLabelProps" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "multiline" | "maxRows" | "minRows" | "showClear" | "showPassword">) & React.RefAttributes<TextFieldExMethods>>;
|
package/lib/mu/Tiplist.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
|
|
|
4
4
|
/**
|
|
5
5
|
* Tiplist props
|
|
6
6
|
*/
|
|
7
|
-
export interface TiplistProps<T extends Record<string, any>> extends Omit<AutocompleteExtendedProps<T>, '
|
|
7
|
+
export interface TiplistProps<T extends Record<string, any>> extends Omit<AutocompleteExtendedProps<T>, 'open'> {
|
|
8
8
|
/**
|
|
9
9
|
* Load data callback
|
|
10
10
|
*/
|
|
@@ -1,11 +1,45 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { INotification, INotifier, Notification, NotificationAlign, NotificationContainer, NotificationRenderProps } from '@etsoo/notificationbase';
|
|
2
|
+
import { INotification, INotifier, Notification, NotificationAlign, NotificationCallProps, NotificationContainer, NotificationRenderProps } from '@etsoo/notificationbase';
|
|
3
3
|
import { IAction } from '@etsoo/appscript';
|
|
4
4
|
import { IProviderProps } from '../states/IState';
|
|
5
|
+
import { Breakpoint } from '@mui/material';
|
|
6
|
+
/**
|
|
7
|
+
* React notification call props
|
|
8
|
+
*/
|
|
9
|
+
export interface NotificationReactCallProps extends NotificationCallProps {
|
|
10
|
+
/**
|
|
11
|
+
* Full width
|
|
12
|
+
*/
|
|
13
|
+
fullWidth?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Full screen
|
|
16
|
+
*/
|
|
17
|
+
fullScreen?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Inputs layout
|
|
20
|
+
*/
|
|
21
|
+
inputs?: React.ReactNode;
|
|
22
|
+
/**
|
|
23
|
+
* Max width
|
|
24
|
+
*/
|
|
25
|
+
maxWidth?: Breakpoint | false;
|
|
26
|
+
/**
|
|
27
|
+
* OK label
|
|
28
|
+
*/
|
|
29
|
+
okLabel?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Cancel label
|
|
32
|
+
*/
|
|
33
|
+
cancelLabel?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Type
|
|
36
|
+
*/
|
|
37
|
+
type?: string;
|
|
38
|
+
}
|
|
5
39
|
/**
|
|
6
40
|
* React notification interface
|
|
7
41
|
*/
|
|
8
|
-
export interface INotificationReact extends INotification<React.ReactNode> {
|
|
42
|
+
export interface INotificationReact extends INotification<React.ReactNode, NotificationReactCallProps> {
|
|
9
43
|
}
|
|
10
44
|
/**
|
|
11
45
|
* Action to manage the notifier
|
|
@@ -23,7 +57,7 @@ interface INotifierAction extends IAction {
|
|
|
23
57
|
/**
|
|
24
58
|
* React notification
|
|
25
59
|
*/
|
|
26
|
-
export declare abstract class NotificationReact extends Notification<React.ReactNode> {
|
|
60
|
+
export declare abstract class NotificationReact extends Notification<React.ReactNode, NotificationReactCallProps> {
|
|
27
61
|
}
|
|
28
62
|
/**
|
|
29
63
|
* React notification render props
|
|
@@ -33,7 +67,7 @@ export interface NotificationReactRenderProps extends NotificationRenderProps, I
|
|
|
33
67
|
/**
|
|
34
68
|
* Notifier interface
|
|
35
69
|
*/
|
|
36
|
-
export interface INotifierReact extends INotifier<React.ReactNode> {
|
|
70
|
+
export interface INotifierReact extends INotifier<React.ReactNode, NotificationReactCallProps> {
|
|
37
71
|
/**
|
|
38
72
|
* Create state provider
|
|
39
73
|
* @param className Style class name
|
|
@@ -51,7 +85,7 @@ export interface INotifierOptions {
|
|
|
51
85
|
/**
|
|
52
86
|
* Notifier for React
|
|
53
87
|
*/
|
|
54
|
-
export declare abstract class NotifierReact extends NotificationContainer<React.ReactNode> implements INotifierReact {
|
|
88
|
+
export declare abstract class NotifierReact extends NotificationContainer<React.ReactNode, NotificationReactCallProps> implements INotifierReact {
|
|
55
89
|
private static _instance;
|
|
56
90
|
/**
|
|
57
91
|
* Singleton instance
|
|
@@ -76,13 +110,12 @@ export declare abstract class NotifierReact extends NotificationContainer<React.
|
|
|
76
110
|
* @param children Children
|
|
77
111
|
* @param options Other options
|
|
78
112
|
*/
|
|
79
|
-
protected abstract createContainer(align: NotificationAlign, children: React.ReactNode[]
|
|
113
|
+
protected abstract createContainer(align: NotificationAlign, children: React.ReactNode[]): React.ReactElement;
|
|
80
114
|
/**
|
|
81
115
|
* Create state provider
|
|
82
116
|
* @param className Style class name
|
|
83
|
-
* @param optionGenerator Options generator
|
|
84
117
|
* @returns Provider
|
|
85
118
|
*/
|
|
86
|
-
createProvider(className?: string
|
|
119
|
+
createProvider(className?: string): React.FunctionComponent<NotificationReactRenderProps>;
|
|
87
120
|
}
|
|
88
121
|
export {};
|
package/lib/notifier/Notifier.js
CHANGED
|
@@ -35,25 +35,22 @@ export class NotifierReact extends NotificationContainer {
|
|
|
35
35
|
/**
|
|
36
36
|
* Create state provider
|
|
37
37
|
* @param className Style class name
|
|
38
|
-
* @param optionGenerator Options generator
|
|
39
38
|
* @returns Provider
|
|
40
39
|
*/
|
|
41
|
-
createProvider(className
|
|
40
|
+
createProvider(className) {
|
|
42
41
|
// Custom creator
|
|
43
42
|
const creator = (state, update, props) => {
|
|
44
43
|
// Hold the current state update
|
|
45
44
|
this.stateUpdate = update;
|
|
46
|
-
// Options
|
|
47
|
-
const options = optionGenerator ? optionGenerator() : {};
|
|
48
45
|
// Aligns collection
|
|
49
46
|
const aligns = [];
|
|
50
47
|
for (const align in state) {
|
|
51
48
|
// Notifications under the align
|
|
52
49
|
const notifications = state[align];
|
|
53
50
|
// UI collections
|
|
54
|
-
const ui = notifications.map((notification) => notification.render(props, className + '-item'
|
|
51
|
+
const ui = notifications.map((notification) => notification.render(props, className + '-item'));
|
|
55
52
|
// Add to the collection
|
|
56
|
-
aligns.push(this.createContainer(Number(align), ui
|
|
53
|
+
aligns.push(this.createContainer(Number(align), ui));
|
|
57
54
|
}
|
|
58
55
|
// Generate the component
|
|
59
56
|
return React.createElement('div', { className }, aligns);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/react",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.17",
|
|
4
4
|
"description": "TypeScript ReactJs framework",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
"@emotion/react": "^11.4.1",
|
|
45
45
|
"@emotion/style": "^0.8.0",
|
|
46
46
|
"@emotion/styled": "^11.3.0",
|
|
47
|
-
"@etsoo/appscript": "^1.1.
|
|
48
|
-
"@etsoo/notificationbase": "^1.0.
|
|
47
|
+
"@etsoo/appscript": "^1.1.3",
|
|
48
|
+
"@etsoo/notificationbase": "^1.0.79",
|
|
49
49
|
"@etsoo/shared": "^1.0.46",
|
|
50
|
-
"@mui/icons-material": "^5.0.
|
|
51
|
-
"@mui/material": "^5.0.
|
|
50
|
+
"@mui/icons-material": "^5.0.3",
|
|
51
|
+
"@mui/material": "^5.0.3",
|
|
52
52
|
"@reach/router": "^1.3.4",
|
|
53
53
|
"@types/pica": "^5.1.3",
|
|
54
54
|
"@types/pulltorefreshjs": "^0.1.5",
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@babel/cli": "^7.15.7",
|
|
70
|
-
"@babel/core": "^7.15.
|
|
71
|
-
"@babel/plugin-transform-runtime": "^7.15.
|
|
72
|
-
"@babel/preset-env": "^7.15.
|
|
70
|
+
"@babel/core": "^7.15.8",
|
|
71
|
+
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
72
|
+
"@babel/preset-env": "^7.15.8",
|
|
73
73
|
"@babel/runtime-corejs3": "^7.15.4",
|
|
74
74
|
"@types/jest": "^27.0.2",
|
|
75
75
|
"@types/react-test-renderer": "^17.0.1",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"eslint-config-airbnb-base": "^14.2.1",
|
|
80
80
|
"eslint-plugin-import": "^2.24.2",
|
|
81
81
|
"eslint-plugin-react": "^7.26.1",
|
|
82
|
-
"jest": "^27.2.
|
|
82
|
+
"jest": "^27.2.5",
|
|
83
83
|
"react-test-renderer": "^17.0.2",
|
|
84
84
|
"ts-jest": "^27.0.5",
|
|
85
85
|
"typescript": "^4.4.3"
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { NotificationReturn } from '@etsoo/notificationbase';
|
|
2
|
+
import { NotificationReactCallProps } from '../notifier/Notifier';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Input dialog props
|
|
5
6
|
*/
|
|
6
|
-
export type InputDialogProps = {
|
|
7
|
+
export type InputDialogProps = NotificationReactCallProps & {
|
|
7
8
|
/**
|
|
8
9
|
* Title
|
|
9
10
|
*/
|
|
@@ -14,23 +15,8 @@ export type InputDialogProps = {
|
|
|
14
15
|
*/
|
|
15
16
|
message: string;
|
|
16
17
|
|
|
17
|
-
/**
|
|
18
|
-
* Inputs layout
|
|
19
|
-
*/
|
|
20
|
-
inputs: React.ReactNode;
|
|
21
|
-
|
|
22
18
|
/**
|
|
23
19
|
* Callback
|
|
24
20
|
*/
|
|
25
21
|
callback: NotificationReturn<HTMLFormElement>;
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* OK label
|
|
29
|
-
*/
|
|
30
|
-
okLabel?: string;
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Cancel label
|
|
34
|
-
*/
|
|
35
|
-
cancelLabel?: string;
|
|
36
22
|
};
|
package/src/app/ReactApp.ts
CHANGED
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
import { DataTypes } from '@etsoo/shared';
|
|
9
9
|
import React from 'react';
|
|
10
10
|
import { NotifierPromptProps } from '../mu/NotifierPromptProps';
|
|
11
|
+
import { NotificationReactCallProps } from '../notifier/Notifier';
|
|
11
12
|
import { CultureAction } from '../states/CultureState';
|
|
12
13
|
import { IStateProps } from '../states/IState';
|
|
13
14
|
import { IPageData, PageAction, PageActionType } from '../states/PageState';
|
|
@@ -56,11 +57,29 @@ export interface IReactApp<
|
|
|
56
57
|
S extends IAppSettings,
|
|
57
58
|
D extends IUser,
|
|
58
59
|
P extends IPageData
|
|
59
|
-
> extends ICoreApp<S, React.ReactNode> {
|
|
60
|
+
> extends ICoreApp<S, React.ReactNode, NotificationReactCallProps> {
|
|
60
61
|
/**
|
|
61
62
|
* User state
|
|
62
63
|
*/
|
|
63
64
|
readonly userState: UserState<D>;
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Set page data
|
|
68
|
+
* @param data Page data
|
|
69
|
+
*/
|
|
70
|
+
setPageData(data: P): void;
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Set page title and data
|
|
74
|
+
* @param key Page title resource key
|
|
75
|
+
*/
|
|
76
|
+
setPageKey(key: string): void;
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Set page title and data
|
|
80
|
+
* @param title Page title
|
|
81
|
+
*/
|
|
82
|
+
setPageTitle(title: string): void;
|
|
64
83
|
}
|
|
65
84
|
|
|
66
85
|
/**
|
|
@@ -71,7 +90,7 @@ export abstract class ReactApp<
|
|
|
71
90
|
D extends IUser,
|
|
72
91
|
P extends IPageData
|
|
73
92
|
>
|
|
74
|
-
extends CoreApp<S, React.ReactNode>
|
|
93
|
+
extends CoreApp<S, React.ReactNode, NotificationReactCallProps>
|
|
75
94
|
implements IReactApp<S, D, P>
|
|
76
95
|
{
|
|
77
96
|
/**
|
|
@@ -190,17 +209,10 @@ export abstract class ReactApp<
|
|
|
190
209
|
showInputDialog({
|
|
191
210
|
title,
|
|
192
211
|
message,
|
|
193
|
-
inputs,
|
|
194
212
|
callback,
|
|
195
|
-
|
|
196
|
-
okLabel
|
|
213
|
+
...rest
|
|
197
214
|
}: InputDialogProps): void {
|
|
198
|
-
|
|
199
|
-
okLabel,
|
|
200
|
-
cancelLabel,
|
|
201
|
-
inputs
|
|
202
|
-
};
|
|
203
|
-
this.notifier.prompt<HTMLFormElement>(message, callback, title, props);
|
|
215
|
+
this.notifier.prompt<HTMLFormElement>(message, callback, title, rest);
|
|
204
216
|
}
|
|
205
217
|
|
|
206
218
|
/**
|
|
@@ -5,7 +5,10 @@ import { AutocompleteProps } from '@mui/material';
|
|
|
5
5
|
* Autocomplete extended props
|
|
6
6
|
*/
|
|
7
7
|
export interface AutocompleteExtendedProps<T extends Record<string, any>>
|
|
8
|
-
extends Omit<
|
|
8
|
+
extends Omit<
|
|
9
|
+
AutocompleteProps<T, undefined, false, false>,
|
|
10
|
+
'renderInput' | 'options'
|
|
11
|
+
> {
|
|
9
12
|
/**
|
|
10
13
|
* Id field, default is id
|
|
11
14
|
*/
|
package/src/mu/ComboBox.tsx
CHANGED
|
@@ -9,7 +9,17 @@ import { SearchField } from './SearchField';
|
|
|
9
9
|
* ComboBox props
|
|
10
10
|
*/
|
|
11
11
|
export interface ComboBoxProps<T extends Record<string, any>>
|
|
12
|
-
extends AutocompleteExtendedProps<T> {
|
|
12
|
+
extends AutocompleteExtendedProps<T> {
|
|
13
|
+
/**
|
|
14
|
+
* Load data callback
|
|
15
|
+
*/
|
|
16
|
+
loadData?: () => PromiseLike<T[] | null | undefined>;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Array of options.
|
|
20
|
+
*/
|
|
21
|
+
options?: ReadonlyArray<T>;
|
|
22
|
+
}
|
|
13
23
|
|
|
14
24
|
/**
|
|
15
25
|
* ComboBox
|
|
@@ -29,8 +39,9 @@ export function ComboBox<T extends Record<string, any>>(
|
|
|
29
39
|
inputVariant,
|
|
30
40
|
defaultValue,
|
|
31
41
|
label,
|
|
42
|
+
loadData,
|
|
32
43
|
name,
|
|
33
|
-
options,
|
|
44
|
+
options = [],
|
|
34
45
|
readOnly = true,
|
|
35
46
|
onChange,
|
|
36
47
|
value,
|
|
@@ -41,10 +52,14 @@ export function ComboBox<T extends Record<string, any>>(
|
|
|
41
52
|
// Value input ref
|
|
42
53
|
const inputRef = React.createRef<HTMLInputElement>();
|
|
43
54
|
|
|
55
|
+
// Options state
|
|
56
|
+
const [localOptions, setOptions] = React.useState(options);
|
|
57
|
+
const isMounted = React.useRef(true);
|
|
58
|
+
|
|
44
59
|
// Local default value
|
|
45
60
|
const localValue =
|
|
46
61
|
idValue != null
|
|
47
|
-
?
|
|
62
|
+
? localOptions.find((o) => o[idField] === idValue)
|
|
48
63
|
: defaultValue ?? value;
|
|
49
64
|
|
|
50
65
|
// Current id value
|
|
@@ -64,6 +79,19 @@ export function ComboBox<T extends Record<string, any>>(
|
|
|
64
79
|
return params;
|
|
65
80
|
};
|
|
66
81
|
|
|
82
|
+
React.useEffect(() => {
|
|
83
|
+
if (loadData) {
|
|
84
|
+
loadData().then((result) => {
|
|
85
|
+
if (result == null || !isMounted.current) return;
|
|
86
|
+
setOptions(result);
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
return () => {
|
|
91
|
+
isMounted.current = false;
|
|
92
|
+
};
|
|
93
|
+
}, []);
|
|
94
|
+
|
|
67
95
|
// Layout
|
|
68
96
|
return (
|
|
69
97
|
<div>
|
|
@@ -121,7 +149,7 @@ export function ComboBox<T extends Record<string, any>>(
|
|
|
121
149
|
/>
|
|
122
150
|
)
|
|
123
151
|
}
|
|
124
|
-
options={
|
|
152
|
+
options={localOptions}
|
|
125
153
|
{...rest}
|
|
126
154
|
/>
|
|
127
155
|
</div>
|
package/src/mu/DialogButton.tsx
CHANGED
|
@@ -3,14 +3,21 @@ import {
|
|
|
3
3
|
Button,
|
|
4
4
|
ButtonProps,
|
|
5
5
|
Dialog,
|
|
6
|
+
DialogActions,
|
|
6
7
|
DialogContent,
|
|
7
8
|
DialogContentText,
|
|
8
9
|
DialogTitle,
|
|
9
10
|
IconButton
|
|
10
11
|
} from '@mui/material';
|
|
11
12
|
import React from 'react';
|
|
13
|
+
import { Labels } from '../app/Labels';
|
|
12
14
|
|
|
13
15
|
export interface DialogButtonProps extends ButtonProps {
|
|
16
|
+
/**
|
|
17
|
+
* Button label
|
|
18
|
+
*/
|
|
19
|
+
buttonLabel?: string;
|
|
20
|
+
|
|
14
21
|
/**
|
|
15
22
|
* Dialog content
|
|
16
23
|
*/
|
|
@@ -37,6 +44,19 @@ export interface DialogButtonProps extends ButtonProps {
|
|
|
37
44
|
*/
|
|
38
45
|
fullScreen?: boolean;
|
|
39
46
|
|
|
47
|
+
/**
|
|
48
|
+
* If `true`, the dialog stretches to `maxWidth`.
|
|
49
|
+
*
|
|
50
|
+
* Notice that the dialog width grow is limited by the default margin.
|
|
51
|
+
* @default false
|
|
52
|
+
*/
|
|
53
|
+
fullWidth?: boolean;
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Other layouts
|
|
57
|
+
*/
|
|
58
|
+
inputs?: React.ReactNode;
|
|
59
|
+
|
|
40
60
|
/**
|
|
41
61
|
* Max width of the dialog
|
|
42
62
|
*/
|
|
@@ -54,15 +74,21 @@ export interface DialogButtonProps extends ButtonProps {
|
|
|
54
74
|
* @returns Component
|
|
55
75
|
*/
|
|
56
76
|
export function DialogButton(props: DialogButtonProps) {
|
|
77
|
+
// Labels shared with NotificationMU
|
|
78
|
+
const labels = Labels.NotificationMU;
|
|
79
|
+
|
|
57
80
|
// Destruct
|
|
58
81
|
const {
|
|
82
|
+
buttonLabel = labels.alertOK,
|
|
59
83
|
children,
|
|
60
84
|
content,
|
|
61
85
|
contentPre,
|
|
62
86
|
dialogTitle,
|
|
63
87
|
disableScrollLock,
|
|
64
88
|
fullScreen,
|
|
89
|
+
fullWidth,
|
|
65
90
|
icon,
|
|
91
|
+
inputs,
|
|
66
92
|
maxWidth,
|
|
67
93
|
onClick,
|
|
68
94
|
...rest
|
|
@@ -75,10 +101,6 @@ export function DialogButton(props: DialogButtonProps) {
|
|
|
75
101
|
setOpen(true);
|
|
76
102
|
};
|
|
77
103
|
|
|
78
|
-
const handleClose = () => {
|
|
79
|
-
setOpen(false);
|
|
80
|
-
};
|
|
81
|
-
|
|
82
104
|
// Onclick handler
|
|
83
105
|
const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
84
106
|
// Stop propagation
|
|
@@ -112,9 +134,15 @@ export function DialogButton(props: DialogButtonProps) {
|
|
|
112
134
|
<Dialog
|
|
113
135
|
disableScrollLock={disableScrollLock}
|
|
114
136
|
fullScreen={fullScreen}
|
|
137
|
+
fullWidth={fullWidth}
|
|
115
138
|
maxWidth={maxWidth}
|
|
116
139
|
open={open}
|
|
117
|
-
onClose={
|
|
140
|
+
onClose={() => setOpen(false)}
|
|
141
|
+
onClick={(event) => {
|
|
142
|
+
// The dialog will be embeded and the click event will bubble up
|
|
143
|
+
// Stop propatation but will also cancel onClose and onBackdropClick event
|
|
144
|
+
event.stopPropagation();
|
|
145
|
+
}}
|
|
118
146
|
>
|
|
119
147
|
<DialogTitle>
|
|
120
148
|
{dialogTitle ? dialogTitle : children}
|
|
@@ -123,7 +151,13 @@ export function DialogButton(props: DialogButtonProps) {
|
|
|
123
151
|
<DialogContentText component={contentPre ? 'pre' : 'span'}>
|
|
124
152
|
{content}
|
|
125
153
|
</DialogContentText>
|
|
154
|
+
{inputs}
|
|
126
155
|
</DialogContent>
|
|
156
|
+
<DialogActions>
|
|
157
|
+
<Button onClick={() => setOpen(false)}>
|
|
158
|
+
{buttonLabel}
|
|
159
|
+
</Button>
|
|
160
|
+
</DialogActions>
|
|
127
161
|
</Dialog>
|
|
128
162
|
</React.Fragment>
|
|
129
163
|
);
|