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

Xchain Components

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

import * as React from 'react';
import { Dropdown, Icon } from 'semantic-ui-react';

type Props = {
  dropDownHeight?: string,
  iconName: string,
  iconFontSize?: string,
  iconColor?: string,
  direction?: string,
  menus: Array<{
    key: string, to: string, iconName?: string,
    text: string, as: React.Node, onMenuClick: () => void,
  }>,
};


const XDropDownMenu = (props: Props) => {
  const {
    dropDownHeight, iconName, iconFontSize, iconColor, direction, menus,
  } = props;
  return (
    <div
      style={{
        height: dropDownHeight,
      }}
    >
      <Dropdown
        className="icon"
        icon={(
          <Icon
            style={{
              fontSize: iconFontSize,
              color: iconColor,
            }}
            name={iconName}
          />
        )}
        item
        direction={direction}
        pointing
        floating
      >
        <Dropdown.Menu>
          {
            (menus !== undefined && menus !== null && menus.length !== 0)
              ? menus.map(menu => (
                <Dropdown.Item
                  as={menu.as}
                  to={menu.to}
                  value={menu.text}
                  key={menu.key}
                  onClick={menu.onMenuClick}
                >
                  {
                    (menu.iconName !== undefined
                    && menu.iconName !== undefined
                    && menu.iconName.length !== 0)
                      ? <Icon name={menu.iconName} /> : null
                  }
                  {menu.text}
                </Dropdown.Item>
              )) : null
          }
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
};

XDropDownMenu.defaultProps = {
  dropDownHeight: '20px',
  iconFontSize: '20px',
  iconColor: '#b4b4b4',
  direction: 'left',
};

export default XDropDownMenu;