@imposium-hub/components 2.5.10-14 → 2.5.10-16

package/src/components/confirm-modal/ConfirmModal.tsx

@@ -1,31 +1,81 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useHotkeys } from 'react-hotkeys-hook';
 import Modal from '../modal/Modal';
 import Button from '../button/Button';
 import { confirm as copy } from '../../constants/copy';
 import Section from '../section/Section';
 
-interface IConfirmModalProps {
-    onClose: (e) => void;
-    onYes: (e) => void;
-    onNo: (e) => void;
+export interface IConfirmModalProps {
+    onYes: () => void;
+    onNo?: () => void;
     title: string;
     yesLabel?: string;
     noLabel?: string;
     showCancel?: boolean;
 }
 
-export const ConfirmModal = (props: IConfirmModalProps) => {
-    useHotkeys('enter', props.onYes, { enableOnFormTags: true });
+export const ConfirmModal = () => {
+    const [props, setProps] = useState<IConfirmModalProps>(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const onOpen = (event) => {
+        setProps({
+            ...event.detail
+        });
+        setIsOpen(true);
+    };
+
+    const onYesHandler = () => {
+        props.onYes();
+        setIsOpen(false);
+    };
+
+    const onYes = useCallback(() => onYesHandler(), [isOpen]);
+
+    const onNo = useCallback(() => {
+        if (props.onNo) {
+            props.onNo();
+            setIsOpen(false);
+        } else {
+            setIsOpen(false);
+        }
+    }, [isOpen]);
+
+    const onKeyDown = useCallback(
+        (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onYesHandler();
+            }
+        },
+        [isOpen]
+    );
+
+    useEffect(() => {
+        window.addEventListener('openconfirmmodal', onOpen);
+        return () => {
+            window.removeEventListener('openconfirmmodal', onOpen);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keypress', onKeyDown);
+        } else {
+            document.removeEventListener('keypress', onKeyDown);
+        }
+        return () => {
+            document.removeEventListener('keypress', onKeyDown);
+        };
+    }, [isOpen, onKeyDown]);
 
     const { cancel, yes, no } = copy;
     const noLabel = props?.noLabel ? props.noLabel : no;
     const yesLabel = props?.yesLabel ? props.yesLabel : yes;
 
-    const modal = (
+    const modal = isOpen && (
         <Modal
-            onRequestClose={props.onClose}
+            onRequestClose={onNo}
             wrapperStyle={{
                 left: '0px',
                 width: '100%'
@@ -43,20 +93,20 @@ export const ConfirmModal = (props: IConfirmModalProps) => {
                     <div className='confirm-buttons'>
                         {props.showCancel ? (
                             <Button
-                                onClick={props.onClose}
+                                onClick={onNo}
                                 size='large'
                                 color='default'>
                                 {cancel}
                             </Button>
                         ) : null}
                         <Button
-                            onClick={props.onNo}
+                            onClick={onNo}
                             size='large'
                             color='default'>
                             {noLabel}
                         </Button>
                         <Button
-                            onClick={props.onYes}
+                            onClick={onYes}
                             size='large'
                             style='bold'
                             color='primary'>

package/src/index.ts

@@ -158,7 +158,7 @@ import ContextMenuItem from './components/context-menu/ContextMenuItem';
 import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
 import CopyPropIdButton from './components/copy-prop-id-button/CopyPropIdButton';
 import Submenu from './components/context-menu/SubMenu';
-import { ConfirmModal } from './components/confirm-modal/ConfirmModal';
+import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
 
 export {
     AppWrapper,
@@ -313,5 +313,6 @@ export {
     ContextMenuTrigger,
     Submenu,
     CopyPropIdButton,
-    ConfirmModal
+    ConfirmModal,
+    IConfirmModalProps
 };

package/src/redux/actions/asset-list.ts

@@ -78,22 +78,18 @@ export const getAssets = (api: IImposiumAPI, storyId: string): any => {
 
 export const deleteAssets = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to delete ${ids.length} assets?`)) {
-            return new Promise<boolean>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.deleteAssets(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve(true);
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject(false);
-                    });
-            });
-        } else {
-            return Promise.resolve(false);
-        }
+        return new Promise<boolean>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.deleteAssets(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    resolve(true);
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject(false);
+                });
+        });
     };
 };
 
@@ -194,20 +190,18 @@ export const deleteAssetTags = (api: IImposiumAPI, id: string): any => {
 
 export const deleteAssetsTags = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to remove all tags from ${ids.length} assets?`)) {
-            return new Promise<void>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.deleteAssetsTags(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve();
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject();
-                    });
-            });
-        }
+        return new Promise<void>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.deleteAssetsTags(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    resolve();
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject();
+                });
+        });
     };
 };
 
@@ -245,20 +239,18 @@ export const updateAssetStory = (api: IImposiumAPI, id: string, storyId: string)
 
 export const decoupleAssets = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to decouple ${ids.length} assets?`)) {
-            return new Promise<void>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.decoupleAssets(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve();
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject();
-                    });
-            });
-        }
+        return new Promise<void>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.decoupleAssets(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    resolve();
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject();
+                });
+        });
     };
 };