From 3ac8b238429cd9f7ee0fb2ae41bce4e2bc21b019 Mon Sep 17 00:00:00 2001 From: Merve7 Date: Mon, 31 Jul 2017 12:14:39 +0300 Subject: [PATCH] Fixed #62 --- src/App.js | 1 + src/components/megamenu/MegaMenu.js | 150 +++++++ src/index.js | 2 + src/showcase/megamenu/MegaMenuDemo.js | 546 ++++++++++++++++++++++++++ 4 files changed, 699 insertions(+) create mode 100644 src/components/megamenu/MegaMenu.js create mode 100644 src/showcase/megamenu/MegaMenuDemo.js diff --git a/src/App.js b/src/App.js index 61c774da8c..4c05a91619 100644 --- a/src/App.js +++ b/src/App.js @@ -234,6 +234,7 @@ class AppMenu extends Component { ● ContextMenu ● PanelMenu ● Steps + ● MegaMenu this.openMenu(event, 7)} className={classNames({ 'active-menuitem': this.state.activeMenu === 7 })}> diff --git a/src/components/megamenu/MegaMenu.js b/src/components/megamenu/MegaMenu.js new file mode 100644 index 0000000000..3e9b9f4784 --- /dev/null +++ b/src/components/megamenu/MegaMenu.js @@ -0,0 +1,150 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import DomHandler from '../utils/DomHandler'; +import classNames from 'classnames'; +import {MenuItem} from "../menu/MenuItem"; + +export class MegaMenu extends Component { + static defaultProps = { + model:null, + style: null, + styleClass: null, + orientation:'horizontal' + } + + static propsTypes = { + model:PropTypes.array, + style: PropTypes.string, + styleClass: PropTypes.string, + orientation:PropTypes.string + } + + constructor(props) { + super(props); + this.state = {}; + } + onItemMouseEnter(event, item) { + if(item.disabled) { + return; + } + + this.setState({activeItem:item}); + let submenu = event.currentTarget.children[1]; + if(submenu) { + submenu.style.zIndex = DomHandler.getZindex(); + + if(this.props.orientation === 'horizontal') { + submenu.style.top = DomHandler.getOuterHeight(event.currentTarget.children[0]) + 'px'; + submenu.style.left = '0px'; + } + else if(this.props.orientation === 'vertical') { + submenu.style.top = '0px'; + submenu.style.left = DomHandler.getOuterWidth(event.currentTarget.children[0]) + 'px'; + } + } + } + onItemMouseLeave(event, link) { + this.setState({activeItem: null}); + } + getColumnClass(menuitem) { + let length = menuitem.items ? menuitem.items.length: 0; + let columnClass; + switch(length) { + case 2: + columnClass= 'ui-g-6'; + break; + + case 3: + columnClass= 'ui-g-4'; + break; + + case 4: + columnClass= 'ui-g-3'; + break; + + case 6: + columnClass= 'ui-g-2'; + break; + + default: + columnClass= 'ui-g-12'; + break; + } + + return columnClass; + } + itemClick(event, item) { + if(item.disabled) { + event.preventDefault(); + return; + } + + if(!item.url) { + event.preventDefault(); + } + + if(item.command) { + item.command({ + originalEvent: event, + item: item + }); + } + + this.setState({activeItem: null}); + } + render() { + var divClass=classNames('ui-menu ui-menubar ui-megamenu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix', + this.props.styleClass,{'ui-megamenu-vertical': this.props.orientation === 'vertical'}); + var horizontalChild,menuItems; + if(this.props.orientation==='horizontal'){ + horizontalChild=
  • + {this.props.children} +
    • + } + menuItems=this.props.model && this.props.model.map((category,index)=>{ + var liClass=classNames('ui-menuitem ui-widget ui-corner-all',{'ui-menu-parent':category.items,'ui-menuitem-active':category===this.state.activeItem}); + var aClass=classNames('ui-menuitem-link ui-corner-all ui-submenu-link',{'ui-state-disabled':category.disabled}); + var spanClass=classNames('ui-menuitem-icon fa fa-fw ',category.icon); + var submenuClass=classNames('ui-submenu-icon fa fa-fw ',{'fa-caret-down':this.props.orientation==='horizontal','fa-caret-right':this.props.orientation==='vertical'}) + + var categoryItem=category.separator?
  • : +
  • this.onItemMouseEnter(event,category)} onMouseLeave={event=>this.onItemMouseLeave(event,category)} + className={liClass} ref={el=>this.item=el} key={index}> + + + {category.label} + + +
    +
    + {category.items && category.items.map((column,index1)=>{ + return
    + {column && column.map((submenu,index2)=>{ + return
      +

    • {submenu.label}

      • + {submenu.items && submenu.items.map((item,index3)=>{ + return item.separator?
    • : +
    • + this.itemClick(event,item)} index={index+'_'+index1+'_'+index2+'_'+index3}/> +
      • + })} +
    + })} +
    + })} +
    +
    +
    • + return categoryItem; + }) + + return ( +
    this.container=el} > + +
    + ); + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 622a9a13da..0b8496685c 100644 --- a/src/index.js +++ b/src/index.js @@ -76,6 +76,7 @@ import {MenubarDemo} from './showcase/menubar/MenubarDemo'; import {ContextMenuDemo} from './showcase/contextmenu/ContextMenuDemo'; import {PanelMenuDemo} from './showcase/panelmenu/PanelMenuDemo'; import {StepsDemo} from './showcase/steps/StepsDemo'; +import {MegaMenuDemo} from './showcase/megamenu/MegaMenuDemo'; import {OrganizationChartDemo} from './showcase/organizationchart/OrganizationChartDemo'; import {Router,Route,hashHistory} from 'react-router'; @@ -155,6 +156,7 @@ ReactDOM.render( + diff --git a/src/showcase/megamenu/MegaMenuDemo.js b/src/showcase/megamenu/MegaMenuDemo.js new file mode 100644 index 0000000000..46daf7ad95 --- /dev/null +++ b/src/showcase/megamenu/MegaMenuDemo.js @@ -0,0 +1,546 @@ +import React, {Component} from 'react'; +import {Link} from 'react-router'; +import {MegaMenu} from '../../components/megamenu/MegaMenu'; +import {TabView,TabPanel} from '../../components/tabview/TabView'; +import {CodeHighlight} from '../../components/codehighlight/CodeHighlight'; + +export class MegaMenuDemo extends Component { + + constructor() { + super(); + this.state = {}; + } + + render() { + var items=[ + { + label: 'TV', icon: 'fa-check', + items: [ + [ + { + label: 'TV 1', + items: [{label: 'TV 1.1'},{label: 'TV 1.2'}] + }, + { + label: 'TV 2', + items: [{label: 'TV 2.1'},{label: 'TV 2.2'}] + } + ], + [ + { + label: 'TV 3', + items: [{label: 'TV 3.1'},{label: 'TV 3.2'}] + }, + { + label: 'TV 4', + items: [{label: 'TV 4.1'},{label: 'TV 4.2'}] + } + ] + ] + }, + { + label: 'Sports', icon: 'fa-soccer-ball-o', + items: [ + [ + { + label: 'Sports 1', + items: [{label: 'Sports 1.1'},{label: 'Sports 1.2'}] + }, + { + label: 'Sports 2', + items: [{label: 'Sports 2.1'},{label: 'Sports 2.2'}] + }, + + ], + [ + { + label: 'Sports 3', + items: [{label: 'Sports 3.1'},{label: 'Sports 3.2'}] + }, + { + label: 'Sports 4', + items: [{label: 'Sports 4.1'},{label: 'Sports 4.2'}] + } + ], + [ + { + label: 'Sports 5', + items: [{label: 'Sports 5.1'},{label: 'Sports 5.2'}] + }, + { + label: 'Sports 6', + items: [{label: 'Sports 6.1'},{label: 'Sports 6.2'}] + } + ] + ] + }, + { + label: 'Entertainment', icon: 'fa-child', + items: [ + [ + { + label: 'Entertainment 1', + items: [{label: 'Entertainment 1.1'},{label: 'Entertainment 1.2'}] + }, + { + label: 'Entertainment 2', + items: [{label: 'Entertainment 2.1'},{label: 'Entertainment 2.2'}] + } + ], + [ + { + label: 'Entertainment 3', + items: [{label: 'Entertainment 3.1'},{label: 'Entertainment 3.2'}] + }, + { + label: 'Entertainment 4', + items: [{label: 'Entertainment 4.1'},{label: 'Entertainment 4.2'}] + } + ] + ] + }, + { + label: 'Technology', icon: 'fa-gears', + items: [ + [ + { + label: 'Technology 1', + items: [{label: 'Technology 1.1'},{label: 'Technology 1.2'}] + }, + { + label: 'Technology 2', + items: [{label: 'Technology 2.1'},{label: 'Technology 2.2'}] + }, + { + label: 'Technology 3', + items: [{label: 'Technology 3.1'},{label: 'Technology 3.2'}] + } + ], + [ + { + label: 'Technology 4', + items: [{label: 'Technology 4.1'},{label: 'Technology 4.2'}] + } + ] + ] + } + ]; + return ( +
    +
    +
    +

    MegaMenu

    +

    MegaMenu displays submenus of root items together.

    +
    +
    +
    +

    Default

    + + +

    Vertical

    + +
    + + + +
    + ); + } +} + +class MegaMenuDoc extends Component { + render() { + return ( +
    + + +

    Import

    + + {` +import {MegaMenu} from 'primereact/components/megamenu/MegaMenu'; + +`} +

    MenuItem API

    +

    MegaMenu uses the common menu item api to define its items, visit Menu for details.

    + +

    Getting Started

    +

    MegaMenu requires nested menuitems as its model where the items of a root menuitem is a two dimensional array to define columns in an overlay submenu.

    + + {` + + +`} + + + {` +var items=[ + { + label: 'TV', icon: 'fa-check', + items: [ + [ + { + label: 'TV 1', + items: [{label: 'TV 1.1'},{label: 'TV 1.2'}] + }, + { + label: 'TV 2', + items: [{label: 'TV 2.1'},{label: 'TV 2.2'}] + } + ], + [ + { + label: 'TV 3', + items: [{label: 'TV 3.1'},{label: 'TV 3.2'}] + }, + { + label: 'TV 4', + items: [{label: 'TV 4.1'},{label: 'TV 4.2'}] + } + ] + ] + }, + { + label: 'Sports', icon: 'fa-soccer-ball-o', + items: [ + [ + { + label: 'Sports 1', + items: [{label: 'Sports 1.1'},{label: 'Sports 1.2'}] + }, + { + label: 'Sports 2', + items: [{label: 'Sports 2.1'},{label: 'Sports 2.2'}] + }, + + ], + [ + { + label: 'Sports 3', + items: [{label: 'Sports 3.1'},{label: 'Sports 3.2'}] + }, + { + label: 'Sports 4', + items: [{label: 'Sports 4.1'},{label: 'Sports 4.2'}] + } + ], + [ + { + label: 'Sports 5', + items: [{label: 'Sports 5.1'},{label: 'Sports 5.2'}] + }, + { + label: 'Sports 6', + items: [{label: 'Sports 6.1'},{label: 'Sports 6.2'}] + } + ] + ] + }, + { + label: 'Entertainment', icon: 'fa-child', + items: [ + [ + { + label: 'Entertainment 1', + items: [{label: 'Entertainment 1.1'},{label: 'Entertainment 1.2'}] + }, + { + label: 'Entertainment 2', + items: [{label: 'Entertainment 2.1'},{label: 'Entertainment 2.2'}] + } + ], + [ + { + label: 'Entertainment 3', + items: [{label: 'Entertainment 3.1'},{label: 'Entertainment 3.2'}] + }, + { + label: 'Entertainment 4', + items: [{label: 'Entertainment 4.1'},{label: 'Entertainment 4.2'}] + } + ] + ] + }, + { + label: 'Technology', icon: 'fa-gears', + items: [ + [ + { + label: 'Technology 1', + items: [{label: 'Technology 1.1'},{label: 'Technology 1.2'}] + }, + { + label: 'Technology 2', + items: [{label: 'Technology 2.1'},{label: 'Technology 2.2'}] + }, + { + label: 'Technology 3', + items: [{label: 'Technology 3.1'},{label: 'Technology 3.2'}] + } + ], + [ + { + label: 'Technology 4', + items: [{label: 'Technology 4.1'},{label: 'Technology 4.2'}] + } + ] + ] + } +]; + +`} + + +

    Custom Content

    +

    Custom content can be placed between p-megaMenu tags. Megamenu should be horizontal for custom content.

    + + {` + + +
    + ) + } + +} \ No newline at end of file