organism-react-onboarding/build/cjs/ui/organisms/Step.js

Create guided tours with react.

"use strict";

var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");

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

var _classCallCheck2 = _interopRequireDefault(require("reshow-runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("reshow-runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("reshow-runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("reshow-runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("reshow-runtime/helpers/createSuper"));

var _defineProperty2 = _interopRequireDefault(require("reshow-runtime/helpers/defineProperty"));

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

var _reactAtomicMolecule = require("react-atomic-molecule");

var _organismReactPopup = require("organism-react-popup");

var _organismReactSpotlight = require("organism-react-spotlight");

var _cssQuerySelector = _interopRequireDefault(require("css-query-selector"));

var _getoffset = _interopRequireDefault(require("getoffset"));

var _getStyle = _interopRequireDefault(require("get-style"));

var _getScrollInfo = _interopRequireDefault(require("get-scroll-info"));

var _getObjectValue = _interopRequireDefault(require("get-object-value"));

var _getWindowOffset = require("get-window-offset");

var _toPercentJs = require("to-percent-js");

var _smoothScrollTo = _interopRequireDefault(require("smooth-scroll-to"));

var _Beacon = _interopRequireDefault(require("../organisms/Beacon"));

var _Tooltip = _interopRequireDefault(require("../organisms/Tooltip"));

var _Highlight = _interopRequireDefault(require("../organisms/Highlight"));

var _StepNumber = _interopRequireDefault(require("../organisms/StepNumber"));

require("setimmediate");

var keys = Object.keys;
var injects;
var nodeId = 0;
var GROUP_KEY = "react-onboarding";
var GROUP_FLOATS = GROUP_KEY + "-floats";
var classCleanZIndex = GROUP_KEY + "-clean-zindex";
var classShowEl = GROUP_KEY + "-show-el";
var classRelative = GROUP_KEY + "-relative";

var myShowEl = function myShowEl(node) {
  return (0, _organismReactSpotlight.showEl)(node, classShowEl, classRelative);
};

exports.showEl = myShowEl;

var myCleanZIndex = function myCleanZIndex(node) {
  return (0, _organismReactSpotlight.cleanZIndex)(node, classCleanZIndex, classShowEl);
};

exports.cleanZIndex = myCleanZIndex;

var Step = /*#__PURE__*/function (_PureComponent) {
  (0, _inherits2["default"])(Step, _PureComponent);

  var _super = (0, _createSuper2["default"])(Step);

  function Step(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Step);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "timerFind", void 0);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "timerExecute", void 0);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "timerMonitor", void 0);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "timerMonitorInit", void 0);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBack", function () {
      var _this$props = _this.props,
          back = _this$props.back,
          finish = _this$props.finish,
          stepIndex = _this$props.stepIndex;

      if (finish) {
        finish.call((0, _assertThisInitialized2["default"])(_this));
      }

      back(stepIndex);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleNext", function () {
      var _this$props2 = _this.props,
          verify = _this$props2.verify,
          next = _this$props2.next,
          finish = _this$props2.finish,
          stepIndex = _this$props2.stepIndex;
      var isSuccess = true;

      if (verify) {
        isSuccess = verify.call((0, _assertThisInitialized2["default"])(_this));
      }

      if (!isSuccess) {
        console.warn("Handle finish failed.");
        return isSuccess;
      }

      if (finish) {
        finish.call((0, _assertThisInitialized2["default"])(_this));
      }

      next(stepIndex);
    });
    injects = (0, _reactAtomicMolecule.lazyInject)(InjectStyles, injects);
    return _this;
  }

  (0, _createClass2["default"])(Step, [{
    key: "addNumber",
    value: function addNumber(num, node) {
      if (!node || !num) {
        return;
      }

      if (!this.isDomShow(node)) {
        return;
      }

      var thisStyles;
      var isSetFixed = (0, _getWindowOffset.isFixed)(node);

      if (isSetFixed) {
        thisStyles = injects.fixed;
      }

      (0, _organismReactPopup.popupDispatch)({
        type: "dom/update",
        params: {
          popup: /*#__PURE__*/_react["default"].createElement(_StepNumber["default"], {
            name: "number-" + num,
            key: "number-" + num,
            targetEl: node,
            styles: thisStyles
          }, num)
        }
      });
    }
  }, {
    key: "addLightBox",
    value: function addLightBox(node, isHide) {
      var isSetFixed = (0, _getWindowOffset.isFixed)(node);
      myCleanZIndex(node);
      var thisStyles;

      if (isSetFixed) {
        thisStyles = injects.fixed;
      }

      if (!node.id) {
        node.id = "light-el-" + nodeId;
        nodeId++;
      }

      var nodePos = (0, _getoffset["default"])(node);

      if (!isHide) {
        (0, _organismReactPopup.popupDispatch)({
          type: "dom/update",
          params: {
            popup: /*#__PURE__*/_react["default"].createElement(_organismReactSpotlight.LightBox, {
              key: node.id,
              name: node.id,
              group: GROUP_KEY,
              wh: [nodePos.w, nodePos.h],
              targetEl: node,
              styles: thisStyles
            })
          }
        });
      }

      if (!isSetFixed) {
        // need locate after myCleanZIndex(node)
        myShowEl(node);
      }
    }
  }, {
    key: "addHighlight",
    value: function addHighlight(node) {
      var nodePos = this.isDomShow(node);

      if (!nodePos) {
        return;
      }

      var thisStyles;
      var isSetFixed = (0, _getWindowOffset.isFixed)(node);

      if (isSetFixed) {
        thisStyles = injects.fixed;
      }

      if (!node.id) {
        node.id = "react-onboarding-highlight-" + nodeId;
        nodeId++;
      }

      (0, _organismReactPopup.popupDispatch)({
        type: "dom/update",
        params: {
          popup: /*#__PURE__*/_react["default"].createElement(_Highlight["default"], {
            wh: [nodePos.w, nodePos.h],
            name: "highlight-" + node.id,
            key: "highlight-" + node.id,
            targetEl: node,
            styles: thisStyles
          })
        }
      });
    }
  }, {
    key: "setHighlights",
    value: function setHighlights() {
      var _this2 = this;

      var highlights = this.props.highlights;

      if (!highlights) {
        return;
      }

      highlights.forEach(function (hl, key) {
        var nodes = _cssQuerySelector["default"].all(hl);

        if (nodes.length) {
          nodes.forEach(function (node, tKey) {
            _this2.addHighlight(node);
          });
        }
      });
    }
  }, {
    key: "setBeacons",
    value: function setBeacons() {
      var _this3 = this;

      var beacons = this.props.beacons;

      if (!beacons) {
        return;
      }

      beacons.forEach(function (beacon, key) {
        var node = _cssQuerySelector["default"].one(beacon);

        if (!node) {
          return;
        }

        if (!_this3.isDomShow(node)) {
          return;
        }

        var isSetFixed = (0, _getWindowOffset.isFixed)(node);
        var styles;

        if (isSetFixed) {
          styles = injects.fixed;
        }

        (0, _organismReactPopup.popupDispatch)({
          type: "dom/update",
          params: {
            popup: /*#__PURE__*/_react["default"].createElement(_Beacon["default"], {
              name: "react-onboarding-beacon" + key,
              key: key,
              targetEl: node,
              styles: styles
            })
          }
        });
      });
    }
  }, {
    key: "setNumbers",
    value: function setNumbers() {
      var _this4 = this;

      var numbers = this.props.numbers;

      if (!numbers) {
        return;
      }

      keys(numbers).forEach(function (key) {
        var node = _cssQuerySelector["default"].one(numbers[key]);

        _this4.addNumber(key, node);
      });
    }
  }, {
    key: "initFloat",
    value: function initFloat() {
      var _this5 = this;

      var _this$props3 = this.props,
          type = _this$props3.type,
          delay = _this$props3.delay,
          isReady = _this$props3.isReady,
          before = _this$props3.before,
          cook = _this$props3.cook,
          target = _this$props3.target,
          onboardingBefore = _this$props3.onboardingBefore;

      var callback = function callback() {
        if (onboardingBefore) {
          onboardingBefore();
        }

        if (cook) {
          cook.call(_this5);
        }

        setImmediate(function () {
          if (false !== _this5.getTargetEl() || "modal" === type) {
            (0, _organismReactPopup.popupDispatch)({
              type: "dom/update",
              params: {
                popup: _this5._float
              }
            });
          }
        });
      };

      if (target) {
        this.tryResetFloats(callback);
      } else {
        callback.call(this);
      }
    }
  }, {
    key: "_resetFloats",
    value: function _resetFloats(callback, lightEl) {
      var _this$props4 = this.props,
          type = _this$props4.type,
          before = _this$props4.before,
          hideLightBox = _this$props4.hideLightBox;

      if (before) {
        before.call(this);
      }

      if (lightEl) {
        this.addLightBox(lightEl, hideLightBox);
        var isSetFixed = (0, _getWindowOffset.isFixed)(lightEl);
        var floatProps = {};

        if (type !== "modal") {
          floatProps = {
            isSetFixed: isSetFixed,
            targetEl: lightEl
          };
        }

        this._float = /*#__PURE__*/(0, _react.cloneElement)(this._float, floatProps);
      }

      this.setHighlights();
      this.setNumbers();
      this.setBeacons();

      if ("function" === typeof callback) {
        callback.call(this);
      }

      this.handleMonitor();
      return true;
    }
  }, {
    key: "tryResetFloats",
    value: function tryResetFloats(callback, isReady) {
      var _isReady,
          _this6 = this;

      var _this$props5 = this.props,
          delay = _this$props5.delay,
          target = _this$props5.target;
      isReady = (_isReady = isReady) !== null && _isReady !== void 0 ? _isReady : this.props.isReady;
      var maxTry = 100;
      var tryTime = 0;
      clearInterval(this.timerFind);
      this.timerFind = setInterval(function () {
        tryTime++;

        var targetEl = _this6.getTargetEl();

        if (tryTime > maxTry) {
          clearInterval(_this6.timerFind);
          console.warn("Can not find target element. [" + target + "]");
        }

        if (!targetEl) {
          return;
        }

        clearInterval(_this6.timerFind);
        var thisDelay = delay;

        if (isReady) {
          thisDelay = 0;
        }

        clearTimeout(_this6.timerExecute);
        _this6.timerExecute = setTimeout(function () {
          _this6.handleScrollTo(targetEl, function () {
            _this6._resetFloats(callback, targetEl);
          });
        }, thisDelay);
      }, 50);
    }
  }, {
    key: "resetFloats",
    value: function resetFloats() {
      var _this7 = this;

      this.tryResetFloats(function () {
        (0, _organismReactPopup.popupDispatch)({
          type: "dom/update",
          params: {
            popup: _this7._float
          }
        });
      });
    }
  }, {
    key: "handleScrollTo",
    value: function handleScrollTo(lightEl, callback) {
      var _this8 = this;

      var scrollTo = this.props.scrollTo;

      if (!scrollTo || !lightEl) {
        callback.call(this);
        return;
      }

      var lightElPos = (0, _getoffset["default"])(lightEl);
      var scrollInfo = (0, _getScrollInfo["default"])();
      var halfH;

      if (scrollInfo.scrollNodeHeight > lightElPos.h) {
        halfH = (scrollInfo.scrollNodeHeight - lightElPos.h) / 2;
      } else {
        halfH = scrollInfo.scrollNodeHeight / 2;
      }

      (0, _smoothScrollTo["default"])(Math.floor(lightElPos.top - halfH), null, null, function () {
        callback.call(_this8);
      });
    }
  }, {
    key: "handleFinish",
    value: function handleFinish() {
      clearInterval(this.timerFind);
      clearInterval(this.timerMonitor);
      clearTimeout(this.timerMonitorInit);
      clearTimeout(this.timerExecute);
      var finish = this.props.finish;

      if (finish) {
        finish.call(this);
      }

      (0, _organismReactPopup.popupDispatch)({
        type: "dom/closeGroup",
        params: {
          group: GROUP_KEY
        }
      });
      (0, _organismReactSpotlight.cleanClass)(classCleanZIndex);
      (0, _organismReactSpotlight.cleanClass)(classShowEl);
      (0, _organismReactSpotlight.cleanClass)(classRelative);
    }
  }, {
    key: "handleMonitor",
    value: function handleMonitor() {
      var _this9 = this;

      var _this$props6 = this.props,
          monitors = _this$props6.monitors,
          monitorDelay = _this$props6.monitorDelay,
          next = _this$props6.next,
          stepIndex = _this$props6.stepIndex;

      if (!monitors) {
        return;
      }

      clearTimeout(this.timerMonitorInit);
      this.timerMonitorInit = setTimeout(function () {
        clearInterval(_this9.timerMonitor);
        _this9.timerMonitor = setInterval(function () {
          monitors.forEach(function (sel) {
            var nodes = _cssQuerySelector["default"].all(sel);

            if (nodes.length) {
              nodes.forEach(function (node) {
                if (_this9.isDomShow(node)) {
                  next(stepIndex);
                  clearInterval(_this9.timerMonitor);
                }
              });
            }
          });
        }, 100);
      }, monitorDelay);
    }
  }, {
    key: "closeFloats",
    value: function closeFloats() {
      (0, _organismReactPopup.popupDispatch)({
        type: "dom/closeGroup",
        params: {
          group: GROUP_FLOATS
        }
      });
    }
  }, {
    key: "isDomShow",
    value: function isDomShow(dom) {
      var elPos = (0, _getoffset["default"])(dom);

      if (!elPos.w || !elPos.h) {
        return false;
      } else {
        return elPos;
      }
    }
    /**
     * @return null mean not assign target
     * @return false mean target not exists
     */

  }, {
    key: "getTargetEl",
    value: function getTargetEl() {
      var target = this.props.target;

      if (!target) {
        return null;
      }

      var targetEl = _cssQuerySelector["default"].one(target);

      if (!targetEl) {
        return false;
      }

      if (this.isDomShow(targetEl)) {
        return targetEl;
      } else {
        return false;
      }
    }
  }, {
    key: "tryOpen",
    value: function tryOpen() {
      var host = this.props.host;

      if (false !== this.getTargetEl()) {
        this.open();
      } else {
        host.goTo(0);
      }
    }
  }, {
    key: "open",
    value: function open() {
      var _this$props7 = this.props,
          type = _this$props7.type,
          scrollTo = _this$props7.scrollTo;
      var targetEl = this.getTargetEl();

      if (type !== "modal" && !targetEl) {
        console.warn("target not found.");
        this.handleFinish();
        return;
      }

      this.resetFloats();
    }
  }, {
    key: "resetLightBox",
    value: function resetLightBox() {
      var _this$props8 = this.props,
          target = _this$props8.target,
          hideLightBox = _this$props8.hideLightBox;

      var lightEl = _cssQuerySelector["default"].one(target);

      if (!lightEl) {
        return;
      }

      var isSetFixed = (0, _getWindowOffset.isFixed)(lightEl);
      this.addLightBox(lightEl, hideLightBox);
      this._float = /*#__PURE__*/(0, _react.cloneElement)(this._float, {
        targetEl: lightEl,
        isSetFixed: isSetFixed
      });
      (0, _organismReactPopup.popupDispatch)({
        type: "dom/update",
        params: {
          popup: this._float
        }
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.initFloat();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      this.initFloat();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.handleFinish();
    }
  }, {
    key: "render",
    value: function render() {
      var _this10 = this;

      var _this$props9 = this.props,
          maskScroll = _this$props9.maskScroll,
          backgroundScroll = _this$props9.backgroundScroll,
          header = _this$props9.header,
          content = _this$props9.content,
          actions = _this$props9.actions,
          type = _this$props9.type,
          style = _this$props9.style,
          stepIndex = _this$props9.stepIndex,
          total = _this$props9.total,
          I18N = _this$props9.I18N,
          onClose = _this$props9.onClose;
      var stepDisplayIndex = stepIndex + 1;
      var floatEl;
      var name;

      switch (type) {
        case "modal":
          floatEl = _organismReactPopup.PopupModal;
          name = GROUP_KEY + "-modal";
          break;

        case "tooltip":
        default:
          floatEl = _Tooltip["default"];
          name = GROUP_KEY + "-tooltip";
          break;
      }

      var child = [/*#__PURE__*/_react["default"].createElement(_reactAtomicMolecule.Progress, {
        styles: injects.progress,
        percent: (0, _toPercentJs.percent)(stepDisplayIndex / total),
        className: "attached green"
      })];

      if (header) {
        child.push( /*#__PURE__*/_react["default"].createElement(_reactAtomicMolecule.Header, {
          styles: injects.header
        }, header));
      }

      if (content) {
        child.push( /*#__PURE__*/_react["default"].createElement(_reactAtomicMolecule.Content, {
          styles: injects.content
        }, content));
      }

      if (actions) {
        var buttons = [];
        actions.forEach(function (action, key) {
          var _onClick;

          var actionText = (0, _getObjectValue["default"])(action, ["text"], "");
          var actionClassName = (0, _getObjectValue["default"])(action, ["className"], "");
          var thisAction = action.action;

          if ("function" === typeof thisAction) {
            _onClick = thisAction;
          } else {
            switch (thisAction) {
              case "next":
                _onClick = _this10.handleNext;
                actionClassName += " positive";

                if (!actionText) {
                  var isLast = stepDisplayIndex >= total;

                  if (isLast) {
                    actionText = I18N.done;
                  } else {
                    actionText = I18N.next + " " + stepDisplayIndex + "/" + total;
                  }
                }

                break;

              case "back":
                _onClick = _this10.handleBack;

                if (!actionText) {
                  actionText = I18N.back;
                }

                break;

              default:
                break;
            }
          }

          buttons.push( /*#__PURE__*/_react["default"].createElement(_reactAtomicMolecule.Button, {
            key: key,
            onClick: function onClick(e) {
              e.stopPropagation();

              _onClick(e);
            },
            className: actionClassName
          }, actionText));
        });
        child.push( /*#__PURE__*/_react["default"].createElement(_reactAtomicMolecule.SemanticUI, {
          className: "actions",
          styles: injects.actions
        }, buttons));
      }

      this._float = /*#__PURE__*/(0, _react.createElement)(floatEl, {
        maskScroll: maskScroll,
        backgroundScroll: backgroundScroll,
        name: name,
        onClose: onClose,
        modalStyle: style,
        modalClassName: "mini",
        center: false,
        group: GROUP_KEY,
        style: {
          zIndex: 9999
        },
        styles: injects.modal
      }, _react.Children.map(child, function (c) {
        return c;
      }));
      return null;
    }
  }]);
  return Step;
}(_react.PureComponent);

(0, _defineProperty2["default"])(Step, "defaultProps", {
  delay: 100,
  monitorDelay: 700,
  scrollTo: true
});
var _default = Step;
exports["default"] = _default;
var InjectStyles = {
  modal: [{
    background: ["-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%)", "radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%)"]
  }],
  fixed: [{
    position: "fixed !important"
  }, ".react-onboarding-fixed", "react-onboarding-fixed"],
  cleanZIndex: [{
    zIndex: "auto !important"
  }, "." + classCleanZIndex, classCleanZIndex],
  relative: [{
    position: "relative !important"
  }, "." + classRelative, classRelative],
  showEl: [{
    zIndex: "99999 !important",
    transform: "translate3d(0,0,0)"
  }, "." + classShowEl, classShowEl],
  progress: [{
    position: "absolute !important",
    top: 0,
    left: 0,
    right: 0,
    zIndex: 2
  }],
  header: [{
    textAlign: "left"
  }],
  content: [{
    textAlign: "left",
    padding: "1rem 1rem"
  }],
  actions: [{
    textAlign: "right",
    paddingTop: "1rem",
    background: "f9fafb",
    borderTop: "1px solid rgba(34,36,38,.15)"
  }]
};