From 6b0a3b08c2df1add729e7da4f2397320dbe1346b Mon Sep 17 00:00:00 2001 From: SungJin Date: Sat, 4 May 2019 20:15:59 +0900 Subject: [PATCH] =?UTF-8?q?#26=20=ED=8C=8C=EC=9D=BC(=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80)=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=B0=8F=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=B2=A0=EC=9D=B4=EC=8A=A4=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20See:=20Github=20issue=20#26=20---?= =?UTF-8?q?------------------------------------=20###=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20*=20enrolment=20=EB=82=B4=EB=B6=80=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B2=98=EB=A6=AC=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20react-dropzone=20?= =?UTF-8?q?=EC=97=B0=EB=8F=99=20---------------------------------------=20?= =?UTF-8?q?###=20Issue=20*=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=90=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=AA=A8=EB=91=90=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=ED=95=98=EA=B3=A0=20=EB=8B=A4=EC=8B=9C=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=95=A0=20=EC=8B=9C=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98=EB=B0=9C=EC=83=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Enrolment/Enrolment.jsx | 14 +- .../Enrolment/Function/Enrolment.scss | 40 +---- src/containers/Enrolment/Function/Step3.jsx | 157 ++++++++++++++++-- 3 files changed, 165 insertions(+), 46 deletions(-) diff --git a/src/containers/Enrolment/Enrolment.jsx b/src/containers/Enrolment/Enrolment.jsx index a6fa6c0..7ee76a6 100644 --- a/src/containers/Enrolment/Enrolment.jsx +++ b/src/containers/Enrolment/Enrolment.jsx @@ -39,7 +39,8 @@ class Enrolment extends Component { "totalVolume": 0 }, "stuffID": 0, - "color_idx": "" + "color_idx": "", + "images": [] }; this.onChangeStepStatus = this.onChangeStepStatus.bind(this); @@ -141,7 +142,11 @@ class Enrolment extends Component { contents={this.contents[2]} />}); this.setState({ middle: ""}); - this.setState({ step: }); + this.setState({ + step: + }); break; default: break; @@ -327,10 +332,13 @@ class Enrolment extends Component { enrolmentData.stuff[colorNumber].color = "#" + ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2])).toString(16).slice(1); this.setState(enrolmentData); - console.log(this.state); } }; + onSaveImages = images => { + this.setState({images: images}); + } + onSaveRecipe = () => { let doneView = document.querySelector("#done-container"); let cup = this.state.enrolmentData.info.name; diff --git a/src/containers/Enrolment/Function/Enrolment.scss b/src/containers/Enrolment/Function/Enrolment.scss index a6fdcbd..6080d0a 100644 --- a/src/containers/Enrolment/Function/Enrolment.scss +++ b/src/containers/Enrolment/Function/Enrolment.scss @@ -485,38 +485,16 @@ height: 100%; box-sizing: border-box; - .thums-image { - display: block; - width: 100%; - height: 80%; - border: 1px solid #707070; - box-sizing: border-box; - } - - .other-image { - height: 15%; - padding-top: 5%; - - .images-item { - display: inline-block; - position: relative; - width: 11.625%; - padding-bottom: 11.625%; - margin-right: 1%; - border: 1px solid #707070; - box-sizing: border-box; - } - - .images-item:last-child { - margin-right: 0; + .delete-thumb { + display: block; + position: absolute; + width: 20px; + height: 20px; + right: 0; + top: 0; + background-color: #fff; + z-index: 9999; } - } - - .other-image::after { - display: block; - content: ''; - clear: both; - } } } diff --git a/src/containers/Enrolment/Function/Step3.jsx b/src/containers/Enrolment/Function/Step3.jsx index 5c59634..7a9a2a5 100644 --- a/src/containers/Enrolment/Function/Step3.jsx +++ b/src/containers/Enrolment/Function/Step3.jsx @@ -1,25 +1,158 @@ -import React from "react"; +import React, {useEffect, useState} from 'react'; +import {useDropzone} from 'react-dropzone'; import classNames from "classnames/bind"; import styles from "./Enrolment.scss"; const cx = classNames.bind(styles); +const insertNthumbs = { + display: 'block', + width: '100%', + height: '80%', + border: '1px solid #707070', + boxSizing: 'border-box' +} + +const textStyle = { + display: 'flex', + width: '100%', + height: '100%', + justifyContent: 'center', + alignItems: 'center', + margin: '0' +}; + +const thumbsContainer = { + display: 'flex', + marginTop: 16, + overflowX: 'auto' +}; + +const thumb = { + display: 'inline-flex', + borderRadius: 2, + border: '1px solid #eaeaea', + marginBottom: 8, + marginRight: 8, + width: 100, + height: 100, + padding: 4, + boxSizing: 'border-box' +}; + +const fullThumb = { + width: '100%', + height: '100%' +} + +const thumbInner = { + display: 'flex', + position: 'relative', + minWidth: 0, + overflow: 'hidden' +}; + +const img = { + display: 'block', + width: 'auto', + height: '100%' +}; + +const addImgae = { + display: 'block', + width: '90px', + height: '100%', +} + const EnrolmentStep3 = (props) => { + const [files, setFiles] = useState([]); + let fileIndex = []; + const selectThumb = (file) => { + document.querySelector("#imgThumb").src = file.preview; + } + + const deleteThumb = (thisFile, fileIdx) => { + let thumb = document.querySelector("#imgThumb").src; + let fileIndex = files.findIndex(file => file.name === thisFile.name); + + if (fileIdx.length === 1) { + fileIdx.pop(); + // document.querySelector("#insertContainer").style.visibility = 'visible'; + // document.querySelector("#thumbContainer").style.visibility = 'hidden'; + } else if (thumb === files[fileIndex].preview) { + fileIdx.splice(fileIndex, 1); + document.querySelector("#imgThumb").src = files[0].preview; + } else fileIdx.splice(fileIndex, 1); + + props.saveImage(files, fileIndex); + + document.querySelector(`#${thisFile.idx}`).style.display = 'none'; + } + + const {getRootProps, getInputProps} = useDropzone({ + accept: 'image/*', + onDrop: acceptedFiles => { + setFiles(acceptedFiles.map((file, idx) => { + fileIndex.push(idx); + return Object.assign(file, { + preview: URL.createObjectURL(file), + idx: `image${idx}` + }) + })); + // document.querySelector("#imgThumb").src = acceptedFiles[0].preview; + // document.querySelector("#insertContainer").style.visibility = 'hidden'; + // document.querySelector("#thumbContainer").style.visibility = 'visible'; + + props.saveImage(acceptedFiles, fileIndex); + } + }); + + const images = files.map(file => ( +
+
+ + cockatil +
+
+ )); + + useEffect(() => () => { + // Make sure to revoke the data uris to avoid memory leaks + files.forEach(file => URL.revokeObjectURL(file.preview)); + }, [files]); + return (
- - -
- - - - - - - - +
+ +

Drag 'n' drop some photo here, or click to select files

+ +
+
+
+ Thumb +
+
+
+ +
);