@pantheon-systems/design-toolkit-react/dist/Buttons/Split_DEPRECATED.js

Pantheon's React Design Toolkit

import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import DropdownMenu from '../Menus/DropdownMenu_DEPRECATED.js';
import { Menu, MenuItem, MenuLink } from '@reach/menu-button';
import DropdownButton from './DropdownButton_DEPRECATED.js';
import { jsxs, jsx } from 'react/jsx-runtime';

var ButtonSplit = function ButtonSplit(_ref) {
  var primaryAction = _ref.primaryAction,
    type = _ref.type,
    menuItems = _ref.menuItems,
    menuAriaLabel = _ref.menuAriaLabel;
  var actionTypes = {
    link: 'LINK',
    button: 'BUTTON'
  };
  var typeStyle = "button-split button-split--".concat(type);
  var classes = 'button-split--action';
  var pendoTrack = function pendoTrack(name, data) {
    // only operate if the Pendo object/library is loaded
    /* eslint-disable no-undef */
    if (typeof pendo !== 'undefined' && pendo.isReady && pendo.isReady()) {
      return pendo.track(name, data);
    }
    /* eslint-enable no-undef */
    setTimeout(function () {
      pendoTrack(name, data);
    }, 500);
    return null;
  };

  // handles the click by when a callback is passed in, by combining the callback with with the pendo click tracking for both primary actions and menu items.
  var handleClick = function handleClick(label, itemType) {
    var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
    return function () {
      pendoTrack('Button – split', {
        designToolkit: true,
        pattern: 'button - split',
        action: itemType,
        element: label,
        url: window.location.href
      });
      if (callback) {
        callback();
      }
    };
  };

  // renders the primary action item, it returns either a button, anchor, or Link.
  var renderPrimaryAction = function renderPrimaryAction(_ref2) {
    var _ref2$asLink = _ref2.asLink,
      asLink = _ref2$asLink === void 0 ? false : _ref2$asLink,
      _ref2$callback = _ref2.callback,
      callback = _ref2$callback === void 0 ? null : _ref2$callback,
      _ref2$href = _ref2.href,
      href = _ref2$href === void 0 ? null : _ref2$href,
      label = _ref2.label;
    var actionType;
    if (asLink && href) {
      actionType = actionTypes.link;
    } else if (callback) {
      actionType = actionTypes.button;
    }
    switch (actionType) {
      case actionTypes.link:
        return /*#__PURE__*/jsx(Link, {
          className: classes,
          onClick: handleClick(label, 'primary action'),
          to: href,
          children: label
        });
      case actionTypes.button:
        return /*#__PURE__*/jsx("button", {
          className: classes,
          onClick: handleClick(label, 'primary action', callback),
          type: "button",
          children: label
        });
      default:
        return /*#__PURE__*/jsx("a", {
          className: classes,
          href: href,
          onClick: handleClick(label, 'primary action'),
          children: label
        });
    }
  };

  // renders the menu items
  var renderMenuItem = function renderMenuItem(_ref3) {
    var _ref3$callback = _ref3.callback,
      callback = _ref3$callback === void 0 ? null : _ref3$callback,
      _ref3$href = _ref3.href,
      href = _ref3$href === void 0 ? null : _ref3$href,
      label = _ref3.label;
    if (callback) {
      return /*#__PURE__*/jsx(MenuItem, {
        onSelect: handleClick(label, 'menu item', callback),
        children: label
      }, label);
    }
    return /*#__PURE__*/jsx(MenuLink, {
      href: href,
      onClick: handleClick(label, 'menu item'),
      children: label
    }, label);
  };
  return /*#__PURE__*/jsxs("span", {
    className: typeStyle,
    children: [renderPrimaryAction(primaryAction), /*#__PURE__*/jsxs(Menu, {
      children: [/*#__PURE__*/jsx(DropdownButton, {
        "aria-label": menuAriaLabel,
        className: "button-split--trigger",
        onClick: handleClick(primaryAction.label, 'menu'),
        type: "subtle"
      }), /*#__PURE__*/jsxs(DropdownMenu, {
        size: "small",
        children: [renderMenuItem(primaryAction), menuItems.map(function (item) {
          return renderMenuItem(item);
        })]
      })]
    })]
  });
};
ButtonSplit.defaultProps = {
  menuAriaLabel: 'Toggle menu',
  type: 'secondary'
};
ButtonSplit.propTypes = {
  /**
   * Accessibility text for the secondary action menu trigger
   */
  menuAriaLabel: PropTypes.string,
  /**
   * Array of objects describing each secondary action
   */
  menuItems: PropTypes.arrayOf(PropTypes.shape({
    callback: PropTypes.func,
    href: PropTypes.string,
    label: PropTypes.string.isRequired
  })).isRequired,
  /**
   * Object describing the primary action
   */
  primaryAction: PropTypes.shape({
    asLink: PropTypes.bool,
    callback: PropTypes.func,
    href: PropTypes.string,
    label: PropTypes.string.isRequired
  }).isRequired,
  /**
   * The style type of button
   */
  type: PropTypes.oneOf(['primary', 'secondary'])
};
var ButtonSplit$1 = ButtonSplit;

export { ButtonSplit$1 as default };
//# sourceMappingURL=Split_DEPRECATED.js.map