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 {
render() {
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)`
padding: 1rem 2rem;
width: 100%;
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 {
constructor(props) {
super(props);
@ -29,63 +61,151 @@ class Color extends React.Component {
chromaColor: chroma(this.props.baseColor),
tints: tints,
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,
}
setTints(brightenAmount, start, end, step) {
this.incState = this.incState.bind(this);
this.handleClick = this.handleClick.bind(this);
}
setTints() {
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 = [];
for (let i = start; i < end; i += step) {
for (let i = state.scaleTintStart; i < state.scaleTintEnd; i += state.scaleTintStep) {
tints.push(scaleTints(i).hex());
}
return {tints: tints}
});
}
setShades(darkenAmount, start, end, step) {
setShades() {
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 = [];
for (let i = start; i < end; i += step) {
for (let i = state.scaleShadeStart; i < state.scaleShadeEnd; i += state.scaleShadeStep) {
shades.push(scaleShades(i).hex());
}
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() {
this.setTints(2, 0.2, 0.9, 0.2);
this.setShades(5, 0.1, 0.9, 0.1);
this.setTints();
this.setShades();
}
render() {
return (
<ul className={this.props.className}>
<div className={this.props.className}>
<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><S.Shade color={this.state.baseColor} /></li>
<li><S.ShadeBase color={this.state.baseColor} isBase /></li>
{this.state.shades.map((tint, index) =>
<li key={index}><S.Shade color={tint} /></li>
)}
</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)`
display: flex;
flex-direction: column;
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() {
return (
<div className="App">
<S.Color className="color-list" baseColor="#dbdfac"/>
<S.Color
className="color-list"
baseColor="#dbdfac"/>
<S.Color
className="color-list"
baseColor="#fb3640"/>
</div>
);
}
export default App;
// vim: set ft=javascriptreact: