<commit_before>
import React from 'react'
import {Menu, Divider} from '../../../'
import Icon from '../../../components/icon/'

export default class MenuRoute extends React.Component {

  state = {
    rightTop: false,
    leftTop: false,
    rightBottom: false,
    leftBottom: false
  }

  onClick = (item) => {
    console.log(item)
  }

  hide = () => {
    this.setState({
      rightTop: false,
      leftTop: false,
      rightBottom: false,
      leftBottom: false
    })
    document.removeEventListener('click', this.hide)
  }

  showRightTop = () => {
    this.setState({
      rightTop: true
    })
    document.addEventListener('click', this.hide)
  }

  showLeftTop = () => {
    this.setState({
      leftTop: true
    })
    document.addEventListener('click', this.hide)
  }

  showRightBottom = () => {
    this.setState({
      rightBottom: true
    })
    document.addEventListener('click', this.hide)
  }

  showLeftBottom = () => {
    this.setState({
      leftBottom: true
    })
    document.addEventListener('click', this.hide)
  }

  render () {
    let items = [
      {content: 'one', id: 'one'},
      {content: 'two', icon: <Icon.Done />, id: 'two'},
      Divider,
      {content: 'three'},
      {content: 'long string without linebreak'}
    ]
    return (
      <div>
        <section>
          <h2>Menu</h2>
          <ul>
            <li>transformX='right'</li>
            <li>transformY='top'</li>
          </ul>
          <Menu
            transformX='right'
            transformY='top'
            onClick={this.onClick}
            items={items}
            visible={this.state.rightTop}
          >
            <Icon.Button onClick={this.showRightTop}>
              <Icon.MoreVert />
            </Icon.Button>
          </Menu>
        </section>
        <section>
          <h2>Menu</h2>
          <ul>
            <li>transformX='left'</li>
            <li>transformY='top'</li>
          </ul>
          <Menu
            transformX='left'
            transformY='top'
            onClick={this.onClick}
            items={items}
            visible={this.state.leftTop}
          >
            <Icon.Button onClick={this.showLeftTop}>
              <Icon.MoreVert />
            </Icon.Button>
          </Menu>
        </section>
        <section>
          <h2>Menu</h2>
          <ul>
            <li>transformX='right'</li>
            <li>transformY='bottom'</li>
          </ul>
          <Menu
            transformX='right'
            transformY='bottom'
            onClick={this.onClick}
            items={items}
            visible={this.state.rightBottom}
          >
            <Icon.Button onClick={this.showRightBottom}>
              <Icon.MoreVert />
            </Icon.Button>
          </Menu>
        </section>
        <section>
          <h2>Menu</h2>
          <ul>
            <li>transformX='left'</li>
            <li>transformY='bottom'</li>
          </ul>
          <Menu
            transformX='left'
            transformY='bottom'
            onClick={this.onClick}
            items={items}
            visible={this.state.leftBottom}
          >
            <Icon.Button onClick={this.showLeftBottom}>
              <Icon.MoreVert />
            </Icon.Button>
          </Menu>
        </section>
      </div>
    )
  }

}<commit_msg>add playground to menu example<commit_after>
import React from 'react'
import ReactDOM from 'react-dom'
import Playground from 'component-playground'
import {Menu, Divider} from '../../../'
import Icon from '../../../components/icon/'

const menuTopRight =
`class App extends React.Component {

  state = {
    visible: false
  }

  onClick = (item) => {
    this.setState({
      visible: true
    })
    document.addEventListener('click', this.hide)
  }

  hide = () => {
    this.setState({
      visible: false
    })
    document.removeEventListener('click', this.hide)
  }

  render () {
    let items = [
      {content: 'one', id: 'one'},
      {content: 'two', icon: <Icon.Done />, id: 'two'},
      Divider,
      {content: 'three'},
      {content: 'long string without linebreak'}
    ]
    return (
      <Menu
        transformX='right'
        transformY='top'
        onClick={this.onClick}
        items={items}
        visible={this.state.visible}
      >
        <Icon.Button onClick={this.onClick}>
          <Icon.MoreVert />
        </Icon.Button>
      </Menu>
    )
  }

}

ReactDOM.render(<App />, mountNode)`

