1
- import React from 'react' ;
1
+ import React , { Component } from 'react' ;
2
2
import { withStyles } from '@material-ui/styles' ;
3
3
import styles from "./../styles/MiniPaletteStyles" ;
4
4
import DeleteIcon from '@material-ui/icons/Delete' ;
5
5
6
- function MiniPalettes ( props ) {
7
- const { classes, paletteName, emoji, colors} = props ;
8
- const miniColorBoxes = colors . map ( color => (
9
- < div key = { color . name } className = { classes . miniColor } style = { { backgroundColor : color . color } } > </ div >
10
- ) ) ;
11
- return (
12
- < div className = { classes . root } onClick = { props . selectPalette } >
13
- < div className = { classes . delete } >
14
- < DeleteIcon className = { classes . deleteIcon } style = { { transition : "all 0.3s ease-in-out" } } />
6
+ class MiniPalettes extends Component {
7
+ constructor ( props ) {
8
+ super ( props ) ;
9
+ this . handleDeletePalette = this . handleDeletePalette . bind ( this )
10
+ }
11
+ handleDeletePalette ( e ) {
12
+ e . stopPropagation ( ) ;
13
+ this . props . deletePalette ( this . props . id )
14
+ }
15
+ render ( ) {
16
+ const { classes, paletteName, emoji, colors, selectPalette} = this . props ;
17
+ const miniColorBoxes = colors . map ( color => (
18
+ < div key = { color . name } className = { classes . miniColor } style = { { backgroundColor : color . color } } > </ div >
19
+ ) ) ;
20
+ return (
21
+ < div className = { classes . root } onClick = { selectPalette } >
22
+ < DeleteIcon
23
+ className = { classes . deleteIcon }
24
+ style = { { transition : "all 0.3s ease-in-out" } }
25
+ onClick = { this . handleDeletePalette }
26
+ />
27
+ < div className = { classes . colors } >
28
+ { /*Mini Color Boxes*/ }
29
+ { miniColorBoxes }
30
+ </ div >
31
+ < h5 className = { classes . title } > { paletteName } < span className = { classes . emoji } > { emoji } </ span > </ h5 >
15
32
</ div >
16
- < div className = { classes . colors } >
17
- { /*Mini Color Boxes*/ }
18
- { miniColorBoxes }
19
- </ div >
20
- < h5 className = { classes . title } > { paletteName } < span className = { classes . emoji } > { emoji } </ span > </ h5 >
21
- </ div >
22
- )
33
+ )
34
+
35
+ }
23
36
}
24
37
25
38
export default withStyles ( styles ) ( MiniPalettes ) ;
0 commit comments