increase and decrease brightness/darkness
This commit is contained in:
parent
8d1e13e04a
commit
e0d0ab839d
172
src/App.js
172
src/App.js
|
@ -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:
|
||||||
|
|
Reference in New Issue