function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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 from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../icon';
import { BUILDER_HEADER, BUILDER_HEADER_NAV, BUILDER_HEADER_TOOLBAR, BUILDER_HEADER_MISC } from '../../utilities/constants';
var propTypes = {
  /**
   * **Assistive text for accessibility**
   * This object is merged with the default props object on every render.
   * * `backIcon`: Used for the back icon.
   * * `helpIcon`: Used for the help icon.
   * * `icon`: Used for the main icon next to the header title.
   * * _Tested with snapshot testing._
   */
  assistiveText: PropTypes.shape({
    backIcon: PropTypes.string,
    helpIcon: PropTypes.string,
    icon: PropTypes.string
  }),

  /**
   * Provide children of the types `<BuilderHeaderNav />`, `<BuilderHeaderToolbar />`, or `<BuilderHeaderMisc />` to define the structure of the header.
   * ```
   * <BuilderHeader>
   *   <BuilderHeaderNav />
   *   <BuilderHeaderToolbar />
   *   <BuilderHeaderMisc />
   * </BuilderHeader>
   * ```
   */
  children: PropTypes.node,

  /**
   * CSS classes to be added to tag with `.slds-builder-header_container`. Uses `classNames` [API](https://github.com/JedWatson/classnames). _Tested with snapshot testing._
   */
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),

  /**
   * Event Callbacks
   * * `onClickBack`: Called when the Back link is clicked.
   * * `onClickHelp`: Called when the Help link is clicked.
   * _Tested with Mocha testing._
   */
  events: PropTypes.shape({
    onClickBack: PropTypes.func,
    onClickHelp: PropTypes.func
  }),

  /**
   * Category of the title icon from [lightningdesignsystem.com/icons/](https://www.lightningdesignsystem.com/icons/)
   */
  iconCategory: PropTypes.string,

  /**
   * CSS classes that are applied to the title icon.
   */
  iconClassName: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),

  /**
   * Name of the title icon. Visit <a href='http://www.lightningdesignsystem.com/resources/icons'>Lightning Design System Icons</a> to reference icon names.
   */
  iconName: PropTypes.string,

  /**
   * Path to the title icon. This will override any global icon settings.
   */
  iconPath: PropTypes.string,

  /**
   * **Text labels for internationalization**
   * This object is merged with the default props object on every render.
   * * `back`: The label for the Back link.
   * * `help`: The label for the Help link.
   * * `pageType`: The label that describes the page type.
   * * `title`: The label for the page title.
   * _Tested with snapshot testing._
   */
  labels: PropTypes.shape({
    back: PropTypes.string,
    help: PropTypes.string,
    pageType: PropTypes.string,
    title: PropTypes.string
  }),

  /**
   * Custom styles applied to the `.slds-builder-header_container` element.
   */
  style: PropTypes.object
};
var defaultProps = {
  assistiveText: {
    backIcon: 'Back',
    helpIcon: 'Help',
    icon: 'Builder'
  },
  iconCategory: 'utility',
  iconName: 'builder',
  labels: {
    back: 'Back',
    help: 'Help',
    pageType: 'Page Type',
    title: 'App Name'
  }
};
/**
 * Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name.
 */

var BuilderHeader = function BuilderHeader(props) {
  var assistiveText = _objectSpread(_objectSpread({}, defaultProps.assistiveText), props.assistiveText);

  var events = _objectSpread(_objectSpread({}, {}), props.events);

  var labels = _objectSpread(_objectSpread({}, defaultProps.labels), props.labels);

  var nav;
  var toolbar;
  var misc = [];
  React.Children.forEach(props.children, function (child) {
    if (child) {
      switch (child.type.displayName) {
        case BUILDER_HEADER_NAV:
          nav = child;
          break;

        case BUILDER_HEADER_TOOLBAR:
          toolbar = child;
          break;

        case BUILDER_HEADER_MISC:
          // eslint-disable-next-line fp/no-mutating-methods
          misc.push(child);
          break;

        default:
      }
    }
  });
  var iconCategory;
  var iconName;
  var iconPath;

  if (props.iconPath) {
    iconPath = props.iconPath;
  } else {
    iconCategory = props.iconCategory;
    iconName = props.iconName;
  }

  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      height: '100px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('slds-builder-header_container', props.className),
    style: props.style
  }, /*#__PURE__*/React.createElement("header", {
    className: "slds-builder-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "slds-builder-header__item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "slds-builder-header__item-label slds-media slds-media_center"
  }, /*#__PURE__*/React.createElement("div", {
    className: "slds-media__figure"
  }, /*#__PURE__*/React.createElement(Icon, {
    assistiveText: {
      label: assistiveText.icon
    },
    category: iconCategory,
    containerClassName: classNames('slds-icon_container', 'slds-icon-utility-builder', 'slds-current-color', props.iconClassName),
    name: iconName,
    path: iconPath,
    size: "x-small"
  })), /*#__PURE__*/React.createElement("div", {
    className: "slds-media__body"
  }, labels.title))), nav, misc.length > 0 ? misc : /*#__PURE__*/React.createElement("div", {
    className: "slds-builder-header__item slds-has-flexi-truncate"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "slds-builder-header__item-label"
  }, /*#__PURE__*/React.createElement("span", {
    className: "slds-truncate",
    title: labels.pageType
  }, labels.pageType))), /*#__PURE__*/React.createElement("div", {
    className: "slds-builder-header__item slds-builder-header__utilities"
  }, /*#__PURE__*/React.createElement("div", {
    className: "slds-builder-header__utilities-item"
  }, /*#__PURE__*/React.createElement("a", {
    href: "javascript:void(0);",
    className: "slds-builder-header__item-action slds-media slds-media_center",
    onClick: events.onClickBack
  }, /*#__PURE__*/React.createElement("div", {
    className: "slds-media__figure"
  }, /*#__PURE__*/React.createElement(Icon, {
    assistiveText: {
      label: assistiveText.backIcon
    },
    category: "utility",
    containerClassName: "slds-icon_container slds-icon-utility-settings slds-current-color",
    name: "back",
    size: "x-small"
  })), /*#__PURE__*/React.createElement("div", {
    className: "slds-media__body"
  }, labels.back))), /*#__PURE__*/React.createElement("div", {
    className: "slds-builder-header__utilities-item"
  }, /*#__PURE__*/React.createElement("a", {
    href: "javascript:void(0);",
    className: "slds-builder-header__item-action slds-media slds-media_center",
    onClick: events.onClickHelp
  }, /*#__PURE__*/React.createElement("div", {
    className: "slds-media__figure"
  }, /*#__PURE__*/React.createElement(Icon, {
    assistiveText: {
      label: assistiveText.helpIcon
    },
    category: "utility",
    containerClassName: "slds-icon_container slds-icon-utility-settings slds-current-color",
    name: "help",
    size: "x-small"
  })), /*#__PURE__*/React.createElement("div", {
    className: "slds-media__body"
  }, labels.help))))), toolbar));
};

BuilderHeader.displayName = BUILDER_HEADER;
BuilderHeader.propTypes = propTypes;
BuilderHeader.defaultProps = defaultProps;
export default BuilderHeader;
//# sourceMappingURL=index.js.map