Fix Multiple Pick Selection Feature

bagongkia · bagongkia · commit e33b378b21be · 2017-06-30T12:01:02.000+07:00
Documentation update
diff --git a/README.md b/README.md
@@ -9,4 +9,56 @@ The image picker is used for selecting single or multiple images from gallery.
 ## Features
 - jQuery Free
 - Single or multiple images selection
-- ...
+- Styling (...in progress)
+- ...
+
+## Installation
+```
+npm install react-image-picker
+```
+
+### Examples
+![React Image Picker Demo](https://raw.githubusercontent.com/bagongkia/react-image-picker/master/docs/img/react-image-picker-demo.jpg)
+
+```javascript
+//ES6
+import React, { Component } from 'react'
+import ImagePicker from 'react-image-picker'
+import 'react-image-picker/dist/index.css'
+
+//import images from local
+import img1 from './images/kitten/200.jpg'
+import img2 from './images/kitten/201.jpg'
+import img3 from './images/kitten/202.jpg'
+import img4 from './images/kitten/203.jpg'
+
+const imageList = [img1, img2, img3, img4]
+
+class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      image: null
+    }
+    this.onPick = this.onPick.bind(this)
+  }
+
+  onPick(image) {
+    this.setState({image})
+  }
+
+  render() {
+    return (
+      <div>
+        <ImagePicker 
+          images={imageList.map((image, i) => ({src: image, value: i}))}
+          onPick={this.onPick}
+        />
+        <button type="button" onClick={() => console.log(this.state.image)}>OK</button>
+      </div>
+    )
+  }
+}
+
+export default App
+```
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>React Image Picker Demo</title><link href="index.css?a7016ddaf2aae12930c3" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="./index.js?a7016ddaf2aae12930c3"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>React Image Picker Demo</title><link href="index.css?9c38db6b8b4267090e19" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="./index.js?9c38db6b8b4267090e19"></script></body></html>
diff --git a/dist/index.js b/dist/index.js
diff --git a/docs/img/react-image-picker-demo.jpg b/docs/img/react-image-picker-demo.jpg
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.28.0",
+    "immutable": "^3.8.1",
     "mocha": "^3.4.2",
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
diff --git a/src/index.js b/src/index.js
@@ -10,9 +10,9 @@ import img4 from './assets/images/kitten/203.jpg'
 const imageList = [img1, img2, img3, img4]
 
 class Demo extends Component {
-  constructor() {
-    super()
-    this.state = {image: {}}
+  constructor(props) {
+    super(props)
+    this.state = {image: null}
   }
 
   onPick(image) {
@@ -22,7 +22,8 @@ class Demo extends Component {
   render() {
     return (
       <div>
-        <ImagePicker images={imageList.map((image, i) => ({src: image, value: i}))}
+        <ImagePicker 
+          images={imageList.map((image, i) => ({src: image, value: i}))}
           onPick={this.onPick.bind(this)}
         />
         <button type="button" onClick={() => console.log(this.state.image)}>OK</button>
diff --git a/src/react-image-picker.js b/src/react-image-picker.js
@@ -1,53 +1,49 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Map } from 'immutable'
 
-import Image from './components/image'
 import './index.scss'
+import Image from './components/image'
 
 class ImagePicker extends Component {
   constructor(props) {
     super(props)
-    this.state = { selected: [] }
-    this.getSelected = this.getSelected.bind(this)
+    this.state = {
+      picked: Map()
+    }
     this.handleImageClick = this.handleImageClick.bind(this)
     this.renderImage = this.renderImage.bind(this)
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    const { images, onPick } = this.props
-    if (prevProps.images !== images) {
-      this.setState(Array(this.props.images.length).fill(false))
-    }
-    if (prevState.selected !== this.state.selected) {
-      onPick(this.getSelected())
-    }
-  }
-
-  getSelected() {
-    const { images, multiple } = this.props
-    const selected = []
-    images.map((image, i) => {
-      if (this.state.selected[i]) {
-        selected.push(images[i])
-      }
-    })
-
-    return multiple ? selected : selected[0]
-  }
-
-  handleImageClick(i) {
-    const { images, multiple } = this.props
-    const selected = multiple ? this.state.selected : Array(images.length).fill(false)
-    selected[i] = !selected[i]
-    this.setState({selected: selected})
+  handleImageClick(image) {
+    const { multiple, onPick } = this.props
+    const pickedImage = multiple ? this.state.picked : Map()
+    const newerPickedImage = 
+      pickedImage.has(image.value) ? 
+        pickedImage.delete(image.value) : 
+          pickedImage.set(image.value, image.src)
+          
+    this.setState({picked: newerPickedImage})
+
+    const pickedImageToArray = []
+    newerPickedImage.map((image, i) => pickedImageToArray.push({src: image, value: i}))
+    
+    onPick(multiple ? pickedImageToArray : pickedImageToArray[0])
   }
 
   renderImage(image, i) {
-    return <Image src={image.src} isSelected={this.state.selected[i]} onImageClick={() => this.handleImageClick(i)} key={i}/>
+    return (
+      <Image 
+        src={image.src}
+        isSelected={this.state.picked.has(image.value)} 
+        onImageClick={() => this.handleImageClick(image)} 
+        key={i}
+      />
+    )
   }
 
   render() {
-    const { images, buttonOK } = this.props
+    const { images } = this.props
     return (
       <div className="image_picker">
         { images.map(this.renderImage) }
@@ -59,7 +55,8 @@ class ImagePicker extends Component {
 
 ImagePicker.propTypes = {
   images: PropTypes.array,
-  multiple: PropTypes.bool
+  multiple: PropTypes.bool,
+  onPick: PropTypes.func
 }
 
 export default ImagePicker

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>React Image Picker Demo</title><link href="index.css?a7016ddaf2aae12930c3" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="./index.js?a7016ddaf2aae12930c3"></script></body></html>`
	`1`	`+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>React Image Picker Demo</title><link href="index.css?9c38db6b8b4267090e19" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="./index.js?9c38db6b8b4267090e19"></script></body></html>`