@dashadmin/dash-dialog 1.3.24 → 1.3.26

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 (8) hide show
  1. package/dist/AppDialog.js +127 -1
  2. package/dist/DialogService.js +82 -1
  3. package/dist/index.js +10 -90
  4. package/package.json +133 -122
  5. package/src/AppDialog.tsx +97 -0
  6. package/src/DialogService.tsx +88 -0
  7. package/src/IAppDialogProps.ts +39 -0
  8. package/src/index.ts +7 -0
package/dist/AppDialog.js CHANGED
@@ -1 +1,127 @@
1
- import{Fragment as e,jsx as o,jsxs as f}from"react/jsx-runtime";import*as c from"react";import{Dialog as T,DialogTitle as x,DialogContent as k,DialogActions as y,Button as p,Paper as F}from"@mui/material";const I=t=>o(F,{...t}),_=t=>{const{onClose:l,onConfirm:i,onCancel:s,open:a,closeText:w=o(e,{}),confirmText:C=o(e,{}),cancelText:d=o(e,{}),title:u,variant:E,className:m,showCancelButton:g=!1,showConfirmButton:D=!0,dialogActions:h,content:P,children:O,...A}=t,[B,n]=c.useState(a);return c.useEffect(()=>{n(a)},[a]),f(T,{hideBackdrop:!0,disableEnforceFocus:!0,PaperComponent:I,onClose:r=>{n(!1),l&&l()},className:m,open:B,...A,children:[o(x,{id:"alert-dialog-title",children:u}),o(k,{children:O||P}),f(y,{children:[h||o(e,{}),g===!0?o(p,{onClick:r=>{n(!1),s&&s()},children:d}):o(e,{}),D===!0?o(p,{onClick:r=>{n(!1),i&&i()},children:C}):o(e,{})]})]})};var z=_;export{_ as AppDialog,z as default};
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
33
+ import * as React from "react";
34
+ import {
35
+ Dialog,
36
+ DialogTitle,
37
+ DialogContent,
38
+ DialogActions,
39
+ Button,
40
+ Paper
41
+ } from "@mui/material";
42
+ const PaperComponent = (props) => {
43
+ return /* @__PURE__ */ jsx(Paper, __spreadValues({}, props));
44
+ };
45
+ const AppDialog = (props) => {
46
+ const _a = props, {
47
+ onClose,
48
+ onConfirm,
49
+ onCancel,
50
+ open,
51
+ closeText = /* @__PURE__ */ jsx(Fragment, {}),
52
+ confirmText = /* @__PURE__ */ jsx(Fragment, {}),
53
+ cancelText = /* @__PURE__ */ jsx(Fragment, {}),
54
+ title,
55
+ variant,
56
+ className,
57
+ showCancelButton = false,
58
+ showConfirmButton = true,
59
+ dialogActions,
60
+ content,
61
+ children
62
+ } = _a, rest = __objRest(_a, [
63
+ "onClose",
64
+ "onConfirm",
65
+ "onCancel",
66
+ "open",
67
+ "closeText",
68
+ "confirmText",
69
+ "cancelText",
70
+ "title",
71
+ "variant",
72
+ "className",
73
+ "showCancelButton",
74
+ "showConfirmButton",
75
+ "dialogActions",
76
+ "content",
77
+ "children"
78
+ ]);
79
+ const [isModalOpen, setIsModalOpen] = React.useState(open);
80
+ React.useEffect(() => {
81
+ setIsModalOpen(open);
82
+ }, [open]);
83
+ const handleOnClose = (_e) => {
84
+ setIsModalOpen(false);
85
+ if (onClose) {
86
+ onClose();
87
+ }
88
+ };
89
+ const handleOnCancel = (_e) => {
90
+ setIsModalOpen(false);
91
+ if (onCancel) {
92
+ onCancel();
93
+ }
94
+ };
95
+ const handleOnConfirm = (_e) => {
96
+ setIsModalOpen(false);
97
+ if (onConfirm) {
98
+ onConfirm();
99
+ }
100
+ };
101
+ return /* @__PURE__ */ jsxs(
102
+ Dialog,
103
+ __spreadProps(__spreadValues({
104
+ hideBackdrop: true,
105
+ disableEnforceFocus: true,
106
+ PaperComponent,
107
+ onClose: handleOnClose,
108
+ className,
109
+ open: isModalOpen
110
+ }, rest), {
111
+ children: [
112
+ /* @__PURE__ */ jsx(DialogTitle, { id: "alert-dialog-title", children: title }),
113
+ /* @__PURE__ */ jsx(DialogContent, { children: children || content }),
114
+ /* @__PURE__ */ jsxs(DialogActions, { children: [
115
+ dialogActions || /* @__PURE__ */ jsx(Fragment, {}),
116
+ showCancelButton === true ? /* @__PURE__ */ jsx(Button, { onClick: handleOnCancel, children: cancelText }) : /* @__PURE__ */ jsx(Fragment, {}),
117
+ showConfirmButton === true ? /* @__PURE__ */ jsx(Button, { onClick: handleOnConfirm, children: confirmText }) : /* @__PURE__ */ jsx(Fragment, {})
118
+ ] })
119
+ ]
120
+ })
121
+ );
122
+ };
123
+ var AppDialog_default = AppDialog;
124
+ export {
125
+ AppDialog,
126
+ AppDialog_default as default
127
+ };
package/dist/DialogService.js CHANGED
@@ -1 +1,82 @@
1
- import{Fragment as x,jsx as n,jsxs as h}from"react/jsx-runtime";import{AppDialog as P}from"./AppDialog";import{createContext as D,useContext as f,useState as u}from"react";import{Portal as S}from"@mui/material";const l=D(null),E=()=>f(l),v=i=>{const{component:r,componentProps:a={},children:p}=i,s=r||P,c={open:!1,variant:"default",content:"",title:"",children:null},[o,e]=u({...c,...a}),d=()=>{e(null),o.onCancel&&o.onCancel()},C=()=>{e(null),o.onClose&&o.onClose()},g=()=>{e(null),o.onConfirm&&o.onConfirm()},m=t=>{e({...o,...t,...t?{open:!0}:{open:!1}})};return h(x,{children:[n(S,{children:n(s,{sx:{zIndex:1e6},...o,onConfirm:()=>g(),onClose:()=>C(),onCancel:()=>d()})}),n(l.Provider,{value:m,children:p})]})};var H=v;export{l as DialogServiceContext,v as DialogServiceProvider,H as default,E as useDialog};
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
21
+ import { AppDialog } from "./AppDialog";
22
+ import {
23
+ createContext,
24
+ useContext,
25
+ useState
26
+ } from "react";
27
+ import { Portal } from "@mui/material";
28
+ const DialogServiceContext = createContext(null);
29
+ const useDialog = () => useContext(DialogServiceContext);
30
+ const DialogServiceProvider = (props) => {
31
+ const { component, componentProps = {}, children } = props;
32
+ const DialogComponent = component || AppDialog;
33
+ const defaultState = {
34
+ open: false,
35
+ variant: "default",
36
+ content: "",
37
+ title: "",
38
+ children: null
39
+ };
40
+ const [dialogState, setDialogState] = useState(__spreadValues(__spreadValues({}, defaultState), componentProps));
41
+ const handleCancel = () => {
42
+ setDialogState(null);
43
+ if (dialogState.onCancel) {
44
+ dialogState.onCancel();
45
+ }
46
+ };
47
+ const handleClose = () => {
48
+ setDialogState(null);
49
+ if (dialogState.onClose) {
50
+ dialogState.onClose();
51
+ }
52
+ };
53
+ const handleConfirm = () => {
54
+ setDialogState(null);
55
+ if (dialogState.onConfirm) {
56
+ dialogState.onConfirm();
57
+ }
58
+ };
59
+ const exposedDialogHook = (options) => {
60
+ setDialogState(__spreadValues(__spreadValues(__spreadValues({}, dialogState), options), options ? { open: true } : { open: false }));
61
+ };
62
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
63
+ /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
64
+ DialogComponent,
65
+ __spreadProps(__spreadValues({
66
+ sx: { zIndex: 1e6 }
67
+ }, dialogState), {
68
+ onConfirm: () => handleConfirm(),
69
+ onClose: () => handleClose(),
70
+ onCancel: () => handleCancel()
71
+ })
72
+ ) }),
73
+ /* @__PURE__ */ jsx(DialogServiceContext.Provider, { value: exposedDialogHook, children })
74
+ ] });
75
+ };
76
+ var DialogService_default = DialogServiceProvider;
77
+ export {
78
+ DialogServiceContext,
79
+ DialogServiceProvider,
80
+ DialogService_default as default,
81
+ useDialog
82
+ };
package/dist/index.js CHANGED
@@ -1,92 +1,12 @@
1
- import { jsx as e, Fragment as o, jsxs as h } from "react/jsx-runtime";
2
- import * as x from "react";
3
- import { createContext as T, useState as A, useContext as _ } from "react";
4
- import { Dialog as j, DialogTitle as w, DialogContent as E, DialogActions as F, Button as D, Paper as I, Portal as M } from "@mui/material";
5
- const b = (l) => /* @__PURE__ */ e(I, { ...l }), z = (l) => {
6
- const {
7
- onClose: i,
8
- onConfirm: r,
9
- onCancel: c,
10
- open: a,
11
- closeText: m = /* @__PURE__ */ e(o, {}),
12
- confirmText: n = /* @__PURE__ */ e(o, {}),
13
- cancelText: t = /* @__PURE__ */ e(o, {}),
14
- title: C,
15
- variant: p,
16
- className: f,
17
- showCancelButton: u = !1,
18
- showConfirmButton: s = !0,
19
- dialogActions: v,
20
- content: S,
21
- children: P,
22
- ...k
23
- } = l, [B, d] = x.useState(a);
24
- return x.useEffect(() => {
25
- d(a);
26
- }, [a]), /* @__PURE__ */ h(
27
- j,
28
- {
29
- hideBackdrop: !0,
30
- disableEnforceFocus: !0,
31
- PaperComponent: b,
32
- onClose: (g) => {
33
- d(!1), i && i();
34
- },
35
- className: f,
36
- open: B,
37
- ...k,
38
- children: [
39
- /* @__PURE__ */ e(w, { id: "alert-dialog-title", children: C }),
40
- /* @__PURE__ */ e(E, { children: P || S }),
41
- /* @__PURE__ */ h(F, { children: [
42
- v || /* @__PURE__ */ e(o, {}),
43
- u === !0 ? /* @__PURE__ */ e(D, { onClick: (g) => {
44
- d(!1), c && c();
45
- }, children: t }) : /* @__PURE__ */ e(o, {}),
46
- s === !0 ? /* @__PURE__ */ e(D, { onClick: (g) => {
47
- d(!1), r && r();
48
- }, children: n }) : /* @__PURE__ */ e(o, {})
49
- ] })
50
- ]
51
- }
52
- );
53
- }, O = T(null), J = () => _(O), K = (l) => {
54
- const { component: i, componentProps: r = {}, children: c } = l, a = i || z, m = {
55
- open: !1,
56
- variant: "default",
57
- content: "",
58
- title: "",
59
- children: null
60
- }, [n, t] = A({ ...m, ...r }), C = () => {
61
- t(null), n.onCancel && n.onCancel();
62
- }, p = () => {
63
- t(null), n.onClose && n.onClose();
64
- }, f = () => {
65
- t(null), n.onConfirm && n.onConfirm();
66
- }, u = (s) => {
67
- t({
68
- ...n,
69
- ...s,
70
- ...s ? { open: !0 } : { open: !1 }
71
- });
72
- };
73
- return /* @__PURE__ */ h(o, { children: [
74
- /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
75
- a,
76
- {
77
- sx: { zIndex: 1e6 },
78
- ...n,
79
- onConfirm: () => f(),
80
- onClose: () => p(),
81
- onCancel: () => C()
82
- }
83
- ) }),
84
- /* @__PURE__ */ e(O.Provider, { value: u, children: c })
85
- ] });
86
- };
1
+ import {
2
+ DialogServiceProvider,
3
+ useDialog,
4
+ DialogServiceContext
5
+ } from "./DialogService";
6
+ import { default as default2 } from "./AppDialog";
87
7
  export {
88
- O as DialogServiceContext,
89
- K as DialogServiceProvider,
90
- z as default,
91
- J as useDialog
8
+ DialogServiceContext,
9
+ DialogServiceProvider,
10
+ default2 as default,
11
+ useDialog
92
12
  };
