Finish ImageCropper

package-lock.json

@@ -12786,6 +12786,11 @@
         "qr.js": "0.0.0"
       }
     },
+    "react-range": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-range/-/react-range-1.8.9.tgz",
+      "integrity": "sha512-rDR9NEmIYBsMYJY+bCTnY17I1NT9jlI0m2wM2yiddkRN6GygTGjylTnNGlpAh8chohABwb58XCtyOIvRGcTosw=="
+    },
     "react-redux": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",

package.json

@@ -62,6 +62,7 @@
     "react-dom": "16.12.0",
     "react-easy-crop": "^3.5.2",
     "react-qr-code": "^1.1.1",
+    "react-range": "^1.8.9",
     "react-redux": "^7.2.4",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",

src/HomePage.js

@@ -25,7 +25,7 @@ import { Routes } from "reoutes";
 import VerifyCode from "services/VerifyCode";
 import ForgotPassword from "services/ForgotPassword";
 import ResetPassword from "services/ResetPassword";
-import Demo from "components/Generals/ImageCropper";
+import ImageCropper from "components/Generals/ImageCropper/ImageCropper";
 // import { Routes } from "./reoutes";
 
 const RouteWithLoader = ({ component: Component, ...rest }) => {
@@ -41,7 +41,7 @@ export default () => (
     <Route exact path="/verify-code" component={VerifyCode} />
     <Route exact path="/forgot-password" component={ForgotPassword} />
     <Route exact path="/reset-password" component={ResetPassword} />
-    <Route exact path="/test" component={Demo} />
+    <Route exact path="/test" component={ImageCropper} />
     <RouteWithLoader exact path="/" component={SearchProfile} />
     <RouteWithLoader exact path="/profile" component={SearchProfile} />
     <RouteWithLoader exact path="/profile/add" component={AddProfile} />

src/components/Generals/ImageCropper.js → src/components/Generals/ImageCropper/ImageCropper.js

 import Cropper from 'react-easy-crop';
 import React, { useState, useCallback } from 'react';
-import { Input, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, Row, Container } from 'reactstrap';
+import { Range, getTrackBackground } from 'react-range';
 import getCroppedImg from './CropImage'
 
 import './ImageCropper.scss'
+const ImageCropper = (props) => {
+  const { onSaveImage } = props;
+  const MAX_ZOOM = 4
+  const MIN_ZOOM = 1
 
-const Demo = () => {
   const [crop, setCrop] = useState({ x: 0, y: 0 })
-  const [zoom, setZoom] = useState(1)
+  const [zoom, setZoom] = useState([1])
   const [rotation, setRotation] = useState(0);
   const [image, setImage] = useState(null);
   const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)
@@ -18,8 +22,10 @@ const Demo = () => {
   const toggle = () => setModal(!modal);
 
   const handleFileChoose = (event) => {
-    setImage(URL.createObjectURL(event.target.files[0]));
-    toggle();
+    if (URL.createObjectURL(event.target.files[0])) {
+      setImage(URL.createObjectURL(event.target.files[0]));
+      toggle();
+    }
   }
 
   const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
@@ -38,7 +44,9 @@ const Demo = () => {
         rotation
       )
       console.log('donee', { croppedImage })
+      onSaveImage(croppedImage)
       setCroppedImage(croppedImage)
+      toggle();
     } catch (e) {
       console.error(e)
     }
@@ -60,9 +68,64 @@ const Demo = () => {
             onZoomChange={setZoom}
           />
         </ModalBody>
+        <Container>
+          <Row className="px-5 my-4">
+            <Range
+              step={0.05}
+              min={MIN_ZOOM}
+              max={MAX_ZOOM}
+              values={zoom}
+              onChange={(values) => setZoom(values)}
+              renderTrack={({ props, children }) => (
+                <div
+                  {...props}
+                  style={{
+                    ...props.style,
+                    height: "5px",
+                    width: "100%",
+                    borderRadius: "4px",
+                    background: getTrackBackground({
+                      values: zoom,
+                      colors: ["#5e73e5", "#ccc"],
+                      min: MIN_ZOOM,
+                      max: MAX_ZOOM
+                    }),
+                    alignSelf: "center",
+                  }}
+                >
+                  {children}
+                </div>
+              )}
+              renderThumb={({ props }) => (
+                <div
+                  {...props}
+                  style={{
+                    ...props.style,
+                    height: "42px",
+                    width: "42px",
+                    borderRadius: "4px",
+                    backgroundColor: "#FFF",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    boxShadow: "0px 2px 6px #AAA"
+                  }}
+                >
+                  <div
+                    style={{
+                      height: "16px",
+                      width: "5px",
+                      backgroundColor: "#5e73e5"
+                    }}
+                  />
+                </div>
+              )}
+            />
+          </Row>
+        </Container>
         <ModalFooter>
-          <Button color="primary" onClick={handleCrop}>Xác nhận</Button>{' '}
           <Button color="secondary" onClick={toggle}>Quay lại</Button>
+          <Button color="primary" onClick={handleCrop}>Xác nhận</Button>{' '}
         </ModalFooter>
       </Modal>
     </>
@@ -70,4 +133,4 @@ const Demo = () => {
   )
 }
 
-export default Demo;
\ No newline at end of file
+export default ImageCropper;
\ No newline at end of file

src/components/Profile/AddProduct.js

@@ -8,6 +8,7 @@ import MainBanner from "../Generals/MainBanner.js";
 import DemoNavbar from "../Navbars/DemoNavbar.js";
 import dummyData from "../../data/index.json";
 import { ProductDiaryTable } from "../../views/IndexSections/Table.js";
+import ImageCropper from "components/Generals/ImageCropper/ImageCropper.js";
 
 const AddProduct = () => {
   const history = useHistory();
@@ -15,7 +16,6 @@ const AddProduct = () => {
   const profileId = state.profileId;
   const productId = state.productId;
   const detailProduct = productId ? state.detailProduct[0] : {};
-  console.log("detailProduct", detailProduct);
 
   const [productName, setProductName] = useState(productId ? detailProduct.name : "");
   const [traceCode, setTraceCode] = useState(productId ? detailProduct.trace_code : "");
@@ -44,7 +44,7 @@ const AddProduct = () => {
       created_at: getTime,
       qr_code: ""
     }
-    if(profileId){
+    if (profileId) {
       const newData = dummyData.data.filter(item => item.id === profileId);
       newData.profile_product.push(params);
     }
@@ -155,7 +155,7 @@ const AddProduct = () => {
               </FormGroup>
               <FormGroup row>
                 <Col sm={10}>
-                  <Input type="file" name="file" id="file-image" className="w-auto" />
+                  <ImageCropper onSaveImage={setProductImage} />
                   <FormText color="muted">
                     Lựa chọn ảnh sản phẩm
                   </FormText>

src/components/Profile/AddProfile.js

 import React, { useState } from "react";
 import { useHistory } from "react-router";
 import { v4 as uuidv4 } from 'uuid';
-import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Row, Col, FormText, FormFeedback } from "reactstrap";
+import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Col, FormText, FormFeedback } from "reactstrap";
 
 // core components
 import MainBanner from "../Generals/MainBanner.js";
 import DemoNavbar from "../Navbars/DemoNavbar.js";
-import SimpleFooter from "../Footers/SimpleFooter.js";
-import AmazingTeam from "../Footers/AmazingTeam.js";
 import dummyData from "../../data/index.json";
 
 import { validatePhoneNumber } from "constans/index.js";
 import { ProductTable } from "../../views/IndexSections/Table.js";
+import ImageCropper from "components/Generals/ImageCropper/ImageCropper.js";
 
 const AddProfile = () => {
   const history = useHistory();
   const state = { ...history.location.state };
   const profileId = state.profileId;
   const detailProfile = profileId ? state.detailProfile[0] : "";
-  console.log("detailProfile", detailProfile);
 
   const [profileName, setProfileName] = useState(profileId ? detailProfile.name : "");
   const [profileCode, setProfileCode] = useState(profileId ? detailProfile.code : "");
-  const [logo, setLogo] = useState(profileId ? detailProfile.logo : {});
+  const [logo, setLogo] = useState(profileId ? detailProfile.logo : "");
   const [phoneNumber, setPhoneNumber] = useState(profileId ? detailProfile.phone_number : "");
   const [profileAddress, setProfileAddress] = useState(profileId ? detailProfile.address : "");
   const [validPhoneNumber, setValidPhoneNumber] = useState(false);
@@ -52,7 +50,6 @@ const AddProfile = () => {
         created_at: getTime,
         qr_code: ""
       }
-      console.log("params", params);
       dummyData.data.push(params);
       history.push("/profile");
       setValidPhoneNumber(false);
@@ -139,7 +136,7 @@ const AddProfile = () => {
               </FormGroup>
               <FormGroup row>
                 <Col sm={10}>
-                  <Input type="file" name="file" id="file-logo" className="w-auto" />
+                  <ImageCropper onSaveImage={setLogo}/>
                   <FormText color="muted">
                     Lựa chọn logo công ty
                   </FormText>