@nomios/web-uikit/dist/components/split-button/SplitButton.js

Nomios' living web UIKit

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import memoizeOne from 'memoize-one';
import Dropdown from '../dropdown';
import { ActionsIcon } from '../icon';
import styles from './SplitButton.css';
const getOptionsAndMainAction = memoizeOne((actions, mainActionIdProp) => actions.reduce((acc, action) => {
  const mainActionId = mainActionIdProp ? mainActionIdProp : actions[0].id;

  if (action.id === mainActionId) {
    acc.mainAction = action;
  } else {
    acc.options.push({
      value: action.id,
      ...action
    });
  }

  return acc;
}, {
  options: []
}));

class SplitButton extends Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      mainAction: undefined,
      options: undefined,
      menuIsOpen: false
    });

    _defineProperty(this, "customTrigger", () => {
      const {
        variant
      } = this.props;
      const {
        menuIsOpen,
        mainAction
      } = this.state;
      const triggerButtonClasses = classNames(styles.button, styles[variant], styles.triggerButton, menuIsOpen && styles.menuIsOpen);
      return React.createElement("div", {
        className: styles.container
      }, React.createElement("button", {
        disabled: mainAction.disabled,
        className: classNames(styles.button, styles[variant]),
        onClick: this.handleMainActionClick
      }, mainAction.icon, mainAction.text && React.createElement("span", null, mainAction.text)), React.createElement("button", {
        className: triggerButtonClasses,
        onClick: this.handleToggleMenu
      }, React.createElement(ActionsIcon, null)));
    });

    _defineProperty(this, "customOption", ({
      data
    }) => {
      const {
        variant
      } = this.props;
      return React.createElement("button", {
        className: classNames(styles.button, styles[variant]),
        disabled: data.disabled
      }, data.icon, data.text && React.createElement("span", null, data.text));
    });

    _defineProperty(this, "handleToggleMenu", () => {
      this.setState(({
        menuIsOpen
      }) => ({
        menuIsOpen: !menuIsOpen
      }));
    });

    _defineProperty(this, "handleDropdownBlur", () => {
      this.resetMenuState();
    });

    _defineProperty(this, "handleDropdownChange", action => {
      this.handleActionClick(action);
      this.resetMenuState();
    });

    _defineProperty(this, "handleMainActionClick", () => {
      this.handleActionClick(this.state.mainAction);
    });
  }

  static getDerivedStateFromProps(props) {
    return { ...getOptionsAndMainAction(props.actions, props.mainActionId)
    };
  }

  render() {
    const {
      menuIsOpen,
      options
    } = this.state;
    const {
      variant,
      actions,
      mainActionId,
      onActionClick,
      ...rest
    } = this.props;
    return React.createElement(Dropdown, Object.assign({
      menuIsOpen: menuIsOpen,
      menuClassName: styles.menu,
      options: options,
      onBlur: this.handleDropdownBlur,
      renderOption: this.customOption,
      renderTrigger: this.customTrigger,
      onChange: this.handleDropdownChange
    }, rest));
  }

  resetMenuState() {
    this.setState({
      menuIsOpen: false
    });
  }

  handleActionClick({
    id,
    onClick
  }) {
    const {
      onActionClick
    } = this.props;

    if (onClick) {
      onClick(id);
    } else {
      onActionClick && onActionClick(id);
    }
  }

}

SplitButton.propTypes = {
  variant: PropTypes.oneOf(['primary', 'negative']),
  actions: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    icon: PropTypes.element,
    onClick: PropTypes.func,
    text: PropTypes.string
  })).isRequired,
  mainActionId: PropTypes.string,
  onActionClick: PropTypes.func
};
SplitButton.defaultProps = {
  variant: 'primary'
};
export default SplitButton;