From 29207cf0d2c6cf542ed300fbbe447182f2ae5d33 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Wed, 7 Feb 2018 22:52:13 +0200 Subject: [PATCH] fix: improve copy tooltip perf --- package.json | 3 +- src/common-elements/CopyButtonWrapper.tsx | 61 +++++++++++++++-------- src/components/Redoc/elements.tsx | 1 + src/utils/decorators.ts | 34 +++++++++++++ yarn.lock | 21 ++++---- 5 files changed, 85 insertions(+), 35 deletions(-) create mode 100644 src/utils/decorators.ts diff --git a/package.json b/package.json index 36f83283..ef4f090e 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "@types/react-dom": "^16.0.0", "@types/react-hot-loader": "^3.0.3", "@types/react-tabs": "^1.0.2", - "@types/react-tooltip": "^3.3.3", "@types/webpack": "^3.0.5", "@types/webpack-env": "^1.13.0", "awesome-typescript-loader": "^3.2.2", @@ -95,7 +94,7 @@ "react-dropdown": "^1.3.0", "react-hot-loader": "3.1.3", "react-tabs": "^2.0.0", - "react-tooltip": "^3.4.0", + "react-tippy": "^1.2.2", "remarkable": "^1.7.1", "slugify": "^1.2.1", "stickyfill": "^1.1.1", diff --git a/src/common-elements/CopyButtonWrapper.tsx b/src/common-elements/CopyButtonWrapper.tsx index f3fc63fd..26ded018 100644 --- a/src/common-elements/CopyButtonWrapper.tsx +++ b/src/common-elements/CopyButtonWrapper.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; -import * as ReactTooltip from 'react-tooltip'; +import { Tooltip } from 'react-tippy'; +import { injectGlobal } from '../styled-components'; + +import styles from 'react-tippy/dist/tippy.css'; + +injectGlobal`${styles}`; import { ClipboardService } from '../services/ClipboardService'; @@ -12,7 +17,17 @@ export interface CopyButtonWrapperProps { ) => React.ReactNode; } -export class CopyButtonWrapper extends React.PureComponent { +export class CopyButtonWrapper extends React.PureComponent< + CopyButtonWrapperProps, + { tooltipShown: boolean } +> { + constructor(props) { + super(props); + this.state = { + tooltipShown: false, + }; + } + render() { return this.props.children({ renderCopyButton: this.renderCopyButton }); } @@ -23,33 +38,37 @@ export class CopyButtonWrapper extends React.PureComponent { return ( - <> - + Copy - - - + + ); }; - getTooltipContent() { - return ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'; + showTooltip() { + this.setState({ + tooltipShown: true, + }); + + setTimeout(() => { + this.setState({ + tooltipShown: false, + }); + }, 1500); } } diff --git a/src/components/Redoc/elements.tsx b/src/components/Redoc/elements.tsx index e6371c51..c21d81f4 100644 --- a/src/components/Redoc/elements.tsx +++ b/src/components/Redoc/elements.tsx @@ -37,6 +37,7 @@ export const RedocWrap = styled.div` export const ApiContent = styled.div` z-index: 10; position: relative; + overflow: hidden; width: calc(100% - ${props => props.theme.menu.width}); ${media.lessThan('small')` width: 100%; diff --git a/src/utils/decorators.ts b/src/utils/decorators.ts new file mode 100644 index 00000000..027c2023 --- /dev/null +++ b/src/utils/decorators.ts @@ -0,0 +1,34 @@ +const throttle = function(func, wait) { + var context, args, result; + var timeout: any = null; + var previous = 0; + var later = function() { + (previous = new Date().getTime()), (timeout = null); + result = func.apply(context, args); + if (!timeout) context = args = null; + }; + return function() { + var now = new Date().getTime(); + var remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0 || remaining > wait) { + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + previous = now; + result = func.apply(context, args); + if (!timeout) context = args = null; + } else if (!timeout) { + timeout = setTimeout(later, remaining); + } + return result; + }; +}; + +export function Throttle(delay: number) { + return (_, _2, desc: PropertyDescriptor) => { + desc.value = throttle(desc.value, delay); + }; +} diff --git a/yarn.lock b/yarn.lock index d1f27040..d7de40c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -134,12 +134,6 @@ dependencies: "@types/react" "*" -"@types/react-tooltip@^3.3.3": - version "3.3.3" - resolved "https://registry.yarnpkg.com/@types/react-tooltip/-/react-tooltip-3.3.3.tgz#3b6dbb278fc8317ad04f0ce1972a0972f5450aa7" - dependencies: - "@types/react" "*" - "@types/react@*", "@types/react@^16.0.30": version "16.0.35" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.35.tgz#7ce8a83cad9690fd965551fc513217a74fc9e079" @@ -1168,7 +1162,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.0, classnames@^2.2.3, classnames@^2.2.5: +classnames@^2.2.0, classnames@^2.2.3: version "2.2.5" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" @@ -5385,6 +5379,10 @@ pn@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb" +popper.js@^1.11.1: + version "1.12.9" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.9.tgz#0dfbc2dff96c451bb332edcfcfaaf566d331d5b3" + portfinder@^1.0.9: version "1.0.13" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9" @@ -5972,12 +5970,11 @@ react-test-renderer@^16.0.0-0: object-assign "^4.1.1" prop-types "^15.6.0" -react-tooltip@^3.4.0: - version "3.4.0" - resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.4.0.tgz#037f38f797c3e6b1b58d2534ccc8c2c76af4f52d" +react-tippy@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.2.2.tgz#061467d34d29e7a5a9421822d125c451d6bb5153" dependencies: - classnames "^2.2.5" - prop-types "^15.6.0" + popper.js "^1.11.1" react@^16.2.0: version "16.2.0"