onPick method additional

Author: bagongkia

package.json

@@ -25,7 +25,6 @@
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.28.0",
-    "immutable": "^3.8.1",
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",

src/images/check.png renamed to src/assets/images/check.png

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import imgCheck from '../assets/images/check.png'
+
+const ImageStyle = (width, height) => {
+  return {
+    width,
+    height,
+    objectFit: "cover"
+  }
+}
+
+export default class Image extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const { src, isSelected, onImageClick } = this.props
+    return (
+      <div className={`responsive${isSelected ? " selected" : ""}`}
+        onClick={onImageClick}>
+        <img src={src}
+          className={`thumbnail${isSelected ? " selected" : ""}`}
+          style={ImageStyle(150, 150)}
+        />
+        <div className="checked">
+          <img src={imgCheck} style={{ width: 75, height: 75, objectFit: "cover" }}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+Image.propTypes = {
+  src: PropTypes.string,
+  isSelected: PropTypes.bool
+}

src/images/kitten/200.jpg renamed to src/assets/images/kitten/200.jpg

@@ -1,67 +1,34 @@
 import React, { Component } from 'react'
 import { render } from 'react-dom'
-import { Map } from 'immutable'
-import './index.scss'
+import ImagePicker from './react-image-picker'
 
-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'
-import imgCheck from './images/check.png'
+import img1 from './assets/images/kitten/200.jpg'
+import img2 from './assets/images/kitten/201.jpg'
+import img3 from './assets/images/kitten/202.jpg'
+import img4 from './assets/images/kitten/203.jpg'
 
 const imageList = [img1, img2, img3, img4]
 
-class ImagePicker extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      selected: Map()
-    }
-    this.handleImageClick = this.handleImageClick.bind(this)
-    this.renderImage = this.renderImage.bind(this)
+class Demo extends Component {
+  constructor() {
+    super()
+    this.state = {image: {}}
   }
 
-  handleImageClick(key) {
-    const multiple = this.props.multiple || false
-    const prevSelected = multiple ? this.state.selected : Map()
-
-    const selected = prevSelected.set(key, !this.state.selected.get(key) || false)
-    return () => {
-      this.setState({ selected })
-    }
-  }
-
-  renderImage(image, key) {
-    const selected = this.state.selected.get(key) || false
-    return (
-      <div key={key}
-        className={`responsive${selected ? " selected" : ""}`} 
-        onClick={this.handleImageClick(key)}>
-        <img src={image}
-          className={`thumbnail${selected ? " selected" : ""}`}
-          style={{ width: 150, height: 150, objectFit: "cover" }}
-        />
-        <div className="checked">
-          <img src={imgCheck} style={{ width: 75, height: 75, objectFit: "cover" }}/>
-        </div>
-      </div>
-    )
+  onPick(image) {
+    this.setState({image})
   }
 
   render() {
-    const { images } = this.props
     return (
-      <div className="image_picker">
-        { images.map(this.renderImage) }
+      <div>
+        <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>
       </div>
     )
   }
 }
 
-render(
-  <ImagePicker images={imageList}
-    
-  />, document.querySelector('#root')
-)
-
-export default ImagePicker
+render(<Demo/>, document.querySelector('#root'))

src/images/kitten/201.jpg renamed to src/assets/images/kitten/201.jpg

@@ -7,15 +7,6 @@
     float: left;
     opacity: 1;
 
-    @media only screen and (max-width: 700px){
-      width: 49.99999%;
-      margin: 6px 0;
-    }
-
-    @media only screen and (max-width: 500px){
-      width: 100%;
-    }
-
     .thumbnail {
       border: 1px solid #ddd; /* Gray border */
       border-radius: 4px;  /* Rounded border */
@@ -52,4 +43,8 @@
       right: 0;
     }
   }
+
+  .clear {
+    clear: both;
+  }
 }

src/images/kitten/202.jpg renamed to src/assets/images/kitten/202.jpg

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import Image from './components/image'
+import './index.scss'
+
+class ImagePicker extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { selected: [] }
+    this.getSelected = this.getSelected.bind(this)
+    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})
+  }
+
+  renderImage(image, i) {
+    return <Image src={image.src} isSelected={this.state.selected[i]} onImageClick={() => this.handleImageClick(i)} key={i}/>
+  }
+
+  render() {
+    const { images, buttonOK } = this.props
+    return (
+      <div className="image_picker">
+        { images.map(this.renderImage) }
+        <div className="clear"/>
+      </div>
+    )
+  }
+}
+
+ImagePicker.propTypes = {
+  images: PropTypes.array,
+  multiple: PropTypes.bool
+}
+
+export default ImagePicker