@shopgate/pwa-common/components/HtmlSanitizer/index.js

Common library for the Shopgate Connect PWA.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { embeddedMedia } from '@shopgate/pwa-common/collections';
import EmbeddedMedia from "../EmbeddedMedia";
import parseHTML from "../../helpers/html/parseHTML";
import connect from "./connector";

/**
 * HtmlSanitizer component.
 */
import { jsx as _jsx } from "react/jsx-runtime";
let HtmlSanitizer = /*#__PURE__*/function (_Component) {
  /**
   * @param {Object} props The component props.
   */
  function HtmlSanitizer(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    /**
     * If the user tapped a link element, prevent the default behavior.
     * @param {Object} event The touchstart event.
     */
    _this.handleClick = event => {
      const linkTag = event.target.closest('a');
      if (!linkTag) return;
      const href = linkTag.getAttribute('href');
      const target = linkTag.getAttribute('target') || '';
      if (!href) return;
      event.preventDefault();
      if (_this.props.settings.handleClick) {
        _this.props.settings.handleClick(href, target);
      } else {
        _this.props.navigate(href, target);
      }
    };
    _this.htmlContainer = /*#__PURE__*/React.createRef();
    return _this;
  }

  /**
   * Registers the event handler for when the user taps inside the html content.
   */
  _inheritsLoose(HtmlSanitizer, _Component);
  var _proto = HtmlSanitizer.prototype;
  _proto.componentDidMount = function componentDidMount() {
    embeddedMedia.add(this.htmlContainer.current);
  }

  /**
   * Only update if the HTML changed.
   * @param {Object} nextProps The next props for the component.
   * @return {boolean}
   */;
  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return nextProps.children !== this.props.children || nextProps.comfortCookiesAccepted !== this.props.comfortCookiesAccepted || nextProps.statisticsCookiesAccepted !== this.props.statisticsCookiesAccepted;
  }

  /**
   * Updates embedded media within the html container.
   */;
  _proto.componentDidUpdate = function componentDidUpdate() {
    embeddedMedia.add(this.htmlContainer.current);
  }

  /**
   * Removes the event handler.
   */;
  _proto.componentWillUnmount = function componentWillUnmount() {
    embeddedMedia.remove(this.htmlContainer.current);
  };
  /**
   * Renders the component.
   * @returns {JSX}
   */
  _proto.render = function render() {
    const cookieConsentSettings = {
      comfortCookiesAccepted: this.props.comfortCookiesAccepted,
      statisticsCookiesAccepted: this.props.statisticsCookiesAccepted
    };
    const innerHTML = {
      __html: parseHTML(this.props.children, this.props.decode, this.props.settings, this.props.processStyles, cookieConsentSettings)
    };
    const {
      wrapper: Wrapper
    } = this.props;
    return /*#__PURE__*/_jsx(Wrapper, {
      cookieConsentSettings: cookieConsentSettings,
      children: /*#__PURE__*/_jsx("div", {
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML: innerHTML,
        ref: this.htmlContainer,
        className: classNames(this.props.className, 'common__html-sanitizer'),
        onClickCapture: this.handleClick
      })
    });
  };
  return HtmlSanitizer;
}(Component);
HtmlSanitizer.defaultProps = {
  children: '',
  className: '',
  decode: false,
  processStyles: false,
  settings: {},
  wrapper: EmbeddedMedia,
  comfortCookiesAccepted: false,
  statisticsCookiesAccepted: false
};
export default connect(HtmlSanitizer);