Added ability to clear new palette, generate new color, checks if new…

… palette is full
GpGardner · Jun 25, 2020 · 827fa42 · 827fa42
1 parent e89930d
commit 827fa42
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/src/Components/NewPaletteForm/DraggableColorBox.js b/src/Components/NewPaletteForm/DraggableColorBox.js
@@ -36,7 +36,6 @@ const styles = {
 };
 
 const DraggableColorBox = SortableElement((props) => {
-  console.log(props);
   const { classes, name, color } = props;
 
   const handleDeleteColorBox = () => {

diff --git a/src/Components/NewPaletteForm/NewPaletteForm.js b/src/Components/NewPaletteForm/NewPaletteForm.js
@@ -79,14 +79,17 @@ const styles = (theme) => ({
 });
 
 class NewPaletteForm extends Component {
+  static defaultProps = {
+    maxColors: 20,
+  };
   constructor(props) {
     super(props);
     this.state = {
       open: true,
       currentColor: "teal",
       newColorName: "",
       newPaletteName: "",
-      colors: seedColors[0].colors,
+      colors: this.props.palettes[0].colors,
     };
   }
 
@@ -159,15 +162,31 @@ class NewPaletteForm extends Component {
     });
   };
 
+  clearPalette = () => {
+    this.setState({
+      colors: [],
+    });
+  };
+
+  addRandomColor = () => {
+    const allColors = this.props.palettes.map((p) => p.colors).flat();
+    let randomNumber = Math.floor(Math.random() * 100);
+    let randomlyPickedColor = allColors[randomNumber];
+    this.setState({
+      colors: [...this.state.colors, randomlyPickedColor],
+    });
+  };
+
   onSortEnd = ({ oldIndex, newIndex }) => {
     this.setState(({ colors }) => ({
       colors: arrayMove(colors, oldIndex, newIndex),
     }));
   };
 
   render() {
-    const { classes } = this.props;
-    const { open } = this.state;
+    const { classes, maxColors } = this.props;
+    const { open, colors } = this.state;
+    const paletteIsFull = colors.length >= maxColors;
 
     return (
       <div className={classes.root}>
@@ -226,10 +245,19 @@ class NewPaletteForm extends Component {
           <Divider />
           <Typography variant="h4">Design your palette</Typography>
           <div>
-            <Button variant="contained" color="primary">
-              Random Color
+            <Button
+              variant="contained"
+              color="primary"
+              disabled={paletteIsFull}
+              onClick={this.addRandomColor}
+            >
+              {paletteIsFull ? "Palette Full" :  "Random Color"}
             </Button>
-            <Button variant="contained" color="secondary">
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={this.clearPalette}
+            >
               Clear Palette
             </Button>
           </div>
@@ -254,9 +282,10 @@ class NewPaletteForm extends Component {
               variant="contained"
               type="submit"
               color="primary"
-              style={{ backgroundColor: this.state.currentColor }}
+              disabled={paletteIsFull}
+              style={paletteIsFull ? {} : { backgroundColor: this.state.currentColor }}
             >
-              Add Color
+              {paletteIsFull ? "Palette Full" :  "Add Color!"}
             </Button>
           </ValidatorForm>
         </Drawer>
@@ -267,7 +296,7 @@ class NewPaletteForm extends Component {
         >
           <div className={classes.drawerHeader} />
           <DraggableColorList
-            colors={this.state.colors}
+            colors={colors}
             removeColorBox={this.removeColorBox}
             axis="xy"
             onSortEnd={this.onSortEnd}