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 fcb42a0

Browse files
Create New Palette NavBar Refactored
1 parent dd31acd commit fcb42a0

File tree

2 files changed

+96
-51
lines changed

2 files changed

+96
-51
lines changed

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

Lines changed: 13 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
import React, {Component} from 'react';
2+
import CreatePaletteNavBar from './CreatePaletteNavBar';
23
import classNames from 'clsx';
34
import { withStyles } from '@material-ui/core/styles';
45
import Drawer from '@material-ui/core/Drawer';
5-
import CssBaseline from '@material-ui/core/CssBaseline';
6-
import AppBar from '@material-ui/core/AppBar';
7-
import Toolbar from '@material-ui/core/Toolbar';
8-
import Typography from '@material-ui/core/Typography';
96
import Divider from '@material-ui/core/Divider';
107
import IconButton from '@material-ui/core/IconButton';
11-
import MenuIcon from '@material-ui/icons/Menu';
128
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
139
import Button from '@material-ui/core/Button';
14-
import DraggableColorBoxes from './DraggableColorBoxes';
1510
import { ChromePicker } from 'react-color'; /*Color Picker*/
1611
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
1712
import DraggableColorList from './DraggableColorList';
@@ -84,8 +79,7 @@ class CreatePalette extends Component{
8479
open: true,
8580
currentColor: "teal",
8681
newColorName: "",
87-
colors: this.props.palettes[0].colors,
88-
newPaletteName: ""
82+
colors: this.props.palettes[0].colors
8983
}
9084
this.handleDrawerOpen = this.handleDrawerOpen.bind(this);
9185
this.handleDrawerClose = this.handleDrawerClose.bind(this);
@@ -130,14 +124,8 @@ class CreatePalette extends Component{
130124
({color}) => color !== this.state.currentColor
131125
);
132126
});
133-
ValidatorForm.addValidationRule('isPaletteNameUnique', (value) => {
134-
return this.props.palettes.every(
135-
({paletteName}) => paletteName.toLowerCase() !== value.toLowerCase()
136-
);
137-
});
138127
};
139-
savePalette(){
140-
let newPaletteName = this.state.newPaletteName;
128+
savePalette(newPaletteName){
141129
const newPalette = {
142130
id: newPaletteName.toLowerCase().replace(//g, '-'),
143131
paletteName: newPaletteName,
@@ -167,47 +155,21 @@ class CreatePalette extends Component{
167155
this.setState({colors: [...this.state.colors, randomColor]});
168156
}
169157
render() {
170-
const { classes, theme, maxColors} = this.props;
158+
const { classes, theme, maxColors, palettes} = this.props;
171159
const { open, colors } = this.state;
172160
const paletteFull = colors.length >= maxColors;
173161
return (
174162
<div className={classes.root}>
175-
<CssBaseline />
176-
<AppBar
177-
position="fixed"
178-
color="default"
179-
className={classNames(classes.appBar, {
180-
[classes.appBarShift]: open,
181-
})}
182-
>
183-
<Toolbar disableGutters={!open}>
184-
<IconButton
185-
color="inherit"
186-
aria-label="Open drawer"
187-
onClick={this.handleDrawerOpen}
188-
className={classNames(classes.menuButton, open && classes.hide)}
189-
>
190-
<MenuIcon />
191-
</IconButton>
192-
<Typography variant="h6" color="inherit" noWrap>
193-
Persistent drawer
194-
</Typography>
163+
{/*NavBar*/}
164+
<CreatePaletteNavBar
165+
open={open}
166+
classes={classes}
167+
palettes={palettes}
168+
handleDrawerOpen={this.handleDrawerOpen}
169+
savePalette={this.savePalette}
170+
/>
171+
{/*NavBar Ends*/}
195172

196-
<ValidatorForm onSubmit={this.savePalette}>
197-
<TextValidator
198-
label="Palette Name"
199-
value={this.state.newPaletteName}
200-
name="newPaletteName"
201-
onChange={this.handleNameChange}
202-
validators={['required', 'isPaletteNameUnique']}
203-
errorMessages={['Enter a Color Name', 'Palette Name already exist!']}
204-
/>
205-
<Button variant="contained" color="primary" type="submit">
206-
Save Palette
207-
</Button>
208-
</ValidatorForm>
209-
</Toolbar>
210-
</AppBar>
211173
<Drawer
212174
className={classes.drawer}
213175
variant="persistent"
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, {Component} from 'react';
2+
import classNames from 'clsx';
3+
import {Link} from 'react-router-dom';
4+
import { withStyles } from '@material-ui/core/styles';
5+
import CssBaseline from '@material-ui/core/CssBaseline';
6+
import AppBar from '@material-ui/core/AppBar';
7+
import Toolbar from '@material-ui/core/Toolbar';
8+
import Typography from '@material-ui/core/Typography';
9+
import IconButton from '@material-ui/core/IconButton';
10+
import MenuIcon from '@material-ui/icons/Menu';
11+
import Button from '@material-ui/core/Button';
12+
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
13+
14+
class CreatePaletteNavBar extends Component{
15+
constructor(props){
16+
super(props);
17+
this.state = {
18+
newPaletteName: ""
19+
}
20+
this.handleNameChange = this.handleNameChange.bind(this);
21+
}
22+
componentDidMount(){
23+
ValidatorForm.addValidationRule('isPaletteNameUnique', (value) => {
24+
return this.props.palettes.every(
25+
({paletteName}) => paletteName.toLowerCase() !== value.toLowerCase()
26+
);
27+
});
28+
}
29+
// Palette Name Change: update the state
30+
handleNameChange(evt){
31+
this.setState({newPaletteName: evt.target.value})
32+
}
33+
render(){
34+
const {classes, open, handleDrawerOpen, handleNameChange, savePalette} = this.props;
35+
return(
36+
<div>
37+
<CssBaseline />
38+
<AppBar
39+
position="fixed"
40+
color="default"
41+
className={classNames(classes.appBar, {
42+
[classes.appBarShift]: open,
43+
})}
44+
>
45+
<Toolbar disableGutters={!open}>
46+
<IconButton
47+
color="inherit"
48+
aria-label="Open drawer"
49+
onClick={handleDrawerOpen}
50+
className={classNames(classes.menuButton, open && classes.hide)}
51+
>
52+
<MenuIcon />
53+
</IconButton>
54+
<Typography variant="h6" color="inherit" noWrap>
55+
Persistent drawer
56+
</Typography>
57+
58+
<ValidatorForm onSubmit={() => savePalette(this.state.newPaletteName)}>
59+
<TextValidator
60+
label="Palette Name"
61+
value={this.state.newPaletteName}
62+
name="newPaletteName"
63+
onChange={this.handleNameChange}
64+
validators={['required', 'isPaletteNameUnique']}
65+
errorMessages={['Enter a Color Name', 'Palette Name already exist!']}
66+
/>
67+
<Button variant="contained" color="primary" type="submit">
68+
Save Palette
69+
</Button>
70+
71+
<Link to='/'>
72+
<Button variant="contained" color="secondary">
73+
Go Back
74+
</Button>
75+
</Link>
76+
</ValidatorForm>
77+
</Toolbar>
78+
</AppBar>
79+
</div>
80+
)
81+
}
82+
}
83+
export default CreatePaletteNavBar;

0 commit comments

Comments
(0)

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