package/package.json CHANGED
@@ -1,123 +1,134 @@
1
1
  {
2
- "name": "@dashadmin/dash-dialog",
3
- "version": "1.3.24",
4
- "private": false,
5
- "main": "dist/index.js",
6
- "type": "module",
7
- "browserslist": {
8
- "production": [
9
- ">0.2%",
10
- "not dead",
11
- "not op_mini all"
12
- ],
13
- "development": [
14
- "last 1 chrome version",
15
- "last 1 firefox version",
16
- "last 1 safari version"
17
- ]
18
- },
19
- "dependencies": {
20
- "@emotion/react": "latest",
21
- "@emotion/styled": "latest",
22
- "@mui/material": "^7.3.10",
23
- "@rollup/plugin-alias": "latest",
24
- "@rollup/plugin-commonjs": "latest",
25
- "@rollup/plugin-node-resolve": "latest",
26
- "@rollup/plugin-replace": "latest",
27
- "@rollup/plugin-typescript": "latest",
28
- "query-string": "latest",
29
- "react-admin": "5.14.7",
30
- "react-custom-scrollbars-2": "latest",
31
- "react-draggable": "latest",
32
- "@achmadk/react-loading-overlay": "latest",
33
- "react-query": "latest",
34
- "react-redux": "latest",
35
- "react-router": "7.17.0",
36
- "react-router-dom": "7.17.0",
37
- "react-spinners": "latest",
38
- "react-toastify": "latest",
39
- "rollup-plugin-cleaner": "latest",
40
- "rollup-plugin-dts": "latest",
41
- "rollup-plugin-peer-deps-external": "latest",
42
- "rollup-plugin-svg": "latest"
43
- },
44
- "devDependencies": {
45
- "@babel/core": "latest",
46
- "@babel/preset-env": "latest",
47
- "@babel/preset-react": "latest",
48
- "@babel/preset-typescript": "latest",
49
- "@commitlint/config-conventional": "latest",
50
- "@types/node": "latest",
51
- "@types/react": "latest",
52
- "@types/react-dom": "latest",
53
- "@zerollup/ts-transform-paths": "latest",
54
- "babel-loader": "latest",
55
- "eslint": "latest",
56
- "eslint-config-airbnb": "latest",
57
- "eslint-config-airbnb-typescript": "latest",
58
- "eslint-config-prettier": "latest",
59
- "eslint-import-resolver-typescript": "latest",
60
- "eslint-plugin-html": "latest",
61
- "eslint-plugin-import": "latest",
62
- "eslint-plugin-jsdoc": "latest",
63
- "eslint-plugin-json": "latest",
64
- "eslint-plugin-jsx-a11y": "latest",
65
- "eslint-plugin-prettier": "latest",
66
- "eslint-plugin-react": "latest",
67
- "eslint-plugin-react-hooks": "latest",
68
- "query-string": "latest",
69
- "react-dom": "latest",
70
- "rollup": "latest",
71
- "rollup-plugin-copy-assets": "latest",
72
- "rollup-plugin-external-globals": "latest",
73
- "rollup-plugin-includepaths": "latest",
74
- "rollup-plugin-less": "latest",
75
- "@rollup/plugin-node-resolve": "latest",
76
- "rollup-plugin-postcss": "latest",
77
- "rollup-plugin-sourcemaps": "latest",
78
- "rollup-plugin-typescript2": "latest",
79
- "tsc-alias": "latest",
80
- "ttypescript": "latest",
81
- "typescript": "latest",
82
- "vite": "^5.2.0",
83
- "@dashadmin/dash-eslint": "1.3.24",
84
- "@dashadmin/dash-prettier": "1.3.24",
85
- "@dashadmin/dash-tsconfig": "1.3.24"
86
- },
87
- "peerDependencies": {
88
- "react": "latest",
89
- "@hello-pangea/dnd": "latest",
90
- "react-custom-scrollbars-2": "latest",
91
- "react-dom": "latest"
92
- },
93
- "eslintConfig": {
94
- "extends": "react-app"
95
- },
96
- "_todo_storybook": {
97
- "eslint-plugin-storybook": "latest"
98
- },
99
- "publishConfig": {
100
- "name": "@dashadmin/dash-dialog",
101
- "access": "public"
102
- },
103
- "files": [
104
- "dist"
105
- ],
106
- "exports": {
107
- ".": {
108
- "import": "./dist/index.js"
109
- },
110
- "./src/*": {
111
- "import": "./dist/*.js"
112
- }
113
- },
114
- "scripts": {
115
- "lint": "eslint --ext .ts,.tsx .",
116
- "format": "pnpm prettier --write . && pnpm format-check && pnpm lint",
117
- "lint:check": "pnpm prettier --check .",
118
- "lint:fix": "pnpm prettier --write .",
119
- "check-updates": "pnpm npm-check-updates",
120
- "updates-packages": "pnpm npm-check-updates -u",
121
- "build": "rm -rf dist && node ../dash-build/compile.mjs && vite build"
122
- }
123
- }
2
+ "name": "@dashadmin/dash-dialog",
3
+ "version": "1.3.26",
4
+ "main": "dist/index.js",
5
+ "type": "module",
6
+ "scripts": {
7
+ "lint": "eslint --ext .ts,.tsx .",
8
+ "format": "pnpm prettier --write . && pnpm format-check && pnpm lint",
9
+ "lint:check": "pnpm prettier --check .",
10
+ "lint:fix": "pnpm prettier --write .",
11
+ "check-updates": "pnpm npm-check-updates",
12
+ "updates-packages": "pnpm npm-check-updates -u",
13
+ "build": "tsup"
14
+ },
15
+ "browserslist": {
16
+ "production": [
17
+ ">0.2%",
18
+ "not dead",
19
+ "not op_mini all"
20
+ ],
21
+ "development": [
22
+ "last 1 chrome version",
23
+ "last 1 firefox version",
24
+ "last 1 safari version"
25
+ ]
26
+ },
27
+ "dependencies": {
28
+ "@emotion/react": "latest",
29
+ "@emotion/styled": "latest",
30
+ "@mui/material": "^7.3.10",
31
+ "@rollup/plugin-alias": "latest",
32
+ "@rollup/plugin-commonjs": "latest",
33
+ "@rollup/plugin-node-resolve": "latest",
34
+ "@rollup/plugin-replace": "latest",
35
+ "@rollup/plugin-typescript": "latest",
36
+ "query-string": "latest",
37
+ "react-admin": "5.14.6",
38
+ "react-custom-scrollbars-2": "latest",
39
+ "react-draggable": "latest",
40
+ "react-loading-overlay-ts": "latest",
41
+ "react-query": "latest",
42
+ "react-redux": "latest",
43
+ "react-router": "^7.9.6",
44
+ "react-router-dom": "^7.9.6",
45
+ "react-spinners": "latest",
46
+ "react-toastify": "latest",
47
+ "rollup-plugin-cleaner": "latest",
48
+ "rollup-plugin-dts": "latest",
49
+ "rollup-plugin-peer-deps-external": "latest",
50
+ "rollup-plugin-svg": "latest"
51
+ },
52
+ "devDependencies": {
53
+ "@babel/core": "latest",
54
+ "@babel/preset-env": "latest",
55
+ "@babel/preset-react": "latest",
56
+ "@babel/preset-typescript": "latest",
57
+ "@commitlint/config-conventional": "latest",
58
+ "@types/node": "latest",
59
+ "@types/react": "latest",
60
+ "@types/react-dom": "latest",
61
+ "@zerollup/ts-transform-paths": "latest",
62
+ "babel-loader": "latest",
63
+ "eslint": "latest",
64
+ "eslint-config-airbnb": "latest",
65
+ "eslint-config-airbnb-typescript": "latest",
66
+ "eslint-config-prettier": "latest",
67
+ "eslint-import-resolver-typescript": "latest",
68
+ "eslint-plugin-html": "latest",
69
+ "eslint-plugin-import": "latest",
70
+ "eslint-plugin-jsdoc": "latest",
71
+ "eslint-plugin-json": "latest",
72
+ "eslint-plugin-jsx-a11y": "latest",
73
+ "eslint-plugin-prettier": "latest",
74
+ "eslint-plugin-react": "latest",
75
+ "eslint-plugin-react-hooks": "latest",
76
+ "query-string": "latest",
77
+ "react-dom": "latest",
78
+ "rollup": "latest",
79
+ "rollup-plugin-copy-assets": "latest",
80
+ "rollup-plugin-external-globals": "latest",
81
+ "rollup-plugin-includepaths": "latest",
82
+ "rollup-plugin-less": "latest",
83
+ "rollup-plugin-node-resolve": "latest",
84
+ "rollup-plugin-postcss": "latest",
85
+ "rollup-plugin-sourcemaps": "latest",
86
+ "rollup-plugin-typescript2": "latest",
87
+ "tsc": "latest",
88
+ "tsc-alias": "latest",
89
+ "ttypescript": "latest",
90
+ "typescript": "latest",
91
+ "@dashadmin/dash-eslint": "workspace:*",
92
+ "@dashadmin/dash-prettier": "workspace:*",
93
+ "@dashadmin/dash-tsconfig": "workspace:*"
94
+ },
95
+ "peerDependencies": {
96
+ "react": "latest",
97
+ "react-beautiful-dnd": "latest",
98
+ "react-custom-scrollbars-2": "latest",
99
+ "react-dom": "latest"
100
+ },
101
+ "eslintConfig": {
102
+ "extends": "react-app"
103
+ },
104
+ "_todo_storybook": {
105
+ "eslint-plugin-storybook": "latest"
106
+ },
107
+ "module": "dist/index.js",
108
+ "types": "./src/index.ts",
109
+ "exports": {
110
+ ".": "./dist/index.js",
111
+ "./*": "./dist/*.js",
112
+ "./src/*": "./dist/*.js"
113
+ },
114
+ "publishConfig": {
115
+ "access": "public",
116
+ "registry": "https://registry.npmjs.org"
117
+ },
118
+ "files": [
119
+ "dist",
120
+ "src"
121
+ ],
122
+ "typesVersions": {
123
+ "*": {
124
+ "src/*": [
125
+ "src/*",
126
+ "src/*/index"
127
+ ],
128
+ "*": [
129
+ "src/*",
130
+ "src/*/index"
131
+ ]
132
+ }
133
+ }
134
+ }
package/src/AppDialog.tsx ADDED
@@ -0,0 +1,97 @@
1
+ import * as React from 'react';
2
+
3
+ import {
4
+ Dialog,
5
+ DialogTitle,
6
+ DialogContent,
7
+ DialogActions,
8
+ Button,
9
+ Paper,
10
+ PaperProps,
11
+ } from '@mui/material';
12
+
13
+ //import Draggable from 'react-draggable';
14
+ import IAppDialogProps from './IAppDialogProps';
15
+
16
+ //const DraggableInstance: any = Draggable;
17
+
18
+ const PaperComponent = (props: PaperProps) => {
19
+ /*return <DraggableInstance>
20
+ <Paper {...props} />
21
+ </DraggableInstance>*/
22
+ return <Paper {...props} />
23
+ };
24
+
25
+ export const AppDialog: React.FC<IAppDialogProps> = (props) => { const {
26
+ onClose,
27
+ onConfirm,
28
+ onCancel,
29
+ open,
30
+ closeText = <></>,
31
+ confirmText = <></>,
32
+ cancelText = <></>,
33
+ title,
34
+ variant,
35
+ className,
36
+ showCancelButton = false,
37
+ showConfirmButton = true,
38
+ dialogActions,
39
+ content,
40
+ children,
41
+ ...rest
42
+ } = props;
43
+
44
+ const [isModalOpen, setIsModalOpen] = React.useState(open);
45
+
46
+ React.useEffect(() => {
47
+ setIsModalOpen(open);
48
+ }, [open]);
49
+
50
+ const handleOnClose = (_e: any) => {
51
+ setIsModalOpen(false);
52
+ if (onClose) { onClose(); }
53
+ };
54
+
55
+ const handleOnCancel = (_e: any) => {
56
+ setIsModalOpen(false);
57
+ if (onCancel) { onCancel(); }
58
+ };
59
+
60
+ const handleOnConfirm = (_e: any) => {
61
+ setIsModalOpen(false);
62
+ if (onConfirm) { onConfirm(); }
63
+ };
64
+
65
+ return (
66
+ <Dialog
67
+ hideBackdrop
68
+ disableEnforceFocus
69
+ PaperComponent={PaperComponent}
70
+ onClose={handleOnClose}
71
+ className={className}
72
+ open={isModalOpen}
73
+ {...rest}
74
+ >
75
+ <DialogTitle id='alert-dialog-title'>{title}</DialogTitle>
76
+ <DialogContent>{children || content}</DialogContent>
77
+ <DialogActions>
78
+ {dialogActions || <></>}
79
+ {showCancelButton === true ? (
80
+ <Button onClick={handleOnCancel}>{cancelText}</Button>
81
+ ) : (
82
+ <></>
83
+ )}
84
+ {showConfirmButton === true ? (
85
+ <Button onClick={handleOnConfirm} /*autoFocus*/>
86
+ {confirmText}
87
+ </Button>
88
+ ) : (
89
+ <></>
90
+ )}
91
+ </DialogActions>
92
+ </Dialog>
93
+ );
94
+ };
95
+
96
+
97
+ export default AppDialog;
package/src/DialogService.tsx ADDED
@@ -0,0 +1,88 @@
1
+ import * as React from 'react';
2
+ import IAppDialogProps, { AppDialogOptions } from './IAppDialogProps';
3
+
4
+ import { AppDialog } from './AppDialog';
5
+ import {
6
+ FC,
7
+ PropsWithChildren,
8
+ createContext,
9
+ useContext,
10
+ useState,
11
+ } from 'react';
12
+ import { Portal } from '@mui/material';
13
+
14
+ export const DialogServiceContext =
15
+ createContext<(options: AppDialogOptions) => void>(null);
16
+
17
+ export const useDialog = () => useContext(DialogServiceContext);
18
+
19
+ export interface IDialogServiceProviderProps extends PropsWithChildren {
20
+ component?: FC<IAppDialogProps>;
21
+ componentProps?: Partial<IAppDialogProps>;
22
+ }
23
+ export const DialogServiceProvider = (props: IDialogServiceProviderProps) => {
24
+ const { component, componentProps = {}, children } = props;
25
+
26
+ const DialogComponent: FC<IAppDialogProps> = component || AppDialog;
27
+
28
+ const defaultState: IAppDialogProps = {
29
+ open: false,
30
+ variant: 'default',
31
+ content: '',
32
+ title: '',
33
+ children: null,
34
+ };
35
+
36
+ const [dialogState, setDialogState] = useState<IAppDialogProps>({...defaultState,...componentProps});
37
+
38
+ /*const openDialog = (options: IAppDialogProps) => {
39
+ setDialogState({...dialogState,...options});
40
+ };*/
41
+
42
+ const handleCancel = () => {
43
+ setDialogState(null);
44
+ if (dialogState.onCancel) {
45
+ dialogState.onCancel();
46
+ }
47
+ };
48
+
49
+ const handleClose = () => {
50
+ setDialogState(null);
51
+ if (dialogState.onClose) {
52
+ dialogState.onClose();
53
+ }
54
+ };
55
+
56
+ const handleConfirm = () => {
57
+ setDialogState(null);
58
+ if (dialogState.onConfirm) {
59
+ dialogState.onConfirm();
60
+ }
61
+ };
62
+
63
+ const exposedDialogHook = (options: AppDialogOptions) => {
64
+ setDialogState({
65
+ ...dialogState,
66
+ ...options,
67
+ ...(options ? { open: true } : { open: false }),
68
+ });
69
+ };
70
+
71
+ return <>
72
+ <Portal><DialogComponent sx={{ zIndex: 1000000 }} // Ensure modal is on top
73
+ //open={Boolean(dialogState)}
74
+ {...dialogState}
75
+ /*...(dialogState?.onSubmit && { onSubmit:() => handleSubmit() })*/
76
+ /*...(dialogState?.onClose && { onClose:() => handleClose() })*/
77
+ onConfirm={() => handleConfirm()}
78
+ onClose={() => handleClose()}
79
+ onCancel={() => handleCancel()}
80
+ />
81
+ </Portal>
82
+ <DialogServiceContext.Provider value={exposedDialogHook}>
83
+ {children}
84
+ </DialogServiceContext.Provider>
85
+ </>;
86
+ };
87
+
88
+ export default DialogServiceProvider;
package/src/IAppDialogProps.ts ADDED
@@ -0,0 +1,39 @@
1
+ import { ModalProps } from '@mui/material';
2
+ import { JSX, PropsWithChildren } from 'react';
3
+
4
+ export interface IAppDialogProps extends PropsWithChildren<Omit<ModalProps, 'content' | 'title'| 'children'>> { /** */
5
+ variant: 'default' | 'info' | 'success' | 'danger';
6
+ /** */
7
+ //onSubmit?: () => void;
8
+ /** */
9
+ onClose?: () => void;
10
+ /** */
11
+ onConfirm?: () => void;
12
+ /** */
13
+ onCancel?: () => void;
14
+ /** */
15
+ closeText?: React.ReactNode;
16
+ /** */
17
+ confirmText?: React.ReactNode;
18
+ /** */
19
+ cancelText?: React.ReactNode;
20
+ /** */
21
+ showCancelButton?: boolean;
22
+ /** */
23
+ showCloseButton?: boolean;
24
+ /** */
25
+ showConfirmButton?: boolean;
26
+ /** */
27
+ dialogActions?: JSX.Element;
28
+
29
+ /** */
30
+ title: string | JSX.Element;
31
+ /** */
32
+ content?: string | JSX.Element;
33
+ /** enable/disable sound (optional) */
34
+
35
+ sound?: boolean;
36
+ }
37
+ export type AppDialogOptions = Omit<IAppDialogProps, 'open' | 'children'>;
38
+
39
+ export default IAppDialogProps;
package/src/index.ts ADDED
@@ -0,0 +1,7 @@
1
+ export {
2
+ DialogServiceProvider,
3
+ useDialog,
4
+ DialogServiceContext,
5
+ } from './DialogService';
6
+
7
+ export { default } from "./AppDialog";