react-dialogger 1.1.48 → 1.1.50

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 (76) hide show
  1. package/README.md +2 -1
  2. package/components/Actions.d.ts +7 -0
  3. package/components/Actions.js +17 -0
  4. package/components/DialogActionBase.d.ts +10 -0
  5. package/components/DialogActionBase.js +13 -11
  6. package/components/DialogBase.d.ts +42 -109
  7. package/components/DialogBase.js +104 -762
  8. package/components/DialogContent.d.ts +1 -19
  9. package/components/DialogContent.js +66 -72
  10. package/components/DialogContentBody.d.ts +3 -5
  11. package/components/DialogContentBody.js +2 -23
  12. package/components/DialogContentFooter.d.ts +4 -0
  13. package/components/{DialogContenFooter.js → DialogContentFooter.js} +6 -33
  14. package/components/DialogContentHeader.d.ts +6 -6
  15. package/components/DialogContentHeader.js +74 -32
  16. package/components/DialogWithBackdropWrapper.d.ts +4 -0
  17. package/components/DialogWithBackdropWrapper.js +72 -0
  18. package/components/Features/DialogCloseAction.js +18 -0
  19. package/components/Features/DialogFullscreenAction.js +24 -0
  20. package/components/{Futures → Features}/DialogInfoAction.js +8 -11
  21. package/components/Features/DialogProcessing.js +14 -0
  22. package/components/RippleButton.d.ts +2 -2
  23. package/components/RippleButton.js +1 -3
  24. package/components/index.d.ts +9 -0
  25. package/components/index.js +24 -0
  26. package/components/utils/effects/jumper-animate.d.ts +2 -0
  27. package/components/utils/effects/jumper-animate.js +36 -0
  28. package/context/index.d.ts +3 -0
  29. package/context/index.js +54 -0
  30. package/{models → helpers}/Resizeable.d.ts +2 -2
  31. package/{models → helpers}/Resizeable.js +23 -11
  32. package/helpers/dialogBoundsMemoize.d.ts +5 -5
  33. package/helpers/dialogBoundsMemoize.js +82 -77
  34. package/helpers/dialogRectAuto.d.ts +3 -0
  35. package/helpers/dialogRectAuto.js +21 -0
  36. package/helpers/formInputKeyListeners.d.ts +2 -0
  37. package/helpers/formInputKeyListeners.js +18 -0
  38. package/helpers/hexToRgb.d.ts +2 -0
  39. package/helpers/hexToRgb.js +19 -0
  40. package/helpers/index.d.ts +1 -0
  41. package/helpers/index.js +3 -1
  42. package/helpers/initDialogMemoizeBounds.d.ts +7 -2
  43. package/helpers/initDialogMemoizeBounds.js +19 -14
  44. package/index.d.ts +3 -4
  45. package/index.js +12 -15
  46. package/models/Dialog.d.ts +30 -35
  47. package/models/Dialog.js +112 -99
  48. package/models/DialogAction.d.ts +1 -39
  49. package/models/DialogAction.js +2 -171
  50. package/models/baseDialogOptions.d.ts +5 -0
  51. package/models/baseDialogOptions.js +63 -0
  52. package/models/index.d.ts +3 -0
  53. package/models/index.js +13 -0
  54. package/package.json +1 -1
  55. package/styles/dialog.css +1 -2
  56. package/{helpers → types}/BoundTypes.d.ts +4 -1
  57. package/types/DialogActionTypes.d.ts +14 -6
  58. package/types/DialogTypes.d.ts +81 -31
  59. package/types/SizePosTypes.d.ts +3 -2
  60. package/types/index.d.ts +1 -1
  61. package/types/types.d.ts +1 -0
  62. package/components/DialogContenFooter.d.ts +0 -13
  63. package/components/Futures/DialogCloseAction.js +0 -30
  64. package/components/Futures/DialogFullscreenAction.js +0 -37
  65. package/components/Futures/DialogProcessing.js +0 -18
  66. package/hooks/useDialogOptions.d.ts +0 -3
  67. package/hooks/useDialogOptions.js +0 -82
  68. /package/components/{Futures → Features}/DialogCloseAction.d.ts +0 -0
  69. /package/components/{Futures → Features}/DialogFullscreenAction.d.ts +0 -0
  70. /package/components/{Futures → Features}/DialogHeaderActionsWrapper.d.ts +0 -0
  71. /package/components/{Futures → Features}/DialogHeaderActionsWrapper.js +0 -0
  72. /package/components/{Futures → Features}/DialogInfoAction.d.ts +0 -0
  73. /package/components/{Futures → Features}/DialogProcessing.d.ts +0 -0
  74. /package/components/{Futures → Features}/index.d.ts +0 -0
  75. /package/components/{Futures → Features}/index.js +0 -0
  76. /package/{helpers → types}/BoundTypes.js +0 -0
