Last active
June 6, 2018 06:31
-
-
Save artalar/cca9163e9065469f666e22e6ad99bc69 to your computer and use it in GitHub Desktop.
Example of styled-component good practice
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
import * as React from 'react'; | |
import styled from 'styled-components'; | |
type Props = { | |
className: string, | |
}; | |
type State = { | |
className: string, | |
}; | |
class SuccesBillsInput extends React.Component<Props, State> { | |
state = { | |
className: '', | |
} | |
componentDidMount() { | |
// для тестов | |
window.startAnimate = this.handleStartAnimate; | |
window.revertAnimate = this.handleRevertAnimate; | |
} | |
handleStartAnimate = ():void => { | |
this.setState({ | |
className: 'animate', | |
}); | |
} | |
handleRevertAnimate = ():void => { | |
this.setState({ | |
className: '', | |
}); | |
} | |
render() { | |
const { className } = this.props; | |
return ( | |
<div className={`${className} ${this.state.className}`}> | |
<div className="succes-check-container"> | |
<div className="succes-check" /> | |
</div> | |
<h2 className="succes-greeting">Вы великолепны</h2> | |
</div> | |
); | |
} | |
} | |
export default styled(SuccesBillsInput)` | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 0; | |
height: 0; | |
overflow: hidden; | |
background-color: transparent; | |
z-index: 1; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
transition: background-color 1.2s ${({ theme }) => theme.transitionFunction}; | |
.succes-check-container { | |
transform: rotate(45deg); | |
width: 7vh; | |
height: 5vh; | |
position: relative; | |
} | |
.succes-check { | |
position: absolute; | |
bottom: 0; | |
width: 0; | |
height: 0; | |
border-bottom: 0 solid rgba(255, 255, 255, 0); | |
border-right: 0 solid rgba(255, 255, 255, 0); | |
transition: width .7s ${({ theme }) => theme.transitionFunction}, | |
height .5s ${({ theme }) => theme.transitionFunction} .7s; | |
} | |
.succes-greeting { | |
margin-top: 5vh; | |
color: rgba(255, 255, 255, 0); | |
transition: color 1.2s ${({ theme }) => theme.transitionFunction}; | |
} | |
&.animate { | |
width: 100%; | |
height: 100%; | |
background: white; | |
.succes-check { | |
width: 7vh; | |
height: 5vh; | |
border-bottom: 4px solid ${({ theme }) => theme.colors.primary}; | |
border-right: 4px solid ${({ theme }) => theme.colors.primary}; | |
} | |
.succes-greeting { | |
color: ${({ theme }) => theme.colors.text}; | |
} | |
} | |
`; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment