@findify/mjs/lib/decorators/withFrame.js

Findify widgets

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _setDisplayName2 = require("recompose/setDisplayName");

var _setDisplayName3 = _interopRequireDefault(_setDisplayName2);

var _defaultProps2 = require("recompose/defaultProps");

var _defaultProps3 = _interopRequireDefault(_defaultProps2);

var _branch2 = require("recompose/branch");

var _branch3 = _interopRequireDefault(_branch2);

var _renderComponent2 = require("recompose/renderComponent");

var _renderComponent3 = _interopRequireDefault(_renderComponent2);

var _withHandlers2 = require("recompose/withHandlers");

var _withHandlers3 = _interopRequireDefault(_withHandlers2);

var _withPropsOnChange2 = require("recompose/withPropsOnChange");

var _withPropsOnChange3 = _interopRequireDefault(_withPropsOnChange2);

var _withState2 = require("recompose/withState");

var _withState3 = _interopRequireDefault(_withState2);

var _compose2 = require("recompose/compose");

var _compose3 = _interopRequireDefault(_compose2);

var _react = require("react");

var React = _interopRequireWildcard(_react);

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

var _reactFrameComponent2 = _interopRequireDefault(_reactFrameComponent);

var _reactResizeDetector = require("react-resize-detector");

var _reactResizeDetector2 = _interopRequireDefault(_reactResizeDetector);

var _createHTML = require("../helpers/createHTML");

var _v = require("uuid/v1");

var _v2 = _interopRequireDefault(_v);

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

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

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

var initialStyles = {
  width: 0,
  height: 0
};
var key = 1;
var defaultStyles = {};

var FrameComponent = function FrameComponent(decorators, factory) {
  return (0, _compose3.default)((0, _defaultProps3.default)({
    frameID: (0, _v2.default)()
  }), (0, _withPropsOnChange3.default)(['config'], function (_ref) {
    var _ref$config = _ref.config,
        config = _ref$config === void 0 ? {} : _ref$config,
        hooks = _ref.hooks,
        isMobile = _ref.isMobile,
        isMobileSimple = _ref.isMobileSimple;
    return {
      html: (0, _createHTML.createFrameHtml)(config.css, config.scripts, config.featureType, !isMobile || !!config.isMobileSimple)
    };
  }), decorators)(function (_ref2) {
    var frameStyles = _ref2.frameStyles,
        html = _ref2.html,
        frameID = _ref2.frameID,
        props = _objectWithoutProperties(_ref2, ["frameStyles", "html", "frameID"]);

    return React.createElement(_reactFrameComponent2.default, {
      style: frameStyles,
      initialContent: html,
      mountTarget: "#root",
      scrolling: "no"
    }, factory(_objectSpread({}, props, {
      key: frameID
    })), React.createElement(_reactResizeDetector2.default, {
      handleWidth: true,
      handleHeight: true,
      onResize: props.onResize
    }));
  });
};

var StaticComponent = function StaticComponent(decorators, factory) {
  return decorators(function (_ref3) {
    var frameStyles = _ref3.frameStyles,
        props = _objectWithoutProperties(_ref3, ["frameStyles"]);

    (0, _createHTML.injectTags)(props.config.css, props.config.js);
    return React.createElement("div", {
      style: frameStyles,
      className: "findify-".concat(props.config.featureType, "-wrapper")
    }, factory(props), React.createElement(_reactResizeDetector2.default, {
      handleWidth: true,
      handleHeight: true,
      onResize: props.onResize
    }));
  });
};

var withFrame = function withFrame(mapper) {
  return function (BaseComponent) {
    var factory = React.createFactory(BaseComponent);
    var sizeHandlers = (0, _compose3.default)((0, _withState3.default)('styles', 'setStyles', initialStyles), (0, _withPropsOnChange3.default)(['styles', 'node', 'visible'], function (props) {
      return {
        frameStyles: _objectSpread({}, defaultStyles, mapper && mapper(props) || initialStyles)
      };
    }), (0, _withHandlers3.default)({
      onResize: function onResize(_ref4) {
        var setStyles = _ref4.setStyles;
        return function (width, height) {
          return setStyles({
            width: width,
            height: height
          });
        };
      }
    }));
    return (0, _branch3.default)(function (_ref5) {
      var config = _ref5.config;
      return config.frameDisabled;
    }, (0, _renderComponent3.default)(StaticComponent(sizeHandlers, factory)), (0, _renderComponent3.default)(FrameComponent(sizeHandlers, factory)))(null);
  };
};
/**
 * Will create iframe with resize detector
 * @param [function] stylesMapper
 */


exports.default = (0, _setDisplayName3.default)('withFrame')(withFrame);