polestar-ui-kit/lib/Wizard/Wizard.js

## Install

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

require("core-js/modules/es.array.concat");

require("core-js/modules/es.array.for-each");

require("core-js/modules/es.array.iterator");

require("core-js/modules/es.array.map");

require("core-js/modules/es.date.to-string");

require("core-js/modules/es.object.get-prototype-of");

require("core-js/modules/es.object.keys");

require("core-js/modules/es.object.set-prototype-of");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.reflect.construct");

require("core-js/modules/es.regexp.to-string");

require("core-js/modules/web.dom-collections.for-each");

require("core-js/modules/web.dom-collections.iterator");

require("core-js/modules/web.timers");

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _uuid = require("uuid");

var _antd = require("antd");

var _Alert = _interopRequireDefault(require("../Alert"));

var _i18n = require("../i18n");

var _components = require("./components");

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var Wizard = function (_React$Component) {
  _inherits(Wizard, _React$Component);

  var _super = _createSuper(Wizard);

  function Wizard(props) {
    var _this;

    _classCallCheck(this, Wizard);

    _this = _super.call(this, props);

    _this.setValue = function (_ref) {
      var stepIndex = _ref.stepIndex,
          labels = _ref.labels,
          values = _ref.values;
      _this.titles[stepIndex] = _this.props.children[stepIndex].props.title;
      _this.labels[stepIndex] = labels;
      _this.values[stepIndex] = values;
    };

    _this.open = function () {
      if (_this.props.type === 'modal' || _this.props.type === 'window') {
        _this.wizardModalRef.current.open();
      }
    };

    _this.close = function () {
      var type = _this.props.type;

      if (type === 'modal' || type === 'window') {
        _this.titles = [];
        _this.labels = [];
        _this.values = [];

        _this.setState({
          current: 0,
          error: false
        });

        _this.wizardModalRef.current.close();

        if (_this.props.onCancel) {
          _this.props.onCancel();
        }
      }
    };

    _this.bindClickEventListenerToStep = function (isEventBind) {
      setTimeout(function () {
        var steps = document.querySelectorAll("[data-id=\"".concat(_this.uuid, "\"] .ant-steps-item-icon"));

        var _loop = function _loop(i) {
          var step = steps[i];

          if (isEventBind) {
            step.onclick = function () {
              _this.handleStepClick(i);
            };
          } else {
            step.onclick = null;
          }
        };

        for (var i = 0; i < steps.length; i += 1) {
          _loop(i);
        }
      }, 0);
    };

    _this.checkValidatingProps = function (callback) {
      var stepsLength = _react["default"].Children.count(_this.props.children);

      var current = _this.state.current;
      var isDone = stepsLength === current;

      if (!isDone) {
        var currentStepProps = _this.props.children[current].props;
        var currentStepValidateProps = currentStepProps.validate;
        var currentStepMessageProps = currentStepProps.message;
        var flag;

        if (typeof currentStepValidateProps === 'function') {
          flag = currentStepValidateProps(current);
        } else if (typeof currentStepValidateProps === 'boolean') {
          flag = currentStepValidateProps;
        }

        if (typeof flag === 'boolean') {
          if (flag === false) {
            if (currentStepMessageProps) {
              _Alert["default"].error(currentStepMessageProps);
            }

            _this.setState({
              error: true
            });
          } else {
            if (typeof callback === 'function') callback();

            _this.setState({
              error: false
            });
          }
        }

        if (flag.then && typeof flag.then === 'function') {
          flag.then(function (b) {
            if (b === true) {
              if (typeof callback === 'function') callback();

              _this.setState({
                error: false
              });
            } else {
              if (currentStepMessageProps) {
                _Alert["default"].error(currentStepMessageProps);
              }

              _this.setState({
                error: true
              });
            }
          });
        }
      }
    };

    _this.handleStepClick = function (destStepIndex) {
      if (destStepIndex === _this.state.current) {
        return;
      }

      var isReviewStep = _this.isReviewStep(_this.state.current);

      if (isReviewStep) {
        _this.moveStepIndex(destStepIndex);
      } else {
        var isForward = destStepIndex > _this.state.current;

        if (isForward) {
          _this.checkValidatingProps(function () {
            _this.moveStepIndex(destStepIndex);
          });
        } else {
          _this.moveStepIndex(destStepIndex);
        }
      }
    };

    _this.handlePrev = function () {
      if (_this.props.onBeforePrev) {
        var result = _this.props.onBeforePrev(_this.state.current, _this.values);

        if (result.then && typeof result.then === 'function') {
          result.then(function (b) {
            if (b === true) {
              _this.callbackPrev();
            }
          });
        } else if (result === true) {
          _this.callbackPrev();
        }
      } else {
        _this.callbackPrev();
      }
    };

    _this.callbackPrev = function () {
      var current = _this.state.current;

      if (_this.props.onPrev) {
        _this.props.onPrev(current, _this.values);
      }

      var prev = current - 1;
      var prevStepProps = _this.props.children[prev] && _this.props.children[prev].props;
      prev = prevStepProps && prevStepProps.disabled ? prev - 1 : prev;

      _this.moveStepIndex(prev, function () {
        if (_this.props.onAfterPrev) {
          _this.props.onAfterPrev(prev, _this.values);
        }
      });
    };

    _this.handleNext = function () {
      _this.checkValidatingProps(function () {
        if (_this.props.onBeforeNext) {
          var result = _this.props.onBeforeNext(_this.state.current, _this.values);

          if (result.then && typeof result.then === 'function') {
            result.then(function (b) {
              if (b === true) {
                _this.callbackNext();
              }
            });
          } else if (result === true) {
            _this.callbackNext();
          }
        } else {
          _this.callbackNext();
        }
      });
    };

    _this.callbackNext = function () {
      var current = _this.state.current;

      if (_this.props.onNext) {
        _this.props.onNext(current, _this.values);
      }

      var next = current + 1;
      var nextStepProps = _this.props.children[next] && _this.props.children[next].props;
      next = nextStepProps && nextStepProps.disabled ? next + 1 : next;

      _this.moveStepIndex(next, function () {
        if (_this.props.onAfterNext) {
          _this.props.onAfterNext(next, _this.values);
        }
      });
    };

    _this.handleContinue = function () {
      _this.titles = [];
      _this.labels = [];
      _this.values = [];

      _this.setState({
        current: 0,
        error: false
      });

      if (_this.props.onContinue) {
        _this.props.onContinue();
      }
    };

    _this.handleSave = function () {
      if (_this.props.isReview === true) {
        _this.callbackSave();
      } else {
        _this.checkValidatingProps(function () {
          _this.callbackSave();
        });
      }
    };

    _this.callbackSave = function () {
      if (_this.props.onSave) {
        _this.props.onSave(_this.values, function () {
          var current = _this.state.current + 1;

          _this.setState({
            current: current
          });
        });
      }
    };

    _this.isReviewStep = function (stepIndex) {
      var _this$props = _this.props,
          isReview = _this$props.isReview,
          children = _this$props.children;
      var stepsLength = children.length + (isReview ? 1 : 0);

      if (isReview && stepsLength === stepIndex + 1) {
        return true;
      }

      return false;
    };

    _this.moveStepIndex = function (stepIndex, callback) {
      _this.setState({
        current: stepIndex,
        error: false
      }, function () {
        var isReviewStep = _this.isReviewStep(stepIndex);

        if (isReviewStep) {
          _this.setState({
            current: stepIndex
          });
        }

        if (typeof callback === 'function') callback();
      });
    };

    _this.reviewValues = function () {
      var reviewList = [];

      if (_this.values && _this.values.length > 0) {
        _this.values.forEach(function (value, index) {
          if (!value) return;
          var keys = Object.keys(value);
          var stepValues = [];
          keys.forEach(function (key) {
            stepValues.push({
              key: key,
              label: _this.labels[index][key],
              value: value[key]
            });
          });
          reviewList.push({
            title: _this.titles[index],
            values: stepValues
          });
        });
      }

      return reviewList;
    };

    _this.renderReview = function () {
      var reviewValues = _this.reviewValues();

      return reviewValues.map(function (value) {
        return _react["default"].createElement("div", {
          className: "ps-wizard-review-step",
          key: "".concat(_this.uuid, "-").concat(encodeURI(value.title))
        }, _react["default"].createElement("div", {
          className: "ps-wizard-review-step-title"
        }, value.title), _react["default"].createElement(_antd.Table, {
          className: "ps-wizard-review-step-table",
          showHeader: false,
          pagination: false,
          size: "small",
          dataSource: value.values,
          columns: [{
            dataIndex: 'label',
            key: 'label',
            className: 'ps-kit-table-label'
          }, {
            dataIndex: 'value',
            key: 'value'
          }]
        }));
      });
    };

    _this.renderSteps = function (direction, stepPosition) {
      var _this$state = _this.state,
          current = _this$state.current,
          error = _this$state.error;
      var _this$props2 = _this.props,
          size = _this$props2.size,
          stepWidth = _this$props2.stepWidth,
          isReview = _this$props2.isReview,
          reviewStepLabel = _this$props2.reviewStepLabel,
          reviewStep = _this$props2.reviewStep;
      _this.reviewStep = reviewStep || _this.renderReview();
      return _react["default"].createElement(_components.Steps, {
        current: current,
        size: size,
        direction: direction,
        stepPosition: stepPosition,
        stepWidth: stepWidth,
        status: error ? 'error' : ''
      }, _this.props.children, isReview ? _react["default"].createElement(Wizard.Step, {
        title: reviewStepLabel
      }, _this.reviewStep) : null);
    };

    _this.renderContents = function (direction, stepPosition) {
      var isReview = _this.props.isReview;
      var stepsLength = _this.props.children.length + (isReview ? 1 : 0);
      var isDone = stepsLength === _this.state.current;
      var stepContents = null;

      if (!isDone) {
        if (isReview && stepsLength - _this.state.current === 1) {
          stepContents = _this.reviewStep;
        } else {
          var currentStep = stepsLength > 1 ? _this.props.children[_this.state.current] : _this.props.children;
          stepContents = currentStep.props.contents || currentStep.props.children;
          stepContents = _react["default"].cloneElement(stepContents, {
            stepValue: _this.values[_this.state.current]
          });
        }
      } else {
        stepContents = _this.props.completeStep;
      }

      return isReview && stepsLength - _this.state.current === 1 ? _react["default"].createElement(_components.Review, {
        direction: direction,
        stepPosition: stepPosition,
        height: _this.props.contentHeight,
        minHeight: _this.props.minContentHeight
      }, stepContents) : _react["default"].createElement(_components.Contents, {
        direction: direction,
        stepPosition: stepPosition,
        height: _this.props.contentHeight,
        minHeight: _this.props.minContentHeight
      }, stepContents);
    };

    _this.renderActions = function (direction, stepPosition) {
      var _this$props3 = _this.props,
          type = _this$props3.type,
          isReview = _this$props3.isReview,
          continueAddButton = _this$props3.continueAddButton,
          continueCreateButton = _this$props3.continueCreateButton,
          customButtons = _this$props3.customButtons,
          children = _this$props3.children;
      var lastStepProps = children[children.length - 1].props;
      var length = lastStepProps.disabled ? children.length - 1 : children.length;
      var stepsLength = length + (isReview ? 1 : 0);
      return _react["default"].createElement(_components.Actions, {
        popup: !!type,
        current: _this.state.current,
        isReview: _this.props.isReview,
        stepLength: stepsLength,
        handleCancel: _this.close,
        handleNext: _this.handleNext,
        handlePrev: _this.handlePrev,
        handleSave: _this.handleSave,
        handleContinue: _this.handleContinue,
        direction: direction,
        stepPosition: stepPosition,
        customButtons: customButtons,
        continueAddButton: continueAddButton,
        continueCreateButton: continueCreateButton
      });
    };

    _this.renderHorizontalLayout = function () {
      return _react["default"].createElement("div", {
        className: "ps-wizard",
        style: {
          margin: _this.props.center === true ? '0 auto' : ''
        }
      }, _react["default"].createElement(_components.Grid, {
        direction: _this.state.direction
      }, _this.renderSteps(_this.state.direction), _this.renderContents(_this.state.direction)), !_this.props.type && _this.renderActions(_this.state.direction));
    };

    _this.renderVerticalLayout = function () {
      var renderGridByStepPosition = function renderGridByStepPosition(stepPosition) {
        if (stepPosition === 'left') {
          return _react["default"].createElement(_components.Grid, {
            direction: _this.state.direction
          }, _this.renderSteps(_this.state.direction), _this.renderContents(_this.state.direction));
        }

        if (stepPosition === 'right') {
          return _react["default"].createElement(_components.Grid, {
            direction: _this.state.direction
          }, _this.renderContents(_this.state.direction), _this.renderSteps(_this.state.direction));
        }

        return null;
      };

      return _react["default"].createElement("div", {
        className: "ps-wizard",
        style: {
          margin: _this.props.center === true ? '0 auto' : ''
        }
      }, renderGridByStepPosition(_this.props.stepPosition), !_this.props.type && _this.renderActions(_this.state.direction));
    };

    _this.uuid = (0, _uuid.v4)();
    _this.clickListenerBinded = false;
    _this.state = {
      current: 0,
      error: false,
      direction: _this.props.stepPosition === 'top' ? 'horizontal' : 'vertical'
    };
    _this.reviewStep = props.reviewStep || null;
    _this.titles = [];
    _this.labels = [];
    _this.values = [];
    _this.wizardModalRef = _react["default"].createRef();
    return _this;
  }

  _createClass(Wizard, [{
    key: "componentDidMount",
    value: function componentDidMount() {}
  }, {
    key: "render",
    value: function render() {
      var layout = this.props.stepPosition === 'top' ? this.renderHorizontalLayout() : this.renderVerticalLayout();

      var body = _react["default"].cloneElement(layout, {
        'data-id': this.uuid
      });

      var _this$props4 = this.props,
          type = _this$props4.type,
          title = _this$props4.title,
          width = _this$props4.width,
          destroyOnClose = _this$props4.destroyOnClose,
          loading = _this$props4.loading;
      return type ? _react["default"].createElement(_components.WizardModal, {
        ref: this.wizardModalRef,
        type: type,
        title: title,
        actions: this.renderActions(this.state.direction),
        width: width,
        destroyOnClose: destroyOnClose,
        loading: loading,
        onCancel: this.close
      }, body) : body;
    }
  }]);

  return Wizard;
}(_react["default"].Component);

