rayelliott
/
react-pallette-generator
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

increase decrease nuber of shades/tints

This commit is contained in:
Ray Elliott 2020-04-27 22:07:44 +01:00
parent e0d0ab839d
commit fef8511daf
1 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.js
View File

@ -45,7 +45,9 @@ function IncDecButton(props) {
<div className={props.className}>
<div>{props.children}</div>
<button type="button" onClick={props.onDecrement}>-</button>
{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); }}
@ -160,10 +178,10 @@ Color.defaultProps = {
darkenAmount: 3,
scaleShadeStart: 0.2,
scaleShadeEnd: 0.8,
scaleShadeStep: 0.1,
scaleShadeStepCount: 5,
scaleTintStart: 0.2,
scaleTintEnd: 0.8,
scaleTintStep: 0.1,
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>
);
}