Skip to content

Commit 15fda98

Browse files
edbrettedbrett
authored
Merge pull request #3326 from Vizzuality/feature/tooltips-improvements
Feature: improved tooltips for components
2 parents 4a03318 + 50dd639 commit 15fda98

File tree

3 files changed

+156
-96
lines changed

3 files changed

+156
-96
lines changed

‎app/javascript/components/button/button-component.jsx

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import Link from 'redux-first-router-link';
4+
import { isTouch } from 'utils/browser';
45

56
import { Tooltip } from 'react-tippy';
7+
import Tip from 'components/tip';
68

79
import './button-styles.scss';
810
import 'styles/themes/button/button-light.scss'; // eslint-disable-line
@@ -26,6 +28,7 @@ const Button = props => {
2628
const classNames = `c-button ${theme || ''} ${className || ''} ${
2729
disabled ? 'disabled' : ''
2830
}`;
31+
const isDeviceTouch = isTouch();
2932
const handleClick = () => {
3033
if (onClick) {
3134
onClick();
@@ -68,7 +71,18 @@ const Button = props => {
6871
}
6972

7073
if (tooltip) {
71-
return <Tooltip {...tooltip}>{button}</Tooltip>;
74+
return (
75+
<Tooltip
76+
theme="tip"
77+
position="top"
78+
arrow
79+
disabled={isDeviceTouch}
80+
html={<Tip text={tooltip.text} />}
81+
{...tooltip}
82+
>
83+
{button}
84+
</Tooltip>
85+
);
7286
}
7387
return button;
7488
};

‎app/javascript/components/dropdown/dropdown-component.js

+33-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
3-
import Select from 'react-select-me';
43
import { deburrUpper } from 'utils/data';
4+
import { isTouch } from 'utils/browser';
5+
6+
import Select from 'react-select-me';
57
import Button from 'components/button';
68
import Icon from 'components/icon';
9+
import { Tooltip } from 'react-tippy';
10+
import Tip from 'components/tip';
711

812
import infoIcon from 'assets/icons/info.svg';
913
import arrowDownIcon from 'assets/icons/arrow-down.svg';
@@ -33,8 +37,16 @@ class Dropdown extends PureComponent {
3337
};
3438

3539
render() {
36-
const { theme, label, infoAction, modalOpen, modalClosing } = this.props;
37-
return (
40+
const {
41+
theme,
42+
label,
43+
infoAction,
44+
modalOpen,
45+
modalClosing,
46+
tooltip
47+
} = this.props;
48+
const isDeviceTouch = isTouch();
49+
const dropdown = (
3850
<div className={`c-dropdown ${theme || 'theme-select-light'}`}>
3951
{label && (
4052
<div className="label">
@@ -65,6 +77,22 @@ class Dropdown extends PureComponent {
6577
/>
6678
</div>
6779
);
80+
81+
if (tooltip) {
82+
return (
83+
<Tooltip
84+
theme="tip"
85+
position="top"
86+
arrow
87+
disabled={isDeviceTouch}
88+
html={<Tip text={tooltip.text} />}
89+
{...tooltip}
90+
>
91+
{dropdown}
92+
</Tooltip>
93+
);
94+
}
95+
return dropdown;
6896
}
6997
}
7098

@@ -74,7 +102,8 @@ Dropdown.propTypes = {
74102
options: PropTypes.array,
75103
infoAction: PropTypes.func,
76104
modalOpen: PropTypes.bool,
77-
modalClosing: PropTypes.bool
105+
modalClosing: PropTypes.bool,
106+
tooltip: PropTypes.object
78107
};
79108

80109
export default Dropdown;

‎app/javascript/pages/country/header/header-component.js

+108-91
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
3-
import { isTouch } from 'utils/browser';
43

5-
import { Tooltip } from 'react-tippy';
64
import Dropdown from 'components/dropdown';
75
import Loader from 'components/loader';
86
import Icon from 'components/icon';
97
import Button from 'components/button';
10-
import Tip from 'components/tip';
118

129
import arrowDownIcon from 'assets/icons/arrow-down.svg';
1310
import shareIcon from 'assets/icons/share.svg';
1411
import downloadIcon from 'assets/icons/download.svg';
1512
import './header-styles.scss';
1613

1714
class Header extends PureComponent {
15+
constructor(props) {
16+
super(props);
17+
this.state = {
18+
disableTooltips: false
19+
};
20+
}
21+
1822
render() {
1923
const {
2024
className,
@@ -31,7 +35,7 @@ class Header extends PureComponent {
3135
location,
3236
forestAtlasLink
3337
} = this.props;
34-
const isDeviceTouch = isTouch();
38+
const { disableTooltips } = this.state;
3539

3640
return (
3741
<div className={`${className} c-header`}>
@@ -47,19 +51,12 @@ class Header extends PureComponent {
4751
...location
4852
}}
4953
tooltip={{
50-
theme: 'tip',
51-
position: 'bottom',
52-
arrow: true,
53-
disabled: isDeviceTouch,
54-
html: (
55-
<Tip
56-
text={`Download the country data${
57-
locationNames.country
58-
? ` for ${locationNames.country.label}`
59-
: ''
60-
}`}
61-
/>
62-
)
54+
text: `Download the country data${
55+
locationNames.country
56+
? ` for ${locationNames.country.label}`
57+
: ''
58+
}`,
59+
position: 'bottom'
6360
}}
6461
>
6562
<Icon icon={downloadIcon} />
@@ -68,88 +65,108 @@ class Header extends PureComponent {
6865
className="theme-button-small theme-button-grey square"
6966
onClick={() => setShareModal(shareData)}
7067
tooltip={{
71-
theme: 'tip',
72-
position: 'bottom',
73-
arrow: true,
74-
disabled: isDeviceTouch,
75-
html: <Tip text="Share this page" />
68+
text: 'Share this page',
69+
position: 'bottom'
7670
}}
7771
>
7872
<Icon icon={shareIcon} />
7973
</Button>
8074
</div>
8175
<div className="row">
8276
<div className="columns small-12 large-6">
83-
<Tooltip
84-
theme="tip"
85-
position="top"
86-
arrow
87-
disabled={isDeviceTouch}
88-
html={
89-
<Tip text="Choose the country and region you want to explore" />
90-
}
91-
>
92-
<div className="select-container">
93-
<div className="select">
94-
<Icon icon={arrowDownIcon} className="icon" />
95-
<Dropdown
96-
theme="theme-select-dark"
97-
placeholder="Country"
98-
noItemsFound="No country found"
99-
value={locationNames.country}
100-
options={locationOptions.countries}
101-
onChange={handleCountryChange}
102-
searchable
103-
disabled={loading}
104-
/>
105-
</div>
106-
{locationOptions.regions &&
107-
locationOptions.regions.length > 1 && (
108-
<div className="select">
109-
<Icon icon={arrowDownIcon} className="icon" />
110-
<Dropdown
111-
theme="theme-select-dark"
112-
placeholder="Region"
113-
noItemsFound="No region found"
114-
value={locationNames.region}
115-
options={locationOptions.regions}
116-
onChange={region =>
117-
handleRegionChange(locationNames.country, region)
118-
}
119-
searchable
120-
disabled={loading}
121-
/>
122-
</div>
123-
)}
124-
{locationNames.region &&
125-
locationNames.region.value &&
126-
locationOptions.subRegions &&
127-
locationOptions.subRegions.length > 1 && (
128-
<div className="select">
129-
<Icon
130-
icon={arrowDownIcon}
131-
className="icon c-header__select-arrow"
132-
/>
133-
<Dropdown
134-
theme="theme-select-dark"
135-
placeholder="Region"
136-
noItemsFound="No region found"
137-
value={locationNames.subRegion}
138-
options={locationOptions.subRegions}
139-
onChange={subRegion =>
140-
handleSubRegionChange(
141-
locationNames.country,
142-
locationNames.region,
143-
subRegion
144-
)
145-
}
146-
searchable
147-
disabled={loading}
148-
/>
149-
</div>
150-
)}
77+
<div className="select-container">
78+
<div className="select">
79+
<Icon icon={arrowDownIcon} className="icon" />
80+
<Dropdown
81+
theme="theme-select-dark"
82+
placeholder="Country"
83+
noItemsFound="No country found"
84+
value={locationNames.country}
85+
options={locationOptions.countries}
86+
onChange={handleCountryChange}
87+
searchable
88+
disabled={loading}
89+
tooltip={{
90+
text: 'Choose the country you want to explore',
91+
delay: 1000,
92+
disabled: disableTooltips
93+
}}
94+
onOpen={() => {
95+
this.setState({ disableTooltips: true });
96+
}}
97+
onClose={() => {
98+
this.setState({ disableTooltips: false });
99+
}}
100+
/>
151101
</div>
152-
</Tooltip>
102+
{locationOptions.regions &&
103+
locationOptions.regions.length > 1 && (
104+
<div className="select">
105+
<Icon icon={arrowDownIcon} className="icon" />
106+
<Dropdown
107+
theme="theme-select-dark"
108+
placeholder="Region"
109+
noItemsFound="No region found"
110+
value={locationNames.region}
111+
options={locationOptions.regions}
112+
onChange={region =>
113+
handleRegionChange(locationNames.country, region)
114+
}
115+
searchable
116+
disabled={loading}
117+
tooltip={{
118+
text: 'Choose the region you want to explore',
119+
delay: 1000,
120+
disabled: disableTooltips
121+
}}
122+
onOpen={() => {
123+
this.setState({ disableTooltips: true });
124+
}}
125+
onClose={() => {
126+
this.setState({ disableTooltips: false });
127+
}}
128+
/>
129+
</div>
130+
)}
131+
{locationNames.region &&
132+
locationNames.region.value &&
133+
locationOptions.subRegions &&
134+
locationOptions.subRegions.length > 1 && (
135+
<div className="select">
136+
<Icon
137+
icon={arrowDownIcon}
138+
className="icon c-header__select-arrow"
139+
/>
140+
<Dropdown
141+
theme="theme-select-dark"
142+
placeholder="Region"
143+
noItemsFound="No region found"
144+
value={locationNames.subRegion}
145+
options={locationOptions.subRegions}
146+
onChange={subRegion =>
147+
handleSubRegionChange(
148+
locationNames.country,
149+
locationNames.region,
150+
subRegion
151+
)
152+
}
153+
searchable
154+
disabled={loading}
155+
tooltip={{
156+
text: 'Choose the region you want to explore',
157+
delay: 1000,
158+
disabled: disableTooltips
159+
}}
160+
onOpen={() => {
161+
this.setState({ disableTooltips: true });
162+
}}
163+
onClose={() => {
164+
this.setState({ disableTooltips: false });
165+
}}
166+
/>
167+
</div>
168+
)}
169+
</div>
153170
</div>
154171
<div className="columns large-6 medium-12 small-12">
155172
<div className="description text -title-xs">

0 commit comments

Comments
 (0)