increase decrease nuber of shades/tints
This commit is contained in:
parent
e0d0ab839d
commit
fef8511daf
54
src/App.js
54
src/App.js
|
@ -45,7 +45,9 @@ function IncDecButton(props) {
|
|||
<div className={props.className}>
|
||||
<div>{props.children}</div>
|
||||
<button type="button" onClick={props.onDecrement}>-</button>
|
||||
<span>{props.value}</span>
|
||||
{props.value !== undefined &&
|
||||
<span>{props.value}</span>
|
||||
}
|
||||
<button type="button" onClick={props.onIncrement}>+</button>
|
||||
</div>
|
||||
);
|
||||
|
@ -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 (
|
||||
<div className={this.props.className}>
|
||||
<header>
|
||||
<button type="button" onClick={this.handleClick}>Random</button>
|
||||
<IncDecButton
|
||||
onIncrement={() => { this.incState("brightenAmount", 0.25); }}
|
||||
onDecrement={() => { this.incState("brightenAmount", -0.25); }}
|
||||
|
@ -130,7 +137,12 @@ class Color extends React.Component {
|
|||
>
|
||||
<span>Brightness</span>
|
||||
</IncDecButton>
|
||||
<button type="button" onClick={this.handleClick}>Random</button>
|
||||
<IncDecButton
|
||||
onIncrement={() => { this.incState("scaleTintStepCount", 1); }}
|
||||
onDecrement={() => { this.incState("scaleTintStepCount", -1); }}
|
||||
>
|
||||
<span>Count</span>
|
||||
</IncDecButton>
|
||||
</header>
|
||||
<ul>
|
||||
{this.state.tints.map((shade, index) =>
|
||||
|
@ -142,6 +154,12 @@ class Color extends React.Component {
|
|||
)}
|
||||
</ul>
|
||||
<footer>
|
||||
<IncDecButton
|
||||
onIncrement={() => { this.incState("scaleShadeStepCount", 1); }}
|
||||
onDecrement={() => { this.incState("scaleShadeStepCount", -1); }}
|
||||
>
|
||||
<span>Count</span>
|
||||
</IncDecButton>
|
||||
<IncDecButton
|
||||
onIncrement={() => { this.incState("darkenAmount", 0.25); }}
|
||||
onDecrement={() => { this.incState("darkenAmount", -0.25); }}
|
||||
|
@ -156,14 +174,14 @@ class Color extends React.Component {
|
|||
}
|
||||
|
||||
Color.defaultProps = {
|
||||
brightenAmount: 3,
|
||||
darkenAmount: 3,
|
||||
scaleShadeStart: 0.2,
|
||||
scaleShadeEnd: 0.8,
|
||||
scaleShadeStep: 0.1,
|
||||
scaleTintStart: 0.2,
|
||||
scaleTintEnd: 0.8,
|
||||
scaleTintStep: 0.1,
|
||||
brightenAmount: 3,
|
||||
darkenAmount: 3,
|
||||
scaleShadeStart: 0.2,
|
||||
scaleShadeEnd: 0.8,
|
||||
scaleShadeStepCount: 5,
|
||||
scaleTintStart: 0.2,
|
||||
scaleTintEnd: 0.8,
|
||||
scaleTintStepCount: 5,
|
||||
}
|
||||
|
||||
S.Color = styled(Color)`
|
||||
|
@ -197,10 +215,12 @@ function App() {
|
|||
<div className="App">
|
||||
<S.Color
|
||||
className="color-list"
|
||||
baseColor="#dbdfac"/>
|
||||
baseColor="#dbdfac"
|
||||
/>
|
||||
<S.Color
|
||||
className="color-list"
|
||||
baseColor="#fb3640"/>
|
||||
baseColor="#fb3640"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Reference in New Issue