organism-react-onboarding/build/cjs/ui/organisms/Onboarding.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["default"] = 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 _winDoc = require("win-doc");

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

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

  function Onboarding(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Onboarding);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "goTo", function (i) {
      if (isNaN(i)) {
        console.error("Step index need a number. [" + i + "]");
        return;
      }

      var end = _this.total - 1;

      if (i > end || i < 0) {
        console.error("Step index need between 0 and " + end + ". [" + i + "]");
        return;
      }

      if (_this.state.stepIndex === i) {
        _this.open();
      } else {
        _this.setState({
          stepIndex: i
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "back", function (currentIndex) {
      _this.setState(function (_ref) {
        var stepIndex = _ref.stepIndex;

        if (null == currentIndex) {
          stepIndex--;
        } else {
          stepIndex = currentIndex - 1;
        }

        if (stepIndex < 0) {
          stepIndex = 0;
        }

        _this.current.handleFinish();

        return {
          stepIndex: stepIndex,
          isReady: true
        };
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "next", function (currentIndex) {
      _this.setState(function (_ref2) {
        var stepIndex = _ref2.stepIndex;

        if (null == currentIndex) {
          stepIndex++;
        } else {
          stepIndex = currentIndex + 1;
        }

        if (stepIndex >= _this.total) {
          stepIndex = null;
        }

        _this.current.handleFinish();

        return {
          stepIndex: stepIndex,
          isReady: false
        };
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRef", function (el) {
      if (el) {
        _this.current = el;
      }
    });
    _this.steps = [];
    var total = 0;

    _react.Children.forEach(props.children, function (c, key) {
      _this.steps[key] = c;
      total++;
    });

    _this.total = total;
    _this.state = {
      stepIndex: 0
    };
    return _this;
  }

  (0, _createClass2["default"])(Onboarding, [{
    key: "resetFloats",
    value: function resetFloats() {
      if (this.current) {
        var _this$current;

        (_this$current = this.current).resetFloats.apply(_this$current, arguments);
      }
    }
  }, {
    key: "resetLightBox",
    value: function resetLightBox() {
      if (this.current) {
        this.current.resetLightBox();
      }
    }
  }, {
    key: "setIsReady",
    value: function setIsReady(bool) {
      this.setState({
        isReady: bool
      });
    }
  }, {
    key: "tryOpen",
    value: function tryOpen() {
      if (this.current) {
        this.current.tryOpen();
      }
    }
  }, {
    key: "open",
    value: function open() {
      if (this.current) {
        this.current.open();
      }
    }
  }, {
    key: "close",
    value: function close() {
      if (this.current) {
        this.current.handleFinish();
      }
    }
  }, {
    key: "closeFloats",
    value: function closeFloats() {
      if (this.current) {
        this.current.closeFloats();
      }
    }
  }, {
    key: "addLightBox",
    value: function addLightBox(node) {
      if (this.current) {
        this.current.addLightBox(node);
      }
    }
  }, {
    key: "addHighlight",
    value: function addHighlight(node) {
      if (this.current) {
        this.current.addHighlight(node);
      }
    }
  }, {
    key: "addNumber",
    value: function addNumber(num, node) {
      if (this.current) {
        this.current.addNumber(num, node);
      }
    }
  }, {
    key: "getStepIndex",
    value: function getStepIndex() {
      return this.state.stepIndex;
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState, snapshot) {
      var _this2 = this;

      var props = this.props;
      var stepIndex = this.state.stepIndex;

      _react.Children.forEach(props.children, function (c, key) {
        _this2.steps[key] = c;
      });

      if (this.debug) {
        console.log("[Onboarding] Current step: " + (stepIndex + 1));
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      window.ReactOnboarding = this;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      delete window.ReactOnboarding;
      var finish = this.props.finish;

      if (finish) {
        finish.call(this);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var total = this.total,
          next = this.next,
          back = this.back;
      var _this$props = this.props,
          I18N = _this$props.I18N,
          before = _this$props.before;
      var _this$state = this.state,
          stepIndex = _this$state.stepIndex,
          isReady = _this$state.isReady;

      if (null === stepIndex) {
        return null;
      }

      var onboardingBefore;

      if (0 === stepIndex) {
        onboardingBefore = before;
      }

      var currentStep = this.steps[stepIndex];
      return /*#__PURE__*/(0, _react.cloneElement)(currentStep, {
        host: this,
        key: stepIndex,
        onboardingBefore: onboardingBefore,
        isReady: isReady,
        I18N: I18N,
        stepIndex: stepIndex,
        total: total,
        next: next,
        back: back,
        ref: this.handleRef
      });
    }
  }]);
  return Onboarding;
}(_react.PureComponent);

(0, _defineProperty2["default"])(Onboarding, "defaultProps", {
  I18N: {
    next: "Next",
    done: "Done",
    back: "Back"
  }
});
var _default = Onboarding;
exports["default"] = _default;
module.exports = exports.default;