aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-30 01:53:55 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-30 02:21:14 +0800
commit338e8be327731116a4a0308ba353266293013dce (patch)
tree5924a9f8022f0dbc323b5d8fbbe10f7f5f8735a8
parentd4a366aeb13d8b3ea2ace86f5566ddf8d94bf9c2 (diff)
downloaddexon-sol-tools-338e8be327731116a4a0308ba353266293013dce.tar
dexon-sol-tools-338e8be327731116a4a0308ba353266293013dce.tar.gz
dexon-sol-tools-338e8be327731116a4a0308ba353266293013dce.tar.bz2
dexon-sol-tools-338e8be327731116a4a0308ba353266293013dce.tar.lz
dexon-sol-tools-338e8be327731116a4a0308ba353266293013dce.tar.xz
dexon-sol-tools-338e8be327731116a4a0308ba353266293013dce.tar.zst
dexon-sol-tools-338e8be327731116a4a0308ba353266293013dce.zip
Add types for react-popper, remove types for react-joyride
-rw-r--r--packages/typescript-typings/types/react-joyride/index.d.ts87
-rw-r--r--packages/typescript-typings/types/react-popper/index.d.ts47
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx26
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx7
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,
},
];