xchain-components/src/stories/XMenuStory.js

Xchain Components

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

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import XMenu from 'components/XMenu';
import XDisplayText from 'components/XDisplayText';
import XIcon from 'components/XIcon';
import XButton from 'components/XButton';
import { NavLink, Link, BrowserRouter, Route, Switch  } from 'react-router-dom';

type State = {
  activeIndex: number,
};

const topMenuHeader = (
  <div
    style={{
      width: '300px',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    <XDisplayText displayText="Procure" fontSize="20px" fontWeight="bold" color="#4a4a4a" />
    <XDisplayText displayText="Now" fontSize="20px" fontWeight="300" color="#4a4a4a" />
  </div>
);

const rightMenuItems = [
  {
    menuItem: (<XIcon name="plus circle" color="#00FF00" fontSize="20px" />),
    as: Link,
    to: '/a',
  },
  {
    menuItem: (<XIcon name="bell outline" notification />),
    as: Link,
    to: '/b',
  },
  {
    menuItem: (<XIcon name="envelope outline" notification width="35px" height="19px" />),
    as: Link,
    to: '/ac',
  },
  {
    menuItem: (<XIcon name="setting" />),
    as: Link,
    to: '/ad',
  },
  {
    menuItem: (<XIcon name="user circle" />),
    as: Link,
    to: '/ar',
  },
];

const sideMenuHeader = (
  <div
    style={{
      height: '80px',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >

    <XButton
      text="Procure"
      fontSize="15px"
      borderRadius="2px"
      width="108px"
      height="32px"
      borderColor="#00a1ff"
      backgroundColor="#00a1ff"
      textColor="#ffffff"
      onButtonClick={action('clicked')}
    />

    <XButton
      text="Supply"
      fontSize="15px"
      borderRadius="2px"
      width="108px"
      height="32px"
      borderColor="#b6c0cb"
      backgroundColor="transparent"
      textColor="#b6c0cb"
      onButtonClick={action('clicked')}
    />

  </div>
);


class XMenuWrapper extends React.Component<{}, State> {
  state = {
    activeIndex: {parent: 0 , subMenu: 0},
  };

  onMenuClick = (event, titleProps) => {
    const { index } = titleProps;
    const { activeIndex } = this.state;
    const newIndex = activeIndex === index ? -1 : index;
    this.setState({ activeIndex: newIndex });
  }

  getSideMenuItems = () => (
    [{
      subMenu: true,
      items: {
        header: (
          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
            <XIcon name="hand point right" color="#f5a623" fontSize="34px" />
            <span>&nbsp;&nbsp;</span>
            <XDisplayText displayText="Purchase Order" color="#b6c0cb" fontWeight="500" fontSize="15px" />
          </div>
        ),
        subMenuItems: [
          {
            menuItem: (<XDisplayText displayText="Dashboard" color="#b6c0cb" fontSize="15px" fontWeight="500" />),
            as: NavLink,
            to: '/3',
          },
          {
            menuItem: (<XDisplayText displayText="Dashboard" color="#b6c0cb" fontSize="15px" fontWeight="500" />),
            as: NavLink,
            to: '/4',
          },
        ],
        onMenuClick: this.onMenuClick,
      },
    },
    {
      subMenu: false,
      items: {
        menuItem: (
          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
            <XIcon name="hand point right" color="#f5a623" fontSize="34px" />
            <span>&nbsp;&nbsp;</span>
            <XDisplayText displayText="Purchase Order" color="#b6c0cb" fontWeight="500" fontSize="15px" />
          </div>
        ),
        as: NavLink,
        to: '/1',
      },
    },
    {
      subMenu: false,
      items: {
        menuItem: (
          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
            <XIcon name="hand point right" color="#f5a623" fontSize="34px" />
            <span>&nbsp;&nbsp;</span>
            <XDisplayText displayText=" Order" color="#b6c0cb" fontWeight="500" fontSize="15px" />
          </div>
        ),
        as: NavLink,
        to: '/2',
      },
    },
    ]
  )

  getRoutes = () => (
    <div>
      <Route exact path="/2" render={() => <div>Home</div>} />
        <Route exact path="/3" render={() => <div>Home3</div>} />
      <Route exact path="/4" render={() => <div>Home4</div>} />
      <Route exact path="/1" render={() => <div style={{ width: '500px', height: '500px', backgroundColor: '#FF0000'}}>home</div>} />
    </div>
  )

  render() {
    const { activeIndex } = this.state;
    return (
      <XMenu
        width="1050px"
        sideBarHeight="500px"
        sideBarwidth="300px"
        topMenuItems={{ header: topMenuHeader, rightMenuItems }}
        sideMenuHeader={sideMenuHeader}
        sideMenuItems={this.getSideMenuItems()}
        activeMenu={activeIndex}
        routes={this.getRoutes()}
      />
    );
  }
}


export default storiesOf('XMenu', module)
  .addDecorator(withInfo)
  .add('Procurenow Menu', () => (
    <div>
      <BrowserRouter>
        <div>
          <XMenuWrapper />
        </div>
      </BrowserRouter>
    </div>
  ));