Add Tooltip component
#360
+376
−25
There are no files selected for viewing
This file contains hidden or 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
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import {classNames} from 'react-extras'; | ||
| import CSSTransition from 'react-transition-group/CSSTransition'; | ||
| import {Manager, Popper, Reference, placements} from 'react-popper'; | ||
| import './Tooltip.scss'; | ||
|
|
||
| class Tooltip extends React.PureComponent { | ||
| static propTypes = { | ||
| animationDuration: PropTypes.number, | ||
| children: PropTypes.node, | ||
| content: PropTypes.node, | ||
| margin: PropTypes.oneOfType([ | ||
| PropTypes.number, | ||
| PropTypes.string, | ||
| ]), | ||
| onClose: PropTypes.func, | ||
| position: PropTypes.oneOf(placements), | ||
| } | ||
|
|
||
| static defaultProps = { | ||
| animationDuration: 300, | ||
| margin: 0, | ||
| position: 'top', | ||
| } | ||
|
|
||
| state = { | ||
| isOpen: false, | ||
| } | ||
|
|
||
| componentWillReceiveProps({content}) { | ||
| if (typeof this.updatePopper === 'function' && this.props.content !== content) { | ||
| this.updatePopper(); | ||
| } | ||
| } | ||
|
|
||
| handleMouseEnter = () => { | ||
| this.setState({isOpen: true}); | ||
| } | ||
|
|
||
| handleMouseLeave = () => { | ||
| this.setState({isOpen: false}); | ||
| } | ||
|
|
||
| render() { | ||
| const {animationDuration, children, content, margin, onClose, position} = this.props; | ||
| const {isOpen} = this.state; | ||
| const tooltip = ( | ||
| <Popper placement={position} modifiers={{offset: {offset: `0, ${margin}`}}}> | ||
| {({arrowProps, placement, ref, scheduleUpdate, style}) => { | ||
| this.updatePopper = scheduleUpdate; | ||
|
|
||
| return ( | ||
| <div ref={ref} className="Tooltip__container" style={style}> | ||
| <CSSTransition | ||
| classNames="Tooltip" | ||
| in={isOpen} | ||
| mountOnEnter | ||
| timeout={{ | ||
| enter: 0, // Start animation immediately | ||
| exit: animationDuration, | ||
| }} | ||
| onExited={onClose} | ||
| > | ||
| <div | ||
| className={classNames( | ||
| 'Tooltip', | ||
| `Tooltip--${placement}`, | ||
| )} | ||
| > | ||
| <div className="Tooltip__content"> | ||
| {content} | ||
| </div> | ||
| <div | ||
| ref={arrowProps.ref} | ||
| className="Tooltip__arrow" | ||
| style={arrowProps.style} | ||
| /> | ||
| </div> | ||
| </CSSTransition> | ||
| <style jsx> | ||
| {` | ||
| .Tooltip { | ||
| transition-duration: ${animationDuration}ms; | ||
| } | ||
| `} | ||
| </style> | ||
| </div> | ||
| ); | ||
| }} | ||
| </Popper> | ||
| ); | ||
|
|
||
| return ( | ||
| <Manager> | ||
| <Reference> | ||
| {({ref}) => ( | ||
| <div | ||
|
There was a problem hiding this comment. Really bothers me that we have to wrap the children in a There was a problem hiding this comment. There was a problem hiding this comment. That's kinda cool. Doesn't seem to work though. See the screenshot below (don't mind the positioning of the elements inside the seed phrase box, it's just for testing):
There was a problem hiding this comment. Ah, it's only available in Chrome 65, but Electron 2 is at 61. We'll be able to use this when Electron 3 is stable. #374 There was a problem hiding this comment. I added the flag to |
||
| ref={ref} | ||
| onMouseEnter={this.handleMouseEnter} | ||
| onMouseLeave={this.handleMouseLeave} | ||
| > | ||
| {children} | ||
| </div> | ||
| )} | ||
| </Reference> | ||
| {ReactDOM.createPortal(tooltip, document.body)} | ||
| </Manager> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Tooltip; | ||
|
There was a problem hiding this comment. Can you add prop-types too? I've been too lazy to do this on the other components, but in hindsight, I should have. There was a problem hiding this comment. Yeah, I didn't because no other components had it. Will add! |
||
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| .Tooltip { | ||
| --color: var(--border-color); | ||
| --arrow-height: 7px; | ||
| --arrow-width: 12px; | ||
| opacity: 0; | ||
| transition-property: opacity, transform; | ||
| transition-timing-function: ease-out; | ||
|
|
||
| &__target { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| &__container { | ||
| z-index: 1100; | ||
| } | ||
|
|
||
| &__content { | ||
| background-color: var(--color); | ||
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1); | ||
| border-radius: 4px; | ||
| font-size: 13px; | ||
| padding: 8px 10px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| &__arrow { | ||
| display: block; | ||
| height: var(--arrow-height); | ||
| position: absolute; | ||
| width: var(--arrow-width); | ||
|
|
||
| &::before { | ||
| border-color: transparent; | ||
| border-style: solid; | ||
| content: ''; | ||
| position: absolute; | ||
| } | ||
| } | ||
|
|
||
| &--top { | ||
| padding-bottom: var(--arrow-height); | ||
| transform: translate3d(0, -10%, 0); | ||
|
|
||
| .Tooltip__arrow { | ||
| bottom: 0; | ||
| left: 0; | ||
|
|
||
| &::before { | ||
| border-top-color: var(--color); | ||
| border-width: var(--arrow-height) calc(var(--arrow-width) / 2) 0; | ||
| filter: | ||
| drop-shadow(0 calc(var(--arrow-height) / 2) 2px rgba(0, 0, 0, 0.1)) | ||
| drop-shadow(0 calc(var(--arrow-height) / 2) 1px rgba(0, 0, 0, 0.1)); | ||
| top: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &--right { | ||
| padding-left: var(--arrow-height); | ||
| transform: translate3d(5%, 0, 0); | ||
|
|
||
| .Tooltip__arrow { | ||
| height: var(--arrow-width); | ||
| left: 0; | ||
| width: var(--arrow-height); | ||
|
|
||
| &::before { | ||
| border-right-color: var(--color); | ||
| border-width: calc(var(--arrow-width) / 2) var(--arrow-height) calc(var(--arrow-width) / 2) 0; | ||
| filter: | ||
| drop-shadow(calc(var(--arrow-height) / 2 * -1) 0 2px rgba(0, 0, 0, 0.1)) | ||
| drop-shadow(calc(var(--arrow-height) / 2 * -1) 0 1px rgba(0, 0, 0, 0.1)); | ||
| right: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &--bottom { | ||
| padding-top: var(--arrow-height); | ||
| transform: translate3d(0, 10%, 0); | ||
|
|
||
| .Tooltip__arrow { | ||
| left: 0; | ||
| top: 0; | ||
|
|
||
| &::before { | ||
| border-bottom-color: var(--color); | ||
| border-width: 0 calc(var(--arrow-width) / 2) var(--arrow-height); | ||
| filter: | ||
| drop-shadow(0 calc(var(--arrow-height) / 2 * -1) 2px rgba(0, 0, 0, 0.1)) | ||
| drop-shadow(0 calc(var(--arrow-height) / 2 * -1) 1px rgba(0, 0, 0, 0.1)); | ||
| bottom: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &--left { | ||
| padding-right: var(--arrow-height); | ||
| transform: translate3d(-5%, 0, 0); | ||
|
|
||
| .Tooltip__arrow { | ||
| height: var(--arrow-width); | ||
| right: 0; | ||
| width: var(--arrow-height); | ||
|
|
||
| &::before { | ||
| border-left-color: var(--color); | ||
| border-width: calc(var(--arrow-width) / 2) 0 calc(var(--arrow-width) / 2) var(--arrow-height); | ||
| filter: | ||
| drop-shadow(calc(var(--arrow-height) / 2) 0 2px rgba(0, 0, 0, 0.1)) | ||
| drop-shadow(calc(var(--arrow-height) / 2) 0 1px rgba(0, 0, 0, 0.1)); | ||
| left: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &-enter-done { | ||
| opacity: 1; | ||
| transform: translate3d(0, 0, 0); | ||
| } | ||
| } |
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would've wanted to put these into
styled-jsxtoo, but that'd require converting them to a CSS string. Decided not to bother with it.