text: import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import { TabView, TabPanel } from '../../components/tabview/TabView';
  import { CodeHighlight } from '../codehighlight/CodeHighlight';
  import { useLiveEditorTabs }from '../liveeditor/LiveEditor';
  
  export class MenuDoc extends Component {
  
      constructor(props) {
          super(props);
  
          this.sources = {
              'class': {
                  tabName: 'Class Source',
                  content: `
  import React, { Component } from 'react';
  import { Menu } from 'primereact/menu';
  import { Button } from 'primereact/button';
  import { Toast } from 'primereact/toast';
  
  export class MenuDemo extends Component {
  
      constructor(props) {
          super(props);
  
          this.items = [
              {
                  label: 'Options',
                  items: [
                      {
                          label: 'Update',
                          icon: 'pi pi-refresh',
                          command: () => {
                              this.toast.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                          }
                      },
                      {
                          label: 'Delete',
                          icon: 'pi pi-times',
                          command: () => {
                              this.toast.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                          }
                      }
                  ]
              },
              {
                  label: 'Navigate',
                  items: [
                      {
                          label: 'React Website',
                          icon: 'pi pi-external-link',
                          url: 'https://reactjs.org/'
                      },
                      {
                          label: 'Router',
                          icon: 'pi pi-upload',
                          command:(e) => {
                              window.location.hash = "/fileupload"
                          }
                      }
                  ]
              }
          ];
      }
  
      render() {
          return (
              <div>
                  <Toast ref={(el) => { this.toast = el; }}></Toast>
  
                  <div className="card">
                      <h5>Inline</h5>
                      <Menu model={this.items} />
  
                      <h5>Overlay</h5>
                      <Menu model={this.items} popup ref={el => this.menu = el} id="popup_menu" />
                      <Button label="Show" icon="pi pi-bars" onClick={(event) => this.menu.toggle(event)} aria-controls="popup_menu" aria-haspopup />
                  </div>
              </div>
          )
      }
  }
                  `
              },
              'hooks': {
                  tabName: 'Hooks Source',
                  content: `
  import React, { useRef } from 'react';
  import { Menu } from 'primereact/menu';
  import { Button } from 'primereact/button';
  import { Toast } from 'primereact/toast';
  
  const MenuDemo = () => {
      const menu = useRef(null);
      const toast = useRef(null);
      const items = [
          {
              label: 'Options',
              items: [
                  {
                      label: 'Update',
                      icon: 'pi pi-refresh',
                      command: () => {
                          toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                      }
                  },
                  {
                      label: 'Delete',
                      icon: 'pi pi-times',
                      command: () => {
                          toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                      }
                  }
              ]
          },
          {
              label: 'Navigate',
              items: [
                  {
                      label: 'React Website',
                      icon: 'pi pi-external-link',
                      url: 'https://reactjs.org/'
                  },
                  {
                      label: 'Router',
                      icon: 'pi pi-upload',
                      command:(e) => {
                          window.location.hash = "/fileupload"
                      }
                  }
              ]
          }
      ];
  
      return (
          <div>
              <Toast ref={toast}></Toast>
  
              <div className="card">
                  <h5>Inline</h5>
                  <Menu model={items} />
  
                  <h5>Overlay</h5>
                  <Menu model={items} popup ref={menu} id="popup_menu" />
                  <Button label="Show" icon="pi pi-bars" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup />
              </div>
          </div>
      );
  }
                  `
              },
              'ts': {
                  tabName: 'TS Source',
                  content: `
  import React, { useRef } from 'react';
  import { Menu } from 'primereact/menu';
  import { Button } from 'primereact/button';
  import { Toast } from 'primereact/toast';
  
  const MenuDemo = () => {
      const menu = useRef(null);
      const toast = useRef(null);
      const items = [
          {
              label: 'Options',
              items: [
                  {
                      label: 'Update',
                      icon: 'pi pi-refresh',
                      command: () => {
                          toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                      }
                  },
                  {
                      label: 'Delete',
                      icon: 'pi pi-times',
                      command: () => {
                          toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                      }
                  }
              ]
          },
          {
              label: 'Navigate',
              items: [
                  {
                      label: 'React Website',
                      icon: 'pi pi-external-link',
                      url: 'https://reactjs.org/'
                  },
                  {
                      label: 'Router',
                      icon: 'pi pi-upload',
                      command:(e) => {
                          window.location.hash = "/fileupload"
                      }
                  }
              ]
          }
      ];
  
      return (
          <div>
              <Toast ref={toast}></Toast>
  
              <div className="card">
                  <h5>Inline</h5>
                  <Menu model={items} />
  
                  <h5>Overlay</h5>
                  <Menu model={items} popup ref={menu} id="popup_menu" />
                  <Button label="Show" icon="pi pi-bars" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup />
              </div>
          </div>
      );
  }
                  `
              },
          }
      }
  
      shouldComponentUpdate() {
          return false;
      }
  
      render() {
          return (
              <div className="content-section documentation">
                  <TabView>
                      <TabPanel header="Documentation">
                          <h5>Import</h5>
  <CodeHighlight lang="js">
  {`
  import { Menu } from 'primereact/menu';
  `}
  </CodeHighlight>
  
                          <h5>MenuModel API</h5>
                          <p>Menu uses the common menumodel api to define its items, visit <Link to="/menumodel"> MenuModel API</Link> for details.</p>
  
                          <h5>Getting Started</h5>
                          <p>Menu requires a collection of menuitems as its model.</p>
  <CodeHighlight>
  {`
  <Menu model={items} />
  `}
  </CodeHighlight>
  
  <CodeHighlight lang="js">
  {`
  let items = [
      {label: 'New', icon: 'pi pi-fw pi-plus'},
      {label: 'Delete', icon: 'pi pi-fw pi-trash'}
  ];
  `}
  </CodeHighlight>
  
                          <h5>SubMenus</h5>
                          <p>Menu supports one level of nesting via subitems of an item.</p>
  <CodeHighlight lang="js">
  {`
  let items = [
      {
          label: 'Options',
          items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
                  {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
      },
      {
          label: 'Account',
          items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
                  {label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
      }
  ]
  `}
  </CodeHighlight>
  
                          <h5>Popup Mode</h5>
                          <p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
  
  <CodeHighlight>
  {`
  <Menu model={items} popup ref={menu} />
  <Button label="Show" icon="pi pi-bars" onClick={(event) => menu.current.toggle(event)}/>
  `}
  </CodeHighlight>
  
                          <h5>Properties</h5>
                          <div className="doc-tablewrapper">
                              <table className="doc-table">
                                  <thead>
                                      <tr>
                                          <th>Name</th>
                                          <th>Type</th>
                                          <th>Default</th>
                                          <th>Description</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>id</td>
                                          <td>string</td>
                                          <td>null</td>
                                          <td>Unique identifier of the element.</td>
                                      </tr>
                                      <tr>
                                          <td>model</td>
                                          <td>array</td>
                                          <td>null</td>
                                          <td>An array of menuitems.</td>
                                      </tr>
                                      <tr>
                                          <td>popup</td>
                                          <td>boolean</td>
                                          <td>false</td>
                                          <td>Defines if menu would displayed as a popup.</td>
                                      </tr>
                                      <tr>
                                          <td>style</td>
                                          <td>string</td>
                                          <td>null</td>
                                          <td>Inline style of the component.</td>
                                      </tr>
                                      <tr>
                                          <td>className</td>
                                          <td>string</td>
                                          <td>null</td>
                                          <td>Style class of the component.</td>
                                      </tr>
                                      <tr>
                                          <td>baseZIndex</td>
                                          <td>number</td>
                                          <td>0</td>
                                          <td>Base zIndex value to use in layering.</td>
                                      </tr>
                                      <tr>
                                          <td>autoZIndex</td>
                                          <td>boolean</td>
                                          <td>true</td>
                                          <td>Whether to automatically manage layering.</td>
                                      </tr>
                                      <tr>
                                          <td>appendTo</td>
                                          <td>DOM element</td>
                                          <td>document.body</td>
                                          <td>DOM element instance where the overlay menu should be mounted.</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
  
                          <h5>Methods</h5>
                          <div className="doc-tablewrapper">
                              <table className="doc-table">
                                  <thead>
                                      <tr>
                                          <th>Name</th>
                                          <th>Parameters</th>
                                          <th>Description</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>toggle</td>
                                          <td>event: Browser event</td>
                                          <td>Toggles the visibility of the popup menu.</td>
                                      </tr>
                                      <tr>
                                          <td>show</td>
                                          <td>event: Browser event</td>
                                          <td>Displays the popup menu.</td>
                                      </tr>
                                      <tr>
                                          <td>hide</td>
                                          <td>event: Browser event</td>
                                          <td>Hides the popup menu.</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
  
                          <h5>Events</h5>
                          <div className="doc-tablewrapper">
                              <table className="doc-table">
                                  <thead>
                                      <tr>
                                          <th>Name</th>
                                          <th>Parameters</th>
                                          <th>Description</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>onShow</td>
                                          <td>event: Browser event </td>
                                          <td>Callback to invoke when a popup menu is shown.</td>
                                      </tr>
                                      <tr>
                                          <td>onHide</td>
                                          <td>event: Browser event </td>
                                          <td>Callback to invoke when a popup menu is hidden.</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
  
                          <h5>Styling</h5>
                          <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
                          <div className="doc-tablewrapper">
                              <table className="doc-table">
                                  <thead>
                                      <tr>
                                          <th>Name</th>
                                          <th>Element</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>p-menu</td>
                                          <td>Container element.</td>
                                      </tr>
                                      <tr>
                                          <td>p-menu-list</td>
                                          <td>List element.</td>
                                      </tr>
                                      <tr>
                                          <td>p-menuitem</td>
                                          <td>Menuitem element.</td>
                                      </tr>
                                      <tr>
                                          <td>p-menuitem-text</td>
                                          <td>Label of a menuitem.</td>
                                      </tr>
                                      <tr>
                                          <td>p-menuitem-icon</td>
                                          <td>Icon of a menuitem.</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
  
                          <h5>Dependencies</h5>
                          <p>None.</p>
                      </TabPanel>
  
                      {
                          useLiveEditorTabs({ name: 'MenuDemo', sources: this.sources })
                      }
                  </TabView >
              </div>
          )
      }
  }
  