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

Create guided tours with react.

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";
import React, { cloneElement, PureComponent, Children } from "react";
import { win } from "win-doc";

var Onboarding = /*#__PURE__*/function (_PureComponent) {
  _inherits(Onboarding, _PureComponent);

  var _super = _createSuper(Onboarding);

  function Onboarding(props) {
    var _this;

    _classCallCheck(this, Onboarding);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_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
        });
      }
    });

    _defineProperty(_assertThisInitialized(_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
        };
      });
    });

    _defineProperty(_assertThisInitialized(_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
        };
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleRef", function (el) {
      if (el) {
        _this.current = el;
      }
    });

    _this.steps = [];
    var total = 0;
    Children.forEach(props.children, function (c, key) {
      _this.steps[key] = c;
      total++;
    });
    _this.total = total;
    _this.state = {
      stepIndex: 0
    };
    return _this;
  }

  _createClass(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;
      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__*/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;
}(PureComponent);

_defineProperty(Onboarding, "defaultProps", {
  I18N: {
    next: "Next",
    done: "Done",
    back: "Back"
  }
});

export default Onboarding;