@shopgate/engage/page/widgets/Button/Button.js

Shopgate's ENGAGE library.

import React, { useCallback } from 'react';
import { Button } from '@shopgate/engage/components';
import { useWidget } from '@shopgate/engage/page/hooks';
import { makeStyles } from '@shopgate/engage/styles';
import { useNavigation } from '@shopgate/engage/core';
import { jsx as _jsx } from "react/jsx-runtime";
const useStyles = makeStyles()({
  root: {
    display: 'flex',
    justifyContent: 'center'
  },
  text: {
    whiteSpace: 'nowrap'
  }
});

/**
 * The ButtonWidget is used to display a button.
 * @returns {JSX.Element}
 */
const ButtonWidget = () => {
  const {
    classes
  } = useStyles();
  const {
    config,
    isPreview
  } = useWidget();
  const {
    text,
    link
  } = config;
  const {
    push
  } = useNavigation();
  const handleClick = useCallback(e => {
    if (!link) return;
    if (!isPreview) {
      e.stopPropagation();
    }
    push({
      pathname: link
    });
  }, [link, isPreview, push]);
  if (!text) return null;
  return /*#__PURE__*/_jsx("div", {
    className: classes.root,
    children: /*#__PURE__*/_jsx(Button, {
      type: "secondary",
      onClick: handleClick,
      wrapContent: false,
      children: /*#__PURE__*/_jsx("span", {
        className: classes.text,
        children: text
      })
    })
  });
};
export default ButtonWidget;