import { ALink, colors, Link } from '@0x/react-shared'; import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; const ICON_DIMENSION = 16; const languageToMenuTitle = { [Language.English]: 'English', [Language.Russian]: 'Русский', [Language.Spanish]: 'Español', [Language.Korean]: '한국어', [Language.Chinese]: '中文', }; export interface FooterProps { translate: Translate; dispatcher: Dispatcher; backgroundColor?: string; } interface FooterState { selectedLanguage: Language; } export class Footer extends React.Component { public static defaultProps = { backgroundColor: colors.darkerGrey, }; constructor(props: FooterProps) { super(props); this.state = { selectedLanguage: props.translate.getLanguage(), }; } public render(): React.ReactNode { const sectionNameToLinks: ObjectMap = { [Key.Documentation]: [ { title: 'Developer Home', to: WebsitePaths.Docs, }, { title: '0x.js', to: WebsitePaths.ZeroExJs, }, { title: this.props.translate.get(Key.SmartContracts, Deco.Cap), to: WebsitePaths.SmartContracts, }, { title: this.props.translate.get(Key.Connect, Deco.Cap), to: WebsitePaths.Connect, }, { title: this.props.translate.get(Key.Whitepaper, Deco.Cap), to: WebsitePaths.Whitepaper, shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Wiki, Deco.Cap), to: WebsitePaths.Wiki, }, ], [Key.Community]: [ { title: this.props.translate.get(Key.Discord, Deco.Cap), to: constants.URL_ZEROEX_CHAT, shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Blog, Deco.Cap), to: constants.URL_BLOG, shouldOpenInNewTab: true, }, { title: 'Twitter', to: constants.URL_TWITTER, shouldOpenInNewTab: true, }, { title: 'Reddit', to: constants.URL_REDDIT, shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), to: constants.URL_DISCOURSE_FORUM, shouldOpenInNewTab: true, }, ], [Key.Organization]: [ { title: this.props.translate.get(Key.About, Deco.Cap), to: WebsitePaths.About, }, { title: this.props.translate.get(Key.Careers, Deco.Cap), to: WebsitePaths.Careers, }, { title: this.props.translate.get(Key.Contact, Deco.Cap), to: 'mailto:team@0xproject.com', shouldOpenInNewTab: true, }, ], }; const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => { return ; }); return (
© ZeroEx, Intl.
{languageMenuItems}
{this._renderHeader(Key.Documentation)} {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
{this._renderHeader(Key.Community)} {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
{this._renderHeader(Key.Organization)} {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
); } private _renderIcon(fileName: string): React.ReactNode { return (
); } private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { [this.props.translate.get(Key.Discord, Deco.Cap)]: 'discord.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', Twitter: 'twitter.png', Reddit: 'reddit.png', [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png', }; const iconIfExists = titleToIcon[link.title]; return (
{!_.isUndefined(iconIfExists) ? (
{this._renderIcon(iconIfExists)}
{link.title}
) : ( link.title )}
); } private _renderHeader(key: Key): React.ReactNode { const headerStyle = { color: colors.grey400, letterSpacing: 2, fontFamily: 'Roboto Mono', fontSize: 13, }; return (
{this.props.translate.get(key, Deco.Upper)}
); } private _updateLanguage(_event: any, _index: number, value: Language): void { this.setState({ selectedLanguage: value, }); this.props.dispatcher.updateSelectedLanguage(value); } }