diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-20 00:40:55 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-20 00:40:55 +0800 |
commit | 0de654bbd52f7d4702cec9f1a9a5a2cbb793181b (patch) | |
tree | ba341b86b4000cf94669a65d0fa2499c05897db9 /packages/website/ts/components/nested_sidebar_menu.tsx | |
parent | d129c922edd8bc0319273488b23a5257d736502d (diff) | |
download | dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.gz dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.bz2 dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.lz dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.xz dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.zst dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.zip |
fix: scroll lag on doc reference and wiki pages by using react-scroll `spy` and only updating the sidebar menu items whose active state had changed
Diffstat (limited to 'packages/website/ts/components/nested_sidebar_menu.tsx')
-rw-r--r-- | packages/website/ts/components/nested_sidebar_menu.tsx | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx new file mode 100644 index 000000000..7de91bf8c --- /dev/null +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -0,0 +1,92 @@ +import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Text } from 'ts/components/ui/text'; + +export interface NestedSidebarMenuProps { + sectionNameToLinks: ObjectMap<ALink[]>; + sidebarHeader?: React.ReactNode; + shouldReformatMenuItemNames?: boolean; +} + +export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { + const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => { + const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName); + const menuItems = _.map(links, (link, i) => { + const menuItemTitle = props.shouldReformatMenuItemNames + ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title)) + : link.title; + const finalLink = { + ...link, + title: menuItemTitle, + }; + return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />; + }); + // tslint:disable-next-line:no-unused-variable + return ( + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}> + <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1"> + {finalSectionName.toUpperCase()} + </div> + {menuItems} + </div> + ); + }); + return ( + <div> + {props.sidebarHeader} + <div>{navigation}</div> + </div> + ); +}; + +export interface MenuItemProps { + link: ALink; +} + +export interface MenuItemState { + isActive: boolean; +} + +export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { + constructor(props: MenuItemProps) { + super(props); + const isActive = window.location.hash.slice(1) === props.link.to; + this.state = { + isActive, + }; + } + public render(): React.ReactNode { + const isActive = this.state.isActive; + return ( + <Link + to={this.props.link.to} + shouldOpenInNewTab={this.props.link.shouldOpenInNewTab} + onActivityChanged={this._onActivityChanged.bind(this)} + > + <Button + borderRadius="4px" + padding="0.4em 6px" + width="100%" + backgroundColor={isActive ? colors.lightLinkBlue : 'rgb(245, 245, 245)'} + fontSize="14px" + textAlign="left" + > + <Text + fontWeight={isActive ? 'bold' : 'normal'} + fontColor={isActive ? colors.white : colors.grey800} + > + {this.props.link.title} + </Text> + </Button> + </Link> + ); + } + private _onActivityChanged(isActive: boolean): void { + this.setState({ + isActive, + }); + } +} |