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 9e1ba29

Browse files
Draggable Color Box Styling
1 parent db05428 commit 9e1ba29

File tree

3 files changed

+62
-9
lines changed

3 files changed

+62
-9
lines changed

‎react-color-palettes/src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ class App extends Component {
2929
render(){
3030
return (
3131
<Switch>
32-
<Route exact path='/palette/create' render={(routeProps) => <CreatePalette savePalette={this.savePalette} {...routeProps}/>}/>
32+
<Route exact path='/palette/create' render={(routeProps) => <CreatePalette palettes={this.state.palettes}savePalette={this.savePalette} {...routeProps}/>}/>
3333
<Route exact path='/' render={(routeProps) => <PaletteList palettes={this.state.palettes} {...routeProps}/>}/>
3434
<Route exact path='/palette/:id' render={(routeProps) => <Palette palette={generateColors(this.findPalette(routeProps.match.params.id), 10)}/>}/>
3535
<Route exact path='/palette/:paletteId/:colorId' render={(routeProps) =>

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

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ class CreatePalette extends Component{
8282
currentColor: "teal",
8383
newColorName: "",
8484
colors: [],
85+
newPaletteName: ""
8586
}
8687
this.handleDrawerOpen = this.handleDrawerOpen.bind(this);
8788
this.handleDrawerClose = this.handleDrawerClose.bind(this);
@@ -107,7 +108,9 @@ class CreatePalette extends Component{
107108
this.setState({colors: [...this.state.colors, newColor], newColorName: ""});
108109
};
109110
handleNameChange(evt){
110-
this.setState({newColorName: evt.target.value});
111+
this.setState({
112+
[evt.target.name]: evt.target.value
113+
});
111114
};
112115
// Custom Validation
113116
componentDidMount() {
@@ -121,9 +124,14 @@ class CreatePalette extends Component{
121124
({color}) => color !== this.state.currentColor
122125
);
123126
});
127+
ValidatorForm.addValidationRule('isPaletteNameUnique', (value) => {
128+
return this.props.palettes.every(
129+
({paletteName}) => paletteName.toLowerCase() !== value.toLowerCase()
130+
);
131+
});
124132
};
125133
savePalette(){
126-
let newPaletteName = "New Test Palette";
134+
let newPaletteName = this.state.newPaletteName;
127135
const newPalette = {
128136
id: newPaletteName.toLowerCase().replace(//g, '-'),
129137
paletteName: newPaletteName,
@@ -159,10 +167,19 @@ class CreatePalette extends Component{
159167
Persistent drawer
160168
</Typography>
161169

162-
<Button variant="contained" color="primary" onClick={this.savePalette}>
163-
Save Palette
164-
</Button>
165-
170+
<ValidatorForm onSubmit={this.savePalette}>
171+
<TextValidator
172+
label="Palette Name"
173+
value={this.state.newPaletteName}
174+
name="newPaletteName"
175+
onChange={this.handleNameChange}
176+
validators={['required', 'isPaletteNameUnique']}
177+
errorMessages={['Enter a Color Name', 'Palette Name already exist!']}
178+
/>
179+
<Button variant="contained" color="primary" type="submit">
180+
Save Palette
181+
</Button>
182+
</ValidatorForm>
166183
</Toolbar>
167184
</AppBar>
168185
<Drawer
@@ -192,7 +209,8 @@ class CreatePalette extends Component{
192209

193210
<ValidatorForm onSubmit={this.createNewColor}>
194211
<TextValidator
195-
value={this.state.newColorName}
212+
value={this.state.newColorName}
213+
name="newColorName"
196214
onChange={this.handleNameChange}
197215
validators={['required', 'isColorNameUnique', 'isColorUnique']}
198216
errorMessages={['Enter a Color Name', 'Color Name is Taken', 'Color already Added']}

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import React , {Component} from 'react';
22
import {withStyles} from "@material-ui/styles";
3+
import Grid from '@material-ui/core/Grid';
4+
import Typography from '@material-ui/core/Typography';
5+
import DeleteIcon from '@material-ui/icons/Delete';
36

47
const styles = {
58
root: {
@@ -10,11 +13,43 @@ const styles = {
1013
position: "relative",
1114
cursor: "pointer",
1215
marginBottom: "-3.8px",
16+
"&:hover svg":{
17+
color: "white",
18+
transform: "scale(1.5)"
19+
}
20+
},
21+
boxContent: {
22+
position: "absolute",
23+
bottom: "0px",
24+
left: "0px",
25+
padding: "10px",
26+
width: "100%",
27+
color: "rgb(0, 0, 0, 0.5)",
28+
textTransform: "uppercase",
29+
letterSpacing: "1px",
30+
fontSize: "12px",
31+
display: "flex",
32+
justifyContent:"space-between"
33+
},
34+
deleteColorBox: {
35+
transition: "all 0.3s ease-in-out"
1336
}
1437
}
1538

1639
function DraggableColorBoxes(props){
17-
return <div className={props.classes.root} style={{backgroundColor: props.color}}>{props.name}</div>;
40+
const {classes} = props;
41+
return (
42+
<div
43+
className={classes.root}
44+
style={{backgroundColor: props.color}}
45+
>
46+
<div className={classes.boxContent}>
47+
<span>{props.name}</span>
48+
<DeleteIcon className={classes.deleteColorBox}></DeleteIcon>
49+
</div>
50+
</div>
51+
52+
);
1853
}
1954

2055
export default withStyles(styles)(DraggableColorBoxes);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /