Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cbbf7f4

Browse files
Emoji Picker Added
1 parent 5210377 commit cbbf7f4

File tree

5 files changed

+43
-23
lines changed

5 files changed

+43
-23
lines changed

β€Žreact-color-palettes/package-lock.jsonβ€Ž

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

β€Žreact-color-palettes/package.jsonβ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"@material-ui/icons": "^4.0.1",
88
"@material-ui/styles": "^4.0.2",
99
"chroma-js": "^2.0.3",
10+
"emoji-mart": "^2.11.1",
1011
"nouislider-react": "^3.1.0",
1112
"react": "^16.8.6",
1213
"react-color": "^2.17.3",

β€Žreact-color-palettes/src/Components/CreatePalette.jsβ€Ž

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,9 @@ class CreatePalette extends Component{
9999
this.setState({colors: [...this.state.colors, newColor], newColorName: ""});
100100
};
101101

102-
savePalette(newPaletteName){
103-
const newPalette = {
104-
id: newPaletteName.toLowerCase().replace(//g, '-'),
105-
paletteName: newPaletteName,
106-
colors: this.state.colors
107-
}
102+
savePalette(newPalette){
103+
newPalette.id = newPalette.paletteName.toLowerCase().replace(//g, '-');
104+
newPalette.colors = this.state.colors;
108105
this.props.savePalette(newPalette);
109106
this.props.history.push('/');
110107
}

β€Žreact-color-palettes/src/Components/CreatePaletteNavBar.jsβ€Ž

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,16 @@ class CreatePaletteNavBar extends Component{
5858
super(props);
5959
this.state = {formShowing:false};
6060
this.showForm = this.showForm.bind(this);
61+
this.hideForm = this.hideForm.bind(this);
6162
}
6263

6364
showForm(){
6465
this.setState({formShowing: true});
6566
}
67+
68+
hideForm(){
69+
this.setState({formShowing: false});
70+
}
6671
render(){
6772
const {classes, open, handleDrawerOpen, savePalette, palettes} = this.props;
6873
const {formShowing} = this.state;
@@ -102,7 +107,7 @@ class CreatePaletteNavBar extends Component{
102107
</div>
103108
</AppBar>
104109

105-
{formShowing && <PaletteMataForm savePalette={savePalette} palettes={palettes}/>}
110+
{formShowing && <PaletteMataForm savePalette={savePalette} palettes={palettes}hideForm={this.hideForm}/>}
106111
</div>
107112
)
108113
}

β€Žreact-color-palettes/src/Components/PaletteMataForm.jsβ€Ž

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,19 @@ import DialogContent from '@material-ui/core/DialogContent';
77
import DialogContentText from '@material-ui/core/DialogContentText';
88
import DialogTitle from '@material-ui/core/DialogTitle';
99
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
10+
import 'emoji-mart/css/emoji-mart.css'
11+
import { Picker } from 'emoji-mart'
1012

1113
class PaletteMataForm extends Component{
1214
constructor(props){
1315
super(props);
1416
this.state = {
15-
open: true,
17+
stage: "paletteForm",
1618
newPaletteName: ""
1719
}
18-
this.handleClickOpen = this.handleClickOpen.bind(this);
19-
this.handleClose = this.handleClose.bind(this);
2020
this.handleNameChange = this.handleNameChange.bind(this);
21+
this.showEmojiPicker = this.showEmojiPicker.bind(this);
22+
this.savePalette = this.savePalette.bind(this);
2123
}
2224
componentDidMount(){
2325
ValidatorForm.addValidationRule('isPaletteNameUnique', (value) => {
@@ -31,29 +33,35 @@ class PaletteMataForm extends Component{
3133
this.setState({newPaletteName: evt.target.value})
3234
}
3335

34-
handleClickOpen(){
35-
this.setState({ open: true });
36-
};
37-
38-
handleClose(){
39-
this.setState({ open: false });
40-
};
36+
showEmojiPicker(){
37+
this.setState({stage: "emoji"})
38+
}
4139

40+
savePalette(emoji){
41+
const newPalette = {paletteName: this.state.newPaletteName, emoji: emoji.native}
42+
this.props.savePalette(newPalette);
43+
}
4244
render() {
43-
const {newPaletteName} = this.state;
44-
const {savePalette} = this.props;
45+
const {newPaletteName, stage} = this.state;
46+
const {hideForm} = this.props;
4547
return (
48+
<div>
49+
<Dialog open={stage === 'emoji'}>
50+
<DialogTitle id="form-dialog-title">Choose a Palette Emoji</DialogTitle>
51+
<Picker onSelect={this.savePalette} title='Pick an emoji ' emoji='point_up'/>
52+
</Dialog>
4653
<Dialog
47-
open={this.state.open}
48-
onClose={this.handleClose}
54+
open={stage==='paletteForm'}
55+
onClose={hideForm}
4956
aria-labelledby="form-dialog-title"
5057
>
5158
<DialogTitle id="form-dialog-title">Choose a Palette Name</DialogTitle>
52-
<ValidatorForm onSubmit={()=>savePalette(newPaletteName)}>
59+
<ValidatorForm onSubmit={this.showEmojiPicker}>
5360
<DialogContent>
5461
<DialogContentText>
5562
Please enter a name for your customised Palette. Make sure it's unique!
5663
</DialogContentText>
64+
5765
<TextValidator
5866
label="Palette Name"
5967
value={newPaletteName}
@@ -66,7 +74,7 @@ class PaletteMataForm extends Component{
6674
/>
6775
</DialogContent>
6876
<DialogActions>
69-
<Button onClick={this.handleClose} color="primary">
77+
<Button onClick={hideForm} color="primary">
7078
Cancel
7179
</Button>
7280
<Button variant="contained" color="primary" type="submit">
@@ -75,6 +83,7 @@ class PaletteMataForm extends Component{
7583
</DialogActions>
7684
</ValidatorForm>
7785
</Dialog>
86+
</div>
7887
);
7988
}
8089
}

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /