Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { Component } from 'react';
import styled from 'styled-components';
const orangeColor = '#FE6680';
const bubbleSize = 50;
const stepperwidth = 800;
const StepContainer = styled.div`
width: ${stepperwidth}px;
height: ${bubbleSize}px;
position: absolute;
display: flex;
justify-content: space-between;
font-family: sans-serif;
align-items: center;
`;
const LineContainer = styled.div`
width: ${stepperwidth - bubbleSize}px;
height: ${bubbleSize}px;
margin: 0 ${bubbleSize / 2}px;
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
`;
const Step = ({active, passed, ...props}) => (
<div {...props}>
<span>{props.index + 1}</span>
</div>
);
const StyledStep = styled(Step)`
height: ${({active}) => active ? bubbleSize : (bubbleSize - 10)}px;
width: ${({active}) => active ? bubbleSize : (bubbleSize - 10)}px;
border-radius: 50%;
background-color: ${({passed}) => passed ? orangeColor : 'gray'};
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition: height 0.2s ease-in-out, width 0.2s ease-in-out, background-color 0.2s ease-in-out;
span {
color: white;
transition: font-size 0.2s ease-in-out;
font-size: ${({active}) => active ? 2 : 1.5}em;
}
`;
const StyledLine = styled.div`
background-color: ${(props) => props.active ? orangeColor : 'gray'};
height: 4px;
flex: 1 0 0;
`;
class App extends Component {
state = {
cubes: 5,
current: 0,
}
add = () => {
this.setState(({cubes}) => ({
cubes: cubes + 1,
}));
}
del = () => {
this.setState(({cubes}) => ({
cubes: !(cubes - 1) ? cubes : cubes - 1,
}));
}
addStep = () => {
this.setState(({current, cubes}) => ({
current: !(cubes - current - 1) ? current : current + 1,
}));
}
delStep = () => {
this.setState(({current}) => ({
current: !current ? current : current - 1,
}));
}
render() {
const {cubes, current} = this.state;
return (
<div>
<div style={{ position: 'relative', height: '50px' }}>
<LineContainer>
{[...new Array(cubes - 1)]
.map((a, i) => (<StyledLine key={`${a}-${i}`} active={(current - 1) >= i} />))}
</LineContainer>
<StepContainer>
{[...new Array(cubes)]
.map((a, i) => (<StyledStep key={`${a}-${i}`} index={i} active={current === i} passed={current >= i} />))}
</StepContainer>
</div>
<br />
<button onClick={this.add}>Add</button>
<button onClick={this.del}>Del</button>
<br />
<button onClick={this.delStep}>{'<<<'}</button>
<button onClick={this.addStep}>{'>>>'}</button>
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.