chore: add tooltips to sidebar icon buttons
This commit is contained in:
Haishan
parent
65e79b5648
commit
71646e2881
3 changed files with 99 additions and 34 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<button
|
||||
className={cx(s.iconWrapper, s.themeSwitchContainer)}
|
||||
onClick={switchThemeHooked}
|
||||
<Tooltip
|
||||
label="theme"
|
||||
aria-label={
|
||||
'switch to ' + (theme === 'light' ? 'dark' : 'light') + ' theme'
|
||||
}
|
||||
>
|
||||
{theme === 'light' ? <MoonA /> : <Sun />}
|
||||
</button>
|
||||
<Link to="/about" className={s.iconWrapper}>
|
||||
<Info size={20} />
|
||||
</Link>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
70
yarn.lock
70
yarn.lock
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue