Skip to content

Commit 615dbcc

Browse files
SaraVieiraSaraVieira
committed
Merge branch 'atomiks-tippy-singleton'
2 parents 74602f7 + 3288d48 commit 615dbcc

File tree

8 files changed

+195
-112
lines changed

8 files changed

+195
-112
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/RefreshButton/UpdateFound/UpdateFound.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ const useInterval = (callback = () => {}, delay: number) => {
2323
};
2424

2525
export const UpdateFound = (props: any) => {
26-
const [isVisible, setVisibility] = useState(true);
27-
useInterval(() => setVisibility(false), isVisible ? 60000 : null);
26+
const [visible, setVisibility] = useState(true);
27+
useInterval(() => setVisibility(false), visible ? 60000 : null);
2828

2929
return (
3030
<UpdateContainer {...props}>
@@ -36,8 +36,8 @@ export const UpdateFound = (props: any) => {
3636
onClick={() => document.location.reload()}
3737
/>
3838
}
39-
isVisible={isVisible}
40-
trigger={isVisible ? 'manual' : 'mouseenter focus'}
39+
visible={visible}
40+
trigger={visible ? 'manual' : 'mouseenter focus'}
4141
arrow
4242
distance={15}
4343
>

‎packages/app/src/app/pages/Sandbox/Editor/Navigation/Navigation.tsx‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
import React, { FunctionComponent } from 'react';
2+
import PlusIcon from 'react-icons/lib/go/plus';
13
import { useOvermind } from 'app/overmind';
24
import getWorkspaceItems, {
35
INavigationItem,
46
getDisabledItems,
57
} from 'app/overmind/utils/items';
6-
import React, { FunctionComponent } from 'react';
7-
import PlusIcon from 'react-icons/lib/go/plus';
8-
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
8+
import Tooltip, {
9+
SingletonTooltip,
10+
} from '@codesandbox/common/lib/components/Tooltip';
11+
import { TippyProps } from '@tippy.js/react';
912
import ConfigurationIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/cog.svg';
1013
// @ts-ignore
1114
// eslint-disable-next-line import/no-unresolved
@@ -43,10 +46,12 @@ const IDS_TO_ICONS = {
4346
type IconProps = {
4447
item: INavigationItem;
4548
isDisabled?: boolean;
49+
singleton: TippyProps['singleton'];
4650
};
4751
const IconComponent: FunctionComponent<IconProps> = ({
4852
item: { id, name },
4953
isDisabled,
54+
singleton,
5055
}) => {
5156
const {
5257
actions: {
@@ -61,7 +66,7 @@ const IconComponent: FunctionComponent<IconProps> = ({
6166
const selected = !workspaceHidden && id === openedWorkspaceItem;
6267

6368
return (
64-
<Tooltip placement="right" content={name}>
69+
<Tooltip content={name} singleton={singleton}>
6570
<IconContainer
6671
isDisabled={isDisabled}
6772
selected={selected}
@@ -95,15 +100,26 @@ export const Navigation: FunctionComponent<Props> = ({
95100

96101
return (
97102
<Container topOffset={topOffset} bottomOffset={bottomOffset}>
98-
{shownItems.map(item => (
99-
<IconComponent key={item.id} item={item} />
100-
))}
103+
<SingletonTooltip placement="right">
104+
{singleton => (
105+
<>
106+
{shownItems.map(item => (
107+
<IconComponent key={item.id} item={item} singleton={singleton} />
108+
))}
101109

102-
{disabledItems.length > 0 && <Separator />}
110+
{disabledItems.length > 0 && <Separator />}
103111

104-
{disabledItems.map(item => (
105-
<IconComponent key={item.id} item={item} isDisabled />
106-
))}
112+
{disabledItems.map(item => (
113+
<IconComponent
114+
key={item.id}
115+
item={item}
116+
singleton={singleton}
117+
isDisabled
118+
/>
119+
))}
120+
</>
121+
)}
122+
</SingletonTooltip>
107123
</Container>
108124
);
109125
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.tsx‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import ArrowDropDown from 'react-icons/lib/md/keyboard-arrow-down';
55
import ArrowDropUp from 'react-icons/lib/md/keyboard-arrow-up';
66
import algoliasearch from 'algoliasearch/lite';
77
import compareVersions from 'compare-versions';
8-
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
8+
import Tooltip, {
9+
SingletonTooltip,
10+
} from '@codesandbox/common/lib/components/Tooltip';
911
import { formatVersion } from '@codesandbox/common/lib/utils/ci';
1012

1113
import { EntryContainer, IconArea, Icon } from '../../elements';
@@ -138,24 +140,39 @@ export class VersionEntry extends React.PureComponent<Props, State> {
138140

139141
{hovering && (
140142
<IconArea>
141-
<Tooltip
142-
content={open ? 'Hide sizes' : 'Show sizes'}
143-
style={{ outline: 'none' }}
144-
>
145-
<Icon onClick={this.handleOpen}>
146-
{open ? <ArrowDropUp /> : <ArrowDropDown />}
147-
</Icon>
148-
</Tooltip>
149-
<Tooltip content="Update to latest" style={{ outline: 'none' }}>
150-
<Icon onClick={this.handleRefresh}>
151-
<RefreshIcon />
152-
</Icon>
153-
</Tooltip>
154-
<Tooltip content="Remove" style={{ outline: 'none' }}>
155-
<Icon onClick={this.handleRemove}>
156-
<CrossIcon />
157-
</Icon>
158-
</Tooltip>
143+
<SingletonTooltip>
144+
{singleton => (
145+
<>
146+
<Tooltip
147+
content={open ? 'Hide sizes' : 'Show sizes'}
148+
style={{ outline: 'none' }}
149+
singleton={singleton}
150+
>
151+
<Icon onClick={this.handleOpen}>
152+
{open ? <ArrowDropUp /> : <ArrowDropDown />}
153+
</Icon>
154+
</Tooltip>
155+
<Tooltip
156+
content="Update to latest"
157+
style={{ outline: 'none' }}
158+
singleton={singleton}
159+
>
160+
<Icon onClick={this.handleRefresh}>
161+
<RefreshIcon />
162+
</Icon>
163+
</Tooltip>
164+
<Tooltip
165+
content="Remove"
166+
style={{ outline: 'none' }}
167+
singleton={singleton}
168+
>
169+
<Icon onClick={this.handleRemove}>
170+
<CrossIcon />
171+
</Icon>
172+
</Tooltip>
173+
</>
174+
)}
175+
</SingletonTooltip>
159176
</IconArea>
160177
)}
161178
</EntryContainer>

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/index.js‎

Lines changed: 58 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import UploadFileIcon from 'react-icons/lib/md/file-upload';
88
import DownloadIcon from 'react-icons/lib/md/file-download';
99
import UndoIcon from 'react-icons/lib/md/undo';
1010

11-
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
11+
import Tooltip, {
12+
SingletonTooltip,
13+
} from '@codesandbox/common/lib/components/Tooltip';
1214

1315
import { Icon } from '../../../../elements';
1416
import { Container } from './elements';
@@ -42,55 +44,61 @@ function EditIcons({
4244
<div className={className}>
4345
{(hovering || (window.__isTouch && active) || forceShow) && (
4446
<Container>
45-
{onDownload && (
46-
<Tooltip content="Export to ZIP">
47-
<Icon onClick={handleClick(onDownload)}>
48-
<DownloadIcon />
49-
</Icon>
50-
</Tooltip>
51-
)}
52-
{onUploadFile && (
53-
<Tooltip content="Upload Files">
54-
<Icon onClick={handleClick(onUploadFile)}>
55-
<UploadFileIcon />
56-
</Icon>
57-
</Tooltip>
58-
)}
59-
{onDiscardChanges && (
60-
<Tooltip content="Discard Changes">
61-
<Icon onClick={handleClick(onDiscardChanges)}>
62-
<UndoIcon />
63-
</Icon>
64-
</Tooltip>
65-
)}
66-
{onEdit && (
67-
<Tooltip content="Rename">
68-
<Icon onClick={handleClick(onEdit)}>
69-
<EditIcon />
70-
</Icon>
71-
</Tooltip>
72-
)}
73-
{onCreateFile && (
74-
<Tooltip content="New File">
75-
<Icon onClick={handleClick(onCreateFile)}>
76-
<AddFileIcon />
77-
</Icon>
78-
</Tooltip>
79-
)}
80-
{onCreateDirectory && (
81-
<Tooltip content="New Directory">
82-
<Icon onClick={handleClick(onCreateDirectory)}>
83-
<AddDirectoryIcon />
84-
</Icon>
85-
</Tooltip>
86-
)}
87-
{onDelete && (
88-
<Tooltip content="Delete">
89-
<Icon onClick={handleClick(onDelete)}>
90-
<CrossIcon />
91-
</Icon>
92-
</Tooltip>
93-
)}
47+
<SingletonTooltip>
48+
{singleton => (
49+
<>
50+
{onDownload && (
51+
<Tooltip content="Export to ZIP" singleton={singleton}>
52+
<Icon onClick={handleClick(onDownload)}>
53+
<DownloadIcon />
54+
</Icon>
55+
</Tooltip>
56+
)}
57+
{onUploadFile && (
58+
<Tooltip content="Upload Files" singleton={singleton}>
59+
<Icon onClick={handleClick(onUploadFile)}>
60+
<UploadFileIcon />
61+
</Icon>
62+
</Tooltip>
63+
)}
64+
{onDiscardChanges && (
65+
<Tooltip content="Discard Changes">
66+
<Icon onClick={handleClick(onDiscardChanges)}>
67+
<UndoIcon />
68+
</Icon>
69+
</Tooltip>
70+
)}
71+
{onEdit && (
72+
<Tooltip content="Rename" singleton={singleton}>
73+
<Icon onClick={handleClick(onEdit)}>
74+
<EditIcon />
75+
</Icon>
76+
</Tooltip>
77+
)}
78+
{onCreateFile && (
79+
<Tooltip content="New File" singleton={singleton}>
80+
<Icon onClick={handleClick(onCreateFile)}>
81+
<AddFileIcon />
82+
</Icon>
83+
</Tooltip>
84+
)}
85+
{onCreateDirectory && (
86+
<Tooltip content="New Directory" singleton={singleton}>
87+
<Icon onClick={handleClick(onCreateDirectory)}>
88+
<AddDirectoryIcon />
89+
</Icon>
90+
</Tooltip>
91+
)}
92+
{onDelete && (
93+
<Tooltip content="Delete" singleton={singleton}>
94+
<Icon onClick={handleClick(onDelete)}>
95+
<CrossIcon />
96+
</Icon>
97+
</Tooltip>
98+
)}
99+
</>
100+
)}
101+
</SingletonTooltip>
94102
</Container>
95103
)}
96104
</div>

‎packages/common/__mocks__/styleMock.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {};

‎packages/common/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@
3737
"transform": {
3838
"^.+\\.[t|j]sx?$": "babel-jest",
3939
"^.+\\.svg$": "jest-svg-transformer"
40+
},
41+
"moduleNameMapper": {
42+
"\\.css$": "<rootDir>/__mocks__/styleMock.js"
4043
}
4144
},
4245
"dependencies": {
@@ -46,7 +49,7 @@
4649
"@codesandbox/template-icons": "^1.0.2",
4750
"@sentry/browser": "^5.9.0",
4851
"@styled-system/css": "^5.0.23",
49-
"@tippy.js/react": "^2.1.1",
52+
"@tippy.js/react": "^3.1.1",
5053
"babel-plugin-preval": "^3.0.1",
5154
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
5255
"codesandbox-api": "0.0.23",

‎packages/common/src/components/Tooltip/index.tsx‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,61 @@
11
import React from 'react';
2-
import { createGlobalStyle } from 'styled-components';
3-
import Tippy from '@tippy.js/react';
2+
import styled from 'styled-components';
3+
import Tippy, { useSingleton } from '@tippy.js/react';
4+
import { animateFill, Props } from 'tippy.js';
45
import theme from '../../theme';
56

6-
const GlobalStyle = createGlobalStyle`
7+
import 'tippy.js/dist/tippy.css';
8+
import 'tippy.js/dist/backdrop.css';
9+
import 'tippy.js/animations/shift-away.css';
10+
11+
const defaultProps: Partial<Props> = {
12+
delay: [500, 100],
13+
boundary: 'window',
14+
animateFill: true,
15+
plugins: [animateFill],
16+
};
17+
18+
const mainStyles = `
19+
background-color: rgb(21, 24, 25);
20+
721
.tippy-backdrop {
822
background-color: rgb(21, 24, 25);
923
}
24+
`;
25+
26+
const MainTippy = styled(Tippy)`
27+
${mainStyles}
28+
`;
1029

11-
.tippy-tooltip.update-theme {
12-
background-color: ${theme.green()};
13-
border-radius: 2px;
14-
padding: 0;
30+
const UpdateTippy = styled(Tippy)`
31+
background-color: ${theme.green()};
32+
border-radius: 2px;
33+
padding: 0;
1534
16-
.tippy-arrow {
17-
border-bottom-color: ${theme.green()};
18-
}
35+
.tippy-arrow {
36+
border-bottom-color: ${theme.green()};
1937
}
2038
`;
2139

22-
const Tooltip = ({ children, style = {}, content, ...props }) => (
23-
<>
24-
<GlobalStyle />
25-
<Tippy delay={[500, 0]} content={content} {...props}>
40+
export const SingletonTooltip = styled(
41+
({ children, style = {}, content, ...props }) => {
42+
const singleton = useSingleton({
43+
...defaultProps,
44+
updateDuration: 250,
45+
...props,
46+
});
47+
48+
return children(singleton);
49+
}
50+
)`
51+
${mainStyles}
52+
`;
53+
54+
const Tooltip = ({ children, style = {}, content, ...props }) => {
55+
const TippyComponent = props.theme === 'update' ? UpdateTippy : MainTippy;
56+
57+
return (
58+
<TippyComponent content={content} {...defaultProps} {...props}>
2659
<span
2760
style={{
2861
outlineColor: 'transparent',
@@ -31,8 +64,8 @@ const Tooltip = ({ children, style = {}, content, ...props }) => (
3164
>
3265
{children}
3366
</span>
34-
</Tippy>
35-
</>
36-
);
67+
</TippyComponent>
68+
);
69+
};
3770

3871
export default Tooltip;

0 commit comments

Comments
 (0)