chore: add tooltips to sidebar icon buttons
This commit is contained in:
parent
65e79b5648
commit
71646e2881
3 changed files with 99 additions and 34 deletions
|
@ -23,6 +23,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.12.5",
|
"@babel/runtime": "^7.12.5",
|
||||||
"@hsjs/react-cache": "0.0.0-alpha.aa94237",
|
"@hsjs/react-cache": "0.0.0-alpha.aa94237",
|
||||||
|
"@reach/tooltip": "^0.11.2",
|
||||||
"@sentry/browser": "^5.27.4",
|
"@sentry/browser": "^5.27.4",
|
||||||
"chart.js": "^2.9.2",
|
"chart.js": "^2.9.2",
|
||||||
"clsx": "^1.1.0",
|
"clsx": "^1.1.0",
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
|
import '@reach/tooltip/styles.css';
|
||||||
|
|
||||||
|
import Tooltip from '@reach/tooltip';
|
||||||
import cx from 'clsx';
|
import cx from 'clsx';
|
||||||
import PropTypes from 'prop-types';
|
import * as React from 'react';
|
||||||
import React from 'react';
|
|
||||||
import { Info } from 'react-feather';
|
import { Info } from 'react-feather';
|
||||||
import {
|
import {
|
||||||
FcAreaChart,
|
FcAreaChart,
|
||||||
|
@ -19,17 +21,6 @@ import { connect } from './StateProvider';
|
||||||
|
|
||||||
const { useCallback } = React;
|
const { useCallback } = React;
|
||||||
|
|
||||||
// testing color icons
|
|
||||||
|
|
||||||
// const icons = {
|
|
||||||
// activity: Activity,
|
|
||||||
// globe: Globe,
|
|
||||||
// command: Command,
|
|
||||||
// file: File,
|
|
||||||
// settings: Settings,
|
|
||||||
// link: Link2
|
|
||||||
// };
|
|
||||||
|
|
||||||
const icons = {
|
const icons = {
|
||||||
activity: FcAreaChart,
|
activity: FcAreaChart,
|
||||||
globe: FcGlobe,
|
globe: FcGlobe,
|
||||||
|
@ -40,15 +31,11 @@ const icons = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const SideBarRow = React.memo(function SideBarRow({
|
const SideBarRow = React.memo(function SideBarRow({
|
||||||
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isActive' does not exist on type '{ chil... Remove this comment to see the full error message
|
|
||||||
isActive,
|
isActive,
|
||||||
// @ts-expect-error ts-migrate(2339) FIXME: Property 'to' does not exist on type '{ children?:... Remove this comment to see the full error message
|
|
||||||
to,
|
to,
|
||||||
// @ts-expect-error ts-migrate(2339) FIXME: Property 'iconId' does not exist on type '{ childr... Remove this comment to see the full error message
|
|
||||||
iconId,
|
iconId,
|
||||||
// @ts-expect-error ts-migrate(2339) FIXME: Property 'labelText' does not exist on type '{ chi... Remove this comment to see the full error message
|
|
||||||
labelText,
|
labelText,
|
||||||
}) {
|
}: SideBarRowProps) {
|
||||||
const Comp = icons[iconId];
|
const Comp = icons[iconId];
|
||||||
const className = cx(s.row, isActive ? s.rowActive : null);
|
const className = cx(s.row, isActive ? s.rowActive : null);
|
||||||
return (
|
return (
|
||||||
|
@ -59,13 +46,12 @@ const SideBarRow = React.memo(function SideBarRow({
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// @ts-expect-error ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type 'Named... Remove this comment to see the full error message
|
interface SideBarRowProps {
|
||||||
SideBarRow.propTypes = {
|
isActive: boolean;
|
||||||
isActive: PropTypes.bool.isRequired,
|
to: string;
|
||||||
to: PropTypes.string.isRequired,
|
iconId?: string;
|
||||||
iconId: PropTypes.string,
|
labelText?: string;
|
||||||
labelText: PropTypes.string,
|
}
|
||||||
};
|
|
||||||
|
|
||||||
const pages = [
|
const pages = [
|
||||||
{
|
{
|
||||||
|
@ -112,7 +98,6 @@ function SideBar({ dispatch, theme }) {
|
||||||
{pages.map(({ to, iconId, labelText }) => (
|
{pages.map(({ to, iconId, labelText }) => (
|
||||||
<SideBarRow
|
<SideBarRow
|
||||||
key={to}
|
key={to}
|
||||||
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: string; to: string; isActive: boolean... Remove this comment to see the full error message
|
|
||||||
to={to}
|
to={to}
|
||||||
isActive={location.pathname === to}
|
isActive={location.pathname === to}
|
||||||
iconId={iconId}
|
iconId={iconId}
|
||||||
|
@ -121,15 +106,24 @@ function SideBar({ dispatch, theme }) {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className={s.footer}>
|
<div className={s.footer}>
|
||||||
|
<Tooltip
|
||||||
|
label="theme"
|
||||||
|
aria-label={
|
||||||
|
'switch to ' + (theme === 'light' ? 'dark' : 'light') + ' theme'
|
||||||
|
}
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
className={cx(s.iconWrapper, s.themeSwitchContainer)}
|
className={cx(s.iconWrapper, s.themeSwitchContainer)}
|
||||||
onClick={switchThemeHooked}
|
onClick={switchThemeHooked}
|
||||||
>
|
>
|
||||||
{theme === 'light' ? <MoonA /> : <Sun />}
|
{theme === 'light' ? <MoonA /> : <Sun />}
|
||||||
</button>
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip label="about">
|
||||||
<Link to="/about" className={s.iconWrapper}>
|
<Link to="/about" className={s.iconWrapper}>
|
||||||
<Info size={20} />
|
<Info size={20} />
|
||||||
</Link>
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
70
yarn.lock
70
yarn.lock
|
@ -1213,6 +1213,66 @@
|
||||||
schema-utils "^2.6.5"
|
schema-utils "^2.6.5"
|
||||||
source-map "^0.7.3"
|
source-map "^0.7.3"
|
||||||
|
|
||||||
|
"@reach/auto-id@0.11.2":
|
||||||
|
version "0.11.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.11.2.tgz#c66a905c5401d1ac3da8d26165b8d27d6e778fa6"
|
||||||
|
integrity sha512-YZ21b0Kb88wJ0t7QjSznWOYskARQMnmXY9Y2XZ5RyYcZ2krT4s3+ghghpfaPs6BKcrZDonZCrU65OFDJPa1jAw==
|
||||||
|
dependencies:
|
||||||
|
"@reach/utils" "0.11.2"
|
||||||
|
tslib "^2.0.0"
|
||||||
|
|
||||||
|
"@reach/observe-rect@1.2.0":
|
||||||
|
version "1.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
|
||||||
|
integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
|
||||||
|
|
||||||
|
"@reach/portal@0.11.2":
|
||||||
|
version "0.11.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.11.2.tgz#19a671be9ff010a345892b81e710cb6e4d9f9762"
|
||||||
|
integrity sha512-/53A/rY5oX2Y7D5TpvsP+V5cSd+4MPY6f21mAmVn4DCVwpkCFOlJ059ZL7ixS85M0Jz48YQnnvBJUqwkxqUG/g==
|
||||||
|
dependencies:
|
||||||
|
"@reach/utils" "0.11.2"
|
||||||
|
tslib "^2.0.0"
|
||||||
|
|
||||||
|
"@reach/rect@0.11.2":
|
||||||
|
version "0.11.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.11.2.tgz#bc92f97f87e81d1307054fd41c40874d3fbf5491"
|
||||||
|
integrity sha512-eoUWayAADi1ITtrc+8jN9NsBTUkfpORkOs5bQb4RnR6UA/3zlxo5VPuxWgWAG0BCohZlqsxg7NpvckNAyaiAAQ==
|
||||||
|
dependencies:
|
||||||
|
"@reach/observe-rect" "1.2.0"
|
||||||
|
"@reach/utils" "0.11.2"
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
tslib "^2.0.0"
|
||||||
|
|
||||||
|
"@reach/tooltip@^0.11.2":
|
||||||
|
version "0.11.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.11.2.tgz#db5c11fa72995801baac157db46f5bb6cacd494b"
|
||||||
|
integrity sha512-aTi3aLkRZMHrNiHt84vnyTWNj84rPdGYkxAfaFpxgkaKpos3XmaOPiR+n/3YzQUoJXISuw8mZezcrDtsSpr3aA==
|
||||||
|
dependencies:
|
||||||
|
"@reach/auto-id" "0.11.2"
|
||||||
|
"@reach/portal" "0.11.2"
|
||||||
|
"@reach/rect" "0.11.2"
|
||||||
|
"@reach/utils" "0.11.2"
|
||||||
|
"@reach/visually-hidden" "0.11.1"
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
tslib "^2.0.0"
|
||||||
|
|
||||||
|
"@reach/utils@0.11.2":
|
||||||
|
version "0.11.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.11.2.tgz#be1f03650db56fd67a16d3fc70e5262cdb139cec"
|
||||||
|
integrity sha512-fBTolYj+rKTROXmf0zHO0rCWSvw7J0ALmYj5QxW4DmITMOH5uyRuWDWOfqohIGFbOtF/sum50WTB3tvx76d+Aw==
|
||||||
|
dependencies:
|
||||||
|
"@types/warning" "^3.0.0"
|
||||||
|
tslib "^2.0.0"
|
||||||
|
warning "^4.0.3"
|
||||||
|
|
||||||
|
"@reach/visually-hidden@0.11.1":
|
||||||
|
version "0.11.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.11.1.tgz#3d7a5742acf18372f35b9e216680edd8073f35e3"
|
||||||
|
integrity sha512-TZZNSttor2jG6ZPGI35s/8G0FNSz49QrJIhAZbnUqHyPf3+jtNqAC0dOWW8Nuk+mApDDDVYd2KZ9P2vnzllNnQ==
|
||||||
|
dependencies:
|
||||||
|
tslib "^2.0.0"
|
||||||
|
|
||||||
"@rollup/plugin-node-resolve@^7.1.1":
|
"@rollup/plugin-node-resolve@^7.1.1":
|
||||||
version "7.1.3"
|
version "7.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
|
resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
|
||||||
|
@ -1492,6 +1552,11 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
source-map "^0.6.1"
|
source-map "^0.6.1"
|
||||||
|
|
||||||
|
"@types/warning@^3.0.0":
|
||||||
|
version "3.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
|
||||||
|
integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
|
||||||
|
|
||||||
"@types/webpack-sources@*":
|
"@types/webpack-sources@*":
|
||||||
version "1.4.2"
|
version "1.4.2"
|
||||||
resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-1.4.2.tgz#5d3d4dea04008a779a90135ff96fb5c0c9e6292c"
|
resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-1.4.2.tgz#5d3d4dea04008a779a90135ff96fb5c0c9e6292c"
|
||||||
|
@ -7245,6 +7310,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
|
||||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||||
|
|
||||||
|
tslib@^2.0.0:
|
||||||
|
version "2.0.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
|
||||||
|
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
|
||||||
|
|
||||||
tsutils@^3.17.1:
|
tsutils@^3.17.1:
|
||||||
version "3.17.1"
|
version "3.17.1"
|
||||||
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
|
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
|
||||||
|
|
Loading…
Reference in a new issue