isPullRequest,
isBranch
} from '../../../../helpers/branches';
+import { scrollToElement } from '../../../../helpers/scrolling';
import { translate } from '../../../../helpers/l10n';
import { getBranchLikeUrl } from '../../../../helpers/urls';
import SearchBox from '../../../../components/controls/SearchBox';
export default class ComponentNavBranchesMenu extends React.PureComponent<Props, State> {
private node?: HTMLElement | null;
+ private listNode?: HTMLUListElement | null;
+ private selectedBranchNode?: HTMLLIElement | null;
static contextTypes = {
router: PropTypes.object
componentDidMount() {
window.addEventListener('click', this.handleClickOutside);
+ this.scrollToSelectedBranch(false);
+ }
+
+ componentDidUpdate() {
+ this.scrollToSelectedBranch(true);
}
componentWillUnmount() {
window.removeEventListener('click', this.handleClickOutside);
}
+ scrollToSelectedBranch(smooth: boolean) {
+ if (this.listNode && this.selectedBranchNode) {
+ scrollToElement(this.selectedBranchNode, {
+ parent: this.listNode,
+ smooth
+ });
+ }
+ }
+
getFilteredBranchLikes = () => {
const query = this.state.query.toLowerCase();
return sortBranchesAsTree(this.props.branchLikes).filter(branchLike => {
!showOrphanHeader && isPullRequest(branchLike) && !isPullRequest(previous);
const showShortLivingBranchHeader =
!showOrphanHeader && isShortLivingBranch(branchLike) && !isShortLivingBranch(previous);
-
+ const isSelected = isSameBranchLike(branchLike, selected);
return (
<React.Fragment key={getBranchLikeKey(branchLike)}>
{showDivider && <li className="divider" />}
<ComponentNavBranchesMenuItem
branchLike={branchLike}
component={this.props.component}
+ innerRef={node =>
+ (this.selectedBranchNode = isSelected ? node : this.selectedBranchNode)
+ }
key={getBranchLikeKey(branchLike)}
onSelect={this.handleSelect}
- selected={isSameBranchLike(branchLike, selected)}
+ selected={isSelected}
/>
</React.Fragment>
);
});
- return <ul className="menu menu-vertically-limited">{items}</ul>;
+ return (
+ <ul className="menu menu-vertically-limited" ref={node => (this.listNode = node)}>
+ {items}
+ </ul>
+ );
};
render() {
component: Component;
onSelect: (branchLike: BranchLike) => void;
selected: boolean;
+ innerRef?: (node: HTMLLIElement) => void;
}
export default function ComponentNavBranchesMenuItem({ branchLike, ...props }: Props) {
(isShortLivingBranch(branchLike) && !branchLike.isOrphan) || isPullRequest(branchLike);
return (
- <li key={getBranchLikeKey(branchLike)} onMouseEnter={handleMouseEnter}>
+ <li key={getBranchLikeKey(branchLike)} onMouseEnter={handleMouseEnter} ref={props.innerRef}>
<Link
className={classNames('navbar-context-meta-branch-menu-item', {
active: props.selected