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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _IconButton = _interopRequireDefault(require("../../IconButton"));

var _Tooltip = _interopRequireDefault(require("../../Tooltip"));

var _Text = _interopRequireDefault(require("../../Text"));

var _ChevronLeft = _interopRequireDefault(require("wix-ui-icons-common/ChevronLeft"));

var _ChevronRight = _interopRequireDefault(require("wix-ui-icons-common/ChevronRight"));

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

var _ModalPreviewLayoutSt = require("../ModalPreviewLayout.st.css");

var _classnames = _interopRequireDefault(require("classnames"));

var _tooltipProps, _iconButtonProps;

var tooltipProps = (_tooltipProps = {}, (0, _defineProperty2["default"])(_tooltipProps, _constants.arrowsDirection.rightArrow, {
  dataHook: _constants.dataHooks.nextNavigationButtonTooltip,
  placement: 'right'
}), (0, _defineProperty2["default"])(_tooltipProps, _constants.arrowsDirection.leftArrow, {
  dataHook: _constants.dataHooks.prevNavigationButtonTooltip,
  placement: 'left'
}), _tooltipProps);
var iconButtonProps = (_iconButtonProps = {}, (0, _defineProperty2["default"])(_iconButtonProps, _constants.arrowsDirection.leftArrow, {
  dataHook: _constants.dataHooks.modalPreviewLeftArrow,
  children: /*#__PURE__*/_react["default"].createElement(_ChevronLeft["default"], null)
}), (0, _defineProperty2["default"])(_iconButtonProps, _constants.arrowsDirection.rightArrow, {
  dataHook: _constants.dataHooks.modalPreviewRightArrow,
  children: /*#__PURE__*/_react["default"].createElement(_ChevronRight["default"], null)
}), _iconButtonProps);

var NavigationButton = function NavigationButton(_ref) {
  var direction = _ref.direction,
      tooltipText = _ref.tooltipText,
      onClick = _ref.onClick;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(_ModalPreviewLayoutSt.classes.navigationButton, _ModalPreviewLayoutSt.classes[direction])
  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
    disabled: !tooltipText,
    className: _ModalPreviewLayoutSt.classes.modalTooltip,
    appendTo: "scrollParent",
    content: /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      children: tooltipText
    })
  }, tooltipProps[direction]), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], (0, _extends2["default"])({
    as: "button",
    skin: "transparent",
    onClick: onClick
  }, iconButtonProps[direction]))));
};

var _default = NavigationButton;
exports["default"] = _default;