diff options
Diffstat (limited to 'packages/react-shared/src/components')
| -rw-r--r-- | packages/react-shared/src/components/markdown_section.tsx | 20 | ||||
| -rw-r--r-- | packages/react-shared/src/components/nested_sidebar_menu.tsx | 46 |
2 files changed, 51 insertions, 15 deletions
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 3dc3efe12..9f5855d16 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -20,6 +20,7 @@ export interface MarkdownSectionProps { headerSize?: HeaderSizes; githubLink?: string; shouldReformatTitle?: boolean; + alternativeSectionTitle?: string; } interface DefaultMarkdownSectionProps { @@ -47,22 +48,25 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; const id = utils.getIdFromName(sectionName); - const finalSectionName = this.props.shouldReformatTitle + const formattedSectionName = this.props.shouldReformatTitle ? utils.convertCamelCaseToSpaces(sectionName) : sectionName; + const title = !_.isUndefined(this.props.alternativeSectionTitle) + ? this.props.alternativeSectionTitle + : formattedSectionName; return ( <div className="md-px1 sm-px2 overflow-hidden" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > - <ScrollElement name={id}> - <Container className="clearfix" marginBottom="20px"> + <ScrollElement name={id} style={{ paddingBottom: 20 }}> + <Container className="clearfix" paddingTop="30px" paddingBottom="20px"> <div className="col lg-col-8 md-col-8 sm-col-12"> <span style={{ color: colors.grey700 }}> <AnchorTitle headerSize={headerSize} - title={_.capitalize(finalSectionName)} + title={_.capitalize(title)} id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> @@ -87,13 +91,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd paragraph: MarkdownParagraphBlock, }} /> - <Container - width={'100%'} - height={'1px'} - backgroundColor={colors.grey300} - marginTop={'32px'} - marginBottom={'32px'} - /> + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} /> </ScrollElement> </div> ); diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 1ad61fcca..87622310a 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -14,9 +14,12 @@ export interface NestedSidebarMenuProps { sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; + parentName?: string; } -export interface NestedSidebarMenuState {} +export interface NestedSidebarMenuState { + scrolledToId: string; +} const styles: Styles = { menuItemWithHeaders: { @@ -40,7 +43,28 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, + parentName: 'default', }; + private _urlIntervalCheckId: number; + constructor(props: NestedSidebarMenuProps) { + super(props); + this.state = { + scrolledToId: '', + }; + } + public componentDidMount(): void { + this._urlIntervalCheckId = window.setInterval(() => { + const scrollId = location.hash.slice(1); + if (scrollId !== this.state.scrolledToId) { + this.setState({ + scrolledToId: scrollId, + }); + } + }, 200); + } + public componentWillUnmount(): void { + window.clearInterval(this._urlIntervalCheckId); + } public render(): React.ReactNode { const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); @@ -48,7 +72,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N // 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"> + <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1"> {finalSectionName.toUpperCase()} </div> {this._renderMenuItems(links)} @@ -61,23 +85,37 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N return ( <div> {this.props.sidebarHeader} - <div className="pl1">{navigation}</div> + <div>{navigation}</div> </div> ); } private _renderMenuItems(links: ALink[]): React.ReactNode[] { + const scrolledToId = this.state.scrolledToId; const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; const menuItems = _.map(links, link => { + const isScrolledTo = link.to === scrolledToId; const finalMenuItemName = this.props.shouldReformatMenuItemNames ? utils.convertDashesToSpaces(link.title) : link.title; return ( <div key={`menuItem-${finalMenuItemName}`}> <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}> - <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}> + <MenuItem + style={{ + ...menuItemStyles, + paddingLeft: 8, + borderRadius: 6, + backgroundColor: isScrolledTo ? colors.lightLinkBlue : 'inherit', + }} + innerDivStyle={{ + ...menuItemInnerDivStyles, + color: isScrolledTo ? colors.white : 'inherit', + fontWeight: isScrolledTo ? 'bold' : 'inherit', + }} + > <span style={{ textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none', |