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

54
src/App.js
View File

@ -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>
); );
} }