From 71646e2881ba221788c0ca16d05137ed8f191fae Mon Sep 17 00:00:00 2001 From: Haishan Date: Sat, 21 Nov 2020 22:49:47 +0800 Subject: [PATCH] chore: add tooltips to sidebar icon buttons --- package.json | 1 + src/components/SideBar.tsx | 62 +++++++++++++++------------------ yarn.lock | 70 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 99 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 11786a2..caea756 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 6bf58b5..023f418 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -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 }) => (
- - - - + + + + + + +
); diff --git a/yarn.lock b/yarn.lock index 6bd3e98..1f87e06 100644 --- a/yarn.lock +++ b/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"