Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-01-31 10:04:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: active menu item scroll into view

Browse Source
This commit is contained in:
Roman Hotsiy 2019-10-15 15:59:48 +03:00
parent 0c20e64178
commit 0a01e9a080
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/SideMenu/MenuItem.tsx
View File

@ -1,3 +1,4 @@
// import { observe } from 'mobx';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import * as React from 'react'; import * as React from 'react';
@ -15,7 +16,7 @@ export interface MenuItemProps {
@observer @observer
export class MenuItem extends React.Component<MenuItemProps> { export class MenuItem extends React.Component<MenuItemProps> {
ref: Element | null; ref = React.createRef<HTMLLabelElement>();
activate = (evt: React.MouseEvent<HTMLElement>) => { activate = (evt: React.MouseEvent<HTMLElement>) => {
this.props.onActivate!(this.props.item); this.props.onActivate!(this.props.item);
@ -31,28 +32,19 @@ export class MenuItem extends React.Component<MenuItemProps> {
} }
scrollIntoViewIfActive() { scrollIntoViewIfActive() {
if (this.props.item.active && this.ref) { if (this.props.item.active && this.ref.current) {
this.ref.scrollIntoViewIfNeeded(); this.ref.current.scrollIntoViewIfNeeded();
} }
} }
saveRef = ref => {
this.ref = ref;
};
render() { render() {
const { item, withoutChildren } = this.props; const { item, withoutChildren } = this.props;
return ( return (
<MenuItemLi <MenuItemLi onClick={this.activate} depth={item.depth} data-item-id={item.id}>
onClick={this.activate}
depth={item.depth}
ref={this.saveRef}
data-item-id={item.id}
>
{item.type === 'operation' ? ( {item.type === 'operation' ? (
<OperationMenuItemContent {...this.props} item={item as OperationModel} /> <OperationMenuItemContent {...this.props} item={item as OperationModel} />
) : ( ) : (
<MenuItemLabel depth={item.depth} active={item.active} type={item.type}> <MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}>
<MenuItemTitle title={item.name}> <MenuItemTitle title={item.name}>
{item.name} {item.name}
{this.props.children} {this.props.children}
@ -81,10 +73,23 @@ export interface OperationMenuItemContentProps {
@observer @observer
export class OperationMenuItemContent extends React.Component<OperationMenuItemContentProps> { export class OperationMenuItemContent extends React.Component<OperationMenuItemContentProps> {
ref = React.createRef<HTMLLabelElement>();
componentDidUpdate() {
if (this.props.item.active && this.ref.current) {
this.ref.current.scrollIntoViewIfNeeded();
}
}
render() { render() {
const { item } = this.props; const { item } = this.props;
return ( return (
<MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated}> <MenuItemLabel
depth={item.depth}
active={item.active}
deprecated={item.deprecated}
ref={this.ref}
>
<OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge> <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
<MenuItemTitle width="calc(100% - 38px)"> <MenuItemTitle width="calc(100% - 38px)">
{item.name} {item.name}