polestar-antd/lib/Wizard/Wizard.js

[](https://www.npmjs.com/package/polestar-antd) [](https://travis-ci.org/nkiateam/polestar-antd) [![Dependencies](https:

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _antd = require('antd');

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

require('./style/Wizard.css');

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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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

/**
 * Polestar Wizard Component.
 */
var Wizard = function (_React$Component) {
    _inherits(Wizard, _React$Component);

    function Wizard(props) {
        _classCallCheck(this, Wizard);

        var _this = _possibleConstructorReturn(this, (Wizard.__proto__ || Object.getPrototypeOf(Wizard)).call(this, props));

        _this.checkValidatingProps = function (callback) {
            var currentStepProps = _this.props.children[_this.state.current].props;
            var currentStepValidateProps = currentStepProps.validate;
            var currentStepMessageProps = currentStepProps.message;
            var flag = true;
            if (typeof currentStepValidateProps === 'function') {
                flag = currentStepValidateProps();
            } else if (typeof currentStepValidateProps === 'boolean') {
                flag = currentStepValidateProps;
            }
            if (flag === false) {
                _antd.message.error(currentStepMessageProps);
                _this.setState({
                    status: 'error'
                });
            } else {
                if (typeof callback === 'function') callback();
                _this.setState({
                    status: ''
                });
            }
        };

        _this.handleNext = function () {
            _this.checkValidatingProps(function () {
                var current = _this.state.current + 1;
                _this.setState({
                    current: current
                });
            });
        };

        _this.handleDone = function () {
            _this.checkValidatingProps();
        };

        _this.handlePrev = function () {
            var current = _this.state.current - 1;
            _this.setState({
                current: current,
                status: ''
            });
        };

        _this._renderSteps = function (direction, stepPosition) {
            return _react2.default.createElement(
                _components.Steps,
                { current: _this.state.current,
                    size: _this.props.size,
                    direction: direction,
                    stepPosition: stepPosition,
                    stepWidth: _this.props.stepWidth,
                    status: _this.state.status },
                _this.props.children
            );
        };

        _this._renderContents = function (direction, stepPosition) {
            var currentStep = Array.isArray(_this.props.children) ? _this.props.children[_this.state.current] : _this.props.children;
            return _react2.default.createElement(
                _components.Contents,
                { direction: direction,
                    stepPosition: stepPosition,
                    minContentsHeight: _this.props.minContentsHeight
                },
                currentStep.props.contents || currentStep.props.children
            );
        };

        _this._renderActions = function (direction, stepPosition) {
            return _react2.default.createElement(_components.Actions, {
                current: _this.state.current,
                stepLength: _this.props.children.length,
                handleNext: _this.handleNext,
                handleDone: _this.handleDone,
                handlePrev: _this.handlePrev,
                direction: direction,
                stepPosition: stepPosition
            });
        };

        _this._renderHorizontalLayout = function () {
            return _react2.default.createElement(
                'div',
                { className: 'polestar-wizard',
                    style: {
                        width: _this.props.width ? _this.props.width + 'px' : '',
                        margin: _this.props.center === true ? '0 auto' : ''
                    } },
                _react2.default.createElement(
                    _components.Grid,
                    { direction: _this.state.direction },
                    _this._renderSteps(_this.state.direction),
                    _this._renderContents(_this.state.direction)
                ),
                _this._renderActions(_this.state.direction)
            );
        };

        _this._renderVerticalLayout = function () {
            var renderGridByStepPosition = function renderGridByStepPosition(stepPosition) {
                if (stepPosition === 'left') {
                    return _react2.default.createElement(
                        _components.Grid,
                        { direction: _this.state.direction },
                        _this._renderSteps(_this.state.direction),
                        _this._renderContents(_this.state.direction)
                    );
                } else if (stepPosition === 'right') {
                    return _react2.default.createElement(
                        _components.Grid,
                        { direction: _this.state.direction },
                        _this._renderContents(_this.state.direction),
                        _this._renderSteps(_this.state.direction)
                    );
                }
            };
            return _react2.default.createElement(
                'div',
                { className: 'polestar-wizard',
                    style: {
                        width: _this.props.width ? _this.props.width + 'px' : '',
                        margin: _this.props.center === true ? '0 auto' : ''
                    } },
                renderGridByStepPosition(_this.props.stepPosition),
                _this._renderActions(_this.state.direction)
            );
        };

        _this.state = {
            current: 0,
            status: '',
            direction: _this.props.stepPosition === 'top' ? 'horizontal' : 'vertical'
        };
        return _this;
    }

    /**
     * Wizard 컴포넌트의 validation 관련 props는 'validation'과 'message' 두 가지가 있다.
     * 'validation' props는 boolean과 function을 받을 수 있으며 false이거나, function의 return값이 false 일 때,
     * 'message' props를 화면에 출력하고 다음 Step으로 넘어가는 것을 막는다.
     *
     * checkValidationProps는 현재 Step의 'validation' props와 'message' props를 검사하고 핸들링한다.
     */


    /**
     * Next 버튼이 클릭되었을 때
     */


    /**
     * Done 버튼이 클릭되었을 때
     */


    /**
     * Prev 버튼이 클릭되었을 때
     */


    /**
     * Steps 영역을 렌더링
     */


    /**
     * Contents 영역을 렌더링
     */


    /**
     * Actions 영역을 렌더링
     */


    /**
     * this.state.direction === 'horizontal' 일 경우의 레이아웃을 렌더링
     */


    /**
     * this.state.direction === 'vertical' 일 경우의 레이아웃을 렌더링
     */


    _createClass(Wizard, [{
        key: 'render',
        value: function render() {
            if (this.props.stepPosition === 'top') {
                return this._renderHorizontalLayout();
            } else {
                return this._renderVerticalLayout();
            }
        }
    }]);

    return Wizard;
}(_react2.default.Component);

Wizard.propTypes = {
    /** direction이 vertical일 경우 Steps의 위치 왼쪽/오른쪽 지정 */
    stepPosition: _propTypes2.default.oneOf(['top', 'left', 'right']), // direction이 vertical일 경우 왼쪽/오른쪽 지정
    /** Steps의 크기 */
    size: _propTypes2.default.oneOf(['default', 'small']), // Steps의 크기
    /** stepPosition이 top일 경우 Steps 영역의 너비 */
    stepWidth: _propTypes2.default.number,
    /** Wizard 컴포넌트의 너비를 지정 */
    width: _propTypes2.default.number,
    /** Wizard 컴포넌트 가운데 정렬 여부 */
    center: _propTypes2.default.bool, //
    /** Contents 영역의 최소 높이 */
    minContentsHeight: _propTypes2.default.number // Contents 영역의 최소 높이
};
Wizard.defaultProps = {
    size: 'default',
    stepPosition: 'left',
    stepWidth: 200,
    center: true,
    minContentsHeight: 200
};


Wizard.Step = _components.Step;

exports.default = Wizard;