increase and decrease brightness/darkness

This commit is contained in:
Ray Elliott 2020-04-27 21:31:36 +01:00
parent 8d1e13e04a
commit e0d0ab839d
1 changed files with 146 additions and 26 deletions

View File

@ -9,16 +9,48 @@ const S = {};
class Shade extends React.Component { class Shade extends React.Component {
render() { render() {
return ( return (
<div className={this.props.className}>{this.props.color}</div> <div className={this.props.className}>
<span>{this.props.color}</span>
</div>
); );
} }
} }
S.Shade = styled(Shade)` S.Shade = styled(Shade)`
padding: 1rem 2rem; width: 100%;
background-color: ${props => props.color}; height: 100%;
background-color: ${props => props.color};
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
span {
font-weight: bold;
color: ${props => chroma.contrast(props.color, '#000') < 4.5 ? '#fff' : '#000'};
opacity: 0;
}
&:hover span {
opacity: 0.9;
}
`; `;
S.ShadeBase = styled(S.Shade)`
border: 3px solid rgba(0, 0, 0, 0.5);
`;
function IncDecButton(props) {
return (
<div className={props.className}>
<div>{props.children}</div>
<button type="button" onClick={props.onDecrement}>-</button>
<span>{props.value}</span>
<button type="button" onClick={props.onIncrement}>+</button>
</div>
);
}
class Color extends React.Component { class Color extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -29,63 +61,151 @@ class Color extends React.Component {
chromaColor: chroma(this.props.baseColor), chromaColor: chroma(this.props.baseColor),
tints: tints, tints: tints,
shades: shades, shades: shades,
brightenAmount: this.props.brightenAmount,
darkenAmount: this.props.darkenAmount,
scaleShadeStart: this.props.scaleShadeStart,
scaleShadeEnd: this.props.scaleShadeEnd,
scaleShadeStep: this.props.scaleShadeStep,
scaleTintStart: this.props.scaleTintStart,
scaleTintEnd: this.props.scaleTintEnd,
scaleTintStep: this.props.scaleTintStep,
} }
this.incState = this.incState.bind(this);
this.handleClick = this.handleClick.bind(this);
} }
setTints(brightenAmount, start, end, step) { setTints() {
this.setState((state) => { this.setState((state) => {
const scaleTints = chroma.scale([state.chromaColor.brighten(brightenAmount), state.chromaColor]); const scaleTints = chroma.scale([state.chromaColor.brighten(state.brightenAmount), state.chromaColor]);
const tints = []; const tints = [];
for (let i = start; i < end; i += step) { for (let i = state.scaleTintStart; i < state.scaleTintEnd; i += state.scaleTintStep) {
tints.push(scaleTints(i).hex()); tints.push(scaleTints(i).hex());
} }
return {tints: tints} return {tints: tints}
}); });
} }
setShades(darkenAmount, start, end, step) { setShades() {
this.setState((state) => { this.setState((state) => {
const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(darkenAmount)]); const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(state.darkenAmount)]);
const shades = []; const shades = [];
for (let i = start; i < end; i += step) { for (let i = state.scaleShadeStart; i < state.scaleShadeEnd; i += state.scaleShadeStep) {
shades.push(scaleShades(i).hex()); shades.push(scaleShades(i).hex());
} }
return {shades: shades} return {shades: shades}
}); });
} }
handleClick() {
const chromaColor = chroma.random();
this.setState({baseColor: chromaColor.hex(), chromaColor: chromaColor});
this.setTints();
this.setShades();
}
incState(stateProperty, value) {
this.setState((state, props) => {
const returnObj = {};
returnObj[stateProperty] = state[stateProperty] + value;
return returnObj;
})
this.setTints();
this.setShades();
}
componentDidMount() { componentDidMount() {
this.setTints(2, 0.2, 0.9, 0.2); this.setTints();
this.setShades(5, 0.1, 0.9, 0.1); this.setShades();
} }
render() { render() {
return ( return (
<ul className={this.props.className}> <div className={this.props.className}>
{this.state.tints.map((shade, index) => <header>
<IncDecButton
onIncrement={() => { this.incState("brightenAmount", 0.25); }}
onDecrement={() => { this.incState("brightenAmount", -0.25); }}
value={this.state.brightenAmount}
>
<span>Brightness</span>
</IncDecButton>
<button type="button" onClick={this.handleClick}>Random</button>
</header>
<ul>
{this.state.tints.map((shade, index) =>
<li key={index}><S.Shade color={shade} /></li> <li key={index}><S.Shade color={shade} /></li>
)} )}
<li><S.Shade color={this.state.baseColor} /></li> <li><S.ShadeBase color={this.state.baseColor} isBase /></li>
{this.state.shades.map((tint, index) => {this.state.shades.map((tint, index) =>
<li key={index}><S.Shade color={tint} /></li> <li key={index}><S.Shade color={tint} /></li>
)} )}
</ul> </ul>
<footer>
<IncDecButton
onIncrement={() => { this.incState("darkenAmount", 0.25); }}
onDecrement={() => { this.incState("darkenAmount", -0.25); }}
value={this.state.darkenAmount}
>
<span>Darkness</span>
</IncDecButton>
</footer>
</div>
); );
} }
} }
Color.defaultProps = {
brightenAmount: 3,
darkenAmount: 3,
scaleShadeStart: 0.2,
scaleShadeEnd: 0.8,
scaleShadeStep: 0.1,
scaleTintStart: 0.2,
scaleTintEnd: 0.8,
scaleTintStep: 0.1,
}
S.Color = styled(Color)` S.Color = styled(Color)`
list-style: none; display: flex;
padding: 0; flex-direction: column;
margin: 0; justify-content: stretch;
align-items: stretch;
ul {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
list-style: none;
padding: 0;
margin: 0;
}
li {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex: 1 1 100%;
}
`; `;
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<S.Color className="color-list" baseColor="#dbdfac"/> <S.Color
</div> className="color-list"
); baseColor="#dbdfac"/>
<S.Color
className="color-list"
baseColor="#fb3640"/>
</div>
);
} }
export default App; export default App;
// vim: set ft=javascriptreact: