wix-style-react/dist/es/src/ComposerHeader/ComposerHeader.js

wix-style-react

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "dataHook"],
    _excluded2 = ["children", "dataHook", "size", "dropShadow", "backButtonValue", "onBackClick"];

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; }

import React from 'react';
import PropTypes from 'prop-types';
import ArrowLeft from 'wix-ui-icons-common/ArrowLeft';
import { st, classes } from './ComposerHeader.st.css';
import TextButton from '../TextButton';
import Text from '../Text/Text';
import { dataHooks } from './constants';

var ComposerHeaderActions = function ComposerHeaderActions() {
  return '';
};

var ComposerHeaderMainActions = function ComposerHeaderMainActions() {
  return '';
};

var ComposerHeaderSaveStatus = function ComposerHeaderSaveStatus(_ref) {
  var saveStatusValue = _ref.saveStatusValue,
      saveStatusError = _ref.saveStatusError,
      dataHook = _ref.dataHook,
      size = _ref.size;
  return /*#__PURE__*/React.createElement(Text, {
    dataHook: dataHook || dataHooks.saveStatus,
    className: classes.saveStatus,
    secondary: true,
    light: true,
    size: size,
    skin: saveStatusError ? 'error' : 'standard',
    tagName: "span",
    weight: "thin"
  }, saveStatusValue);
};

ComposerHeaderActions.displayName = 'Actions';
ComposerHeaderMainActions.displayName = 'MainActions';
ComposerHeaderSaveStatus.displayName = 'SaveStatus';
ComposerHeaderActions.defaultProps = {
  justifyContent: 'flex-start'
};

var filterChildren = function filterChildren(_ref2) {
  var children = _ref2.children,
      displayName = _ref2.displayName;
  var actions = React.Children.map(children, function (child) {
    return child;
  });
  return actions && actions.filter(function (child) {
    return /*#__PURE__*/React.isValidElement(child) && child.type.displayName === displayName;
  });
};

var renderSingleAction = function renderSingleAction(_ref3) {
  var props = _ref3.props,
      index = _ref3.index;

  var children = props.children,
      dataHook = props.dataHook,
      rest = _objectWithoutProperties(props, _excluded);

  return children && /*#__PURE__*/React.createElement("div", {
    key: index,
    "data-hook": dataHook,
    style: _objectSpread(_objectSpread({}, rest), {}, {
      justifyContent: rest.justifyContent
    }),
    className: classes.actions
  }, children);
};

var BackButton = /*#__PURE__*/React.memo(function (_ref4) {
  var backButtonValue = _ref4.backButtonValue,
      onBackClick = _ref4.onBackClick,
      size = _ref4.size;
  return backButtonValue && /*#__PURE__*/React.createElement(TextButton, {
    skin: "dark",
    prefixIcon: /*#__PURE__*/React.createElement(ArrowLeft, null),
    dataHook: dataHooks.backButton,
    className: classes.backButton,
    size: size,
    onClick: onBackClick
  }, backButtonValue);
});
var Actions = /*#__PURE__*/React.memo(function (_ref5) {
  var children = _ref5.children;
  var actions = filterChildren({
    children: children,
    displayName: 'Actions'
  });
  return actions && /*#__PURE__*/React.createElement("div", {
    className: classes.container
  }, actions.map(function (_ref6, index) {
    var props = _ref6.props;
    return renderSingleAction({
      props: props,
      index: index
    });
  }));
});
var MainActions = /*#__PURE__*/React.memo(function (_ref7) {
  var children = _ref7.children;
  var mainActions = filterChildren({
    children: children,
    displayName: 'MainActions'
  });
  /**
   * We only support one type of main action.
   * It will be always the first one the in list.
   *  */

  var exists = mainActions && mainActions[0];
  return exists && /*#__PURE__*/React.createElement("div", {
    className: classes.mainActions,
    "data-hook": mainActions[0].props.dataHook || dataHooks.mainAction
  }, mainActions[0] && mainActions[0].props.children);
});

var shouldRenderDivider = function shouldRenderDivider(_ref8) {
  var children = _ref8.children,
      divider = _ref8.divider;
  var actions = filterChildren({
    children: children,
    displayName: 'Actions'
  });
  var sides = {
    left: {
      item: 0,
      justifyContent: 'flex-start'
    },
    right: {
      item: actions && actions.length - 1,
      justifyContent: 'flex-end'
    }
  };

  if (actions && actions.length === 1) {
    return actions[0].props.justifyContent === sides[divider].justifyContent;
  }

  if (actions && actions.length > 1) {
    return actions[sides[divider].item].props.justifyContent === sides[divider].justifyContent;
  }

  return;
};

var LeftDivider = /*#__PURE__*/React.memo(function (_ref9) {
  var backButton = _ref9.backButton,
      children = _ref9.children;
  var shouldRender = backButton && shouldRenderDivider({
    children: children,
    divider: 'left'
  });
  return shouldRender && /*#__PURE__*/React.createElement("div", {
    className: classes.divider,
    "data-hook": dataHooks.leftDivider
  });
});
var RightDivider = /*#__PURE__*/React.memo(function (_ref10) {
  var children = _ref10.children;
  var mainActions = filterChildren({
    children: children,
    displayName: 'MainActions'
  });
  var shouldRender = mainActions && mainActions[0] && shouldRenderDivider({
    children: children,
    divider: 'right'
  });
  return shouldRender && /*#__PURE__*/React.createElement("div", {
    className: classes.divider,
    "data-hook": dataHooks.rightDivider
  });
});
/** ComposerHeader */

var ComposerHeader = function ComposerHeader(_ref11) {
  var children = _ref11.children,
      dataHook = _ref11.dataHook,
      size = _ref11.size,
      dropShadow = _ref11.dropShadow,
      backButtonValue = _ref11.backButtonValue,
      onBackClick = _ref11.onBackClick,
      rest = _objectWithoutProperties(_ref11, _excluded2);

  return /*#__PURE__*/React.createElement("div", {
    "data-hook": dataHook,
    className: st(classes.root, {
      size: size,
      dropShadow: dropShadow
    })
  }, /*#__PURE__*/React.createElement(BackButton, {
    size: size,
    backButtonValue: backButtonValue,
    onBackClick: onBackClick
  }), /*#__PURE__*/React.createElement(LeftDivider, {
    backButton: backButtonValue,
    children: children
  }), /*#__PURE__*/React.createElement(Actions, null, children), /*#__PURE__*/React.createElement(RightDivider, {
    children: children
  }), /*#__PURE__*/React.createElement(MainActions, null, children));
};

ComposerHeader.propTypes = {
  /** hook for testing purposes */
  dataHook: PropTypes.string,

  /** back button value */
  backButtonValue: PropTypes.node,

  /** back button callback function  */
  onBackClick: PropTypes.func,

  /** composer header size */
  size: PropTypes.oneOf(['small', 'medium']),

  /** shadow effect */
  dropShadow: PropTypes.bool
};
ComposerHeader.defaultProps = {
  size: 'medium'
};
ComposerHeader.displayName = 'ComposerHeader';
ComposerHeader.Actions = ComposerHeaderActions;
ComposerHeader.MainActions = ComposerHeaderMainActions;
ComposerHeader.SaveStatus = ComposerHeaderSaveStatus;
export default ComposerHeader;