code7-leia 0.1.44 → 0.1.45

package/src/components/FileArea/components/Modal/index.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { MdClose } from 'react-icons/md';
+
+import * as S from './styles';
+import ModalFooter from './ModalFooter';
+import ModalContent from './ModalContent';
+import ModalHeader from './ModalHeader';
+import ModalTitle from './ModalTitle';
+import ModalButtonClose from './ModalButtonClose';
+
+interface ModalProps {
+  isOpen: boolean;
+  style?: React.CSSProperties;
+  maxWidth?: string;
+  maxHeight?: string;
+  className?: string;
+  title?: string | React.ReactElement | React.ComponentType;
+  children: React.ReactNode;
+  onClose?: () => void;
+  contentStyle?: React.CSSProperties;
+  isFixed?: boolean;
+  zIndex?: number;
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  style,
+  maxWidth,
+  maxHeight,
+  className,
+  title,
+  children,
+  onClose,
+  contentStyle,
+  isFixed,
+  zIndex,
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyUp = useCallback(
+    (e: KeyboardEvent) => {
+      const keys: { [key: number]: () => void } = {
+        // ESC Key
+        27: () => {
+          e.preventDefault();
+          if (!isFixed && onClose) {
+            onClose();
+          }
+          window.removeEventListener('keyup', handleKeyUp, false);
+        },
+      };
+
+      if (keys[e.keyCode] && isOpen) {
+        keys[e.keyCode]();
+      }
+    },
+    [onClose, isOpen, isFixed]
+  );
+
+  const handleOutsideClick = useCallback(
+    (e: MouseEvent) => {
+      if (modalRef.current && modalRef.current.parentNode === e.target) {
+        if (!isFixed && onClose) {
+          onClose();
+        }
+        document.removeEventListener('click', handleOutsideClick, false);
+      }
+    },
+    [onClose, isFixed]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keyup', handleKeyUp, false);
+    document.addEventListener('click', handleOutsideClick, false);
+
+    return () => {
+      window.removeEventListener('keyup', handleKeyUp, false);
+      document.removeEventListener('click', handleOutsideClick, false);
+    };
+  }, [handleKeyUp, handleOutsideClick]);
+
+  return (
+    <S.FullScreen isFixed={isFixed ? 1 : 0} isOpen={isOpen ? 1 : 0} zIndex={zIndex ?? 0}>
+      <S.Modal ref={modalRef} style={style} maxWidth={maxWidth} className={className}>
+        <S.ModalContainer className="styleOverlay" maxHeight={maxHeight} style={contentStyle}>
+            <S.ModalHeader>
+              <S.ModalTitle>{String(title)}</S.ModalTitle>
+              <S.ModalButtonClose type="button" onClick={onClose}>
+                <MdClose color="#5A5D68" size={16} />
+              </S.ModalButtonClose>
+            </S.ModalHeader>
+          {children}
+        </S.ModalContainer>
+      </S.Modal>
+    </S.FullScreen>
+  );
+};
+
+Modal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+  children: PropTypes.node.isRequired,
+  onClose: PropTypes.func,
+  style: PropTypes.objectOf(PropTypes.any),
+  contentStyle: PropTypes.objectOf(PropTypes.any),
+  className: PropTypes.string,
+  maxWidth: PropTypes.string,
+  maxHeight: PropTypes.string,
+  isFixed: PropTypes.bool,
+  zIndex: PropTypes.number,
+};
+
+Modal.defaultProps = {
+  title: '',
+  style: {},
+  contentStyle: {},
+  className: '',
+  maxWidth: '360px',
+  maxHeight: 'max-content',
+  isFixed: false,
+  onClose: () => {},
+  zIndex: 9999,
+};
+
+export { ModalHeader, ModalTitle, ModalButtonClose, ModalContent, ModalFooter };
+export default Modal;

package/src/components/FileArea/components/Modal/styles.tsx

