(
49 |
50 |
51 |
52 | (
56 |
57 |
62 |
63 | )}
64 | />
65 | (
69 |
70 |
76 |
77 | )}
78 | />
79 | (
83 |
84 |
89 |
90 | )}
91 | />
92 | (
96 |
97 |
102 |
103 | )}
104 | />
105 | (
107 |
108 |
113 |
114 | )}
115 | />
116 |
117 |
118 |
119 | )}
120 | />
121 | );
122 | }
123 | }
124 |
125 | export default App;
126 |
--------------------------------------------------------------------------------
/colors-app/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/colors-app/src/ColorBox.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { CopyToClipboard } from "react-copy-to-clipboard";
3 | import { Link } from "react-router-dom";
4 | import classNames from "classnames";
5 | import { withStyles } from "@material-ui/styles";
6 | import styles from "./styles/ColorBoxStyles";
7 |
8 | class ColorBox extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = { copied: false };
12 | this.changeCopyState = this.changeCopyState.bind(this);
13 | }
14 | changeCopyState() {
15 | this.setState({ copied: true }, () => {
16 | setTimeout(() => this.setState({ copied: false }), 1500);
17 | });
18 | }
19 |
20 | render() {
21 | const {
22 | name,
23 | background,
24 | moreUrl,
25 | showingFullPalette,
26 | classes
27 | } = this.props;
28 |
29 | const { copied } = this.state;
30 | return (
31 |
32 |
33 |
39 |
40 |
45 |
copied!
46 |
{background}
47 |
48 |
49 |
50 | {name}
51 |
52 |
53 |
54 | {showingFullPalette && (
55 |
e.stopPropagation()}>
56 |
MORE
57 |
58 | )}
59 |
48 |
53 |
58 |
73 |
85 |
86 |
87 | );
88 | }
89 | }
90 | export default withStyles(styles)(ColorPickerForm);
91 |
--------------------------------------------------------------------------------
/colors-app/src/DraggableColorBox.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { SortableElement } from "react-sortable-hoc";
3 | import { withStyles } from "@material-ui/styles";
4 | import DeleteIcon from "@material-ui/icons/Delete";
5 | import styles from "./styles/DraggableColorBoxStyles";
6 |
7 | const DraggableColorBox = SortableElement(props => {
8 | const { classes, handleClick, name, color } = props;
9 | return (
10 |
11 |
12 | {name}
13 |
14 |
15 |
8 | {colors.map((color, i) => (
9 | removeColor(color.name)}
15 | />
16 | ))}
17 |
18 | );
19 | });
20 | export default DraggableColorList;
21 |
--------------------------------------------------------------------------------
/colors-app/src/MiniPalette.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from "react";
2 | import { withStyles } from "@material-ui/styles";
3 | import styles from "./styles/MiniPaletteStyles";
4 | import DeleteIcon from "@material-ui/icons/Delete";
5 |
6 | class MiniPalette extends PureComponent {
7 | constructor(props) {
8 | super(props);
9 | this.deletePalette = this.deletePalette.bind(this);
10 | this.handleClick = this.handleClick.bind(this);
11 | }
12 | deletePalette(e) {
13 | e.stopPropagation();
14 | this.props.openDialog(this.props.id);
15 | }
16 | handleClick() {
17 | this.props.goToPalette(this.props.id);
18 | }
19 | render() {
20 | const { classes, paletteName, emoji, colors } = this.props;
21 |
22 | const miniColorBoxes = colors.map(color => (
23 |
28 | ));
29 | return (
30 |
31 |
36 |
37 |
{miniColorBoxes}
38 |
39 | {paletteName} {emoji}
40 |
41 |
33 | reactcolorpicker
34 |
35 | {showingAllColors && (
36 |
37 |
Level: {level}
38 |
39 |
46 |
47 |
50 |
55 |
56 |
62 | Format Changed To {format.toUpperCase()}
63 |
64 | }
65 | ContentProps={{
66 | "aria-describedby": "message-id"
67 | }}
68 | onClose={this.closeSnackbar}
69 | action={[
70 |
76 |
77 |
78 | ]}
79 | />
80 |
81 | );
82 | }
83 | }
84 | export default withStyles(styles)(Navbar);
85 |
--------------------------------------------------------------------------------
/colors-app/src/NewPaletteForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import classNames from "classnames";
3 | import { withStyles } from "@material-ui/core/styles";
4 | import PaletteFormNav from "./PaletteFormNav";
5 | import ColorPickerForm from "./ColorPickerForm";
6 | import Drawer from "@material-ui/core/Drawer";
7 | import Typography from "@material-ui/core/Typography";
8 | import Divider from "@material-ui/core/Divider";
9 | import IconButton from "@material-ui/core/IconButton";
10 | import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
11 | import Button from "@material-ui/core/Button";
12 | import DraggableColorList from "./DraggableColorList";
13 | import { arrayMove } from "react-sortable-hoc";
14 | import styles from "./styles/NewPaletteFormStyles";
15 | import seedColors from "./seedColors";
16 |
17 | class NewPaletteForm extends Component {
18 | static defaultProps = {
19 | maxColors: 20
20 | };
21 | constructor(props) {
22 | super(props);
23 | this.state = {
24 | open: true,
25 | colors: seedColors[0].colors
26 | };
27 | this.addNewColor = this.addNewColor.bind(this);
28 | this.handleChange = this.handleChange.bind(this);
29 | this.handleSubmit = this.handleSubmit.bind(this);
30 | this.removeColor = this.removeColor.bind(this);
31 | this.clearColors = this.clearColors.bind(this);
32 | this.addRandomColor = this.addRandomColor.bind(this);
33 | }
34 |
35 | handleDrawerOpen = () => {
36 | this.setState({ open: true });
37 | };
38 |
39 | handleDrawerClose = () => {
40 | this.setState({ open: false });
41 | };
42 |
43 | addNewColor(newColor) {
44 | this.setState({
45 | colors: [...this.state.colors, newColor],
46 | newColorName: ""
47 | });
48 | }
49 | handleChange(evt) {
50 | this.setState({
51 | [evt.target.name]: evt.target.value
52 | });
53 | }
54 | clearColors() {
55 | this.setState({ colors: [] });
56 | }
57 | addRandomColor() {
58 | const allColors = this.props.palettes.map(p => p.colors).flat();
59 | let rand;
60 | let randomColor;
61 | let isDuplicateColor = true;
62 | while (isDuplicateColor) {
63 | rand = Math.floor(Math.random() * allColors.length);
64 | randomColor = allColors[rand];
65 | isDuplicateColor = this.state.colors.some(
66 | color => color.name === randomColor.name
67 | );
68 | }
69 | this.setState({ colors: [...this.state.colors, randomColor] });
70 | }
71 | handleSubmit(newPalette) {
72 | newPalette.id = newPalette.paletteName.toLowerCase().replace(/ /g, "-");
73 | newPalette.colors = this.state.colors;
74 | this.props.savePalette(newPalette);
75 | this.props.history.push("/");
76 | }
77 | removeColor(colorName) {
78 | this.setState({
79 | colors: this.state.colors.filter(color => color.name !== colorName)
80 | });
81 | }
82 | onSortEnd = ({ oldIndex, newIndex }) => {
83 | this.setState(({ colors }) => ({
84 | colors: arrayMove(colors, oldIndex, newIndex)
85 | }));
86 | };
87 |
88 | render() {
89 | const { classes, maxColors, palettes } = this.props;
90 | const { open, colors } = this.state;
91 | const paletteIsFull = colors.length >= maxColors;
92 |
93 | return (
94 |
95 |
101 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | Design Your Palette
119 |
120 |
121 |
129 |
138 |
139 |
144 |
146 |
151 |
152 |
159 |
160 |
36 |
42 |
{colorBoxes}
43 |
44 |
46 |
47 |
54 |
55 |
63 |
64 |
65 |
66 | Create A Palette
67 |
68 |
69 |
70 |
71 |
78 |
79 |
87 |
88 |
89 | {formShowing && (
90 |
95 | )}
96 |
49 |
50 |
54 |
55 | {palettes.map(palette => (
56 |
57 |
64 |
65 | ))}
66 |
67 |
68 |
97 |
60 |
66 |
102 |
44 |
45 |
46 | {colorBoxes}
47 |
48 | GO BACK
49 |
50 |
51 |
52 |