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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

var _tooltipProps, _iconButtonProps;

import React from 'react';
import IconButton from '../../IconButton';
import Tooltip from '../../Tooltip';
import Text from '../../Text';
import ChevronLeft from 'wix-ui-icons-common/ChevronLeft';
import ChevronRight from 'wix-ui-icons-common/ChevronRight';
import { arrowsDirection, dataHooks } from '../constants';
import { classes } from '../ModalPreviewLayout.st.css';
import classNames from 'classnames';
var tooltipProps = (_tooltipProps = {}, _defineProperty(_tooltipProps, arrowsDirection.rightArrow, {
  dataHook: dataHooks.nextNavigationButtonTooltip,
  placement: 'right'
}), _defineProperty(_tooltipProps, arrowsDirection.leftArrow, {
  dataHook: dataHooks.prevNavigationButtonTooltip,
  placement: 'left'
}), _tooltipProps);
var iconButtonProps = (_iconButtonProps = {}, _defineProperty(_iconButtonProps, arrowsDirection.leftArrow, {
  dataHook: dataHooks.modalPreviewLeftArrow,
  children: /*#__PURE__*/React.createElement(ChevronLeft, null)
}), _defineProperty(_iconButtonProps, arrowsDirection.rightArrow, {
  dataHook: dataHooks.modalPreviewRightArrow,
  children: /*#__PURE__*/React.createElement(ChevronRight, null)
}), _iconButtonProps);

var NavigationButton = function NavigationButton(_ref) {
  var direction = _ref.direction,
      tooltipText = _ref.tooltipText,
      onClick = _ref.onClick;
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(classes.navigationButton, classes[direction])
  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
    disabled: !tooltipText,
    className: classes.modalTooltip,
    appendTo: "scrollParent",
    content: /*#__PURE__*/React.createElement(Text, {
      children: tooltipText
    })
  }, tooltipProps[direction]), /*#__PURE__*/React.createElement(IconButton, _extends({
    as: "button",
    skin: "transparent",
    onClick: onClick
  }, iconButtonProps[direction]))));
};

export default NavigationButton;