Merge pull request #116 from 90lucasgabriel/feature/WJ-21

WJ-21 - Create Modal component

src/components/AspectRatio/Loading/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { SkeletonContainer } from './styles';
+
+const AspectRatioLoading: React.FC = () => {
+  return <SkeletonContainer />;
+};
+
+export default AspectRatioLoading;

src/components/AspectRatio/Loading/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { Skeleton } from 'components';
+
+export const SkeletonContainer = styled(Skeleton)`
+  width: 100%;
+  padding-top: 100%;
+`;

src/components/AspectRatio/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Props from './types';
+import { Container } from './styles';
+
+const AspectRatio: React.FC<Props> = ({
+  width = 1,
+  height = 1,
+  borderRadius = '0',
+  children,
+}) => {
+  return (
+    <Container width={width} height={height} borderRadius={borderRadius}>
+      {children}
+    </Container>
+  );
+};
+
+export default AspectRatio;

src/components/AspectRatio/styles.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import Props from './types';
+
+export const Container = styled.div<Props>`
+  position: relative;
+  width: 100%;
+  padding-top: calc(
+    (${props => props.height} / ${props => props.width}) * 100%
+  );
+
+  overflow: hidden;
+  border-radius: ${props => props.borderRadius};
+
+  & > * {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;

src/components/AspectRatio/types/index.ts

@@ -0,0 +1,5 @@
+export default interface Props {
+  width?: number;
+  height?: number;
+  borderRadius?: string;
+}

src/components/Media/helpers/checkImageMedia.ts

@@ -0,0 +1,9 @@
+const checkImageMedia = (media: string): boolean => {
+  const imageExtensions = ['jpg', 'jpe', 'jpeg', 'png', 'gif'];
+
+  return imageExtensions.some(extension =>
+    media.toUpperCase().endsWith(extension.toUpperCase()),
+  );
+};
+
+export default checkImageMedia;

src/components/Media/helpers/index.ts

@@ -0,0 +1 @@
+export { default as checkImageMedia } from './checkImageMedia';

src/components/Media/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { checkImageMedia } from 'components/Media/helpers';
+import { AspectRatio, AspectRatioLoading } from 'components';
+import Props from './types';
+
+import { LoadingContainer } from './styles';
+
+const Media: React.FC<Props> = ({ src, ...rest }) => {
+  return (
+    <AspectRatio {...rest}>
+      {checkImageMedia(src) ? (
+        <img src={src} alt="media" />
+      ) : (
+        <video src={src} autoPlay loop muted />
+      )}
+
+      <LoadingContainer>
+        <AspectRatioLoading />
+      </LoadingContainer>
+    </AspectRatio>
+  );
+};
+
+export default Media;

src/components/Media/styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const LoadingContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+`;

src/components/Media/types/index.ts

@@ -0,0 +1,5 @@
+import AspectRatioProps from 'components/AspectRatio/types';
+
+export default interface MediaProps extends AspectRatioProps {
+  src: string;
+}

src/components/Modal/hooks.tsx

@@ -6,35 +6,43 @@ import React, {
   useState,
 } from 'react';
 