Wizard.propTypes = {
  title: _propTypes["default"].string,
  type: _propTypes["default"].oneOf(['', 'modal', 'window']),
  stepPosition: _propTypes["default"].oneOf(['top', 'left', 'right']),
  size: _propTypes["default"].oneOf(['default', 'small']),
  destroyOnClose: _propTypes["default"].bool,
  stepWidth: _propTypes["default"].number,
  width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  center: _propTypes["default"].bool,
  minContentHeight: _propTypes["default"].number,
  contentHeight: _propTypes["default"].number,
  customButtons: _propTypes["default"].arrayOf(_propTypes["default"].element),
  isReview: _propTypes["default"].bool,
  reviewStepLabel: _propTypes["default"].string,
  reviewStep: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].node]),
  completeStep: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].node]),
  continueAddButton: _propTypes["default"].bool,
  continueCreateButton: _propTypes["default"].bool,
  loading: _propTypes["default"].bool,
  onBeforePrev: _propTypes["default"].func,
  onPrev: _propTypes["default"].func,
  onAfterPrev: _propTypes["default"].func,
  onBeforeNext: _propTypes["default"].func,
  onNext: _propTypes["default"].func,
  onAfterNext: _propTypes["default"].func,
  onCancel: _propTypes["default"].func,
  onSave: _propTypes["default"].func
};
Wizard.defaultProps = {
  title: null,
  type: '',
  size: 'default',
  stepPosition: 'left',
  destroyOnClose: true,
  stepWidth: 200,
  width: '100%',
  center: true,
  customButtons: [],
  minContentHeight: 50,
  isReview: true,
  reviewStepLabel: (0, _i18n.translate)('uikit:kit.wizard.review'),
  completeStep: _react["default"].createElement("div", {
    className: "ps-wizard-finish-view"
  }, (0, _i18n.translate)('uikit:message.register_completed')),
  continueAddButton: true,
  continueCreateButton: false,
  loading: false
};
var _default = Wizard;
exports["default"] = _default;