diff options
Diffstat (limited to 'packages/website/ts/components/portal/menu.tsx')
-rw-r--r-- | packages/website/ts/components/portal/menu.tsx | 120 |
1 files changed, 0 insertions, 120 deletions
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx deleted file mode 100644 index d59101686..000000000 --- a/packages/website/ts/components/portal/menu.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { Styles } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { CustomMenuItem } from 'ts/components/ui/custom_menu_item'; -import { colors } from 'ts/style/colors'; -import { WebsitePaths } from 'ts/types'; - -export interface MenuTheme { - paddingLeft: number; - textColor: string; - iconColor: string; - selectedIconColor: string; - selectedBackgroundColor: string; -} - -export interface MenuItemEntry { - to: string; - labelText: string; - iconName: string; -} - -export interface MenuProps { - selectedPath?: string; - theme?: MenuTheme; - menuItemEntries?: MenuItemEntry[]; -} - -export const defaultMenuItemEntries: MenuItemEntry[] = [ - { - to: `${WebsitePaths.Portal}/account`, - labelText: 'Account overview', - iconName: 'zmdi-balance-wallet', - }, - { - to: `${WebsitePaths.Portal}/trades`, - labelText: 'Trade history', - iconName: 'zmdi-format-list-bulleted', - }, - { - to: `${WebsitePaths.Portal}/weth`, - labelText: 'Wrapped ETH', - iconName: 'zmdi-circle-o', - }, - { - to: `${WebsitePaths.Portal}/generate`, - labelText: 'Generate order', - iconName: 'zmdi-arrow-right-top', - }, - { - to: `${WebsitePaths.Portal}/fill`, - labelText: 'Fill order', - iconName: 'zmdi-arrow-left-bottom', - }, -]; - -const DEFAULT_MENU_THEME: MenuTheme = { - paddingLeft: 30, - textColor: colors.white, - iconColor: colors.white, - selectedIconColor: colors.white, - selectedBackgroundColor: colors.menuItemDefaultSelectedBackground, -}; - -export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => { - return ( - <div> - {_.map(props.menuItemEntries, entry => { - const isSelected = entry.to === props.selectedPath; - return ( - <CustomMenuItem key={entry.to} to={entry.to}> - <MenuItemLabel - title={entry.labelText} - iconName={entry.iconName} - selected={isSelected} - theme={props.theme} - /> - </CustomMenuItem> - ); - })} - </div> - ); -}; -Menu.defaultProps = { - theme: DEFAULT_MENU_THEME, - menuItemEntries: defaultMenuItemEntries, -}; - -interface MenuItemLabelProps { - title: string; - iconName: string; - selected: boolean; - theme: MenuTheme; -} -const MenuItemLabel: React.StatelessComponent<MenuItemLabelProps> = (props: MenuItemLabelProps) => { - const styles: Styles = { - root: { - backgroundColor: props.selected ? props.theme.selectedBackgroundColor : undefined, - paddingLeft: props.theme.paddingLeft, - }, - icon: { - color: props.selected ? props.theme.selectedIconColor : props.theme.iconColor, - fontSize: 20, - }, - text: { - color: props.theme.textColor, - fontWeight: props.selected ? 'bold' : 'normal', - fontSize: 16, - }, - }; - return ( - <div className="flex py2" style={styles.root}> - <div className="pr1"> - <i style={styles.icon} className={`zmdi ${props.iconName}`} /> - </div> - <div className="pl1" style={styles.text}> - {props.title} - </div> - </div> - ); -}; |