aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-30 01:48:44 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-30 01:48:44 +0800
commitd4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2 (patch)
tree092591754f60db2422e40d9e7c63790ad82a3340 /packages/website
parent39008372e522bd0963dc71ec91235bb81813355f (diff)
downloaddexon-sol-tools-d4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2.tar
dexon-sol-tools-d4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2.tar.gz
dexon-sol-tools-d4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2.tar.bz2
dexon-sol-tools-d4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2.tar.lz
dexon-sol-tools-d4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2.tar.xz
dexon-sol-tools-d4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2.tar.zst
dexon-sol-tools-d4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2.zip
Replace react-joyride with react-popper
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/package.json14
-rw-r--r--packages/website/public/index.html68
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx31
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx3
4 files changed, 63 insertions, 53 deletions
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 @@
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-98720122-1"></script>
<script>
- window.dataLayer = window.dataLayer || [];
-function gtag() {
- dataLayer.push(arguments);
-}
-gtag('js', new Date());
+ window.dataLayer = window.dataLayer || [];
+ function gtag() {
+ dataLayer.push(arguments);
+ }
+ gtag('js', new Date());
-gtag('config', 'UA-98720122-1');
-</script>
+ gtag('config', 'UA-98720122-1');
+ </script>
<!-- End Google Analytics -->
<!-- Facebook SDK -->
<div id="fb-root"></div>
<script>
- (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');
-</script>
+ (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');
+ </script>
<div id="app"></div>
<!-- End Facebook SDK -->
<!-- Twitter SDK -->
<script>
- window.twttr = (function(d, s, id) {
- var js,
- fjs = d.getElementsByTagName(s)[0],
- t = window.twttr || {};
- if (d.getElementById(id)) return t;
- js = d.createElement(s);
- js.id = id;
- js.src = 'https://platform.twitter.com/widgets.js';
- fjs.parentNode.insertBefore(js, fjs);
+ window.twttr = (function (d, s, id) {
+ var js,
+ fjs = d.getElementsByTagName(s)[0],
+ t = window.twttr || {};
+ if (d.getElementById(id)) return t;
+ js = d.createElement(s);
+ js.id = id;
+ js.src = 'https://platform.twitter.com/widgets.js';
+ fjs.parentNode.insertBefore(js, fjs);
- t._e = [];
- t.ready = function(f) {
- t._e.push(f);
- };
- return t;
-})(document, 'script', 'twitter-wjs');
-</script>
+ t._e = [];
+ t.ready = function (f) {
+ t._e.push(f);
+ };
+ return t;
+ })(document, 'script', 'twitter-wjs');
+ </script>
<!-- End Twitter SDK -->
<!-- Main -->
<script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
</body>
-</html>
+</html> \ 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<OnboardingFlowProps> {
}
public render(): React.ReactNode {
+ if (!this.props.isRunning) {
+ return null;
+ }
return (
- <Joyride
- run={this.props.isRunning}
- continuous={true}
- debug={true}
- steps={this.props.steps}
- stepIndex={this.props.stepIndex}
- styles={{ options: joyrideStyleOptions }}
- tooltipComponent={this._renderToolTip.bind(this)}
- />
+ <Popper referenceElement={this._getElementForStep()} placement="right">
+ {this._renderPopperChildren.bind(this)}
+ </Popper>
);
}
@@ -87,6 +85,21 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
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 (
+ <div ref={props.ref} style={props.style} data-placement={props.placement}>
+ {this._renderToolTip()}
+ <div ref={arrowProps.ref} style={arrowProps.style} />
+ </div>
+ );
+ }
+
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;