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

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
import X from 'wix-ui-icons-common/X';
import Text from '../Text';
import IconButton from '../IconButton';
import Tooltip from '../Tooltip';
import { classes } from './ModalPreviewLayout.st.css';
import { dataHooks, modalPreviewIDs, arrowsDirection } from './constants';
import NavigationButton from './NavigationButton/NavigationButton';
import deprecationLog from '../utils/deprecationLog';
/** This is a fullscreen modal to present a document to the user overlaying the entire view port */

var ModalPreviewLayout = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(ModalPreviewLayout, _React$PureComponent);

  var _super = _createSuper(ModalPreviewLayout);

  function ModalPreviewLayout(props) {
    var _this;

    _classCallCheck(this, ModalPreviewLayout);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "_onRightNavigationClick", function () {
      var childIndexDisplayed = _this.state.childIndexDisplayed;
      var onClick = _this.props.nextButtonProps.onClick;
      var newChildIndexDisplayed = childIndexDisplayed + 1;

      _this.setState({
        childIndexDisplayed: newChildIndexDisplayed
      }, function () {
        onClick && onClick(newChildIndexDisplayed);
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_onLeftNavigationClick", function () {
      var childIndexDisplayed = _this.state.childIndexDisplayed;
      var onClick = _this.props.prevButtonProps.onClick;
      var newChildIndexDisplayed = childIndexDisplayed - 1;

      _this.setState({
        childIndexDisplayed: newChildIndexDisplayed
      }, function () {
        onClick && onClick(newChildIndexDisplayed);
      });
    });

    _this.state = {
      childIndexDisplayed: 0
    };
    deprecationLog('nextButtonTooltipText and prevButtonTooltipText props are deprecated and will be removed as part of the next major version, please use nextButtonProps and prevButtonProps.');
    return _this;
  }

  _createClass(ModalPreviewLayout, [{
    key: "_shouldClose",
    value: function _shouldClose(id) {
      return this.props.shouldCloseOnOverlayClick && [modalPreviewIDs.overlay, modalPreviewIDs.innerOverlay].includes(id);
    }
  }, {
    key: "_onOverlayClick",
    value: function _onOverlayClick(onClose) {
      var _this2 = this;

      return function (_ref) {
        var id = _ref.target.id;

        if (_this2._shouldClose(id) && typeof onClose === 'function') {
          onClose();
        }
      };
    }
  }, {
    key: "_renderNavigationButtons",
    value: function _renderNavigationButtons(hasLeft, hasRight) {
      var _this$props = this.props,
          prevButtonProps = _this$props.prevButtonProps,
          nextButtonProps = _this$props.nextButtonProps;
      /* will be deprecated in next major */

      var _this$props2 = this.props,
          prevButtonTooltipText = _this$props2.prevButtonTooltipText,
          nextButtonTooltipText = _this$props2.nextButtonTooltipText;
      return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeft && /*#__PURE__*/React.createElement(NavigationButton, {
        tooltipText: prevButtonProps.tooltipText || prevButtonTooltipText,
        direction: arrowsDirection.leftArrow,
        onClick: this._onLeftNavigationClick
      }), hasRight && /*#__PURE__*/React.createElement(NavigationButton, {
        tooltipText: nextButtonProps.tooltipText || nextButtonTooltipText,
        direction: arrowsDirection.rightArrow,
        onClick: this._onRightNavigationClick
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          dataHook = _this$props3.dataHook,
          actions = _this$props3.actions,
          title = _this$props3.title,
          children = _this$props3.children,
          onClose = _this$props3.onClose,
          closeButtonTooltipText = _this$props3.closeButtonTooltipText;
      var childIndexDisplayed = this.state.childIndexDisplayed;
      var childrenArr = React.Children.toArray(children);
      var hasLeft = childIndexDisplayed > 0;
      var hasRight = childIndexDisplayed < childrenArr.length - 1;
      return /*#__PURE__*/React.createElement("div", {
        id: modalPreviewIDs.overlay,
        "data-hook": dataHook,
        className: classes.root,
        onClick: this._onOverlayClick(onClose)
      }, /*#__PURE__*/React.createElement("div", {
        className: classes.header
      }, /*#__PURE__*/React.createElement("div", {
        "data-hook": dataHooks.modalPreviewTitle,
        className: classes.title
      }, /*#__PURE__*/React.createElement(Text, {
        light: true,
        ellipsis: true
      }, title)), /*#__PURE__*/React.createElement("div", {
        className: classes.actions,
        "data-hook": dataHooks.modalPreviewActions
      }, actions), /*#__PURE__*/React.createElement("div", {
        className: classes.closeButton
      }, /*#__PURE__*/React.createElement(Tooltip, {
        disabled: !closeButtonTooltipText,
        className: classes.modalTooltip,
        dataHook: dataHooks.closeButtonTooltip,
        appendTo: "scrollParent",
        content: /*#__PURE__*/React.createElement(Text, null, closeButtonTooltipText),
        placement: "bottom"
      }, /*#__PURE__*/React.createElement(IconButton, {
        as: "button",
        onClick: onClose,
        priority: "secondary",
        skin: "transparent",
        dataHook: dataHooks.modalPreviewCloseButton
      }, /*#__PURE__*/React.createElement(X, null))))), /*#__PURE__*/React.createElement("div", {
        id: modalPreviewIDs.innerOverlay,
        "data-hook": dataHooks.innerOverlay,
        className: classes.innerOverlay
      }, /*#__PURE__*/React.createElement("div", {
        "data-hook": dataHooks.modalPreviewContent,
        className: classes.content,
        "data-index": childIndexDisplayed
      }, childrenArr[childIndexDisplayed]), this._renderNavigationButtons(hasLeft, hasRight)));
    }
  }]);

  return ModalPreviewLayout;
}(React.PureComponent);

_defineProperty(ModalPreviewLayout, "displayName", 'ModalPreviewLayout');

_defineProperty(ModalPreviewLayout, "propTypes", {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** component to be displayed in header strip to preform actions relevant to the displayed content */
  actions: PropTypes.node,

  /** title text to be displayed in the header strip */
  title: PropTypes.string,

  /** modal content displayed mid-screen*/
  children: PropTypes.node.isRequired,

  /** callback for when the modal is closed */
  onClose: PropTypes.func.isRequired,

  /** boolean to determine whether closing the overlay on click */
  shouldCloseOnOverlayClick: PropTypes.bool,

  /** Tooltip close button text */
  closeButtonTooltipText: PropTypes.node,

  /** this prop is deprecated and should not be used
   * @deprecated
   */
  prevButtonTooltipText: PropTypes.string,

  /** this prop is deprecated and should not be used
   * @deprecated
   */
  nextButtonTooltipText: PropTypes.string,

  /** Previous button props
   * ##### onClick signature:
   * function(childIndexDisplayed: number) => void
   * * `childIndexDisplayed`: the index of the child component displayed.
   */
  prevButtonProps: PropTypes.shape({
    onClick: PropTypes.func,
    tooltipText: PropTypes.node
  }),

  /** Next button props
   * ##### onClick signature:
   * function(childIndexDisplayed: number) => void
   * * `childIndexDisplayed`: the index of the child component displayed.
   */
  nextButtonProps: PropTypes.shape({
    onClick: PropTypes.func,
    tooltipText: PropTypes.node
  })
});

_defineProperty(ModalPreviewLayout, "defaultProps", {
  shouldCloseOnOverlayClick: true,
  nextButtonProps: {},
  prevButtonProps: {}
});

export default ModalPreviewLayout;