organism-react-onboarding/build/es/ui/organisms/Beacon.js

Create guided tours with react.

import _extends from "reshow-runtime/es/helpers/extends";
import _objectSpread from "reshow-runtime/es/helpers/objectSpread2";
import _objectWithoutProperties from "reshow-runtime/es/helpers/objectWithoutProperties";
import _classCallCheck from "reshow-runtime/es/helpers/classCallCheck";
import _createClass from "reshow-runtime/es/helpers/createClass";
import _assertThisInitialized from "reshow-runtime/es/helpers/assertThisInitialized";
import _inherits from "reshow-runtime/es/helpers/inherits";
import _createSuper from "reshow-runtime/es/helpers/createSuper";
import _defineProperty from "reshow-runtime/es/helpers/defineProperty";

var _Icon;

var _excluded = ["targetEl", "style"];
import React from "react";
import { SemanticUI } from "react-atomic-molecule";
import { PopupFloatEl } from "organism-react-popup";
import { alignUI, getPositionString } from "get-window-offset";
import Icon from "ricon/Pulse";
var GROUP_KEY = "react-onboarding";

var Beacon = /*#__PURE__*/function (_PopupFloatEl) {
  _inherits(Beacon, _PopupFloatEl);

  var _super = _createSuper(Beacon);

  function Beacon() {
    var _this;

    _classCallCheck(this, Beacon);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "calPos", function () {
      var targetEl = _this.props.targetEl;

      var floatEl = _this.getFloatEl();

      var info = alignUI(targetEl, _this.floatEl, {
        toLoc: "cc",
        disableAutoLoc: true,
        positionFixed: true
      });
      var move = info.move;
      var result = {
        top: move[1],
        left: move[0]
      };
      return result;
    });

    return _this;
  }

  _createClass(Beacon, [{
    key: "renderOverlay",
    value: function renderOverlay(props) {
      var targetEl = props.targetEl,
          style = props.style,
          others = _objectWithoutProperties(props, _excluded);

      var thisStyle = _objectSpread(_objectSpread({}, style), Styles.container);

      return /*#__PURE__*/React.createElement(SemanticUI, _extends({}, others, {
        style: thisStyle
      }), _Icon || (_Icon = /*#__PURE__*/React.createElement(Icon, {
        animation: "breath"
      })));
    }
  }]);

  return Beacon;
}(PopupFloatEl);

_defineProperty(Beacon, "defaultProps", {
  className: GROUP_KEY + "-beacon",
  group: GROUP_KEY,
  name: GROUP_KEY + "-beacon"
});

export default Beacon;
var Styles = {
  container: {
    pointerEvents: "none",
    position: "absolute",
    display: "block",
    zIndex: 99999
  }
};