aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-08-30 07:33:08 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-08-31 02:49:27 +0800
commit74d5af34ebf1e4d46a3cb13573d0793579454933 (patch)
tree8525ab5e2182391402b141dab7b65557124abdaa /packages/website/ts
parent365890291f80a0580c8306c8aa498e64da7f86be (diff)
downloaddexon-sol-tools-74d5af34ebf1e4d46a3cb13573d0793579454933.tar
dexon-sol-tools-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.gz
dexon-sol-tools-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.bz2
dexon-sol-tools-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.lz
dexon-sol-tools-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.xz
dexon-sol-tools-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.zst
dexon-sol-tools-74d5af34ebf1e4d46a3cb13573d0793579454933.zip
Add TypedText component and use it on landing page
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/ui/text.tsx2
-rw-r--r--packages/website/ts/components/ui/typed_text.tsx75
-rw-r--r--packages/website/ts/index.tsx1
-rw-r--r--packages/website/ts/pages/landing/landing.tsx32
4 files changed, 110 insertions, 0 deletions
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<HTMLElement>) => void;
hoverColor?: string;
noWrap?: boolean;
+ display?: string;
}
const PlainText: React.StatelessComponent<TextProps> = ({ 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<TypedTextProps, TypedTextState> {
+ 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 key={`text-${text}-${cycleCount}`} {...textProps}>
+ {text}
+ </Text>,
+ );
+ if (wordDelayMs) {
+ typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
+ }
+ typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
+ });
+ return (
+ <Typist
+ avgTypingDelay={avgKeystrokeDelayMs}
+ stdTypingDelay={stdKeystrokeDelay}
+ className="inline"
+ key={`typist-key-${cycleCount}`}
+ onTypingDone={this._onTypingDone.bind(this)}
+ >
+ {typistChildren}
+ </Typist>
+ );
+ }
+ 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<LandingProps, LandingState> {
<Text
className="sm-pb2"
fontFamily="Roboto"
+ display="inline-block"
fontColor={colors.grey300}
fontWeight={500}
lineHeight="1.2em"
fontSize={isSmallScreen ? '28px' : '36px'}
>
{this.props.translate.get(Key.TopHeader, Deco.Cap)}
+ {this.props.translate.getLanguage() === Language.English && (
+ <React.Fragment>
+ {' '}
+ for{' '}
+ <TypedText
+ fontFamily="Roboto"
+ display="inline-block"
+ fontColor={colors.white}
+ fontWeight={700}
+ lineHeight="1.2em"
+ fontSize={isSmallScreen ? '28px' : '36px'}
+ textList={ROTATING_LIST}
+ shouldRepeat={true}
+ />
+ </React.Fragment>
+ )}
</Text>
<Container className="pt3 clearfix sm-mx-auto" maxWidth="390px">
<div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2">