-import ModalContent from 'components/Modal/types/ModalContent';
+import StyleProps from 'components/Modal/types/StyleProps';
+import ModalContent from 'components/Modal/types/ModalProps';
 import ContextData from './types/ContextData';
 // import Modal from './dtos';
 
 const ModalContext = createContext<ContextData>({} as ContextData);
 
 const ModalProvider: React.FC = ({ children }) => {
   const [data, setData] = useState(null as any);
+  const [propsData, setPropsData] = useState({} as StyleProps);
   const [callbackFunction, setCallbackFunction] = useState(null as any);
   const [isCallback, setIsCallback] = useState(false);
 
-  const setModalContent = useCallback(({ value, callback }: ModalContent) => {
-    setData(value);
+  const setModalContent = useCallback(
+    ({ value, callback, props }: ModalContent) => {
+      setData(value);
+      setPropsData(props || ({} as StyleProps));
 
-    if (callback) {
-      setCallbackFunction(() => callback);
-    }
-  }, []);
+      if (callback) {
+        setCallbackFunction(() => callback);
+      }
+    },
+    [],
+  );
 
   // Dismiss modal and run callback
   const successCloseModal = useCallback(() => {
     setIsCallback(true);
     setData(null as any);
+    setPropsData({} as StyleProps);
   }, []);
 
   // Dismiss modal without callback
   const dismissModal = useCallback(() => {
     setIsCallback(false);
     setData(null as any);
+    setPropsData({} as StyleProps);
   }, []);
 
   // Run callback when close modal and reset state
@@ -54,6 +62,7 @@ const ModalProvider: React.FC = ({ children }) => {
     <ModalContext.Provider
       value={{
         modalContent: data,
+        modalProps: propsData,
         setModalContent,
         successCloseModal,
         dismissModal,

src/components/Modal/index.tsx

@@ -1,6 +1,8 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { useModal } from 'components/Modal/hooks';
+import StyleProps from 'components/Modal/types/StyleProps';
 import { GrClose as CloseIcon } from 'react-icons/gr';
 import Button from 'components/Button';
 import {
@@ -12,13 +14,21 @@ import {
   ContentContainer,
 } from './styles';
 
-const Modal: React.FC<any> = ({
+const Modal: React.FC<StyleProps> = ({
   onClose,
   show,
-  hideCloseButton = true,
+  hideCloseButton,
   children,
+  fullscreen,
+  borderRadius,
+  background,
+  center,
+  height,
+  width,
+  shadow,
 }) => {
   const { modalContent, dismissModal } = useModal();
+  const location = useLocation();
 
   const handleDismiss = useCallback(() => {
     if (onClose) {
@@ -29,14 +39,18 @@ const Modal: React.FC<any> = ({
     dismissModal();
   }, [dismissModal, onClose]);
 
+  useEffect(() => {
+    handleDismiss();
+  }, [location]); // eslint-disable-line
+
   if (!modalContent && !children && !show) {
     return null;
   }
 
   return (
     <Container>
       <Backdrop onClick={handleDismiss} />
-      <ModalContainer>
+      <ModalContainer center={center} height={height}>
         <ModalContent>
           {!hideCloseButton && (
             <CloseContainer>

src/components/Modal/styles.ts

@@ -1,6 +1,7 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { Color, Size } from 'shared/enums';
+import StyleProps from 'components/Modal/types/StyleProps';
 
 export const Container = styled.div`
   display: flex;
@@ -11,63 +12,80 @@ export const Container = styled.div`
   left: 0;
   z-index: 10;
 
-  * {
+  /* * {
     box-sizing: border-box;
-  }
+  } */
 `;
 
 export const Backdrop = styled.div`
   flex: 1;
   background-color: rgba(0, 0, 0, 0.4);
 `;
 
-export const ModalContainer = styled.div`
-  position: fixed;
-  width: 1280px;
-  min-height: 100px;
-  max-height: calc(min(700px, 100%) - 100px - ${Size.Medium});
+export const ModalContainer = styled.div<StyleProps>`
+  position: absolute;
 
   top: 100px;
-  right: 0;
-  left: 0;
-  margin-right: auto;
-  margin-left: auto;
+  left: 50%;
+  transform: translateX(-50%);
+
+
   z-index: 15;
 
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  @media (max-width: 1280px) {
+  max-height: 100%;
+  overflow: hidden;
+
+  /* height: 100%; */
+
+  ${props =>
+    props.center &&
+    css`
+      top: 50% !important;
+      transform: translate(-50%, -50%);
+    `}
+
+  ${props =>
+    props.height &&
+    css`
+      height: ${props.height};
+    `}
+
+
+
+
+  /* @media (max-width: 1280px) {
     width: calc(100% - ${Size.Medium} * 2);
-  }
+  } */
 
   @media (max-width: 715px) {
     /* top: 0;
     left: 0;
     width: 100%;
     height: 100%; */
   }
+
+
 `;
 
 export const ModalContent = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
-  min-height: 100px;
-  max-height: calc(min(700px, 100%) - 100px - ${Size.Medium});
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
 
-  /* padding: ${Size.Small}; */
   background-color: ${Color.Fill};
   border-radius: ${Size.Small};
 
-  @media (max-width: 715px) {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+  top: 0;
+  left: 0;
+  /* width: 100%; */
+  /* height: 100%; */
+
+  max-height: 100%;
+  overflow: hidden;
 `;
 
 export const CloseContainer = styled.div`
@@ -85,8 +103,12 @@ export const CloseButton = styled.img`
 
 export const ContentContainer = styled.div`
   display: flex;
-  flex: 1;
-  width: 100%;
+  align-items: center;
+  justify-content: center;
+  /* flex: 1; */
+  /* width: 100%; */
   overflow: auto;
-  padding: 10px;
+
+  max-height: 100%;
+  overflow: hidden;
 `;

src/components/Modal/types/ContextData.ts

@@ -1,8 +1,10 @@
-import ModalContent from 'components/Modal/types/ModalContent';
+import ModalProps from 'components/Modal/types/ModalProps';
+import StyleProps from 'components/Modal/types/StyleProps';
 
 export default interface ContextData {
   modalContent: any;
-  setModalContent(params: ModalContent): void;
+  modalProps: StyleProps;
+  setModalContent(params: ModalProps): void;
   successCloseModal(): void;
   dismissModal(): void;
 }

src/components/Modal/types/ModalProps.ts

@@ -0,0 +1,8 @@
+import StyleProps from 'components/Modal/types/StyleProps';
+
+export default interface ModalProps {
+  value: any;
+  callback?: any;
+  dismissCallback?: any;
+  props?: StyleProps;
+}