diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-08-30 07:33:08 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-08-31 02:49:27 +0800 |
commit | 74d5af34ebf1e4d46a3cb13573d0793579454933 (patch) | |
tree | 8525ab5e2182391402b141dab7b65557124abdaa /packages/website/ts/components/ui | |
parent | 365890291f80a0580c8306c8aa498e64da7f86be (diff) | |
download | dexon-0x-contracts-74d5af34ebf1e4d46a3cb13573d0793579454933.tar dexon-0x-contracts-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.gz dexon-0x-contracts-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.bz2 dexon-0x-contracts-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.lz dexon-0x-contracts-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.xz dexon-0x-contracts-74d5af34ebf1e4d46a3cb13573d0793579454933.tar.zst dexon-0x-contracts-74d5af34ebf1e4d46a3cb13573d0793579454933.zip |
Add TypedText component and use it on landing page
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/text.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/components/ui/typed_text.tsx | 75 |
2 files changed, 77 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, + }); + } + } +} |