Merge pull request #1 from remiilekun/master

codenaz · web-flow · commit 2f53ba92b9e2 · 2020-04-01T22:02:02.000+01:00
Crop image modal
diff --git a/README.md b/README.md
@@ -254,13 +254,18 @@ This sets the color of any text in the component
 
 This sets the color of any buttons in the component
 
+- modalColor
+
+This sets the background color of the modal component
+
 ```js
 <MultiImageInput
   theme={{
     background: '#ffffff',
     outlineColor: '#111111',
     textColor: 'rgba(255,255,255,0.6)',
-    buttonColor: '#ff0e1f'
+    buttonColor: '#ff0e1f',
+    modalColor: '#ffffff
   }}
 />
 ```
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-// import MultiImageInput from './lib/multi-image-input';
-import MultiImageInput from 'react-multiple-image-input';
+import MultiImageInput from './lib/multi-image-input';
+// import MultiImageInput from 'react-multiple-image-input';
 
 function App() {
   const crop = {
@@ -12,7 +12,7 @@ function App() {
   const [images, setImages] = useState({});
 
   return (
-    <div className="App" style={{ maxWidth: '36rem' }}>
+    <div className="App" style={{ maxWidth: '500px' }}>
       <header className="App-header">
         <MultiImageInput
           images={images}
diff --git a/src/__tests__/__snapshots__/MultiImageInput.test.js.snap b/src/__tests__/__snapshots__/MultiImageInput.test.js.snap
@@ -4,10 +4,10 @@ exports[`renders correctly 1`] = `
 <body>
   <div>
     <div
-      class="sc-AxirZ sc-AxiKw cQXkMQ"
+      class="sc-AxirZ sc-AxiKw daypqs"
     >
       <div
-        class="sc-AxirZ sc-AxhCb ibDyVp"
+        class="sc-AxirZ sc-AxhCb eJEChV"
       >
         <div
           role="button"
@@ -32,7 +32,7 @@ exports[`renders correctly 1`] = `
             />
           </svg>
           <span
-            class="sc-Axmtr ipInAw"
+            class="sc-Axmtr ljNGXc"
             color="outlineColor"
             font-size="small"
             font-weight="normal"
diff --git a/src/lib/components/Button.js b/src/lib/components/Button.js
@@ -3,10 +3,12 @@ import styled, { css } from 'styled-components';
 export const Button = styled.button`
   -webkit-appearance: none;
   background-color: ${props => props.theme.colors.buttonColor};
-  color: ${props => props.theme.colors.outlineColor};
+  border-radius: 5px;
   border: 0;
+  color: ${props => props.theme.colors.outlineColor};
   cursor: pointer;
   display: inline-block;
+  font-family: inherit;
   letter-spacing: 1px;
   line-height: 1;
   outline: none;
@@ -30,9 +32,11 @@ export const Button = styled.button`
 
 export const DeleteImageButton = styled(Button)`
   align-items: center;
+  background: none;
   border: none;
   display: flex;
   flex-shrink: 0;
+  font-family: inherit;
   height: 1.5rem;
   justify-content: center;
   padding-right: 0.5px;
@@ -41,7 +45,7 @@ export const DeleteImageButton = styled(Button)`
   top: 0.5rem;
   width: 1.5rem;
   z-index: 10;
-  background: none;
+
   &:before,
   &:after {
     background: #ff0e1f;
diff --git a/src/lib/components/Image.js b/src/lib/components/Image.js
@@ -1,9 +1,10 @@
 import styled from 'styled-components';
 
 const Image = styled.img`
-  width: 100%;
   display: inline-block;
+  height: auto;
   opacity: 0.4;
+  width: 100%;
 `;
 
 export default Image;
diff --git a/src/lib/components/ImageBox.js b/src/lib/components/ImageBox.js
@@ -7,8 +7,8 @@ const ImageBox = styled(FlexBox)`
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
-  padding: 1.5rem 2rem;
   margin-bottom: 1rem;
+  padding: 1.5rem 2rem;
 `;
 
 export default ImageBox;
diff --git a/src/lib/components/ImageInput.js b/src/lib/components/ImageInput.js
@@ -3,11 +3,11 @@ import FlexBox from './FlexBox';
 
 const ImageInput = styled(FlexBox)`
   flex-direction: column;
-  width: auto;
-  max-width: 9rem;
   justify-content: center;
   margin-right: 1rem;
+  max-width: 9rem;
   position: relative;
+  width: auto;
 `;
 
 export default ImageInput;
diff --git a/src/lib/components/ImageOptions.js b/src/lib/components/ImageOptions.js
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 export const ImageOptionsWrapper = styled('div')`
   align-items: center;
+  cursor: pointer;
   display: flex;
   height: 2rem;
   justify-content: space-between;
@@ -10,6 +11,4 @@ export const ImageOptionsWrapper = styled('div')`
   right: 0.5rem;
   top: 0.2rem;
   width: 3rem;
-  z-index: 10;
-  cursor: pointer;
 `;
diff --git a/src/lib/components/Modal.js b/src/lib/components/Modal.js
@@ -0,0 +1,107 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import PropTypes from 'prop-types';
+import Text from './Text';
+
+const Content = styled.div`
+  background-color: ${({ theme }) => theme.colors.modalColor};
+  border-radius: 5px;
+  max-width: 360px;
+  transition: transform 0.3s ease-out;
+  z-index: 9999;
+`;
+
+const Overlay = styled.div`
+  background-color: rgba(0, 0, 0, 0.8);
+  bottom: 0;
+  dsplay: flex;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: all 0.3s;
+`;
+
+const Wrapper = styled.div`
+  align-items: center;
+  bottom: 0;
+  dsplay: flex;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: all 0.3s;
+  visibility: hidden;
+  z-index: 9;
+
+  ${Content} {
+    transform: translate(0, -50px);
+  }
+
+  ${({ isOpen }) =>
+    isOpen &&
+    css`
+      display: flex;
+      opacity: 1;
+      pointer-events: auto;
+      visibility: visible;
+
+      ${Content} {
+        transform: translate(0, 0);
+      }
+
+      ${Overlay} {
+        opacity: 1;
+      }
+    `}
+`;
+
+const HeaderWrapper = styled.div`
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.outlineColor};
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+`;
+
+const Body = styled.div`
+  padding: 15px;
+  position: relative;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 0 15px 15px 15px;
+`;
+
+const Header = ({ children, ...props }) => {
+  return (
+    <HeaderWrapper {...props}>
+      <Text align="center">{children}</Text>
+    </HeaderWrapper>
+  );
+};
+
+const Modal = ({ children, isOpen, toggle }) => (
+  <Wrapper isOpen={isOpen}>
+    <Overlay onClick={toggle} />
+    <Content>{children}</Content>
+  </Wrapper>
+);
+
+Modal.Header = Header;
+Modal.Body = Body;
+Modal.Footer = Footer;
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired
+};
+
+export default Modal;
diff --git a/src/lib/components/Text.js b/src/lib/components/Text.js
@@ -6,6 +6,7 @@ const Text = styled.span`
     color: ${props => props.theme.colors[props.color]};
   }
   display: inline-block;
+  font-family: inherit;
   font-size: ${props => props.theme.font.size[props.fontSize]};
   font-weight: ${props => props.theme.font.weight[props.fontWeight]};
   line-height: ${props =>
@@ -14,6 +15,7 @@ const Text = styled.span`
 `;
 
 Text.defaultProps = {
+  color: 'textColor',
   fontWeight: 'normal'
 };
 
diff --git a/src/lib/multi-image-input.js b/src/lib/multi-image-input.js
@@ -9,6 +9,7 @@ import ImageInput from './components/ImageInput';
 import { Button } from './components/Button';
 import Image from './components/Image';
 import Text from './components/Text';
+import Modal from './components/Modal';
 import theme, { darkTheme, lightTheme } from './theme';
 import { ImageOptionsWrapper } from './components/ImageOptions';
 import DeleteIcon from './components/DeleteIcon';
@@ -259,6 +260,9 @@ export default function MultiImageInput({
             <ImageInput key={index}>
               {files[index] ? (
                 <>
+                  <ImageOverlay>
+                    <Image alt={`uploaded image${index}`} src={files[index]} />
+                  </ImageOverlay>
                   <ImageOptionsWrapper>
                     <EditIcon
                       aria-label={`Edit Image ${index}`}
@@ -271,9 +275,6 @@ export default function MultiImageInput({
                       onClick={e => removeImage(e, index)}
                     />
                   </ImageOptionsWrapper>
-                  <ImageOverlay>
-                    <Image alt={`uploaded image${index}`} src={files[index]} />
-                  </ImageOverlay>
                 </>
               ) : (
                 <div
@@ -307,25 +308,26 @@ export default function MultiImageInput({
             </ImageInput>
           ))}
       </ImageBox>
+
       {allowCrop && currentImage && (
-        <>
-          <ReactCrop
-            {...cropConfig}
-            src={currentImage}
-            crop={crop}
-            onChange={setCrop}
-            onImageLoaded={onImageLoaded}
-            onComplete={onCropComplete}
-          />
-          <Button
-            type="button"
-            onClick={exitCrop}
-            size="small"
-            style={{ marginTop: '1rem', display: 'block' }}
-          >
-            Crop
-          </Button>
-        </>
+        <Modal isOpen={true} toggle={exitCrop}>
+          <Modal.Header>Crop Image</Modal.Header>
+          <Modal.Body>
+            <ReactCrop
+              {...cropConfig}
+              crop={crop}
+              onChange={setCrop}
+              onComplete={onCropComplete}
+              onImageLoaded={onImageLoaded}
+              src={currentImage}
+            />
+          </Modal.Body>
+          <Modal.Footer>
+            <Button type="button" onClick={exitCrop} size="normal">
+              Crop
+            </Button>
+          </Modal.Footer>
+        </Modal>
       )}
     </ThemeProvider>
   );
diff --git a/src/lib/theme.js b/src/lib/theme.js
diff --git a/stats.html b/stats.html
