diff options
4 files changed, 62 insertions, 105 deletions
diff --git a/packages/typescript-typings/types/react-joyride/index.d.ts b/packages/typescript-typings/types/react-joyride/index.d.ts deleted file mode 100644 index dacdf47a6..000000000 --- a/packages/typescript-typings/types/react-joyride/index.d.ts +++ /dev/null @@ -1,87 +0,0 @@ -// Type definitions for react-joyride 2.0.0-11 -// Project: https://github.com/gilbarbara/react-joyride - -declare module 'react-joyride' { - import * as React from 'react'; - export interface StyleOptions { - arrowColor?: string; - backgroundColor?: string; - primaryColor?: string; - textColor?: string; - overlayColor?: string; - spotlightShadow?: string; - beaconSize?: number; - zIndex?: number; - } - - export type Placement = - | 'top' - | 'top-left' - | 'top-right' - | 'bottom' - | 'bottom-left' - | 'bottom-right' - | 'right' - | 'left'; - - export interface Step { - title?: string; - content: React.ReactNode; - target: string; - placement?: Placement; - type?: 'click' | 'hover'; - isFixed?: boolean; - allowClicksThruHole?: boolean; - disableBeacon?: boolean; - style?: StyleOptions; - [prop: string]: any; - } - - export interface StyleOptionsProp { - options: StyleOptions; - } - - interface CallbackMetadata { - type: - | 'tour:start' - | 'step:before' - | 'beacon' - | 'tooltip' - | 'close' - | 'step:after' - | 'tour:end' - | 'tour:status' - | 'error:target_not_found' - | 'error'; - step: number; - } - - export type CallbackData = CallbackMetadata & State; - - export interface Props { - steps?: Step[]; - beaconComponent?: React.ReactNode; - disableOverlayClose?: boolean; - continuous?: boolean; - run?: boolean; - stepIndex?: number; - debug?: boolean; - styles?: StyleOptionsProp; - tooltipComponent: React.ComponentClass<any> | React.StatelessComponent; - } - - export interface State { - action: 'prev' | 'close' | 'next'; - controlled: boolean; - index: number; - lifecycle: string; - size: 0; - status: string; - } - - export default class Joyride extends React.Component<Props, State> { - constructor(props: Props); - - static defaultProps: Props; - } -} diff --git a/packages/typescript-typings/types/react-popper/index.d.ts b/packages/typescript-typings/types/react-popper/index.d.ts index 4341c4521..d7dbca17f 100644 --- a/packages/typescript-typings/types/react-popper/index.d.ts +++ b/packages/typescript-typings/types/react-popper/index.d.ts @@ -1,4 +1,49 @@ // Type definitions for react-popper 1.0.0-beta.6 // Project: https://github.com/gilbarbara/react-joyride -declare module 'react-popper'; +declare module 'react-popper' { + import * as React from 'react'; + import * as PopperJS from 'popper.js'; + + interface ManagerProps { + children: React.ReactNode; + } + export class Manager extends React.Component<ManagerProps, {}> {} + + type RefHandler = (ref: HTMLElement | null) => void; + + export interface ReferenceChildrenProps { + ref: RefHandler; + } + + export interface ReferenceProps { + children: (props: ReferenceChildrenProps) => React.ReactNode; + } + export class Reference extends React.Component<ReferenceProps, {}> {} + + export interface PopperArrowProps { + ref: RefHandler; + style: React.CSSProperties; + } + + export type Placement = PopperJS.Placement; + + export interface PopperChildrenProps { + arrowProps: PopperArrowProps; + outOfBoundaries: boolean | null; + placement: PopperJS.Placement; + ref: RefHandler; + scheduleUpdate: () => void; + style: React.CSSProperties; + } + + export interface PopperProps { + children: (props: PopperChildrenProps) => React.ReactNode; + eventsEnabled?: boolean; + modifiers?: PopperJS.Modifiers; + placement?: PopperJS.Placement; + positionFixed?: boolean; + referenceElement?: Element; + } + export class Popper extends React.Component<PopperProps, {}> {} +} diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index cd6fe2195..9c416c2e1 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,11 +1,17 @@ import * as _ from 'lodash'; import * as React from 'react'; -import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride'; -import { Popper, PopperChildrenProps } from 'react-popper'; +import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { zIndex } from 'ts/utils/style'; +export interface Step { + target: string; + title?: string; + content: React.ReactNode; + placement?: Placement; +} + export interface OnboardingFlowProps { steps: Step[]; blacklistedStepIndices: number[]; @@ -15,11 +21,6 @@ export interface OnboardingFlowProps { setOnboardingStep: (stepIndex: number) => void; } -const joyrideStyleOptions: StyleOptions = { - zIndex: zIndex.overlay, -}; - -// Wrapper around Joyride with defaults and styles set export class OnboardingFlow extends React.Component<OnboardingFlowProps> { public componentDidMount(): void { this._setOnboardingStepBasedOnBlacklist(this.props.stepIndex); @@ -34,7 +35,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { return null; } return ( - <Popper referenceElement={this._getElementForStep()} placement="right"> + <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}> {this._renderPopperChildren.bind(this)} </Popper> ); @@ -86,11 +87,10 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { } private _getElementForStep(): Element { - const step = this.props.steps[this.props.stepIndex]; - return document.querySelector(step.target); + return document.querySelector(this._getCurrentStep().target); } - private _renderPopperChildren(props: any): React.ReactNode { + private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { const { arrowProps } = props; return ( <div ref={props.ref} style={props.style} data-placement={props.placement}> @@ -116,6 +116,10 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { ); } + private _getCurrentStep(): Step { + return this.props.steps[this.props.stepIndex]; + } + private _goToNextStep(): void { const nextStep = this.props.stepIndex + 1; if (nextStep < this.props.steps.length) { diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 99fe5006d..00d278ce0 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,9 +1,8 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { Step } from 'react-joyride'; import { black } from 'material-ui/styles/colors'; -import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow'; +import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; import { ProviderType } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -25,26 +24,22 @@ const steps: Step[] = [ content: 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps', placement: 'right', - disableBeacon: true, }, { target: '.wallet', content: 'Unlock your metamask extension to begin', placement: 'right', - disableBeacon: true, }, { target: '.wallet', content: 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps', placement: 'right', - disableBeacon: true, }, { target: '.wallet', content: 'Before you begin you will need to send some ETH to your metamask wallet', placement: 'right', - disableBeacon: true, }, ]; |