-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add underlines to tooltips (#312)
- Loading branch information
1 parent
f452338
commit e9eb866
Showing
19 changed files
with
225 additions
and
148 deletions.
There are no files selected for viewing
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
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
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
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,72 @@ | ||
| import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip' | ||
| import * as React from 'react' | ||
| import styled from 'styled-components' | ||
| import tooltips from '../../static/tooltips.json' | ||
|
|
||
| interface Props { | ||
| id: keyof typeof tooltips | ||
| interface BaseProps { | ||
| children: React.ReactNode | ||
| underline?: boolean | ||
| } | ||
|
|
||
| interface PropsWithID extends BaseProps { | ||
| id: keyof typeof tooltips | ||
| } | ||
|
|
||
| // TODO: this is an experiment for better indicating tooltips, but should be improved upon at a later time | ||
| // const Wrapper = styled.div` | ||
| // &:hover { | ||
| // &::after { | ||
| // content: ' ?'; | ||
| // margin-left: 8px; | ||
| // background: rgba(0, 0, 0, 0.8); | ||
| // color: #fff; | ||
| // padding: 3px 7px 3px 4px; | ||
| // font-weight: bold; | ||
| // border-radius: 100%; | ||
| // font-size: 12px; | ||
| // } | ||
| // } | ||
| // ` | ||
| interface PropsWithoutID extends BaseProps { | ||
| title: string | ||
| link?: string | ||
| description?: string | ||
| } | ||
|
|
||
| interface Tooltip { | ||
| title: string | ||
| link?: string | ||
| description?: string | ||
| } | ||
|
|
||
| type Props = PropsWithID | PropsWithoutID | ||
|
|
||
| const Wrapper = styled.span<{ underline?: boolean; fix?: boolean }>` | ||
| [data-tip] > *, | ||
| [data-tip] { | ||
| border-bottom: ${(props) => (props.underline ? '1px dotted #bbbbbb' : undefined)}; | ||
| } | ||
| /* react-tooltip doesn't play nice with SSR, so this dirty fix prevents a black line from showing on tooltip buttons */ | ||
| .__react_component_tooltip { | ||
| ${(props) => props.fix && `display: none;`} | ||
| } | ||
| ` | ||
|
|
||
| let serverHandoffComplete = false | ||
|
|
||
| export const Tooltip: React.FC<Props> = (props: Props) => { | ||
| return props.id in tooltips ? ( | ||
| <AxisTooltip | ||
| title={tooltips[props.id].title} | ||
| description={tooltips[props.id].description} | ||
| link={ | ||
| 'link' in tooltips[props.id] | ||
| ? { | ||
| text: 'Learn more', | ||
| url: (tooltips[props.id] as any).link, | ||
| } | ||
| : undefined | ||
| } | ||
| > | ||
| {props.children} | ||
| </AxisTooltip> | ||
| ) : ( | ||
| <>{props.children}</> | ||
| const { title, link, description } = 'id' in props ? (tooltips[props.id] as Tooltip) : props | ||
| const [fix, setFix] = React.useState(serverHandoffComplete ? false : true) | ||
|
|
||
| React.useEffect(() => { | ||
| serverHandoffComplete = true | ||
|
|
||
| if (fix) { | ||
| setFix(false) | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <Wrapper underline={props.underline} fix={fix}> | ||
| <AxisTooltip | ||
| title={title} | ||
| description={description} | ||
| link={ | ||
| link | ||
| ? { | ||
| text: 'Learn more', | ||
| url: link, | ||
| } | ||
| : undefined | ||
| } | ||
| > | ||
| {props.children} | ||
| </AxisTooltip> | ||
| </Wrapper> | ||
| ) | ||
| } |
Oops, something went wrong.