Emoji Picker Added

Author: CodeInDna

react-color-palettes/package-lock.json

@@ -7,6 +7,7 @@
     "@material-ui/icons": "^4.0.1",
     "@material-ui/styles": "^4.0.2",
     "chroma-js": "^2.0.3",
+    "emoji-mart": "^2.11.1",
     "nouislider-react": "^3.1.0",
     "react": "^16.8.6",
     "react-color": "^2.17.3",

react-color-palettes/package.json

@@ -99,12 +99,9 @@ class CreatePalette extends Component{
   	this.setState({colors: [...this.state.colors, newColor], newColorName: ""});
   };
 
-    savePalette(newPaletteName){
-    	const newPalette = {
-    		id: newPaletteName.toLowerCase().replace(/ /g, '-'),
-    		paletteName: newPaletteName,
-    		colors: this.state.colors
-    	}
+    savePalette(newPalette){
+      newPalette.id = newPalette.paletteName.toLowerCase().replace(/ /g, '-');
+      newPalette.colors = this.state.colors;
     	this.props.savePalette(newPalette);
     	this.props.history.push('/');
     }

react-color-palettes/src/Components/CreatePalette.js

@@ -58,11 +58,16 @@ class CreatePaletteNavBar extends Component{
 		super(props);
 		this.state = {formShowing:false};
 		this.showForm = this.showForm.bind(this);
+		this.hideForm = this.hideForm.bind(this);
 	}
 
 	showForm(){
 		this.setState({formShowing: true});
 	}
+
+	hideForm(){
+		this.setState({formShowing: false});
+	}
 	render(){
 	const {classes, open, handleDrawerOpen, savePalette, palettes} = this.props;
 	const {formShowing} = this.state;
@@ -102,7 +107,7 @@ class CreatePaletteNavBar extends Component{
 	            </div>
 		        </AppBar>
 
-		        {formShowing && <PaletteMataForm savePalette={savePalette} palettes={palettes}/>}
+		        {formShowing && <PaletteMataForm savePalette={savePalette} palettes={palettes} hideForm={this.hideForm}/>}
 			</div>
 		)
 	}

react-color-palettes/src/Components/CreatePaletteNavBar.js

@@ -7,17 +7,19 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
+import 'emoji-mart/css/emoji-mart.css'
+import { Picker } from 'emoji-mart'
 
 class PaletteMataForm extends Component{
 	constructor(props){
 		super(props);
 		this.state = {
-			open: true,
+			stage: "paletteForm",
 			newPaletteName: ""
 		}
-		this.handleClickOpen = this.handleClickOpen.bind(this);
-		this.handleClose = this.handleClose.bind(this);
 		this.handleNameChange = this.handleNameChange.bind(this);
+    this.showEmojiPicker = this.showEmojiPicker.bind(this);
+    this.savePalette = this.savePalette.bind(this);
 	}
 	componentDidMount(){
 		 ValidatorForm.addValidationRule('isPaletteNameUnique', (value) => {
@@ -31,29 +33,35 @@ class PaletteMataForm extends Component{
 		this.setState({newPaletteName: evt.target.value})
 	}
 
-  	handleClickOpen(){
-    	this.setState({ open: true });
-  	};
-
-  	handleClose(){
-   	 this.setState({ open: false });
-  	};
+  showEmojiPicker(){
+    this.setState({stage: "emoji"})
+  }
 
+  savePalette(emoji){
+    const newPalette = {paletteName: this.state.newPaletteName, emoji: emoji.native}
+    this.props.savePalette(newPalette);
+  }
   render() {
-  	const {newPaletteName} = this.state;
-  	const {savePalette} = this.props;
+  	const {newPaletteName, stage} = this.state;
+  	const {hideForm} = this.props;
     return (
+      <div>
+        <Dialog open={stage === 'emoji'}>
+           <DialogTitle id="form-dialog-title">Choose a Palette Emoji</DialogTitle>
+          <Picker onSelect={this.savePalette} title='Pick an emoji ' emoji='point_up'/>
+        </Dialog>
         <Dialog
-          open={this.state.open}
-          onClose={this.handleClose}
+          open={stage === 'paletteForm'}
+          onClose={hideForm}
           aria-labelledby="form-dialog-title"
         >
           <DialogTitle id="form-dialog-title">Choose a Palette Name</DialogTitle>
-          <ValidatorForm onSubmit={() => savePalette(newPaletteName)}>
+          <ValidatorForm onSubmit={this.showEmojiPicker}>
           <DialogContent>
             <DialogContentText>
               Please enter a name for your customised Palette. Make sure it's unique!
             </DialogContentText>
+            
 	            <TextValidator 
 	            	label="Palette Name"  
 	            	value={newPaletteName}
@@ -66,7 +74,7 @@ class PaletteMataForm extends Component{
 	            />
           </DialogContent>
           <DialogActions>
-            <Button onClick={this.handleClose} color="primary">
+            <Button onClick={hideForm} color="primary">
               Cancel
             </Button>
             <Button variant="contained" color="primary" type="submit">
@@ -75,6 +83,7 @@ class PaletteMataForm extends Component{
           </DialogActions>
           </ValidatorForm>
         </Dialog>
+      </div>
     );
   }
 }