crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace react-joyride with react-popper

Browse Source
This commit is contained in:
fragosti
2018-05-29 10:48:44 -07:00
parent 39008372e5
commit d4a366aeb1
6 changed files with 96 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/typescript-typings/types/react-popper/index.d.ts vendored Normal file
View File

@@ -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';

14
packages/website/package.json
View File

@@ -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",

31
packages/website/ts/components/onboarding/onboarding_flow.tsx
View File

@@ -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];

3
packages/website/ts/components/onboarding/onboarding_tooltip.tsx
View File

@@ -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;

32
yarn.lock
View File

@@ -1443,7 +1443,7 @@ babel-register@^6.26.0, babel-register@^6.9.0:
mkdirp "^0.5.1"
source-map-support "^0.4.15"
babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
@@ -2890,6 +2890,13 @@ create-react-class@^15.5.2, create-react-class@^15.6.0:
loose-envify "^1.3.1"
object-assign "^4.1.1"
create-react-context@^0.2.1:
version "0.2.2"
resolved "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
dependencies:
fbjs "^0.8.0"
gud "^1.0.0"
cross-fetch@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.1.0.tgz#7d4ea7e10a4f3bb73d5c2f0a3791ec3752d39b50"
@@ -4395,7 +4402,7 @@ faye-websocket@~0.11.0:
dependencies:
websocket-driver ">=0.5.1"
fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.6, fbjs@^0.8.9:
fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.6, fbjs@^0.8.9:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
@@ -5219,6 +5226,10 @@ growl@1.9.2:
version "1.9.2"
resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
gud@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
gulp-sourcemaps@1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-1.6.0.tgz#b86ff349d801ceb56e1d9e7dc7bbcb4b7dee600c"
@@ -8612,7 +8623,7 @@ plur@^2.1.2:
dependencies:
irregular-plurals "^1.0.0"
popper.js@^1.14.3:
popper.js@^1.14.1, popper.js@^1.14.3:
version "1.14.3"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
@@ -9482,6 +9493,17 @@ react-markdown@^3.2.2:
unist-util-visit "^1.3.0"
xtend "^4.0.1"
react-popper@^1.0.0-beta.6:
version "1.0.0-beta.6"
resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0-beta.6.tgz#cb27a2ac56adccbaf5f9c4132387289069240834"
dependencies:
babel-runtime "6.x.x"
create-react-context "^0.2.1"
popper.js "^1.14.1"
prop-types "^15.6.1"
typed-styles "^0.0.5"
warning "^3.0.0"
react-proptype-conditional-require@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz#69c2d5741e6df5e08f230f36bbc2944ee1222555"
@@ -11663,6 +11685,10 @@ type-is@~1.6.15, type-is@~1.6.16:
media-typer "0.3.0"
mime-types "~2.1.18"
typed-styles@^0.0.5:
version "0.0.5"
resolved "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz#a60df245d482a9b1adf9c06c078d0f06085ed1cf"
typedarray-to-buffer@^3.1.2:
version "3.1.5"
resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"