diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-05-31 02:49:04 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-05-31 02:49:04 +0800 |
commit | e18d61b31a22519cd7d85ecffa62925ef7adc63d (patch) | |
tree | 166746953c94bdfd62cca909553f30d96d682bd8 /packages/website/ts/components/onboarding/onboarding_tooltip.tsx | |
parent | b20e40dd6fd9964876a0006efe8b879a9a1d2118 (diff) | |
parent | 61cd1ae5259c03e3ae1d1711d585e2222d8cfc34 (diff) | |
download | dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.gz dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.bz2 dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.lz dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.xz dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.zst dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.zip |
Merge pull request #635 from 0xProject/feature/website/custom-onboarding-tooltip
Remove react-joyride and some more refactoring
Diffstat (limited to 'packages/website/ts/components/onboarding/onboarding_tooltip.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/onboarding_tooltip.tsx | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx new file mode 100644 index 000000000..eb34a87f2 --- /dev/null +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; + +import { colors } from '@0xproject/react-shared'; +import { Container } from 'ts/components/ui/container'; +import { Island } from 'ts/components/ui/island'; + +export type ContinueButtonDisplay = 'enabled' | 'disabled'; + +export interface OnboardingTooltipProps { + title?: string; + content: React.ReactNode; + isLastStep: boolean; + onClose: () => void; + onClickNext: () => void; + onClickBack: () => void; + continueButtonDisplay?: ContinueButtonDisplay; + hideBackButton?: boolean; + hideNextButton?: boolean; +} + +// TODO: Make this more general button. +export interface ContinueButtonProps { + display: ContinueButtonDisplay; + children?: string; + onClick: () => void; +} + +export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (props: ContinueButtonProps) => { + const isDisabled = props.display === 'disabled'; + return ( + <button disabled={isDisabled} onClick={isDisabled ? undefined : props.onClick}> + {props.children} + </button> + ); +}; + +export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => ( + <Island> + <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px"> + <div className="flex flex-column"> + {props.title} + {props.content} + {props.continueButtonDisplay && ( + <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}> + Continue + </ContinueButton> + )} + {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>} + {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>} + <button onClick={props.onClose}>Close</button> + </div> + </Container> + </Island> +); + +OnboardingTooltip.displayName = 'OnboardingTooltip'; |