Skip to content
This repository has been archived by the owner on Jan 24, 2025. It is now read-only.

Commit

Permalink
fix(docz-theme-default): tooltip component
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedronauck
pedronauck committed Oct 30, 2018
1 parent fee795a commit 9234b5e
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 38 deletions.
2 changes: 0 additions & 2 deletions packages/docz-theme-default/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,6 @@ const config = {
theadColor: colors.gray,
theadBg: colors.grayExtraLight,
tableColor: colors.dark,
tooltipBg: colors.dark,
tooltipColor: colors.grayExtraLight,
codeBg: lighten(0.02, colors.grayExtraLight),
codeColor: colors.gray,
preBg: colors.grayExtraLight,
Expand Down
2 changes: 1 addition & 1 deletion packages/docz-theme-default/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@
"polished": "^2.3.0",
"pretty": "^2.0.0",
"prop-types": "15.6.2",
"rc-tooltip": "^3.7.3",
"re-resizable": "^4.9.2",
"react": "^16.6.0",
"react-codemirror2": "^5.1.0",
"react-dom": "^16.6.0",
"react-emotion": "^9.2.12",
"react-feather": "^1.1.4",
"react-lightweight-tooltip": "^1.0.0",
"react-live": "^1.12.0",
"react-perfect-scrollbar": "^1.4.0",
"react-powerplug": "^1.0.0-rc.1",
Expand Down
55 changes: 28 additions & 27 deletions packages/docz-theme-default/src/components/ui/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,42 @@
import * as React from 'react'
import { ThemeConfig } from 'docz'
import { SFC, ReactNode } from 'react'
import { Tooltip as BaseTooltip } from 'react-lightweight-tooltip'

const getStyles = (colors: any) => ({
wrapper: {
color: colors.primary,
},
content: {
backgroundColor: colors.tooltipBg,
color: colors.tooltipColor,
},
tooltip: {
display: 'flex',
alignItems: 'center',
width: 220,
maxWidth: 220,
padding: 5,
backgroundColor: colors.tooltipBg,
borderRadius: '3px',
fontSize: 16,
},
arrow: {
borderTop: `solid ${colors.tooltipBg} 5px`,
},
})
import { ThemeConfig } from 'docz'
import BaseTooltip from 'rc-tooltip'
import styled, { css } from 'react-emotion'

interface TooltipProps {
text: ReactNode
children: ReactNode
}

const overlayClass = (colors: Record<string, any>) => css`
.rc-tooltip-inner {
background: ${colors.tooltipBg};
color: ${colors.tooltipColor};
}
.rc-tooltip-arrow {
border-top-color: ${colors.tooltipBg};
}
`

const Link = styled('a')`
text-decoration: none;
color: initial;
`

export const Tooltip: SFC<TooltipProps> = ({ text, children }) => (
<ThemeConfig>
{config => (
<BaseTooltip styles={getStyles(config.themeConfig.colors)} content={text}>
{children}
<BaseTooltip
placement="top"
trigger={['hover']}
overlay={text}
overlayClassName={overlayClass(config.themeConfig.colors)}
>
<Link href="#" onClick={ev => ev.preventDefault()}>
{children}
</Link>
</BaseTooltip>
)}
</ThemeConfig>
Expand Down
1 change: 1 addition & 0 deletions packages/docz-theme-default/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'rc-tooltip/assets/bootstrap.css'
import './styles/global'

import * as React from 'react'
Expand Down
1 change: 1 addition & 0 deletions packages/docz-theme-default/src/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ declare module 'react-powerplug'
declare module 'react-sizes'
declare module 're-resizable'
declare module 'webfontloader'
declare module 'rc-tooltip'

declare module 'facepaint' {
interface Styles {
Expand Down
139 changes: 131 additions & 8 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2390,6 +2390,13 @@ acorn@^6.0.1, acorn@^6.0.2:
resolved "https://registry.npmjs.org/acorn/-/acorn-6.0.2.tgz#6a459041c320ab17592c6317abbfdf4bbaa98ca4"
integrity sha512-GXmKIvbrN3TV7aVqAzVFaMW8F8wzVX7voEBRO3bDA64+EX37YSayggRJP5Xig6HYHBkWKpFg9W5gg6orklubhg==

add-dom-event-listener@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310"
integrity sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==
dependencies:
object-assign "4.x"

[email protected], address@^1.0.1:
version "1.0.3"
resolved "https://registry.npmjs.org/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
Expand Down Expand Up @@ -2959,7 +2966,7 @@ babel-register@^6.26.0:
mkdirp "^0.5.1"
source-map-support "^0.4.15"

[email protected], babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.9.2:
[email protected], babel-runtime@6.x, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.9.2:
version "6.26.0"
resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
Expand Down Expand Up @@ -3745,6 +3752,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"

classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==

[email protected]:
version "4.2.1"
resolved "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
Expand Down Expand Up @@ -3995,11 +4007,23 @@ compare-func@^1.3.1:
array-ify "^1.0.0"
dot-prop "^3.0.0"

component-classes@^1.2.5:
version "1.2.6"
resolved "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691"
integrity sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=
dependencies:
component-indexof "0.0.3"

component-emitter@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
integrity sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=

[email protected]:
version "0.0.3"
resolved "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
integrity sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=

[email protected]:
version "1.1.1"
resolved "https://registry.npmjs.org/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944"
Expand Down Expand Up @@ -4509,6 +4533,14 @@ crypto-random-string@^1.0.0:
resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=

css-animation@^1.3.2:
version "1.4.1"
resolved "https://registry.npmjs.org/css-animation/-/css-animation-1.4.1.tgz#5b8813125de0fbbbb0bbe1b472ae84221469b7a8"
integrity sha1-W4gTEl3g+7uwu+G0cq6EIhRpt6g=
dependencies:
babel-runtime "6.x"
component-classes "^1.2.5"

css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
Expand Down Expand Up @@ -4998,6 +5030,11 @@ doctrine@^2.0.0, doctrine@^2.1.0:
dependencies:
esutils "^2.0.2"

dom-align@^1.7.0:
version "1.8.0"
resolved "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz#c0e89b5b674c6e836cd248c52c2992135f093654"
integrity sha512-B85D4ef2Gj5lw0rK0KM2+D5/pH7yqNxg2mB+E8uzFaolpm7RQmsxEfjyEuNiF8UBBkffumYDeKRzTzc3LePP+w==

dom-converter@~0.1:
version "0.1.4"
resolved "http://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
Expand Down Expand Up @@ -8377,6 +8414,11 @@ locate-path@^3.0.0:
p-locate "^3.0.0"
path-exists "^3.0.0"

lodash._getnative@^3.0.0:
version "3.9.1"
resolved "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=

lodash._reinterpolate@~3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
Expand Down Expand Up @@ -8432,6 +8474,16 @@ lodash.get@^4.4.2:
resolved "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=

lodash.isarguments@^3.0.0:
version "3.1.0"
resolved "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
integrity sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=

lodash.isarray@^3.0.0:
version "3.0.4"
resolved "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=

lodash.isplainobject@^4.0.6:
version "4.0.6"
resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
Expand All @@ -8447,6 +8499,15 @@ [email protected]:
resolved "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=

lodash.keys@^3.1.2:
version "3.1.2"
resolved "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
integrity sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=
dependencies:
lodash._getnative "^3.0.0"
lodash.isarguments "^3.0.0"
lodash.isarray "^3.0.0"

lodash.map@^4.5.1:
version "4.6.0"
resolved "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
Expand Down Expand Up @@ -9610,7 +9671,7 @@ oauth-sign@~0.9.0:
resolved "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==

object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
Expand Down Expand Up @@ -10421,7 +10482,7 @@ promzard@^0.3.0:
dependencies:
read "1"

[email protected], prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
[email protected], prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
Expand Down Expand Up @@ -10557,6 +10618,13 @@ quick-lru@^1.0.0:
resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=

raf@^3.4.0:
version "3.4.0"
resolved "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
integrity sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==
dependencies:
performance-now "^2.1.0"

randomatic@^3.0.0:
version "3.1.0"
resolved "https://registry.npmjs.org/randomatic/-/randomatic-3.1.0.tgz#36f2ca708e9e567f5ed2ec01949026d50aa10116"
Expand Down Expand Up @@ -10596,6 +10664,59 @@ [email protected]:
iconv-lite "0.4.19"
unpipe "1.0.0"

rc-align@^2.4.0:
version "2.4.3"
resolved "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz#b9b3c2a6d68adae71a8e1d041cd5e3b2a655f99a"
integrity sha512-h5KgyB5IXYR7iKpYFcMr54cuQ2eozPCZ11kbXPG5+6CWvmyJ+c0R/yjndVndiNk2G3MKcTMbJNdDv5DIckLAxQ==
dependencies:
babel-runtime "^6.26.0"
dom-align "^1.7.0"
prop-types "^15.5.8"
rc-util "^4.0.4"

[email protected]:
version "2.5.4"
resolved "https://registry.npmjs.org/rc-animate/-/rc-animate-2.5.4.tgz#3b308c42e137a2e3fb578650fdb145c2100fcc35"
integrity sha512-aYisNYRuOvH+r5/nxEHHUzk1celxPg4nMUOuBGHd77c6NZbZ5fcjHFgWF3/nPdRPbLaqY4Z7Q317EcLO41fOvQ==
dependencies:
babel-runtime "6.x"
classnames "^2.2.6"
css-animation "^1.3.2"
prop-types "15.x"
raf "^3.4.0"
react-lifecycles-compat "^3.0.4"

rc-tooltip@^3.7.3:
version "3.7.3"
resolved "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.3.tgz#280aec6afcaa44e8dff0480fbaff9e87fc00aecc"
integrity sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==
dependencies:
babel-runtime "6.x"
prop-types "^15.5.8"
rc-trigger "^2.2.2"

rc-trigger@^2.2.2:
version "2.6.2"
resolved "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.2.tgz#a9c09ba5fad63af3b2ec46349c7db6cb46657001"
integrity sha512-op4xCu95/gdHVaysyxxiYxbY+Z+UcIBSUY9nQfLqm1FlitdtnAN+owD5iMPfnnsRXntgcQ5+RdYKNUFQT5DjzA==
dependencies:
babel-runtime "6.x"
classnames "^2.2.6"
prop-types "15.x"
rc-align "^2.4.0"
rc-animate "2.x"
rc-util "^4.4.0"

rc-util@^4.0.4, rc-util@^4.4.0:
version "4.6.0"
resolved "https://registry.npmjs.org/rc-util/-/rc-util-4.6.0.tgz#ba33721783192ec4f3afb259e182b04e55deb7f6"
integrity sha512-rbgrzm1/i8mgfwOI4t1CwWK7wGe+OwX+dNa7PVMgxZYPBADGh86eD4OcJO1UKGeajIMDUUKMluaZxvgraQIOmw==
dependencies:
add-dom-event-listener "^1.1.0"
babel-runtime "6.x"
prop-types "^15.5.10"
shallowequal "^0.2.2"

rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
version "1.2.8"
resolved "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
Expand Down Expand Up @@ -10745,11 +10866,6 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

react-lightweight-tooltip@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/react-lightweight-tooltip/-/react-lightweight-tooltip-1.0.0.tgz#1fb96831b88de21a4d73d02148aae3d8d0aea9bc"
integrity sha512-OQvgdiPfWbAjudT8Q+V2aWsySCJW0aQ3wNjfOw1ooamydEQkDxRfWqfnEhCYLneCz67d+r3kBYoZlpAx5S+VWA==

react-live@^1.12.0:
version "1.12.0"
resolved "https://registry.npmjs.org/react-live/-/react-live-1.12.0.tgz#2876d4e913331002b66dfa73cf58051376bc2518"
Expand Down Expand Up @@ -11854,6 +11970,13 @@ shallow-clone@^0.1.2:
lazy-cache "^0.2.3"
mixin-object "^2.0.1"

shallowequal@^0.2.2:
version "0.2.2"
resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
integrity sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=
dependencies:
lodash.keys "^3.1.2"

shallowequal@^1.0.2:
version "1.1.0"
resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
Expand Down

0 comments on commit 9234b5e

Please sign in to comment.