package/README.md CHANGED
@@ -32,8 +32,9 @@ Although a global configuration is set by useDialogOptions, each dialog can stil
32
32
  Below is an example of customizing a dialog using `useDialogOptions`:
33
33
 
34
34
  #### useDialogOptions (Base)
35
+
35
36
  ```js
36
- useDialogOptions({
37
+ initialDialogOptions({
37
38
  base: {
38
39
  footer: {
39
40
  style: { // Footer custom styles
@@ -0,0 +1,7 @@
1
+ import { DialogAction } from "../models";
2
+ import DialogBase from "./DialogBase";
3
+ declare const Actions: ({ actions, dialog }: {
4
+ actions?: DialogAction[];
5
+ dialog: DialogBase<any>;
6
+ }) => import("react/jsx-runtime").JSX.Element;
7
+ export { Actions };
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Actions = void 0;
7
+ var jsx_runtime_1 = require("react/jsx-runtime");
8
+ var DialogActionBase_1 = __importDefault(require("./DialogActionBase"));
9
+ var Actions = function (_a) {
10
+ var actions = _a.actions, dialog = _a.dialog;
11
+ var dialogOptions = dialog.dialogOptions;
12
+ return (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: actions.map(function (action, index) {
13
+ var referencedAction = dialog.initializeActionRef(action.name);
14
+ return (0, jsx_runtime_1.jsx)(DialogActionBase_1.default, { name: action.name, ref: referencedAction, dialogBaseComponent: dialog, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener }, index.toString());
15
+ }) });
16
+ };
17
+ exports.Actions = Actions;
@@ -23,10 +23,20 @@ declare class DialogActionBase extends Component<ActionProps, ActionState> {
23
23
  setLabel: (label: string) => DialogActionBase;
24
24
  getLabel(): string;
25
25
  protected onClick(callback: DialogActionType): DialogActionBase;
26
+ /**
27
+ * @deprecated use Options*/
26
28
  setVariant: (variant: TBVariant) => DialogActionBase;
29
+ /**
30
+ * @deprecated use Options*/
27
31
  getVariant: () => TBVariant;
32
+ /**
33
+ * @deprecated use Options*/
28
34
  setColor: (color: TBColor) => DialogActionBase;
35
+ /**
36
+ * @deprecated use Options*/
29
37
  getColor: () => TBColor;
38
+ /**
39
+ * @deprecated use Options*/
30
40
  setDisabled: (disabled: boolean) => DialogActionBase;
31
41
  /**
32
42
  * @deprecated
@@ -58,15 +58,11 @@ var __importStar = (this && this.__importStar) || (function () {
58
58
  return result;
59
59
  };
60
60
  })();
61
- var __importDefault = (this && this.__importDefault) || function (mod) {
62
- return (mod && mod.__esModule) ? mod : { "default": mod };
63
- };
64
61
  Object.defineProperty(exports, "__esModule", { value: true });
65
62
  var jsx_runtime_1 = require("react/jsx-runtime");
66
63
  var react_1 = require("react");
67
64
  var React = __importStar(require("react"));
68
- var RippleButton_1 = __importDefault(require("./RippleButton"));
69
- var CircularProgress_1 = __importDefault(require("./CircularProgress"));
65
+ var index_1 = require("./index");
70
66
  var DialogActionBase = /** @class */ (function (_super) {
71
67
  __extends(DialogActionBase, _super);
72
68
  function DialogActionBase(props) {
@@ -87,23 +83,33 @@ var DialogActionBase = /** @class */ (function (_super) {
87
83
  _this.forceUpdate();
88
84
  return _this;
89
85
  };
86
+ /**
87
+ * @deprecated use Options*/
90
88
  _this.setVariant = function (variant) {
91
89
  _this._options.variant = variant;
92
90
  _this.forceUpdate();
93
91
  return _this;
94
92
  };
93
+ /**
94
+ * @deprecated use Options*/
95
95
  _this.getVariant = function () {
96
96
  return _this._options.variant;
97
97
  };
98
+ /**
99
+ * @deprecated use Options*/
98
100
  _this.setColor = function (color) {
99
101
  // this._color = color;
100
102
  _this._options.color = color;
101
103
  _this.forceUpdate();
102
104
  return _this;
103
105
  };
106
+ /**
107
+ * @deprecated use Options*/
104
108
  _this.getColor = function () {
105
109
  return _this._options.color;
106
110
  };
111
+ /**
112
+ * @deprecated use Options*/
107
113
  _this.setDisabled = function (disabled) {
108
114
  _this._options.disabled = disabled;
109
115
  _this.forceUpdate();
@@ -125,10 +131,6 @@ var DialogActionBase = /** @class */ (function (_super) {
125
131
  return _this;
126
132
  };
127
133
  _this.isInProcess = function () {
128
- var _a;
129
- if (((_a = _this.props.dialogBaseComponent) === null || _a === void 0 ? void 0 : _a.parent.accessFrom) === "internal") {
130
- return _this._inProcess;
131
- }
132
134
  return _this._inProcess;
133
135
  };
134
136
  _this.remove = function () {
@@ -144,7 +146,7 @@ var DialogActionBase = /** @class */ (function (_super) {
144
146
  };
145
147
  _this.render = function () {
146
148
  console.log('this._options.style.render', _this._options);
147
- return (0, jsx_runtime_1.jsx)(RippleButton_1.default, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, variant: _this._options.variant, color: _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
149
+ return (0, jsx_runtime_1.jsx)(index_1.RippleButton, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, variant: _this._options.variant, color: _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
148
150
  if (_this._options.disabled || _this.isInProcess())
149
151
  return;
150
152
  // @ts-ignore
@@ -155,7 +157,7 @@ var DialogActionBase = /** @class */ (function (_super) {
155
157
  buttonRef.style.minWidth = buttonRef.getBoundingClientRect().width + 'px';
156
158
  }
157
159
  }
158
- return (0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15, inProcess: { inProcess: _this.isInProcess() } }), !_this.isInProcess() &&
160
+ return (0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.CircularProgress, { size: 15, inProcess: { inProcess: _this.isInProcess() } }), !_this.isInProcess() &&
159
161
  _this._options.label] });
160
162
  } });
161
163
  };
@@ -1,121 +1,70 @@
1
1
  import { Component, ReactNode, RefObject } from "react";
2
2
  import { FormikProps } from "formik";
3
- import * as React from "react";
4
- import Dialog from "../models/Dialog";
5
- import { DialogAction } from "../models/DialogAction";
6
- import DialogActionBase from "./DialogActionBase";
7
- import { IInProcess, ComponentOrderType, TInitialHolder, ISnackbarAnchor, ComponentOrderPositions, TSeverity, BaseDialogDOMRect, TAccessFrom, TInitialValues, DialogValues } from "../types/types";
8
- import { BaseDialogProps, BaseDialogState, IDialogSize, DialogOptionsType, TBaseDialogState, TDialogStateListenerCallbackType, IDialogDef, TDialogCallbackNodeFn, TDialogCallbackVoidFn } from "../types/DialogTypes";
9
- import Resizeable from "../models/Resizeable";
10
- export declare const WithHeaderFooterContext: (props: any) => import("react/jsx-runtime").JSX.Element;
11
- export declare const DialogHeaderFooterContext: React.Context<any>;
3
+ import { DialogActionBase } from "./";
4
+ import { IInProcess, TInitialHolder, ISnackbarAnchor, TSeverity, DialogValues, TAccessFrom } from "../types/types";
5
+ import { BaseDialogProps, BaseDialogState, IDialogSize, DialogOptionsType, TDialogCallbackFn, TDialogCallbackVoidFn, WithBackdrop } from "../types/DialogTypes";
6
+ import { DialogContentFooterReturnType } from "../types/DialogActionTypes";
7
+ import Dialog, { DialogAction } from "../index";
8
+ interface IFormikAdapter extends Pick<FormikProps<any>, 'setValues' | 'setFieldValue' | 'values'> {
9
+ }
12
10
  declare class DialogBase<Values extends Record<string, any>> extends Component<BaseDialogProps, BaseDialogState> {
13
- get parent(): Dialog;
14
- protected _dom: HTMLDivElement;
15
- protected _innerRef: React.RefObject<any>;
16
- protected _stateListener: TDialogStateListenerCallbackType;
17
- _processingListener: (inProcess: boolean) => void;
18
- protected _keyboardListener: (key: string, dialog: IDialogDef) => void;
19
- protected _resizeListener: (size: IDialogSize, dialog: IDialogDef) => void;
20
- protected _initialHolder: TInitialHolder;
21
- protected _accessFrom: TAccessFrom;
22
- protected _header: TDialogCallbackNodeFn;
23
- protected _body: TDialogCallbackNodeFn;
24
- protected _actions: Array<DialogAction>;
25
- protected readonly _backdropRef: RefObject<any>;
26
- protected readonly _dialogRef: RefObject<any>;
27
- protected readonly _dialogBodyRef: RefObject<any>;
28
- /**@deprecated use outside Content component*/
29
- protected readonly _snackbarRef: RefObject<any>;
30
- protected _dialogSize: IDialogSize;
31
- protected _holder?: TInitialHolder;
32
- protected _formikProps: FormikProps<any>;
33
11
  _dialogTranslate: {
34
12
  lastX: number;
35
13
  lastY: number;
36
14
  };
37
- private readonly _draggable;
38
- private readonly _resizeable;
39
- private readonly _closeable;
40
- private readonly _fullscreen;
41
- protected _order: ComponentOrderType;
42
- protected readonly _parent: Dialog;
15
+ readonly _actionRefs: {
16
+ [key: string]: RefObject<DialogActionBase>;
17
+ };
18
+ private _keyboardListener;
19
+ protected _inlineFormikProps: IFormikAdapter;
20
+ protected _header: TDialogCallbackFn;
21
+ protected _body: TDialogCallbackFn;
22
+ protected _actions: DialogAction[];
23
+ protected _dialogSize: IDialogSize;
24
+ protected _holder?: TInitialHolder;
25
+ protected _formikProps: FormikProps<any>;
26
+ protected readonly _backdropRef: RefObject<any>;
27
+ protected readonly _dialogRef: RefObject<any>;
28
+ protected readonly _dialogBodyRef: RefObject<any>;
29
+ protected readonly _snackbarRef: WithBackdrop['snackbarRef'];
43
30
  protected _dialogOptions?: DialogOptionsType;
44
- protected _shInterval: number;
45
31
  protected _onClose: TDialogCallbackVoidFn;
46
- private _inProcess;
47
- private _footerRef;
48
- /**
49
- * @deprecated
50
- * @see dialogOptions.snackbar.anchorOrigin */
32
+ protected _shInterval: number;
51
33
  protected _snackbarAnchor: ISnackbarAnchor;
52
- protected _Resizeable: Resizeable;
53
- /**@deprecated use outside Content component*/
54
- protected readonly dialogPosFromMultipleDialogs: BaseDialogDOMRect;
55
- private readonly _actionRefs;
56
- /**@deprecated
57
- * @use _initialUserProps */
58
- protected _initialState: TInitialValues<any>;
59
34
  protected _initialValues: DialogValues;
60
- readonly state: Readonly<BaseDialogState>;
61
- private _resizeListenersStore;
62
- /**
63
- * The error you're encountering
64
- * is related to the type of the props passed to the
65
- * super(props) call in the DialogBase constructor.
66
- * The type system is expecting BaseDialogProps | Readonly<BaseDialogProps>,
67
- * but you're passing {} (an empty object),
68
- * which is not assignable to that type.
69
- * */
70
- private readonly _fontFamily;
71
- private _storedBounds;
35
+ private _inProcess;
36
+ private _footerRef;
37
+ protected _headerRef: RefObject<DialogContentFooterReturnType>;
38
+ private readonly _dialogWithBackDropRef;
39
+ protected readonly _parent: Dialog;
40
+ private _accessFrom;
72
41
  constructor(props?: Readonly<BaseDialogProps>);
73
- get fullscreenMode(): boolean;
42
+ get parent(): Dialog;
43
+ get dialogTranslate(): {
44
+ lastX: number;
45
+ lastY: number;
46
+ };
47
+ set accessFrom(accessFrom: TAccessFrom);
48
+ get accessFrom(): TAccessFrom;
74
49
  initializeActionRef: (key: string) => RefObject<DialogActionBase>;
75
50
  get dialogOptions(): DialogOptionsType;
76
51
  get holder(): DialogOptionsType;
77
- get Resizeable(): Resizeable;
78
- /**@deprecate
79
- * @see this.state
80
- * */
81
- getState: () => TBaseDialogState;
82
52
  get formikProps(): FormikProps<any>;
83
53
  set formikProps(value: FormikProps<any>);
84
54
  get formikValidate(): Promise<FormikProps<any>>;
85
- get values(): Record<string, any>;
86
- setValues(values: Record<string, any>, callbackFn?: () => void): void;
55
+ set inlineFormikProps(inlineFormikProps: IFormikAdapter);
56
+ get values(): IFormikAdapter['values'];
87
57
  setValue(key: string, value: any): void;
88
- private dialogAutoPos;
58
+ setValues(values: IFormikAdapter['values'], callbackFn?: () => void): void;
89
59
  componentDidMount(): void;
90
- onResize(callbackFn: (size: IDialogSize, dialog: IDialogDef) => void): void;
91
- componentWillUnmount(): void;
92
- setState<K extends keyof BaseDialogState>(state: ((prevState: Readonly<BaseDialogState>, props: Readonly<BaseDialogProps>) => (Pick<BaseDialogState, K> | BaseDialogState | null)) | Pick<BaseDialogState, K> | BaseDialogState | null, callback?: () => void): void;
93
- protected setHeader(header: TDialogCallbackNodeFn): this;
94
- setBody(body: TDialogCallbackNodeFn): this;
95
- protected addActions(actions: Array<DialogAction>): this;
96
- protected addAction(action: DialogAction): this;
97
- stateListener(listener: TDialogStateListenerCallbackType): this;
98
- protected keyboardListener(listener: (key: string, dialog: IDialogDef) => void): this;
99
- protected resizeListener(listener: (size: IDialogSize, dialog: IDialogDef) => void): this;
100
- processingListener(listener: (inProcess: boolean) => void): this;
101
- protected initialHolder(holder: TInitialHolder): this;
102
- protected onClose(callback: TDialogCallbackVoidFn): this;
103
- setInProcess_noRef: (process: boolean, message?: string, holder?: TInitialHolder) => this;
104
60
  setInProcess: (process: boolean, message?: string, holder?: TInitialHolder) => this;
105
61
  isInProcess: () => IInProcess;
106
- close: (callbackFn?: any) => void;
62
+ private kill;
63
+ close: (callbackFn?: () => void) => void;
107
64
  focus: () => void;
108
65
  get actions(): {
109
- [key: string]: Pick<DialogActionBase, "options" | "setInProcess" | "setOptions" | "getLabel" | "click" | "remove">;
66
+ [key: string]: Pick<DialogActionBase, "setOptions" | "setInProcess" | "getLabel" | "options" | "click" | "remove">;
110
67
  };
111
- private orderPositionWithReference;
112
- /**
113
- * @deprecated
114
- * @info This method is deprecated and will be removed in a future release.
115
- * Please use an alternative approach for setting dialog ordering or layout.
116
- * The dialog ordering functionality will be managed differently in future versions.
117
- */
118
- setOrder: (position: ComponentOrderPositions, component: HTMLElement) => this;
119
68
  getDom: () => HTMLDivElement;
120
69
  get snackbar(): {
121
70
  open: (message: string, severity: TSeverity, key?: string, action?: ((key: string, snackbarRef: any) => ReactNode | void), autoHideDuration?: number | null) => void;
@@ -128,22 +77,6 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
128
77
  }) => void;
129
78
  close: (key?: string) => void;
130
79
  };
131
- getSize: () => IDialogSize;
132
- /**
133
- * @deprecated
134
- * use outside Content component
135
- * */
136
- private baseZoomEffect;
137
- private WithBackdrop;
138
- switchFullScreen: () => void;
139
- private Placeholder;
140
- private Header;
141
- private Body;
142
- private Footer;
143
- private Actions;
144
- private Content;
145
- private highestZ;
146
- protected show(callback?: TDialogCallbackVoidFn): void;
147
80
  render: () => import("react/jsx-runtime").JSX.Element;
148
81
  }
149
82
  export default DialogBase;