Skip to content

Commit fcb42a0

Browse files
CodeInDnaCodeInDna
committed
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"

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

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)