@roderickhsiao/react-i13n/dist/components/core/CoreComponent.js

[Experiment] React I13n provides a performant and scalable solution to application instrumentation.

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = require("react");

var _subscribeUiEvent = require("subscribe-ui-event");

var _clickHandler = _interopRequireDefault(require("../../libs/clickHandler"));

var _useDebugDashboard = _interopRequireDefault(require("../../hooks/useDebugDashboard"));

var _useScanLinks = _interopRequireDefault(require("../../hooks/useScanLinks"));

var _useViewportDetect = _interopRequireDefault(require("../../hooks/useViewportDetect"));

var _I13nContext = _interopRequireDefault(require("./I13nContext"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/**
 * Copyright 2015 - Present, Yahoo Inc.
 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 */
var CoreComponent = function CoreComponent(props) {
  var _cloneElement;

  var bindClickEvent = props.bindClickEvent,
      componentIsFunction = props.componentIsFunction,
      children = props.children,
      follow = props.follow,
      i13nModel = props.i13nModel,
      _props$scanLinks = props.scanLinks,
      scanLinks = _props$scanLinks === void 0 ? {} : _props$scanLinks,
      shouldFollowLink = props.shouldFollowLink,
      viewport = props.viewport;

  var _useContext = (0, _react.useContext)(_I13nContext["default"]),
      executeEvent = _useContext.executeEvent,
      i13nNode = _useContext.i13nNode,
      i13nInstance = _useContext.i13nInstance,
      parentI13nNode = _useContext.parentI13nNode;

  var domRef = (0, _react.useRef)();

  var _useState = (0, _react.useState)(),
      DOMNode = _useState[0],
      setDOMNode = _useState[1];

  var scanLinksEnabled = scanLinks.enable,
      tags = scanLinks.tags; // create event

  (0, _react.useEffect)(function () {
    executeEvent === null || executeEvent === void 0 ? void 0 : executeEvent('created', {});
  }, []); // auto bind click event

  (0, _react.useEffect)(function () {
    var clickEventListener;

    if (bindClickEvent && DOMNode) {
      var handleClick = function handleClick(e) {
        (0, _clickHandler["default"])(e, {
          executeEvent: executeEvent,
          i13nNode: i13nNode,
          props: {
            follow: follow
          }
        });
      };

      clickEventListener = (0, _subscribeUiEvent.listen)(DOMNode, 'click', handleClick);
    }

    return function () {
      var _clickEventListener;

      (_clickEventListener = clickEventListener) === null || _clickEventListener === void 0 ? void 0 : _clickEventListener.remove();
    };
  }, [bindClickEvent, i13nNode, executeEvent, DOMNode]); // update modal if changes

  (0, _react.useEffect)(function () {
    i13nNode === null || i13nNode === void 0 ? void 0 : i13nNode.updateModel(i13nModel);
  }, [i13nNode, i13nModel]);
  (0, _useScanLinks["default"])({
    enabled: scanLinksEnabled,
    executeEvent: executeEvent,
    i13nInstance: i13nInstance,
    i13nNode: i13nNode,
    node: i13nNode === null || i13nNode === void 0 ? void 0 : i13nNode.getDOMNode(),
    shouldFollowLink: shouldFollowLink,
    tags: tags
  });
  var ref = (i13nInstance === null || i13nInstance === void 0 ? void 0 : i13nInstance.isViewportEnabled()) ? domRef : {};
  (0, _useViewportDetect["default"])({
    viewport: viewport,
    executeEvent: executeEvent,
    ref: ref,
    node: i13nNode
  });
  (0, _useDebugDashboard["default"])({
    node: i13nNode
  }); // clean up

  (0, _react.useEffect)(function () {
    return function () {
      if (parentI13nNode) {
        parentI13nNode.removeChildNode(i13nNode);
      }
    };
  }, [parentI13nNode, i13nNode]);
  return /*#__PURE__*/(0, _react.cloneElement)(children, (_cloneElement = {}, _cloneElement[componentIsFunction ? 'innerRef' : 'ref'] = function (node) {
    if (node) {
      i13nNode === null || i13nNode === void 0 ? void 0 : i13nNode.setDOMNode(node);
      domRef.current = node;
      setDOMNode(node);
    }
  }, _cloneElement));
};

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