From 74d5af34ebf1e4d46a3cb13573d0793579454933 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 29 Aug 2018 16:33:08 -0700 Subject: Add TypedText component and use it on landing page --- .../types/react-typist/index.d.ts | 1 + packages/website/package.json | 1 + packages/website/ts/components/ui/text.tsx | 2 + packages/website/ts/components/ui/typed_text.tsx | 75 ++++++++++++++++++++++ packages/website/ts/index.tsx | 1 + packages/website/ts/pages/landing/landing.tsx | 32 +++++++++ 6 files changed, 112 insertions(+) create mode 100644 packages/typescript-typings/types/react-typist/index.d.ts create mode 100644 packages/website/ts/components/ui/typed_text.tsx (limited to 'packages') diff --git a/packages/typescript-typings/types/react-typist/index.d.ts b/packages/typescript-typings/types/react-typist/index.d.ts new file mode 100644 index 000000000..692c596a5 --- /dev/null +++ b/packages/typescript-typings/types/react-typist/index.d.ts @@ -0,0 +1 @@ +declare module 'react-typist'; diff --git a/packages/website/package.json b/packages/website/package.json index 3b6754fb3..a7da19c9e 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,6 +52,7 @@ "react-router-dom": "^4.1.1", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", "react-tooltip": "^3.2.7", + "react-typist": "^2.0.4", "redux": "^3.6.0", "redux-devtools-extension": "^2.13.2", "semver-sort": "0.0.4", diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 734483564..cd8f290e3 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -20,6 +20,7 @@ export interface TextProps { onClick?: (event: React.MouseEvent) => void; hoverColor?: string; noWrap?: boolean; + display?: string; } const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( @@ -41,6 +42,7 @@ export const Text = styled(PlainText)` ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; ${props => (props.noWrap ? 'white-space: nowrap' : '')}; + ${props => (props.display ? `display: ${props.display}` : '')}; &:hover { ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; } diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx new file mode 100644 index 000000000..a59309139 --- /dev/null +++ b/packages/website/ts/components/ui/typed_text.tsx @@ -0,0 +1,75 @@ +import * as _ from 'lodash'; +import { darken } from 'polished'; +import * as React from 'react'; +import Typist from 'react-typist'; + +import { Text, TextProps } from 'ts/components/ui/text'; + +import 'react-typist/dist/Typist.css'; + +export interface TypedTextProps extends TextProps { + textList: string[]; + shouldRepeat?: boolean; + wordDelayMs?: number; + avgKeystrokeDelayMs?: number; + stdKeystrokeDelay?: number; +} + +export interface TypedTextState { + cycleCount: number; +} + +export class TypedText extends React.Component { + public static defaultProps = { + shouldRepeat: false, + avgKeystrokeDelayMs: 90, + wordDelayMs: 1000, + }; + public state = { + cycleCount: 0, + }; + public render(): React.ReactNode { + const { + textList, + shouldRepeat, + wordDelayMs, + avgKeystrokeDelayMs, + stdKeystrokeDelay, + ...textProps + } = this.props; + const { cycleCount } = this.state; + if (_.isEmpty(textList)) { + return null; + } + const typistChildren: React.ReactNode[] = []; + _.forEach(textList, text => { + typistChildren.push( + + {text} + , + ); + if (wordDelayMs) { + typistChildren.push(); + } + typistChildren.push(); + }); + return ( + + {typistChildren} + + ); + } + private _onTypingDone(): void { + if (this.props.shouldRepeat) { + this.setState({ + cycleCount: this.state.cycleCount + 1, + }); + } + } +} diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 9e59b00ac..6b709df6a 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -23,6 +23,7 @@ trackedTokenStorage.clearIfRequired(); import 'basscss/css/basscss.css'; import 'less/all.less'; +import 'react-typist/dist/Typist.css'; // We pass modulePromise returning lambda instead of module promise, // cause we only want to import the module when the user navigates to the page. diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 72f6bdc9c..fc4194849 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -10,6 +10,7 @@ import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; +import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -43,12 +44,26 @@ const THROTTLE_TIMEOUT = 100; const WHATS_NEW_TITLE = 'V2 of the 0x Protocol is now live!'; // TODO: Update this url const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f'; +<<<<<<< HEAD const TITLE_STYLE: React.CSSProperties = { fontFamily: 'Roboto Mono', color: colors.grey, fontWeight: 300, letterSpacing: 3, }; +======= +const ROTATING_LIST = [ + 'tokens', + 'game items', + 'digital art', + 'outcomes', + 'stocks', + 'derivatives', + 'loans', + 'cats', + 'Everything.', +]; +>>>>>>> Add TypedText component and use it on landing page const relayerProjects: Project[] = [ { @@ -176,12 +191,29 @@ export class Landing extends React.Component { {this.props.translate.get(Key.TopHeader, Deco.Cap)} + {this.props.translate.getLanguage() === Language.English && ( + + {' '} + for{' '} + + + )}
-- cgit v1.2.3