ffr-components/es/menu-button/MenuButton.js

Fiori styled UI components

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
// Import React Component
import React, { Component } from 'react';
// Import Customized Components
import Icon from '../icon';
import Button from '../button';
import Popover from '../popover';
import ListGroup from '../list-group'; // Import Utils

import { KeyCode, isClickedKey } from '../utils'; // Import Css

import './MenuButton.css';

var MenuButton =
/*#__PURE__*/
function (_Component) {
  _inherits(MenuButton, _Component);

  function MenuButton(props) {
    var _this;

    _classCallCheck(this, MenuButton);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(MenuButton).call(this, props));

    _this.toggleMenu = function (expand) {
      _this.expand = expand;
    };

    _this.groupControl = function (ref) {
      if (ref) {
        ref.children && ref.children[0] && ref.children[0].focus();
      } else {
        _this.menuBtnRef.current && _this.menuBtnRef.current.focus();
      }
    };

    _this.handleKeyDown = function (e) {
      if (!_this.expand) {
        var onEdit = _this.props.onEdit;
        var keyCode = e.keyCode;

        if (isClickedKey(keyCode)) {
          onEdit();
        }

        if (keyCode === KeyCode.DOWN) {
          _this.downBtnRef.current.click();
        }
      }
    };

    _this.handleSelect = function (e, item) {
      var keyCode = e.keyCode;
      var onSelect = _this.props.onSelect;
      var eventType = e.nativeEvent.type;

      if (eventType === 'click' || isClickedKey(keyCode)) {
        onSelect && onSelect(item);
      }
    };

    _this.expand = false;
    _this.menuBtnRef = React.createRef();
    _this.downBtnRef = React.createRef();
    return _this;
  }

  _createClass(MenuButton, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          itemList = _this$props.itemList,
          onEdit = _this$props.onEdit;
      return React.createElement("div", {
        ref: this.menuBtnRef,
        id: "menu-btn",
        className: "ffr-menu-button",
        role: "button",
        tabIndex: "0",
        onKeyDown: this.handleKeyDown
      }, React.createElement(Button, {
        tabIndex: "-1",
        className: "toggle-edit",
        glyph: "edit",
        onClick: onEdit
      }), React.createElement(Popover, {
        placement: "bottom-end",
        popperClassName: "ffr-menu-button-popper",
        toggleMenu: this.toggleMenu,
        body: React.createElement("div", {
          className: "ffr-menu-button-operate"
        }, React.createElement(ListGroup, {
          innerRef: this.groupControl
        }, itemList.map(function (item) {
          return React.createElement(ListGroup.Item, {
            key: item.id,
            onClick: function onClick(e) {
              _this2.handleSelect(e, item);
            },
            onKeyDown: function onKeyDown(e) {
              _this2.handleSelect(e, item);
            }
          }, React.createElement("div", {
            tabIndex: "0",
            className: "ffr-menu-btn-operate",
            role: "button"
          }, item.glyph ? React.createElement(Icon, {
            glyph: item.glyph,
            size: "s"
          }) : null, React.createElement("span", {
            className: "text"
          }, item.text)));
        }))),
        control: React.createElement(Button, {
          tabIndex: "-1",
          className: "toggle-drop",
          glyph: "slim-arrow-down",
          innerDomRef: this.downBtnRef
        })
      }));
    }
  }]);

  return MenuButton;
}(Component);

MenuButton.defaultProps = {
  onEdit: function onEdit() {},
  itemList: []
};
export { MenuButton as default };