From fef8511daf0d2223dd6f9105430defbe8e5b4f3d Mon Sep 17 00:00:00 2001 From: ray Date: Mon, 27 Apr 2020 22:07:44 +0100 Subject: [PATCH] increase decrease nuber of shades/tints --- src/App.js | 54 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index e93aa28..0a93254 100644 --- a/src/App.js +++ b/src/App.js @@ -45,7 +45,9 @@ function IncDecButton(props) {
{props.children}
- {props.value} + {props.value !== undefined && + {props.value} + }
); @@ -65,10 +67,10 @@ class Color extends React.Component { darkenAmount: this.props.darkenAmount, scaleShadeStart: this.props.scaleShadeStart, scaleShadeEnd: this.props.scaleShadeEnd, - scaleShadeStep: this.props.scaleShadeStep, + scaleShadeStepCount: this.props.scaleShadeStepCount, scaleTintStart: this.props.scaleTintStart, scaleTintEnd: this.props.scaleTintEnd, - scaleTintStep: this.props.scaleTintStep, + scaleTintStepCount: this.props.scaleTintStepCount, } this.incState = this.incState.bind(this); @@ -79,7 +81,8 @@ class Color extends React.Component { this.setState((state) => { const scaleTints = chroma.scale([state.chromaColor.brighten(state.brightenAmount), state.chromaColor]); const tints = []; - for (let i = state.scaleTintStart; i < state.scaleTintEnd; i += state.scaleTintStep) { + const step = (state.scaleTintEnd - state.scaleTintStart) / state.scaleTintStepCount; + for (let i = state.scaleTintStart; i < state.scaleTintEnd; i += step) { tints.push(scaleTints(i).hex()); } return {tints: tints} @@ -90,7 +93,8 @@ class Color extends React.Component { this.setState((state) => { const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(state.darkenAmount)]); const shades = []; - for (let i = state.scaleShadeStart; i < state.scaleShadeEnd; i += state.scaleShadeStep) { + const step = (state.scaleShadeEnd - state.scaleShadeStart) / state.scaleShadeStepCount; + for (let i = state.scaleShadeStart; i < state.scaleShadeEnd; i += step) { shades.push(scaleShades(i).hex()); } return {shades: shades} @@ -106,8 +110,10 @@ class Color extends React.Component { incState(stateProperty, value) { this.setState((state, props) => { + const newValue = state[stateProperty] + value; + if (newValue <= 0) { return {}; } const returnObj = {}; - returnObj[stateProperty] = state[stateProperty] + value; + returnObj[stateProperty] = newValue; return returnObj; }) this.setTints(); @@ -123,6 +129,7 @@ class Color extends React.Component { return (
+ { this.incState("brightenAmount", 0.25); }} onDecrement={() => { this.incState("brightenAmount", -0.25); }} @@ -130,7 +137,12 @@ class Color extends React.Component { > Brightness - + { this.incState("scaleTintStepCount", 1); }} + onDecrement={() => { this.incState("scaleTintStepCount", -1); }} + > + Count +