@elementor/editor-notifications 1.0.1 → 1.2.0
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/CHANGELOG.md +23 -0
- package/dist/index.js +81 -32
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +79 -30
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/notifications.tsx +44 -34
- package/src/hooks/use-enqueue-notifications.tsx +43 -0
- package/src/sync/get-editing-panel-width.ts +3 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 1.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 9d56410: Migrated snackbar content component from MUI to EUI
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- ca016cc: Elementor ui update to version 1.34.2, elementor icons update to 1.40.1
|
|
12
|
+
- Updated dependencies [ca016cc]
|
|
13
|
+
- @elementor/editor@0.19.1
|
|
14
|
+
|
|
15
|
+
## 1.1.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- 10cbbe9: update `@elementor/ui` version
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- Updated dependencies [10cbbe9]
|
|
24
|
+
- @elementor/editor@0.19.0
|
|
25
|
+
|
|
3
26
|
## 1.0.1
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
package/dist/index.js
CHANGED
|
@@ -38,9 +38,17 @@ module.exports = __toCommonJS(index_exports);
|
|
|
38
38
|
|
|
39
39
|
// src/init.ts
|
|
40
40
|
var import_editor = require("@elementor/editor");
|
|
41
|
-
var
|
|
41
|
+
var import_store4 = require("@elementor/store");
|
|
42
42
|
|
|
43
43
|
// src/components/notifications.tsx
|
|
44
|
+
var React2 = __toESM(require("react"));
|
|
45
|
+
var import_react2 = require("react");
|
|
46
|
+
var import_notistack2 = require("notistack");
|
|
47
|
+
var import_store3 = require("@elementor/store");
|
|
48
|
+
var import_ui2 = require("@elementor/ui");
|
|
49
|
+
|
|
50
|
+
// src/hooks/use-enqueue-notifications.tsx
|
|
51
|
+
var import_react = require("react");
|
|
44
52
|
var React = __toESM(require("react"));
|
|
45
53
|
var import_notistack = require("notistack");
|
|
46
54
|
var import_store2 = require("@elementor/store");
|
|
@@ -70,60 +78,101 @@ var notificationsSlice = (0, import_store.__createSlice)({
|
|
|
70
78
|
});
|
|
71
79
|
var { notifyAction, clearAction } = notificationsSlice.actions;
|
|
72
80
|
|
|
73
|
-
// src/
|
|
74
|
-
var
|
|
81
|
+
// src/hooks/use-enqueue-notifications.tsx
|
|
82
|
+
var useEnqueueNotification = (notifications) => {
|
|
75
83
|
const { enqueueSnackbar } = (0, import_notistack.useSnackbar)();
|
|
76
|
-
const notifications = (0, import_store2.__useSelector)((state) => state.notifications);
|
|
77
84
|
const dispatch = (0, import_store2.__useDispatch)();
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
dispatch(clearAction({ id: key }));
|
|
85
|
+
(0, import_react.useEffect)(() => {
|
|
86
|
+
Object.values(notifications).forEach((notification) => {
|
|
87
|
+
const Action = () => /* @__PURE__ */ React.createElement(import_react.Fragment, { key: notification.id }, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(import_ui.Button, { key: `${index}`, ...additionalAction })), /* @__PURE__ */ React.createElement(
|
|
88
|
+
import_ui.CloseButton,
|
|
89
|
+
{
|
|
90
|
+
"aria-label": "close",
|
|
91
|
+
color: "inherit",
|
|
92
|
+
onClick: () => {
|
|
93
|
+
(0, import_notistack.closeSnackbar)(notification.id);
|
|
94
|
+
dispatch(clearAction({ id: notification.id }));
|
|
95
|
+
}
|
|
90
96
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
));
|
|
98
|
+
enqueueSnackbar(notification.message, {
|
|
99
|
+
persist: true,
|
|
100
|
+
variant: notification.type,
|
|
101
|
+
key: notification.id,
|
|
102
|
+
onClose: () => dispatch(clearAction({ id: notification.id })),
|
|
103
|
+
preventDuplicate: true,
|
|
104
|
+
action: /* @__PURE__ */ React.createElement(Action, null)
|
|
105
|
+
});
|
|
99
106
|
});
|
|
100
|
-
});
|
|
107
|
+
}, [notifications, enqueueSnackbar, dispatch]);
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
// src/sync/get-editing-panel-width.ts
|
|
111
|
+
function getEditingPanelWidth() {
|
|
112
|
+
return document.querySelector(".elementor-panel")?.clientWidth || 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// src/components/notifications.tsx
|
|
116
|
+
var DefaultCustomSnackbar = (0, import_react2.forwardRef)((props, ref) => {
|
|
117
|
+
const filteredProps = getFilteredSnackbarProps(props);
|
|
118
|
+
const panelWidth = getEditingPanelWidth();
|
|
119
|
+
return /* @__PURE__ */ React2.createElement(import_ui2.ThemeProvider, { palette: "unstable" }, /* @__PURE__ */ React2.createElement(
|
|
120
|
+
import_ui2.SnackbarContent,
|
|
121
|
+
{
|
|
122
|
+
ref,
|
|
123
|
+
...filteredProps,
|
|
124
|
+
sx: {
|
|
125
|
+
"&.MuiPaper-root": { minWidth: "max-content" },
|
|
126
|
+
ml: panelWidth + "px"
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
));
|
|
130
|
+
});
|
|
131
|
+
var muiToEuiMapper = {
|
|
132
|
+
default: DefaultCustomSnackbar
|
|
133
|
+
};
|
|
134
|
+
var Handler = () => {
|
|
135
|
+
const notifications = (0, import_store3.__useSelector)((state) => state.notifications);
|
|
136
|
+
useEnqueueNotification(notifications);
|
|
101
137
|
return null;
|
|
102
138
|
};
|
|
103
139
|
var Wrapper = () => {
|
|
104
|
-
return /* @__PURE__ */
|
|
105
|
-
|
|
140
|
+
return /* @__PURE__ */ React2.createElement(
|
|
141
|
+
import_notistack2.SnackbarProvider,
|
|
106
142
|
{
|
|
107
143
|
maxSnack: 3,
|
|
108
144
|
autoHideDuration: 8e3,
|
|
109
|
-
anchorOrigin: { horizontal: "center", vertical: "bottom" }
|
|
145
|
+
anchorOrigin: { horizontal: "center", vertical: "bottom" },
|
|
146
|
+
Components: muiToEuiMapper
|
|
110
147
|
},
|
|
111
|
-
/* @__PURE__ */
|
|
148
|
+
/* @__PURE__ */ React2.createElement(Handler, null)
|
|
112
149
|
);
|
|
113
150
|
};
|
|
114
151
|
function notify(notification) {
|
|
115
|
-
const store = (0,
|
|
152
|
+
const store = (0, import_store3.__getStore)();
|
|
116
153
|
store?.dispatch(notifyAction(notification));
|
|
117
154
|
}
|
|
118
155
|
function NotifyReact(notification) {
|
|
119
|
-
const dispatch = (0,
|
|
156
|
+
const dispatch = (0, import_store3.__useDispatch)();
|
|
120
157
|
dispatch(notifyAction(notification));
|
|
121
158
|
}
|
|
159
|
+
function getFilteredSnackbarProps(props) {
|
|
160
|
+
const forbiddenProps = ["autoHideDuration", "persist", "hideIconVariant", "iconVariant", "anchorOrigin"];
|
|
161
|
+
return Object.entries(props).reduce(
|
|
162
|
+
(filteredProps, [key, value]) => {
|
|
163
|
+
if (!forbiddenProps.includes(key)) {
|
|
164
|
+
filteredProps[key] = value;
|
|
165
|
+
}
|
|
166
|
+
return filteredProps;
|
|
167
|
+
},
|
|
168
|
+
{}
|
|
169
|
+
);
|
|
170
|
+
}
|
|
122
171
|
var notifications_default = Wrapper;
|
|
123
172
|
|
|
124
173
|
// src/init.ts
|
|
125
174
|
function init() {
|
|
126
|
-
(0,
|
|
175
|
+
(0, import_store4.__registerSlice)(notificationsSlice);
|
|
127
176
|
(0, import_editor.injectIntoTop)({
|
|
128
177
|
id: "notifications",
|
|
129
178
|
component: notifications_default
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/notifications.tsx","../src/slice.ts"],"sourcesContent":["export { init } from './init';\n\nexport { type NotificationData } from './types';\nexport { NotifyReact, notify } from './components/notifications';\n","import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["export { init } from './init';\n\nexport { type NotificationData } from './types';\nexport { NotifyReact, notify } from './components/notifications';\n","import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { SnackbarProvider } from 'notistack';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ 8000 }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { Notifications } from '../types';\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst Action = () => (\n\t\t\t\t<Fragment key={ notification.id }>\n\t\t\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t\t\t\t} }\n\t\t\t\t\t></CloseButton>\n\t\t\t\t</Fragment>\n\t\t\t);\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tpersist: true,\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction: <Action />,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["import_store","React","import_react","import_notistack","import_store","import_ui","import_store","createSlice","useDispatch","useSelector","getStore","useDispatch","registerSlice"]}
|
package/dist/index.mjs
CHANGED
|
@@ -3,9 +3,17 @@ import { injectIntoTop } from "@elementor/editor";
|
|
|
3
3
|
import { __registerSlice as registerSlice } from "@elementor/store";
|
|
4
4
|
|
|
5
5
|
// src/components/notifications.tsx
|
|
6
|
+
import * as React2 from "react";
|
|
7
|
+
import { forwardRef } from "react";
|
|
8
|
+
import { SnackbarProvider } from "notistack";
|
|
9
|
+
import { __getStore as getStore, __useDispatch as useDispatch2, __useSelector as useSelector } from "@elementor/store";
|
|
10
|
+
import { SnackbarContent, ThemeProvider } from "@elementor/ui";
|
|
11
|
+
|
|
12
|
+
// src/hooks/use-enqueue-notifications.tsx
|
|
13
|
+
import { Fragment, useEffect } from "react";
|
|
6
14
|
import * as React from "react";
|
|
7
|
-
import { closeSnackbar,
|
|
8
|
-
import {
|
|
15
|
+
import { closeSnackbar, useSnackbar } from "notistack";
|
|
16
|
+
import { __useDispatch as useDispatch } from "@elementor/store";
|
|
9
17
|
import { Button, CloseButton } from "@elementor/ui";
|
|
10
18
|
|
|
11
19
|
// src/slice.ts
|
|
@@ -32,45 +40,74 @@ var notificationsSlice = createSlice({
|
|
|
32
40
|
});
|
|
33
41
|
var { notifyAction, clearAction } = notificationsSlice.actions;
|
|
34
42
|
|
|
35
|
-
// src/
|
|
36
|
-
var
|
|
43
|
+
// src/hooks/use-enqueue-notifications.tsx
|
|
44
|
+
var useEnqueueNotification = (notifications) => {
|
|
37
45
|
const { enqueueSnackbar } = useSnackbar();
|
|
38
|
-
const notifications = useSelector((state) => state.notifications);
|
|
39
46
|
const dispatch = useDispatch();
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
dispatch(clearAction({ id: key }));
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
Object.values(notifications).forEach((notification) => {
|
|
49
|
+
const Action = () => /* @__PURE__ */ React.createElement(Fragment, { key: notification.id }, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(Button, { key: `${index}`, ...additionalAction })), /* @__PURE__ */ React.createElement(
|
|
50
|
+
CloseButton,
|
|
51
|
+
{
|
|
52
|
+
"aria-label": "close",
|
|
53
|
+
color: "inherit",
|
|
54
|
+
onClick: () => {
|
|
55
|
+
closeSnackbar(notification.id);
|
|
56
|
+
dispatch(clearAction({ id: notification.id }));
|
|
57
|
+
}
|
|
52
58
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
));
|
|
60
|
+
enqueueSnackbar(notification.message, {
|
|
61
|
+
persist: true,
|
|
62
|
+
variant: notification.type,
|
|
63
|
+
key: notification.id,
|
|
64
|
+
onClose: () => dispatch(clearAction({ id: notification.id })),
|
|
65
|
+
preventDuplicate: true,
|
|
66
|
+
action: /* @__PURE__ */ React.createElement(Action, null)
|
|
67
|
+
});
|
|
61
68
|
});
|
|
62
|
-
});
|
|
69
|
+
}, [notifications, enqueueSnackbar, dispatch]);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
// src/sync/get-editing-panel-width.ts
|
|
73
|
+
function getEditingPanelWidth() {
|
|
74
|
+
return document.querySelector(".elementor-panel")?.clientWidth || 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// src/components/notifications.tsx
|
|
78
|
+
var DefaultCustomSnackbar = forwardRef((props, ref) => {
|
|
79
|
+
const filteredProps = getFilteredSnackbarProps(props);
|
|
80
|
+
const panelWidth = getEditingPanelWidth();
|
|
81
|
+
return /* @__PURE__ */ React2.createElement(ThemeProvider, { palette: "unstable" }, /* @__PURE__ */ React2.createElement(
|
|
82
|
+
SnackbarContent,
|
|
83
|
+
{
|
|
84
|
+
ref,
|
|
85
|
+
...filteredProps,
|
|
86
|
+
sx: {
|
|
87
|
+
"&.MuiPaper-root": { minWidth: "max-content" },
|
|
88
|
+
ml: panelWidth + "px"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
));
|
|
92
|
+
});
|
|
93
|
+
var muiToEuiMapper = {
|
|
94
|
+
default: DefaultCustomSnackbar
|
|
95
|
+
};
|
|
96
|
+
var Handler = () => {
|
|
97
|
+
const notifications = useSelector((state) => state.notifications);
|
|
98
|
+
useEnqueueNotification(notifications);
|
|
63
99
|
return null;
|
|
64
100
|
};
|
|
65
101
|
var Wrapper = () => {
|
|
66
|
-
return /* @__PURE__ */
|
|
102
|
+
return /* @__PURE__ */ React2.createElement(
|
|
67
103
|
SnackbarProvider,
|
|
68
104
|
{
|
|
69
105
|
maxSnack: 3,
|
|
70
106
|
autoHideDuration: 8e3,
|
|
71
|
-
anchorOrigin: { horizontal: "center", vertical: "bottom" }
|
|
107
|
+
anchorOrigin: { horizontal: "center", vertical: "bottom" },
|
|
108
|
+
Components: muiToEuiMapper
|
|
72
109
|
},
|
|
73
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ React2.createElement(Handler, null)
|
|
74
111
|
);
|
|
75
112
|
};
|
|
76
113
|
function notify(notification) {
|
|
@@ -78,9 +115,21 @@ function notify(notification) {
|
|
|
78
115
|
store?.dispatch(notifyAction(notification));
|
|
79
116
|
}
|
|
80
117
|
function NotifyReact(notification) {
|
|
81
|
-
const dispatch =
|
|
118
|
+
const dispatch = useDispatch2();
|
|
82
119
|
dispatch(notifyAction(notification));
|
|
83
120
|
}
|
|
121
|
+
function getFilteredSnackbarProps(props) {
|
|
122
|
+
const forbiddenProps = ["autoHideDuration", "persist", "hideIconVariant", "iconVariant", "anchorOrigin"];
|
|
123
|
+
return Object.entries(props).reduce(
|
|
124
|
+
(filteredProps, [key, value]) => {
|
|
125
|
+
if (!forbiddenProps.includes(key)) {
|
|
126
|
+
filteredProps[key] = value;
|
|
127
|
+
}
|
|
128
|
+
return filteredProps;
|
|
129
|
+
},
|
|
130
|
+
{}
|
|
131
|
+
);
|
|
132
|
+
}
|
|
84
133
|
var notifications_default = Wrapper;
|
|
85
134
|
|
|
86
135
|
// src/init.ts
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/init.ts","../src/components/notifications.tsx","../src/slice.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { SnackbarProvider } from 'notistack';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ 8000 }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { Notifications } from '../types';\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst Action = () => (\n\t\t\t\t<Fragment key={ notification.id }>\n\t\t\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t\t\t\t} }\n\t\t\t\t\t></CloseButton>\n\t\t\t\t</Fragment>\n\t\t\t);\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tpersist: true,\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction: <Action />,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,qBAAqB;;;ACDjD,YAAYA,YAAW;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,cAAc,UAAU,iBAAiBC,cAAa,iBAAiB,mBAAmB;AACnG,SAAS,iBAAqC,qBAAqB;;;ACJnE,SAAS,UAAU,iBAAiB;AACpC,YAAY,WAAW;AACvB,SAAS,eAAe,mBAAqC;AAC7D,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,QAAQ,mBAAmB;;;ACJpC,SAAS,iBAAiB,mBAAmB;AAItC,IAAM,qBAAqB,YAAa;AAAA,EAC9C,MAAM;AAAA,EACN,cAAc,CAAC;AAAA,EACf,UAAU;AAAA,IACT,cAAc,CAAE,OAAO,WAAY;AAClC,YAAM,WAAW,EAAE,GAAG,MAAM;AAC5B,UAAK,CAAE,SAAU,OAAO,QAAQ,EAAG,GAAI;AACtC,iBAAU,OAAO,QAAQ,EAAG,IAAI,OAAO;AAAA,MACxC;AAEA,aAAO;AAAA,IACR;AAAA,IACA,aAAa,CAAE,OAAO,WAAY;AACjC,YAAM,WAAW,EAAE,GAAG,MAAM;AAC5B,UAAK,SAAU,OAAO,QAAQ,EAAG,GAAI;AAEpC,eAAO,SAAU,OAAO,QAAQ,EAAG;AAAA,MACpC;AAEA,aAAO;AAAA,IACR;AAAA,EACD;AACD,CAAE;AAEK,IAAM,EAAE,cAAc,YAAY,IAAI,mBAAmB;;;ADnBzD,IAAM,yBAAyB,CAAE,kBAAkC;AACzE,QAAM,EAAE,gBAAgB,IAAI,YAAY;AACxC,QAAM,WAAW,YAAY;AAE7B,YAAW,MAAM;AAChB,WAAO,OAAQ,aAAc,EAAE,QAAS,CAAE,iBAAkB;AAC3D,YAAM,SAAS,MACd,oCAAC,YAAS,KAAM,aAAa,MAC1B,aAAa,uBAAuB,IAAK,CAAE,kBAAkB,UAC9D,oCAAC,UAAO,KAAM,GAAI,KAAM,IAAO,GAAG,kBAAmB,CACpD,GAEF;AAAA,QAAC;AAAA;AAAA,UACA,cAAW;AAAA,UACX,OAAM;AAAA,UACN,SAAU,MAAM;AACf,0BAAe,aAAa,EAAG;AAC/B,qBAAU,YAAa,EAAE,IAAI,aAAa,GAAG,CAAE,CAAE;AAAA,UAClD;AAAA;AAAA,MACA,CACF;AAGD,sBAAiB,aAAa,SAAS;AAAA,QACtC,SAAS;AAAA,QACT,SAAS,aAAa;AAAA,QACtB,KAAK,aAAa;AAAA,QAClB,SAAS,MAAM,SAAU,YAAa,EAAE,IAAI,aAAa,GAAG,CAAE,CAAE;AAAA,QAChE,kBAAkB;AAAA,QAClB,QAAQ,oCAAC,YAAO;AAAA,MACjB,CAAE;AAAA,IACH,CAAE;AAAA,EACH,GAAG,CAAE,eAAe,iBAAiB,QAAS,CAAE;AACjD;;;AE1CO,SAAS,uBAAuB;AACtC,SAAO,SAAS,cAAe,kBAAmB,GAAG,eAAe;AACrE;;;AHSA,IAAM,wBAAwB,WAAY,CAAE,OAAsB,QAAS;AAC1E,QAAM,gBAAgB,yBAA0B,KAAM;AACtD,QAAM,aAAa,qBAAqB;AAExC,SACC,qCAAC,iBAAc,SAAQ,cACtB;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACE,GAAG;AAAA,MACL,IAAK;AAAA,QACJ,mBAAmB,EAAE,UAAU,cAAc;AAAA,QAC7C,IAAI,aAAa;AAAA,MAClB;AAAA;AAAA,EACD,CACD;AAEF,CAAE;AAEF,IAAM,iBAAiB;AAAA,EACtB,SAAS;AACV;AAEA,IAAM,UAAU,MAAM;AACrB,QAAM,gBAAgB,YAAa,CAAE,UAA6C,MAAM,aAAc;AAEtG,yBAAwB,aAAc;AAEtC,SAAO;AACR;AAEA,IAAM,UAAU,MAAM;AACrB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,kBAAmB;AAAA,MACnB,cAAe,EAAE,YAAY,UAAU,UAAU,SAAS;AAAA,MAC1D,YAAa;AAAA;AAAA,IAEb,qCAAC,aAAQ;AAAA,EACV;AAEF;AAMO,SAAS,OAAQ,cAAiC;AACxD,QAAM,QAAQ,SAAS;AAEvB,SAAO,SAAU,aAAc,YAAa,CAAE;AAC/C;AAMO,SAAS,YAAa,cAAiC;AAC7D,QAAM,WAAWC,aAAY;AAC7B,WAAU,aAAc,YAAa,CAAE;AACxC;AAEA,SAAS,yBAA0B,OAAuB;AACzD,QAAM,iBAAiB,CAAE,oBAAoB,WAAW,mBAAmB,eAAe,cAAe;AAEzG,SAAO,OAAO,QAAS,KAAM,EAAE;AAAA,IAC9B,CAAE,eAAe,CAAE,KAAK,KAAM,MAAO;AACpC,UAAK,CAAE,eAAe,SAAU,GAAI,GAAI;AACvC,sBAAe,GAAI,IAAI;AAAA,MACxB;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACD;AAEA,IAAO,wBAAQ;;;ADlFR,SAAS,OAAO;AACtB,gBAAe,kBAAmB;AAClC,gBAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;","names":["React","useDispatch","useDispatch"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-notifications",
|
|
3
3
|
"description": "Notifications manager for the Elementor editor",
|
|
4
|
-
"version": "1.0
|
|
4
|
+
"version": "1.2.0",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Elementor Team",
|
|
7
7
|
"homepage": "https://elementor.com/",
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@elementor/editor": "0.
|
|
43
|
+
"@elementor/editor": "0.19.1",
|
|
44
44
|
"@elementor/store": "0.9.0",
|
|
45
|
-
"@elementor/ui": "1.
|
|
45
|
+
"@elementor/ui": "1.34.2",
|
|
46
46
|
"notistack": "^3.0.2"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
@@ -1,46 +1,40 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { SnackbarProvider } from 'notistack';
|
|
3
4
|
import { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
|
|
4
|
-
import {
|
|
5
|
+
import { SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';
|
|
5
6
|
|
|
6
|
-
import {
|
|
7
|
+
import { useEnqueueNotification } from '../hooks/use-enqueue-notifications';
|
|
8
|
+
import { notifyAction } from '../slice';
|
|
9
|
+
import { getEditingPanelWidth } from '../sync/get-editing-panel-width';
|
|
7
10
|
import { type NotificationData, type Notifications } from '../types';
|
|
8
11
|
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const dispatch = useDispatch();
|
|
12
|
+
const DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {
|
|
13
|
+
const filteredProps = getFilteredSnackbarProps( props );
|
|
14
|
+
const panelWidth = getEditingPanelWidth();
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
return (
|
|
17
|
+
<ThemeProvider palette="unstable">
|
|
18
|
+
<SnackbarContent
|
|
19
|
+
ref={ ref }
|
|
20
|
+
{ ...filteredProps }
|
|
21
|
+
sx={ {
|
|
22
|
+
'&.MuiPaper-root': { minWidth: 'max-content' },
|
|
23
|
+
ml: panelWidth + 'px',
|
|
24
|
+
} }
|
|
25
|
+
/>
|
|
26
|
+
</ThemeProvider>
|
|
27
|
+
);
|
|
28
|
+
} );
|
|
17
29
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
{ notification.additionalActionProps?.map( ( additionalAction, index ) => (
|
|
22
|
-
<Button key={ index } { ...additionalAction } />
|
|
23
|
-
) ) }
|
|
30
|
+
const muiToEuiMapper = {
|
|
31
|
+
default: DefaultCustomSnackbar,
|
|
32
|
+
};
|
|
24
33
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
color="inherit"
|
|
28
|
-
onClick={ () => {
|
|
29
|
-
closeSnackbar( key );
|
|
30
|
-
dispatch( clearAction( { id: key } ) );
|
|
31
|
-
} }
|
|
32
|
-
></CloseButton>
|
|
33
|
-
</>
|
|
34
|
-
);
|
|
34
|
+
const Handler = () => {
|
|
35
|
+
const notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );
|
|
35
36
|
|
|
36
|
-
|
|
37
|
-
variant: notification.type as VariantType,
|
|
38
|
-
key: notification.id,
|
|
39
|
-
onClose: () => dispatch( clearAction( { id: notification.id } ) ),
|
|
40
|
-
preventDuplicate: true,
|
|
41
|
-
action,
|
|
42
|
-
} );
|
|
43
|
-
} );
|
|
37
|
+
useEnqueueNotification( notifications );
|
|
44
38
|
|
|
45
39
|
return null;
|
|
46
40
|
};
|
|
@@ -51,6 +45,7 @@ const Wrapper = () => {
|
|
|
51
45
|
maxSnack={ 3 }
|
|
52
46
|
autoHideDuration={ 8000 }
|
|
53
47
|
anchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }
|
|
48
|
+
Components={ muiToEuiMapper }
|
|
54
49
|
>
|
|
55
50
|
<Handler />
|
|
56
51
|
</SnackbarProvider>
|
|
@@ -76,4 +71,19 @@ export function NotifyReact( notification: NotificationData ) {
|
|
|
76
71
|
dispatch( notifyAction( notification ) );
|
|
77
72
|
}
|
|
78
73
|
|
|
74
|
+
function getFilteredSnackbarProps( props: SnackbarProps ) {
|
|
75
|
+
const forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];
|
|
76
|
+
|
|
77
|
+
return Object.entries( props ).reduce(
|
|
78
|
+
( filteredProps, [ key, value ] ) => {
|
|
79
|
+
if ( ! forbiddenProps.includes( key ) ) {
|
|
80
|
+
filteredProps[ key ] = value;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return filteredProps;
|
|
84
|
+
},
|
|
85
|
+
{} as Record< string, unknown >
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
|
|
79
89
|
export default Wrapper;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Fragment, useEffect } from 'react';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { closeSnackbar, useSnackbar, type VariantType } from 'notistack';
|
|
4
|
+
import { __useDispatch as useDispatch } from '@elementor/store';
|
|
5
|
+
import { Button, CloseButton } from '@elementor/ui';
|
|
6
|
+
|
|
7
|
+
import { clearAction } from '../slice';
|
|
8
|
+
import type { Notifications } from '../types';
|
|
9
|
+
|
|
10
|
+
export const useEnqueueNotification = ( notifications: Notifications ) => {
|
|
11
|
+
const { enqueueSnackbar } = useSnackbar();
|
|
12
|
+
const dispatch = useDispatch();
|
|
13
|
+
|
|
14
|
+
useEffect( () => {
|
|
15
|
+
Object.values( notifications ).forEach( ( notification ) => {
|
|
16
|
+
const Action = () => (
|
|
17
|
+
<Fragment key={ notification.id }>
|
|
18
|
+
{ notification.additionalActionProps?.map( ( additionalAction, index ) => (
|
|
19
|
+
<Button key={ `${ index }` } { ...additionalAction } />
|
|
20
|
+
) ) }
|
|
21
|
+
|
|
22
|
+
<CloseButton
|
|
23
|
+
aria-label="close"
|
|
24
|
+
color="inherit"
|
|
25
|
+
onClick={ () => {
|
|
26
|
+
closeSnackbar( notification.id );
|
|
27
|
+
dispatch( clearAction( { id: notification.id } ) );
|
|
28
|
+
} }
|
|
29
|
+
></CloseButton>
|
|
30
|
+
</Fragment>
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
enqueueSnackbar( notification.message, {
|
|
34
|
+
persist: true,
|
|
35
|
+
variant: notification.type as VariantType,
|
|
36
|
+
key: notification.id,
|
|
37
|
+
onClose: () => dispatch( clearAction( { id: notification.id } ) ),
|
|
38
|
+
preventDuplicate: true,
|
|
39
|
+
action: <Action />,
|
|
40
|
+
} );
|
|
41
|
+
} );
|
|
42
|
+
}, [ notifications, enqueueSnackbar, dispatch ] );
|
|
43
|
+
};
|