const menuTopLeft =
`class App extends React.Component {

  state = {
    visible: false
  }

  onClick = (item) => {
    this.setState({
      visible: true
    })
    document.addEventListener('click', this.hide)
  }

  hide = () => {
    this.setState({
      visible: false
    })
    document.removeEventListener('click', this.hide)
  }

  render () {
    let items = [
      {content: 'one', id: 'one'},
      {content: 'two', icon: <Icon.Done />, id: 'two'},
      Divider,
      {content: 'three'},
      {content: 'long string without linebreak'}
    ]
    return (
      <Menu
        transformX='left'
        transformY='top'
        onClick={this.onClick}
        items={items}
        visible={this.state.visible}
      >
        <Icon.Button onClick={this.onClick}>
          <Icon.MoreVert />
        </Icon.Button>
      </Menu>
    )
  }

}

ReactDOM.render(<App />, mountNode)`

const menuBottomRight =
`class App extends React.Component {

  state = {
    visible: false
  }

  onClick = (item) => {
    this.setState({
      visible: true
    })
    document.addEventListener('click', this.hide)
  }

  hide = () => {
    this.setState({
      visible: false
    })
    document.removeEventListener('click', this.hide)
  }

  render () {
    let items = [
      {content: 'one', id: 'one'},
      {content: 'two', icon: <Icon.Done />, id: 'two'},
      Divider,
      {content: 'three'},
      {content: 'long string without linebreak'}
    ]
    return (
      <Menu
        transformX='right'
        transformY='bottom'
        onClick={this.onClick}
        items={items}
        visible={this.state.visible}
      >
        <Icon.Button onClick={this.onClick}>
          <Icon.MoreVert />
        </Icon.Button>
      </Menu>
    )
  }

}

ReactDOM.render(<App />, mountNode)`

const menuBottomLeft =
`class App extends React.Component {

  state = {
    visible: false
  }

  onClick = (item) => {
    this.setState({
      visible: true
    })
    document.addEventListener('click', this.hide)
  }

  hide = () => {
    this.setState({
      visible: false
    })
    document.removeEventListener('click', this.hide)
  }

  render () {
    let items = [
      {content: 'one', id: 'one'},
      {content: 'two', icon: <Icon.Done />, id: 'two'},
      Divider,
      {content: 'three'},
      {content: 'long string without linebreak'}
    ]
    return (
      <Menu
        transformX='left'
        transformY='bottom'
        onClick={this.onClick}
        items={items}
        visible={this.state.visible}
      >
        <Icon.Button onClick={this.onClick}>
          <Icon.MoreVert />
        </Icon.Button>
      </Menu>
    )
  }

}

ReactDOM.render(<App />, mountNode)`

export default class MenuRoute extends React.Component {

  render () {
    return (
      <div>
        <section>
          <h2>Menu - top, right</h2>
          <Playground
            docClass={Menu}
            codeText={menuTopRight}
            noRender={false}
            scope={{React, ReactDOM, Menu, Icon, Divider}}
          />
        </section>
        <section>
          <h2>Menu - top, left</h2>
          <Playground
            codeText={menuTopLeft}
            noRender={false}
            scope={{React, ReactDOM, Menu, Icon, Divider}}
          />
        </section>
        <section>
          <h2>Menu - bottom, right</h2>
          <Playground
            codeText={menuBottomRight}
            noRender={false}
            scope={{React, ReactDOM, Menu, Icon, Divider}}
          />
        </section>
        <section>
          <h2>Menu - bottom, left</h2>
          <Playground
            codeText={menuBottomLeft}
            noRender={false}
            scope={{React, ReactDOM, Menu, Icon, Divider}}
          />
        </section>
      </div>
    )
  }

}
{'fraction_non_alphanumeric': 0.14920673368051351, 'fraction_numerical': 0.001937749788058617, 'mean_word_length': 1.7075409836065574, 'pattern_counts': {'":': 0, '<': 116, '<?xml version=': 0, '>': 130, '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': '4022671', 'n_tokens_mistral': 2499, 'n_tokens_neox': 2509, 'n_words': 479}