@@ -0,0 +1,121 @@
+import styled from 'styled-components';
+
+interface FullScreenProps {
+  isOpen: number;
+  isFixed: number;
+  zIndex: number;
+}
+
+export const FullScreen = styled.div<FullScreenProps>`
+  display: ${({ isOpen }) => (isOpen === 1 ? 'flex' : 'none')};
+  cursor: ${({ isFixed }) => (isFixed === 0 ? 'pointer' : 'default')};
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: ${({ zIndex }) => zIndex};
+  animation: fadeIn 380ms ease-in-out 1;
+  background-color: #2f3845b8;
+  backdrop-filter: blur(2px);
+
+  @keyframes fadeIn {
+    from {
+      background-color: #2f384521;
+    }
+    to {
+      background-color: #2f3845b8;
+    }
+  }
+`;
+
+interface ModalProps {
+  maxWidth?: string;
+  maxHeight?: string;
+}
+
+export const Modal = styled.div<ModalProps>`
+  background-color: #fff;
+  border-radius: 3px;
+  position: relative;
+  cursor: default;
+  width: 100%;
+  max-width: ${({ maxWidth }) => maxWidth};
+  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(-120px);
+      opacity: 0;
+    }
+
+    20% {
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+`;
+
+interface ModalContainerProps {
+  maxHeight?: string;
+}
+
+export const ModalContainer = styled.div<ModalContainerProps>`
+  width: 100%;
+  overflow-y: auto;
+  max-height: ${({ maxHeight }) => maxHeight};
+`;
+
+export const ModalHeader = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #dadce3;
+  padding: var(--spacement-medium);
+`;
+
+export const ModalTitle = styled.div`
+  font-style: normal;
+  font-weight: normal;
+  font-size: 20px;
+  line-height: 150%;
+  letter-spacing: 0.0075em;
+  color: var(--neutral-4);
+`;
+
+export const ModalButtonClose = styled.button`
+  outline: none;
+  cursor: pointer;
+
+  :hover {
+    opacity: 0.7;
+  }
+`;
+
+interface ModalContentWrapperProps {
+  overflowY?: string;
+  maxHeight?: string;
+}
+
+export const ModalContentWrapper = styled.div<ModalContentWrapperProps>`
+  width: 100%;
+  overflow-y: ${({ overflowY }) => overflowY};
+  max-height: ${({ maxHeight }) => maxHeight};
+  padding: var(--spacement-medium);
+`;
+
+export const ModalFooterWrapper = styled.div`
+  padding: var(--spacement-medium);
+  background: var(--neutral-0);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacement-medium);
+`;

package/src/components/FileArea/index.tsx

@@ -13,14 +13,24 @@ import { getLanguage } from '../../utils/getLanguage'
 import * as S from './styles';
 import Table from './components/Table';
 import Search from './components/Search';
+import Modal from './components/Modal'
 import EmptyState from '../EmptyState';
+import Select from '../Select'
 
 export const FileArea = () => {
   const [files, setFiles] = useState<FileData[]>([]);
   const [initialFiles, setInitialFiles] = useState<FileData[]>([]);
   const { pathname } = useLocation();
+  const [modal, setModal] = useState(false)
   const id = pathname.split('/')[4]
   const t = getLanguage('pt-br')
+  const tags = [
+    "pae",
+    "boteria",
+    "vr",
+    "code7",
+    "vidalink"
+  ]
 
   useEffect(() => {
     setFiles([
@@ -66,6 +76,10 @@ export const FileArea = () => {
     console.log('files, id, t: ', files, id, t)
   }, [files])
 
+  const optionsPresset = tags.map(tag => {
+    return { label: tag, value: tag }
+  })
+
   const presset = (tags: string) => {
     const tagsSplit = tags.split(',');
     let html = '';
@@ -75,7 +89,15 @@ export const FileArea = () => {
     }).join('');
 
     return html;
-}
+  }
+
+  const handleOpenModal = () => {
+    setModal(!modal)
+  }
+
+  const handleSelect = (value: string | number) => {
+    console.log(value);
+  };
 
   const renderFiles = () => {  
     return (
@@ -87,7 +109,7 @@ export const FileArea = () => {
           </div>
           <div className='actions'>
             <Search placeholder={t.fileArea.search} setFiles={setFiles} initialFiles={initialFiles}></Search>
-            <button><FaUpload /> {t.fileArea.fileUpload}</button>
+            <button onClick={handleOpenModal}><FaUpload /> {t.fileArea.fileUpload}</button>
           </div>
         </S.Header>
         {
@@ -131,7 +153,19 @@ export const FileArea = () => {
                 </tbody>
               </Table>
         }
-        
+        <Modal 
+          isOpen={modal}
+          maxWidth="1100px"
+          maxHeight="max-content"
+          onClose={handleOpenModal}
+          title={t.fileArea.modal.uploadFile}
+          >
+            <div>
+              <input type="file" id="file" name="file" />
+              <label htmlFor="file">{t.fileArea.modal.chooseFile}</label>
+              <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelect} />
+            </div>
+          </Modal>
       </S.Container>
     );
   }

package/src/components/TestArea/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { getLanguage } from '../../utils/getLanguage'
 import * as S from './styles';
-import Select from './components/Select'
+import Select from '../Select'
 import InputTest from './components/InputTest'
 import { PiWaveformBold  } from 'react-icons/pi';
 import { FaList } from 'react-icons/fa';

package/src/interface/Language.ts

@@ -12,6 +12,7 @@ type FileArea = {
   modal: {
     descriptionUpload: string;
     chooseFile: string;
+    uploadFile: string;
   };
 };
 

package/src/utils/getLanguage.tsx

@@ -18,6 +18,7 @@ const defaultLanguage: Language = {
     modal: {
       descriptionUpload: 'Drag and drop files here or',
       chooseFile: 'Choose a file',
+      uploadFile: 'Upload a file',
     },
   },
   buttons: {
@@ -59,6 +60,7 @@ export const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Langua
           ...defaultLanguage.fileArea.modal,
           descriptionUpload: 'Arraste e solte os arquivos aqui ou',
           chooseFile: 'Escolha um arquivo',
+          uploadFile: 'Enviar um arquivo',
         },
       },
       buttons: {