xchain-components/src/components/XMenu/index.js

Xchain Components

/* @flow */
/* eslint react/jsx-filename-extension: 0 */

import * as React from 'react';
import {
  Menu, Segment, Sidebar, Container, Accordion,
} from 'semantic-ui-react';
import XDivider from 'components/XDivider';

type Props = {
  // topMenu
  width: string,
  topMenuStyle?: { height: string, width: string, border: string, backgroundColor: string},
  topMenuItems: { header: React.Node,
    rightMenuItems?: Array<{ menuItem: React.Node,
      as: React.Node, to: string, onMenuClick: () => void }> },

  // sideMenu
  sideBarHeight: string,
  sideBarwidth: string,
  sideMenuBackgroundColor?: string,
  sideMenuHeader?: React.Node,
  sideMenuItems: Array<{subMenu: boolean,
                        items: {
                          header: React.Node,
                          subMenuItems: Array<{ menuItem: React.Node,
                             as: React.Node, to: string,
                             onMenuClick: () => void}>,
                          onMenuClick: ()=> void
                        } | {
                          menuItem: React.Node,
                          as: React.Node,
                          to: string,
                          onMenuClick: () => void
                        }
                      }>,
  activeMenu: number | {parent: number, subMenu: number},
  routes?: React.Node,
};


const TopMenuStyle = {
  height: '80px',
  width: '100%',
  border: 'solid 1px #ececec',
  backgroundColor: '#ffffff',
};

const RightIconMenuStyle = {
  width: '60px',
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
};


const XMenu = (props: Props) => {
  const {
    width,
    topMenuStyle,
    topMenuItems,
    sideBarHeight,
    sideBarwidth,
    sideMenuBackgroundColor, sideMenuHeader, sideMenuItems, activeMenu, routes,
  } = props;
  return (
    <div
      style={{
        width,
      }}
    >
      <Menu borderless fixed="top" style={topMenuStyle}>
        <Menu.Item>
          {
            topMenuItems.header
          }
        </Menu.Item>
        {
          topMenuItems.rightMenuItems !== undefined && topMenuItems.rightMenuItems !== null
          && topMenuItems.rightMenuItems.length !== 0
            ? topMenuItems.rightMenuItems.map((rightMenuItem, index) => {
              let rightElement = (
                <Menu.Item
                  style={RightIconMenuStyle}
                  key={rightMenuItem.to}
                  as={rightMenuItem.as}
                  to={rightMenuItem.to}
                >
                  {
                    rightMenuItem.menuItem
                  }
                </Menu.Item>
              );
              if (index === 0) {
                rightElement = (
                  <Menu.Item
                    style={RightIconMenuStyle}
                    position="right"
                    key={rightMenuItem.to}
                    as={rightMenuItem.as}
                    to={rightMenuItem.to}
                    onClick={rightMenuItem.onMenuClick}
                  >
                    {
                      rightMenuItem.menuItem
                    }
                  </Menu.Item>
                );
              }
              return rightElement;
            })
            : null
        }
      </Menu>
      <Container style={{
        width: '100%',
        height: sideBarHeight,
        padding: '80px 0px 0px 0px',
      }}
      >
        <Sidebar.Pushable style={{ height: sideBarHeight }} as={Segment}>
          <Sidebar
            style={{
              backgroundColor: sideMenuBackgroundColor,
              height: sideBarHeight,
              overflowX: 'hidden',
            }}
            visible
            width="wide"
            as={Menu}
            vertical
          > <Menu.Item>
            {
              sideMenuHeader
            }
            </Menu.Item>
            {
              sideMenuItems !== undefined && sideMenuItems !== null
                ? sideMenuItems.map((sideMenuItem, index) => {
                  let sideMenuItemElement = null;
                  if (sideMenuItem.subMenu) {
                    sideMenuItemElement = (
                        <Accordion
                          style={{
                            width: sideBarwidth,
                            backgroundColor: 'transparent',
                            border: '0px',
                            display: 'flex',
                            paddingLeft: '24px',
                            flexDirection: 'row',
                            justifyContent: 'start',
                            alignItems: 'center',
                            paddingTop: '5px',
                            paddingBottom: '5px',
                          }}
                          as={Menu}
                          vertical
                          key={index}
                        >
                          <Menu.Item>
                            <Accordion.Title
                              active={activeMenu === index || activeMenu.parent === index}
                              index={index}
                              onClick={sideMenuItem.items.onMenuClick}
                            >
                              {
                                sideMenuItem.items.header
                              }
                            </Accordion.Title>
                            <Accordion.Content
                              active={activeMenu === index || activeMenu.parent === index}
                            >
                              {
                                sideMenuItem.items.subMenuItems.map((subMenuItem, idx) => {
                                  return (
                                    <Menu.Item
                                      style={{
                                        height: '40px',
                                        display: 'flex',
                                        paddingLeft: '38px',
                                        flexDirection: 'row',
                                        justifyContent: 'start',
                                        alignItems: 'center',
                                      }}
                                      as={subMenuItem.as}
                                      to={subMenuItem.to}
                                      key={subMenuItem.to}
                                      onClick={subMenuItem.onMenuClick}
                                      active={JSON.stringify(activeMenu)
                                        === JSON.stringify({ parent: index, subMenu: idx })}
                                    >
                                      {
                                        subMenuItem.menuItem
                                      }
                                    </Menu.Item>
                                  );
                                })
                            }
                            </Accordion.Content>
                          </Menu.Item>
                        </Accordion>
                    );
                  } else {
                    sideMenuItemElement = (
                      <Menu.Item
                        key={sideMenuItem.items.to}
                        style={{
                          height: '50px',
                          display: 'flex',
                          paddingLeft: '38px',
                          flexDirection: 'row',
                          justifyContent: 'start',
                          alignItems: 'center',
                        }}
                        as={sideMenuItem.items.as}
                        to={sideMenuItem.items.to}
                        onClick={sideMenuItem.items.onMenuClick}
                        index={index}
                        active={activeMenu === index}
                      >
                        {
                          sideMenuItem.items.menuItem
                        }
                      </Menu.Item>
                    );
                  }
                  return sideMenuItemElement;
                }) : null

            }
          </Sidebar>

          <Sidebar.Pusher
            style={{
              backgroundColor: '#f6f7fb',
            }}
          >
            <Segment basic>
              {
                    routes
              }
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </Container>
    </div>
  );
};

XMenu.defaultProps = {
  topMenuStyle: TopMenuStyle,
  sideMenuBackgroundColor: '#384458',
  sideMenuHeader: null,
  routes: null,
};


export default XMenu;