increase and decrease brightness/darkness

src/App.js

@@ -9,16 +9,48 @@ const S = {};
 class Shade extends React.Component {
 	render() {
 		return (
-			<div className={this.props.className}>{this.props.color}</div>
+			<div className={this.props.className}>
+				<span>{this.props.color}</span>
+			</div>
 		);
 	}
 }
 
 S.Shade = styled(Shade)`
-	padding: 1rem 2rem;
+width: 100%;
-	background-color: ${props => props.color};
+height: 100%;
+background-color: ${props => props.color};
+display: flex;
+flex-direction: row;
+justify-content: center;
+align-items: center;
+
+span {
+	font-weight: bold;
+	color: ${props => chroma.contrast(props.color, '#000') < 4.5 ? '#fff' : '#000'};
+	opacity: 0;
+}
+
+	&:hover span {
+		opacity: 0.9;
+	}
 `;
 
+S.ShadeBase = styled(S.Shade)`
+border: 3px solid rgba(0, 0, 0, 0.5);
+`;
+
+function IncDecButton(props) {
+	return (
+		<div className={props.className}>
+			<div>{props.children}</div>
+			<button type="button" onClick={props.onDecrement}>-</button>
+			<span>{props.value}</span>
+			<button type="button" onClick={props.onIncrement}>+</button>
+		</div>
+	);
+}
+
 class Color extends React.Component {
 	constructor(props) {
 		super(props);
@@ -29,63 +61,151 @@ class Color extends React.Component {
 			chromaColor: chroma(this.props.baseColor),
 			tints: tints,
 			shades: shades,
-		}
+			brightenAmount: this.props.brightenAmount,
+			darkenAmount: this.props.darkenAmount,
+			scaleShadeStart: this.props.scaleShadeStart,
+			scaleShadeEnd: this.props.scaleShadeEnd,
+			scaleShadeStep: this.props.scaleShadeStep,
+			scaleTintStart: this.props.scaleTintStart,
+			scaleTintEnd: this.props.scaleTintEnd,
+			scaleTintStep: this.props.scaleTintStep,
 		}
 
-	setTints(brightenAmount, start, end, step) {
+		this.incState = this.incState.bind(this);
+		this.handleClick = this.handleClick.bind(this);
+	}
+
+	setTints() {
 		this.setState((state) => {
-			const scaleTints = chroma.scale([state.chromaColor.brighten(brightenAmount), state.chromaColor]);
+			const scaleTints = chroma.scale([state.chromaColor.brighten(state.brightenAmount), state.chromaColor]);
 			const tints = [];
-			for (let i = start; i < end; i += step) {
+			for (let i = state.scaleTintStart; i < state.scaleTintEnd; i += state.scaleTintStep) {
 				tints.push(scaleTints(i).hex());
 			}
 			return {tints: tints}
 		});
 	}
 
-	setShades(darkenAmount, start, end, step) {
+	setShades() {
 		this.setState((state) => {
-			const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(darkenAmount)]);
+			const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(state.darkenAmount)]);
 			const shades = [];
-			for (let i = start; i < end; i += step) {
+			for (let i = state.scaleShadeStart; i < state.scaleShadeEnd; i += state.scaleShadeStep) {
 				shades.push(scaleShades(i).hex());
 			}
 			return {shades: shades}
 		});
 	}
 
+	handleClick() {
+		const chromaColor = chroma.random();
+		this.setState({baseColor: chromaColor.hex(), chromaColor: chromaColor});
+		this.setTints();
+		this.setShades();
+	}
+
+	incState(stateProperty, value) {
+		this.setState((state, props) => {
+			const returnObj = {};
+			returnObj[stateProperty] = state[stateProperty] + value;
+			return returnObj;
+		})
+		this.setTints();
+		this.setShades();
+	}
+
 	componentDidMount() {
-		this.setTints(2, 0.2, 0.9, 0.2);
+		this.setTints();
-		this.setShades(5, 0.1, 0.9, 0.1);
+		this.setShades();
 	}
 
 	render() {
 		return (
-			<ul className={this.props.className}>
+			<div className={this.props.className}>
+				<header>
+					<IncDecButton
+						onIncrement={() => { this.incState("brightenAmount", 0.25); }}
+						onDecrement={() => { this.incState("brightenAmount", -0.25); }}
+						value={this.state.brightenAmount}
+					>
+						<span>Brightness</span>
+					</IncDecButton>
+					<button type="button" onClick={this.handleClick}>Random</button>
+				</header>
+				<ul>
 					{this.state.tints.map((shade, index) => 
 					<li key={index}><S.Shade color={shade} /></li>
 					)}
-				<li><S.Shade color={this.state.baseColor} /></li>
+					<li><S.ShadeBase color={this.state.baseColor} isBase /></li>
 					{this.state.shades.map((tint, index) => 
 					<li key={index}><S.Shade color={tint} /></li>
 					)}
 				</ul>
+				<footer>
+					<IncDecButton
+						onIncrement={() => { this.incState("darkenAmount", 0.25); }}
+						onDecrement={() => { this.incState("darkenAmount", -0.25); }}
+						value={this.state.darkenAmount}
+					>
+						<span>Darkness</span>
+					</IncDecButton>
+				</footer>
+			</div>
 		);
 	}
 }
 
+Color.defaultProps = {
+			brightenAmount: 3,
+			darkenAmount: 3,
+			scaleShadeStart: 0.2,
+			scaleShadeEnd: 0.8,
+			scaleShadeStep: 0.1,
+			scaleTintStart: 0.2,
+			scaleTintEnd: 0.8,
+			scaleTintStep: 0.1,
+}
+
 S.Color = styled(Color)`
-list-style: none;
+display: flex;
-padding: 0;
+flex-direction: column;
-margin: 0;
+justify-content: stretch;
+align-items: stretch;
+
+ul {
+	display: flex;
+	flex-direction: column;
+	justify-content: stretch;
+	align-items: stretch;
+
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+li {
+	display: flex;
+	flex-direction: column;
+	justify-content: stretch;
+	align-items: stretch;
+	flex: 1 1 100%;
+}
 `;
 
 function App() {
 	return (
 		<div className="App">
-			<S.Color className="color-list" baseColor="#dbdfac"/>
+			<S.Color
+				className="color-list"
+				baseColor="#dbdfac"/>
+			<S.Color
+				className="color-list"
+				baseColor="#fb3640"/>
 		</div>
 	);
 }
 
 export default App;
+
+
+// vim: set ft=javascriptreact: