"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _menuDropdown = require("../menu-dropdown");

var _menuDropdown2 = _interopRequireDefault(_menuDropdown);

var _dropdownTrigger = require("./private/dropdown-trigger");

var _dropdownTrigger2 = _interopRequireDefault(_dropdownTrigger);

var _constants = require("../../utilities/constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

/**
 * A helper component that renders a MenuDropdown for the user profile.
 */
var GlobalHeaderProfile = function GlobalHeaderProfile(props) {
  var avatar = props.avatar,
      buttonClassName = props.buttonClassName,
      children = props.children,
      rest = _objectWithoutProperties(props, ["avatar", "buttonClassName", "children"]);
  /* eslint-disable max-len */


  var defaultAvatar = 'data:image/jpeg;base64, ';
  /* eslint-enable max-len */

  return (// `slds-m-right--x-small` is present to prevent dropdown menu with a
    // "top right" nubbin from jumping offscreen
    _react2.default.createElement(_menuDropdown2.default, _extends({
      menuPosition: "relative",
      nubbinPosition: "top right"
    }, rest), _react2.default.createElement(_dropdownTrigger2.default, {
      avatar: avatar || defaultAvatar,
      className: (0, _classnames2.default)('slds-m-left--x-small', buttonClassName)
    }), children)
  );
}; // ### Display Name
// Always use the canonical component name (set in the core) as the React
// display name.


GlobalHeaderProfile.displayName = _constants.GLOBAL_HEADER_PROFILE; // ### Prop Types

GlobalHeaderProfile.propTypes = {
  /**
   * Aligns the right or left side of the menu with the respective side of the trigger. This is not intended for use with `nubbinPosition`.
   */
  align: _propTypes2.default.oneOf(['left', 'right']),

  /**
   * By default, any children passed into this component will be rendered inside the dropdown menu. If you need custom content and a list, import 'design-system-react/components/utilities/menu-list/list' and pass in `<List>`.
   *
   * ```
   * <Dropdown>
   *   <div>Look ma! This is Custom Content.</div>
   *   <List options={[myArray]}/>
   * </Dropdown>
   * ```
   */
  children: _propTypes2.default.node,

  /**
   * Extra classnames to apply to the dropdown menu.
   */
  className: _propTypes2.default.string,

  /**
   * An image URL or avatar node to display for the user profile.
   */
  avatar: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),

  /**
   * CSS classes to be added to `li` element.
   */
  buttonClassName: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object, _propTypes2.default.string]),

  /**
   * A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button.
   */
  id: _propTypes2.default.string,

  /**
   * Positions dropdown menu with a nubbin--that is the arrow notch. The placement options correspond to the placement of the nubbin. This is implemeted with CSS classes and is best used with a `Button` with "icon container" styling. Dropdown menus will still be contained to the closest scrolling parent.
   */
  nubbinPosition: _propTypes2.default.oneOf(['top left', 'top', 'top right', 'bottom left', 'bottom', 'bottom right']),

  /**
   *  Offset adds pixels to the absolutely positioned dropdown menu in the format: ([vertical]px [horizontal]px).
   */
  offset: _propTypes2.default.string,

  /**
   * Triggered when an item in the menu is clicked.
   */
  onSelect: _propTypes2.default.func,

  /**
   * An array of menu item.
   */
  options: _propTypes2.default.array
}; // ### Default Props

GlobalHeaderProfile.defaultProps = {
  align: 'right',
  buttonVariant: 'icon',
  iconVariant: 'container',
  nubbinPosition: 'top right',
  // TODO: Use design tokens to remove "magic numbers" that center nubbin under button
  offset: '-12px -18px'
};
exports.default = GlobalHeaderProfile;