@helpscout/hsds-react/components/Frame/Frame.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.ThemableFrame = exports.FrameComponent = void 0;

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _reactFrameComponent = _interopRequireWildcard(require("react-frame-component"));

exports.FrameContext = _reactFrameComponent.FrameContext;

var _styledComponents = require("styled-components");

var _jsxRuntime = require("react/jsx-runtime");

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; }

// from https://github.com/hydrateio/react-styled-frame/blob/master/src/index.js
// and https://github.com/styled-components/styled-components/issues/659#issuecomment-456894873
var FrameContent = function FrameContent(_ref) {
  var children = _ref.children,
      theme = _ref.theme;
  var frameContext = (0, _react.useContext)(_reactFrameComponent.FrameContext); // TODO: The following code is to fix an issue with styled-component.
  // The underlying issue is that when using StyleSheetManager with a new target, the current global stylesheet is recreated with a new options,
  // but the cached "names" are keep around within the new stylesheet, causing an issue that block
  // the previous rendered components to be recreated in the new StyleSheet
  //
  // This issue was fixed in styled-component:
  // https://github.com/styled-components/styled-components/pull/3159
  // https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md#unreleased
  // it's just not released yet. Once it's is released and we upgraded styled-components everywhere, we can go back to use target="frameContext.document.head"
  //
  // !Update: some performance issue occured, we might keep this way of creating a new sheet around even after
  // !the styled-component update, to keep the useMemo implementation

  var shContext = (0, _react.useContext)(_styledComponents.StyleSheetContext);
  var ssmProps = (0, _react.useMemo)(function () {
    var ssmProps = {};

    if (shContext) {
      var sheet = shContext.reconstructWithOptions({
        target: frameContext.document.head
      });
      sheet.names = new Map();
      sheet.tag = null;
      ssmProps.sheet = sheet;
    } else {
      ssmProps.target = frameContext.document.head;
    }

    return ssmProps; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [shContext]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.StyleSheetManager, (0, _extends2.default)({}, ssmProps, {
    children: theme ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
      theme: theme,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
        children: children
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
      children: children
    })
  }));
};

var FrameComponent = function FrameComponent(_ref2) {
  var theme = _ref2.theme,
      children = _ref2.children,
      initialContent = _ref2.initialContent,
      contentDidMount = _ref2.contentDidMount,
      head = _ref2.head,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["theme", "children", "initialContent", "contentDidMount", "head"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFrameComponent.default, (0, _extends2.default)({
    initialContent: initialContent,
    contentDidMount: contentDidMount,
    head: head
  }, (0, _getValidProps.default)(rest), {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FrameContent, {
      theme: theme,
      children: children
    })
  }));
};

exports.FrameComponent = FrameComponent;
FrameComponent.propTypes = {
  /* The initialContent props is the initial html injected into frame. It is only injected once, but allows you to insert any html into the frame (e.g. a head tag, script tags, etc). */
  initialContent: _propTypes.default.string,

  /* Callback that works exactly like componentDidMount. */
  contentDidMount: _propTypes.default.func
};
FrameComponent.defaultProps = {
  'data-cy': 'FrameComponent'
};
var ThemableFrame = (0, _styledComponents.withTheme)(FrameComponent);
exports.ThemableFrame = ThemableFrame;