<commit_before>import * as React from 'react'

import { List, ClickSource, SelectionSource } from '../list'
import { IMenu, MenuItem } from '../../models/app-menu'
import { MenuListItem, IMenuListItemProps } from './menu-list-item'

interface IMenuPaneProps {
  readonly depth: number
  readonly menu: IMenu
  readonly onItemClicked: (item: MenuItem) => void
  readonly onItemKeyDown: (depth: number, item: MenuItem, event: React.KeyboardEvent<any>) => void
  readonly onSelectionChanged: (depth: number, item: MenuItem, source: SelectionSource) => void
  readonly onMouseEnter: (depth: number) => void
}

interface IMenuPaneState {
  readonly items: ReadonlyArray<IMenuListItemProps>
}

const RowHeight = 30

export class MenuPane extends React.Component<IMenuPaneProps, IMenuPaneState> {

  private list: List

  public constructor(props: IMenuPaneProps) {
    super(props)
    this.state = this.createState(props)
  }

  public componentWillReceiveProps(props: IMenuPaneProps) {
    this.setState(this.createState(props))
  }

  private createState(props: IMenuPaneProps): IMenuPaneState {
    return {
      items: props.menu.items
        .filter(item => item.visible)
        .map(item => { return { item } }),
    }
  }

  private onRowClick = (row: number, source: ClickSource) => {
    const item = this.state.items[row].item
    this.props.onItemClicked(item)
  }

  private onSelectionChanged = (row: number, source: SelectionSource) => {
    const item = this.state.items[row].item
    this.props.onSelectionChanged(this.props.depth, item, source)
  }

  private onRowKeyDown = (row: number, event: React.KeyboardEvent<any>) => {
    const item = this.state.items[row].item
    this.props.onItemKeyDown(this.props.depth, item, event)
  }

  private canSelectRow = (row: number) => {
    const item = this.state.items[row].item

    if (item.type === 'separator') { return false }

    return item.enabled && item.visible
  }

  private onListRef = (list: List) => {
    this.list = list
  }

  private onMouseEnter = (event: React.MouseEvent<any>) => {
    this.props.onMouseEnter(this.props.depth)
  }

  private renderMenuItem = (row: number) => {
    const props = this.state.items[row]

    return <MenuListItem key={props.item.id} {...props} />
  }

  public render(): JSX.Element {

    const selectedItem = this.props.menu.selectedItem
    const items = this.state.items

    const selectedRow = selectedItem
      ? items.findIndex(i => i.item.id === selectedItem.id)
      : -1

    return (
      <div className='menu-pane' onMouseEnter={this.onMouseEnter}>
        <List
          ref={this.onListRef}
          rowCount={this.state.items.length}
          rowHeight={RowHeight}
          rowRenderer={this.renderMenuItem}
          selectedRow={selectedRow}
          onRowClick={this.onRowClick}
          onSelectionChanged={this.onSelectionChanged}
          canSelectRow={this.canSelectRow}
          onRowKeyDown={this.onRowKeyDown}
          invalidationProps={this.state.items}
          selectOnHover={true}
        />
      </div>
    )
  }

  public focus() {
    if (this.list) {
      this.list.focus()
    }
  }
}
<commit_msg>Only allow clicking on enabled items<commit_after>import * as React from 'react'

import { List, ClickSource, SelectionSource } from '../list'
import { IMenu, MenuItem } from '../../models/app-menu'
import { MenuListItem, IMenuListItemProps } from './menu-list-item'

interface IMenuPaneProps {
  readonly depth: number
  readonly menu: IMenu
  readonly onItemClicked: (item: MenuItem) => void
  readonly onItemKeyDown: (depth: number, item: MenuItem, event: React.KeyboardEvent<any>) => void
  readonly onSelectionChanged: (depth: number, item: MenuItem, source: SelectionSource) => void
  readonly onMouseEnter: (depth: number) => void
}

interface IMenuPaneState {
  readonly items: ReadonlyArray<IMenuListItemProps>
}

const RowHeight = 30

export class MenuPane extends React.Component<IMenuPaneProps, IMenuPaneState> {

  private list: List

  public constructor(props: IMenuPaneProps) {
    super(props)
    this.state = this.createState(props)
  }

  public componentWillReceiveProps(props: IMenuPaneProps) {
    this.setState(this.createState(props))
  }

  private createState(props: IMenuPaneProps): IMenuPaneState {
    return {
      items: props.menu.items
        .filter(item => item.visible)
        .map(item => { return { item } }),
    }
  }

  private onRowClick = (row: number, source: ClickSource) => {
    const item = this.state.items[row].item

    if (item.type !== 'separator' && item.enabled) {
      this.props.onItemClicked(item)
    }
  }

  private onSelectionChanged = (row: number, source: SelectionSource) => {
    const item = this.state.items[row].item
    this.props.onSelectionChanged(this.props.depth, item, source)
  }

  private onRowKeyDown = (row: number, event: React.KeyboardEvent<any>) => {
    const item = this.state.items[row].item
    this.props.onItemKeyDown(this.props.depth, item, event)
  }

  private canSelectRow = (row: number) => {
    const item = this.state.items[row].item

    if (item.type === 'separator') { return false }

    return item.enabled && item.visible
  }

  private onListRef = (list: List) => {
    this.list = list
  }

  private onMouseEnter = (event: React.MouseEvent<any>) => {
    this.props.onMouseEnter(this.props.depth)
  }

  private renderMenuItem = (row: number) => {
    const props = this.state.items[row]

    return <MenuListItem key={props.item.id} {...props} />
  }

  public render(): JSX.Element {

    const selectedItem = this.props.menu.selectedItem
    const items = this.state.items

    const selectedRow = selectedItem
      ? items.findIndex(i => i.item.id === selectedItem.id)
      : -1

    return (
      <div className='menu-pane' onMouseEnter={this.onMouseEnter}>
        <List
          ref={this.onListRef}
          rowCount={this.state.items.length}
          rowHeight={RowHeight}
          rowRenderer={this.renderMenuItem}
          selectedRow={selectedRow}
          onRowClick={this.onRowClick}
          onSelectionChanged={this.onSelectionChanged}
          canSelectRow={this.canSelectRow}
          onRowKeyDown={this.onRowKeyDown}
          invalidationProps={this.state.items}
          selectOnHover={true}
        />
      </div>
    )
  }

  public focus() {
    if (this.list) {
      this.list.focus()
    }
  }
}

{'fraction_non_alphanumeric': 0.12494150678521292, 'fraction_numerical': 0.0009358914365933552, 'mean_word_length': 3.177198697068404, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4497302', 'n_tokens_mistral': 1996, 'n_tokens_neox': 1957, 'n_words': 419}