feat(frontend/api): tv request modal (no status. only request)

src/components/Common/Modal/index.tsx

@@ -1,16 +1,18 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Button, { ButtonType } from '../Button';
 import { useTransition, animated } from 'react-spring';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import LoadingSpinner from '../LoadingSpinner';
+import useClickOutside from '../../../hooks/useClickOutside';
 
 interface ModalProps {
   title?: string;
-  onCancel?: (e: MouseEvent<HTMLElement>) => void;
+  onCancel?: (e?: MouseEvent<HTMLElement>) => void;
   onOk?: (e: MouseEvent<HTMLButtonElement>) => void;
   cancelText?: string;
   okText?: string;
+  okDisabled?: boolean;
   cancelButtonType?: ButtonType;
   okButtonType?: ButtonType;
   visible?: boolean;
@@ -26,6 +28,7 @@ const Modal: React.FC<ModalProps> = ({
   onOk,
   cancelText,
   okText,
+  okDisabled = false,
   cancelButtonType,
   okButtonType,
   children,
@@ -35,11 +38,17 @@ const Modal: React.FC<ModalProps> = ({
   iconSvg,
   loading = false,
 }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  useClickOutside(modalRef, () => {
+    typeof onCancel === 'function' && backgroundClickable
+      ? onCancel()
+      : undefined;
+  });
   useLockBodyScroll(!!visible, disableScrollLock);
   const transitions = useTransition(visible, null, {
-    from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { opacity: 0 },
+    from: { opacity: 0, backdropFilter: 'blur(0px)' },
+    enter: { opacity: 1, backdropFilter: 'blur(3px)' },
+    leave: { opacity: 0, backdropFilter: 'blur(0px)' },
     config: { tension: 500, velocity: 40, friction: 60 },
   });
   const containerTransitions = useTransition(visible && !loading, null, {
@@ -68,15 +77,10 @@ const Modal: React.FC<ModalProps> = ({
               className="fixed top-0 left-0 right-0 bottom-0 bg-cool-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
               style={props}
               key={key}
-              onClick={
-                typeof onCancel === 'function' && backgroundClickable
-                  ? onCancel
-                  : undefined
-              }
               onKeyDown={(e) => {
                 if (e.key === 'Escape') {
                   typeof onCancel === 'function' && backgroundClickable
-                    ? onCancel
+                    ? onCancel()
                     : undefined;
                 }
               }}
@@ -84,7 +88,10 @@ const Modal: React.FC<ModalProps> = ({
               {loadingTransitions.map(
                 ({ props, item, key }) =>
                   item && (
-                    <animated.div style={props} key={key}>
+                    <animated.div
+                      style={{ ...props, position: 'absolute' }}
+                      key={key}
+                    >
                       <LoadingSpinner />
                     </animated.div>
                   )
@@ -94,13 +101,14 @@ const Modal: React.FC<ModalProps> = ({
                   item && (
                     <animated.div
                       style={props}
-                      className="inline-block align-bottom bg-cool-gray-700 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"
+                      className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6"
                       role="dialog"
                       aria-modal="true"
                       aria-labelledby="modal-headline"
                       key={key}
+                      ref={modalRef}
                     >
-                      <div className="sm:flex sm:items-start">
+                      <div className="sm:flex sm:items-center">
                         {iconSvg && (
                           <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-cool-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
                             {iconSvg}
@@ -115,22 +123,23 @@ const Modal: React.FC<ModalProps> = ({
                               {title}
                             </h3>
                           )}
-                          {children && (
-                            <div className="mt-2">
-                              <p className="text-sm leading-5 text-cool-gray-300">
-                                {children}
-                              </p>
-                            </div>
-                          )}
                         </div>
                       </div>
+                      {children && (
+                        <div className="mt-4">
+                          <p className="text-sm leading-5 text-cool-gray-300">
+                            {children}
+                          </p>
+                        </div>
+                      )}
                       {(onCancel || onOk) && (
-                        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                        <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
                           {typeof onOk === 'function' && (
                             <Button
                               buttonType={okType}
                               onClick={onOk}
                               className="ml-3"
+                              disabled={okDisabled}
                             >
                               {okText ? okText : 'Ok'}
                             </Button>
@@ -139,7 +148,7 @@ const Modal: React.FC<ModalProps> = ({
                             <Button
                               buttonType={cancelType}
                               onClick={onCancel}
-                              className="px-4"
+                              className="ml-3 sm:ml-0 sm:px-4"
                             >
                               {cancelText ? cancelText : 'Cancel'}
                             </Button>