chore: add tooltips to sidebar icon buttons

This commit is contained in:
Haishan 2020-11-21 22:49:47 +08:00
parent 65e79b5648
commit 71646e2881
3 changed files with 99 additions and 34 deletions

View file

@ -23,6 +23,7 @@
"dependencies": {
"@babel/runtime": "^7.12.5",
"@hsjs/react-cache": "0.0.0-alpha.aa94237",
"@reach/tooltip": "^0.11.2",
"@sentry/browser": "^5.27.4",
"chart.js": "^2.9.2",
"clsx": "^1.1.0",

View file

@ -1,6 +1,8 @@
import '@reach/tooltip/styles.css';
import Tooltip from '@reach/tooltip';
import cx from 'clsx';
import PropTypes from 'prop-types';
import React from 'react';
import * as React from 'react';
import { Info } from 'react-feather';
import {
FcAreaChart,
@ -19,17 +21,6 @@ import { connect } from './StateProvider';
const { useCallback } = React;
// testing color icons
// const icons = {
// activity: Activity,
// globe: Globe,
// command: Command,
// file: File,
// settings: Settings,
// link: Link2
// };
const icons = {
activity: FcAreaChart,
globe: FcGlobe,
@ -40,15 +31,11 @@ const icons = {
};
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,
// @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,
// @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,
// @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,
}) {
}: SideBarRowProps) {
const Comp = icons[iconId];
const className = cx(s.row, isActive ? s.rowActive : null);
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
SideBarRow.propTypes = {
isActive: PropTypes.bool.isRequired,
to: PropTypes.string.isRequired,
iconId: PropTypes.string,
labelText: PropTypes.string,
};
interface SideBarRowProps {
isActive: boolean;
to: string;
iconId?: string;
labelText?: string;
}
const pages = [
{
@ -112,7 +98,6 @@ function SideBar({ dispatch, theme }) {
{pages.map(({ to, iconId, labelText }) => (
<SideBarRow
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}
isActive={location.pathname === to}
iconId={iconId}
@ -121,15 +106,24 @@ function SideBar({ dispatch, theme }) {
))}
</div>
<div className={s.footer}>
<Tooltip
label="theme"
aria-label={
'switch to ' + (theme === 'light' ? 'dark' : 'light') + ' theme'
}
>
<button
className={cx(s.iconWrapper, s.themeSwitchContainer)}
onClick={switchThemeHooked}
>
{theme === 'light' ? <MoonA /> : <Sun />}
</button>
</Tooltip>
<Tooltip label="about">
<Link to="/about" className={s.iconWrapper}>
<Info size={20} />
</Link>
</Tooltip>
</div>
</div>
);

View file

@ -1213,6 +1213,66 @@
schema-utils "^2.6.5"
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":
version "7.1.3"
resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@ -1492,6 +1552,11 @@
dependencies:
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@*":
version "1.4.2"
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"
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:
version "3.17.1"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"