react-zendesk-helpcenter/Article.js

React library that makes it easy to render Zendesk Help Center content in your React apps.

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

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

var _cleanReactProps = _interopRequireDefault(require("clean-react-props"));

var _useZendesk2 = _interopRequireDefault(require("./useZendesk"));

var _excluded = ["apiVersion", "articleId", "domain", "loadingComponent", "locale", "onError", "onLoad"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * Article - Component
 *
 * @param {Object} props
 * @param {string=} props.apiVersion
 * @param {(number | string)} props.articleId
 * @param {string=} props.domain
 * @param {ReactFragment=} props.loadingComponent
 * @param {string=} props.locale
 * @param {(error) => void=} props.onError
 * @param {(data) => void=} props.onLoad
 * @returns {JSX.Element}
 */
var Article = function Article(_ref) {
  var _data$article;

  var apiVersion = _ref.apiVersion,
      articleId = _ref.articleId,
      domain = _ref.domain,
      loadingComponent = _ref.loadingComponent,
      locale = _ref.locale,
      onError = _ref.onError,
      onLoad = _ref.onLoad,
      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);

  var _useZendesk = (0, _useZendesk2["default"])({
    apiVersion: apiVersion,
    domain: domain,
    endpoint: articleId ? "/articles/".concat(articleId) : null,
    includeLocale: true,
    locale: locale
  }),
      data = _useZendesk.data,
      error = _useZendesk.error; // onError handlings


  (0, _react.useEffect)(function () {
    if (error) {
      onError ? onError(error) : console.error(error);
    }
  }, [error]); // onLoad handling

  (0, _react.useEffect)(function () {
    if (data) {
      onLoad && onLoad(data);
    }
  }, [data]); // Conditionally display loadingComponent, if provided

  if (!(data !== null && data !== void 0 && (_data$article = data.article) !== null && _data$article !== void 0 && _data$article.body)) {
    if (loadingComponent) {
      var LoadingComponent = loadingComponent;
      return /*#__PURE__*/_react["default"].createElement(LoadingComponent, null);
    }

    return null;
  }

  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _cleanReactProps["default"])(rest), {
    dangerouslySetInnerHTML: {
      __html: data.article.body
    }
  }));
};

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