From d4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 29 May 2018 10:48:44 -0700 Subject: Replace react-joyride with react-popper --- .../types/react-popper/index.d.ts | 4 ++ packages/website/package.json | 14 ++--- packages/website/public/index.html | 68 +++++++++++----------- .../ts/components/onboarding/onboarding_flow.tsx | 31 +++++++--- .../components/onboarding/onboarding_tooltip.tsx | 3 +- 5 files changed, 67 insertions(+), 53 deletions(-) create mode 100644 packages/typescript-typings/types/react-popper/index.d.ts (limited to 'packages') diff --git a/packages/typescript-typings/types/react-popper/index.d.ts b/packages/typescript-typings/types/react-popper/index.d.ts new file mode 100644 index 000000000..4341c4521 --- /dev/null +++ b/packages/typescript-typings/types/react-popper/index.d.ts @@ -0,0 +1,4 @@ +// Type definitions for react-popper 1.0.0-beta.6 +// Project: https://github.com/gilbarbara/react-joyride + +declare module 'react-popper'; diff --git a/packages/website/package.json b/packages/website/package.json index 69115be9a..0cc6dfac1 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -11,22 +11,19 @@ "clean": "shx rm -f public/bundle*", "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", "watch": "webpack-dev-server --content-base public --https", - "deploy_dogfood": - "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", - "deploy_staging": - "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", - "deploy_live": - "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers" + "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", + "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", + "deploy_live": "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers" }, "author": "Fabio Berger", "license": "Apache-2.0", "dependencies": { + "@0xproject/contract-wrappers": "^0.0.2", "@0xproject/react-docs": "^0.0.12", "@0xproject/react-shared": "^0.1.7", "@0xproject/subproviders": "^0.10.2", - "@0xproject/contract-wrappers": "^0.0.2", - "@0xproject/typescript-typings": "^0.3.2", "@0xproject/types": "0.7.0", + "@0xproject/typescript-typings": "^0.3.2", "@0xproject/utils": "^0.6.2", "@0xproject/web3-wrapper": "^0.6.4", "accounting": "^0.4.1", @@ -47,6 +44,7 @@ "react-dom": "15.6.1", "react-ga": "^2.4.1", "react-joyride": "^2.0.0-11", + "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", "react-router-dom": "^4.1.1", "react-scroll": "^1.5.2", diff --git a/packages/website/public/index.html b/packages/website/public/index.html index c28e4abf4..4c0985c71 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -26,53 +26,53 @@ + gtag('config', 'UA-98720122-1'); +
+ (function (d, s, id) { + var js, + fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) return; + js = d.createElement(s); + js.id = id; + js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192'; + fjs.parentNode.insertBefore(js, fjs); + })(document, 'script', 'facebook-jssdk'); +
+ t._e = []; + t.ready = function (f) { + t._e.push(f); + }; + return t; + })(document, 'script', 'twitter-wjs'); + - + \ No newline at end of file diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 4ed834916..cd6fe2195 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,6 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride'; +import { Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { zIndex } from 'ts/utils/style'; @@ -29,16 +30,13 @@ export class OnboardingFlow extends React.Component { } public render(): React.ReactNode { + if (!this.props.isRunning) { + return null; + } return ( - + + {this._renderPopperChildren.bind(this)} + ); } @@ -87,6 +85,21 @@ export class OnboardingFlow extends React.Component { return newStep; } + private _getElementForStep(): Element { + const step = this.props.steps[this.props.stepIndex]; + return document.querySelector(step.target); + } + + private _renderPopperChildren(props: any): React.ReactNode { + const { arrowProps } = props; + return ( +
+ {this._renderToolTip()} +
+
+ ); + } + private _renderToolTip(): React.ReactNode { const { steps, stepIndex } = this.props; const step = steps[stepIndex]; diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 3ab18b011..3994b0546 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -3,10 +3,9 @@ import * as React from 'react'; import { Island } from 'ts/components/ui/island'; export interface OnboardingTooltipProps { - title: string; + title?: string; content: React.ReactNode; isLastStep: boolean; - index: number; onClose: () => void; onClickNext: () => void; onClickBack: () => void; -- cgit v1.2.3