@shopgate/engage/product/components/RelationsSlider/RelationsSheet.js

Shopgate's ENGAGE library.

import React, { useState, useCallback, Fragment, memo } from 'react';
import PropTypes from 'prop-types';
import { useWidgetSettings, useTheme } from "../../../core";
import { SheetDrawer, I18n, Button } from "../../../components";
import { WIDGET_ID } from "./constants";
import { showMore, sheet } from "./style";
import connect from "./RelationsSheet.connector";

/**
 * Shows a Sheet Drawer with all related products.
 * @returns {JSX}
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const RelationsSheet = /*#__PURE__*/memo(({
  products: {
    products
  }
}) => {
  const [show, setShow] = useState(false);
  const {
    headline
  } = useWidgetSettings(WIDGET_ID);
  const {
    ProductGrid
  } = useTheme();
  const handleOpen = useCallback(event => {
    event.preventDefault();
    setShow(true);
  }, []);
  const handleClose = useCallback(() => {
    setShow(false);
  }, []);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Button, {
      onClick: handleOpen,
      flat: true,
      className: showMore,
      children: /*#__PURE__*/_jsx(I18n.Text, {
        string: "product.relations.showMore"
      })
    }), /*#__PURE__*/_jsx(SheetDrawer, {
      isOpen: show,
      title: headline,
      onClose: handleClose,
      children: /*#__PURE__*/_jsx("div", {
        className: sheet,
        children: /*#__PURE__*/_jsx(ProductGrid, {
          products: products,
          infiniteLoad: false
        })
      })
    })]
  });
});
RelationsSheet.defaultProps = {
  products: {
    products: [],
    productCount: 0
  }
};
export default connect(RelationsSheet);