Web: Files: EmptyTrashDoalog: fix style, delete on enter

products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect } from "react";
+import styled from "styled-components";
 import { withRouter } from "react-router";
 import ModalDialogContainer from "../ModalDialogContainer";
 import Text from "@appserver/components/text";
@@ -7,6 +8,10 @@ import ModalDialog from "@appserver/components/modal-dialog";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
+const StyledModal = styled(ModalDialogContainer)`
+  max-width: 400px;
+`;
+
 const EmptyTrashDialogComponent = (props) => {
   const {
     visible,
@@ -17,6 +22,12 @@ const EmptyTrashDialogComponent = (props) => {
     emptyTrash,
   } = props;
 
+  useEffect(() => {
+    window.addEventListener("keydown", onKeyPress);
+
+    return () => window.removeEventListener("keydown", onKeyPress);
+  }, []);
+
   const onClose = () => setEmptyTrashDialogVisible(false);
 
   const onEmptyTrash = () => {
@@ -28,12 +39,14 @@ const EmptyTrashDialogComponent = (props) => {
     emptyTrash(translations);
   };
 
+  const onKeyPress = (e) => {
+    if (e.keyCode === 13) {
+      onEmptyTrash();
+    }
+  };
+
   return (
-    <ModalDialogContainer
+    <StyledModal isLoading={!tReady} visible={visible} onClose={onClose}>
-      isLoading={!tReady}
-      visible={visible}
-      onClose={onClose}
-    >
       <ModalDialog.Header>{t("DeleteForeverTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text>{t("DeleteForeverNote")}</Text>
@@ -56,7 +69,7 @@ const EmptyTrashDialogComponent = (props) => {
           isLoading={isLoading}
         />
       </ModalDialog.Footer>
-    </ModalDialogContainer>
+    </StyledModal>
   );
 };