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 className={props.className}>
|
||||||
<div>{props.children}</div>
|
<div>{props.children}</div>
|
||||||
<button type="button" onClick={props.onDecrement}>-</button>
|
<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>
|
<button type="button" onClick={props.onIncrement}>+</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -65,10 +67,10 @@ class Color extends React.Component {
|
||||||
darkenAmount: this.props.darkenAmount,
|
darkenAmount: this.props.darkenAmount,
|
||||||
scaleShadeStart: this.props.scaleShadeStart,
|
scaleShadeStart: this.props.scaleShadeStart,
|
||||||
scaleShadeEnd: this.props.scaleShadeEnd,
|
scaleShadeEnd: this.props.scaleShadeEnd,
|
||||||
scaleShadeStep: this.props.scaleShadeStep,
|
scaleShadeStepCount: this.props.scaleShadeStepCount,
|
||||||
scaleTintStart: this.props.scaleTintStart,
|
scaleTintStart: this.props.scaleTintStart,
|
||||||
scaleTintEnd: this.props.scaleTintEnd,
|
scaleTintEnd: this.props.scaleTintEnd,
|
||||||
scaleTintStep: this.props.scaleTintStep,
|
scaleTintStepCount: this.props.scaleTintStepCount,
|
||||||
}
|
}
|
||||||
|
|
||||||
this.incState = this.incState.bind(this);
|
this.incState = this.incState.bind(this);
|
||||||
|
@ -79,7 +81,8 @@ class Color extends React.Component {
|
||||||
this.setState((state) => {
|
this.setState((state) => {
|
||||||
const scaleTints = chroma.scale([state.chromaColor.brighten(state.brightenAmount), state.chromaColor]);
|
const scaleTints = chroma.scale([state.chromaColor.brighten(state.brightenAmount), state.chromaColor]);
|
||||||
const tints = [];
|
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());
|
tints.push(scaleTints(i).hex());
|
||||||
}
|
}
|
||||||
return {tints: tints}
|
return {tints: tints}
|
||||||
|
@ -90,7 +93,8 @@ class Color extends React.Component {
|
||||||
this.setState((state) => {
|
this.setState((state) => {
|
||||||
const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(state.darkenAmount)]);
|
const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(state.darkenAmount)]);
|
||||||
const shades = [];
|
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());
|
shades.push(scaleShades(i).hex());
|
||||||
}
|
}
|
||||||
return {shades: shades}
|
return {shades: shades}
|
||||||
|
@ -106,8 +110,10 @@ class Color extends React.Component {
|
||||||
|
|
||||||
incState(stateProperty, value) {
|
incState(stateProperty, value) {
|
||||||
this.setState((state, props) => {
|
this.setState((state, props) => {
|
||||||
|
const newValue = state[stateProperty] + value;
|
||||||
|
if (newValue <= 0) { return {}; }
|
||||||
const returnObj = {};
|
const returnObj = {};
|
||||||
returnObj[stateProperty] = state[stateProperty] + value;
|
returnObj[stateProperty] = newValue;
|
||||||
return returnObj;
|
return returnObj;
|
||||||
})
|
})
|
||||||
this.setTints();
|
this.setTints();
|
||||||
|
@ -123,6 +129,7 @@ class Color extends React.Component {
|
||||||
return (
|
return (
|
||||||
<div className={this.props.className}>
|
<div className={this.props.className}>
|
||||||
<header>
|
<header>
|
||||||
|
<button type="button" onClick={this.handleClick}>Random</button>
|
||||||
<IncDecButton
|
<IncDecButton
|
||||||
onIncrement={() => { this.incState("brightenAmount", 0.25); }}
|
onIncrement={() => { this.incState("brightenAmount", 0.25); }}
|
||||||
onDecrement={() => { this.incState("brightenAmount", -0.25); }}
|
onDecrement={() => { this.incState("brightenAmount", -0.25); }}
|
||||||
|
@ -130,7 +137,12 @@ class Color extends React.Component {
|
||||||
>
|
>
|
||||||
<span>Brightness</span>
|
<span>Brightness</span>
|
||||||
</IncDecButton>
|
</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>
|
</header>
|
||||||
<ul>
|
<ul>
|
||||||
{this.state.tints.map((shade, index) =>
|
{this.state.tints.map((shade, index) =>
|
||||||
|
@ -142,6 +154,12 @@ class Color extends React.Component {
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
<footer>
|
<footer>
|
||||||
|
<IncDecButton
|
||||||
|
onIncrement={() => { this.incState("scaleShadeStepCount", 1); }}
|
||||||
|
onDecrement={() => { this.incState("scaleShadeStepCount", -1); }}
|
||||||
|
>
|
||||||
|
<span>Count</span>
|
||||||
|
</IncDecButton>
|
||||||
<IncDecButton
|
<IncDecButton
|
||||||
onIncrement={() => { this.incState("darkenAmount", 0.25); }}
|
onIncrement={() => { this.incState("darkenAmount", 0.25); }}
|
||||||
onDecrement={() => { this.incState("darkenAmount", -0.25); }}
|
onDecrement={() => { this.incState("darkenAmount", -0.25); }}
|
||||||
|
@ -156,14 +174,14 @@ class Color extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
Color.defaultProps = {
|
Color.defaultProps = {
|
||||||
brightenAmount: 3,
|
brightenAmount: 3,
|
||||||
darkenAmount: 3,
|
darkenAmount: 3,
|
||||||
scaleShadeStart: 0.2,
|
scaleShadeStart: 0.2,
|
||||||
scaleShadeEnd: 0.8,
|
scaleShadeEnd: 0.8,
|
||||||
scaleShadeStep: 0.1,
|
scaleShadeStepCount: 5,
|
||||||
scaleTintStart: 0.2,
|
scaleTintStart: 0.2,
|
||||||
scaleTintEnd: 0.8,
|
scaleTintEnd: 0.8,
|
||||||
scaleTintStep: 0.1,
|
scaleTintStepCount: 5,
|
||||||
}
|
}
|
||||||
|
|
||||||
S.Color = styled(Color)`
|
S.Color = styled(Color)`
|
||||||
|
@ -197,10 +215,12 @@ function App() {
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<S.Color
|
<S.Color
|
||||||
className="color-list"
|
className="color-list"
|
||||||
baseColor="#dbdfac"/>
|
baseColor="#dbdfac"
|
||||||
|
/>
|
||||||
<S.Color
|
<S.Color
|
||||||
className="color-list"
|
className="color-list"
|
||||||
baseColor="#fb3640"/>
|
baseColor="#fb3640"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue