@alifd/next/lib/step/view/step-item.js

'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _resizeObserverPolyfill = require('resize-observer-polyfill');

var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);

var _icon = require('../../icon');

var _icon2 = _interopRequireDefault(_icon);

var _progress = require('../../progress');

var _progress2 = _interopRequireDefault(_progress);

var _configProvider = require('../../config-provider');

var _configProvider2 = _interopRequireDefault(_configProvider);

var _util = require('../../util');

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

/** Step.Item */
var StepItem = (_temp = _class = function (_Component) {
    (0, _inherits3.default)(StepItem, _Component);

    function StepItem(props) {
        (0, _classCallCheck3.default)(this, StepItem);

        var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));

        _this.onClick = function () {
            var _this$props = _this.props,
                index = _this$props.index,
                disabled = _this$props.disabled,
                readOnly = _this$props.readOnly,
                animation = _this$props.animation;

            if (disabled || readOnly) {
                return false;
            }

            if (animation && _this.stepNode) {
                _util.dom.hasClass(_this.stepNode, 'clicked') ? _util.dom.removeClass(_this.stepNode, 'clicked') : _util.dom.addClass(_this.stepNode, 'clicked');
            }
            _this.props.onClick(index);
        };

        _this.removeClickedCls = _this.removeClickedCls.bind(_this);
        _this._refHandlerCreator = _this._refHandlerCreator.bind(_this);
        _this.resize = _this.resize.bind(_this);
        _this.ro = new _resizeObserverPolyfill2.default(function () {
            var _this$props2 = _this.props,
                shape = _this$props2.shape,
                direction = _this$props2.direction,
                onResize = _this$props2.onResize;

            if (!_this.body || shape === 'arrow') {
                return;
            }
            if (direction === 'vertical' || direction === 'ver') {
                _this.resize();
            } else {
                onResize && onResize();
            }
        });
        return _this;
    }

    StepItem.prototype.componentDidMount = function componentDidMount() {
        var _props = this.props,
            shape = _props.shape,
            direction = _props.direction,
            labelPlacement = _props.labelPlacement,
            index = _props.index,
            total = _props.total,
            stretch = _props.stretch;

        this.body && this.ro.observe(_reactDom2.default.findDOMNode(this.body));
        if (shape === 'arrow') {
            return;
        }
        if (direction === 'vertical' || direction === 'ver') {
            this.resize();
            this.forceUpdate(); // 解决Step嵌套的情况下，嵌套节点宽度为0的问题
            this.eventHandler = _util.events.on(window, 'resize', this.resize); // 调整垂直Step
        } else if ((direction === 'horizontal' || direction === 'hoz') && (labelPlacement === 'horizontal' || labelPlacement === 'hoz') && index !== total - 1) {
            // 调整横向Content
            this.adjustTail();
        }
        if (stretch && (direction === 'horizontal' || direction === 'hoz')) {
            this.adjustItemWidth();
        }
    };

    StepItem.prototype.componentDidUpdate = function componentDidUpdate() {
        var _this2 = this;

        var _props2 = this.props,
            shape = _props2.shape,
            direction = _props2.direction,
            labelPlacement = _props2.labelPlacement,
            index = _props2.index,
            total = _props2.total,
            rtl = _props2.rtl,
            stretch = _props2.stretch;

        if (shape === 'arrow') {
            return;
        }
        var resetTailStyle = function resetTailStyle() {
            _util.dom.setStyle(_this2.tail, {
                width: '',
                top: '',
                height: ''
            });
        };

        if (direction === 'vertical' || direction === 'ver') {
            this.resize();
        } else if (direction === 'horizontal' || direction === 'hoz') {
            var _dom$setStyle;

            var pos = rtl ? 'right' : 'left';
            _util.dom.setStyle(this.body, (_dom$setStyle = {
                width: ''
            }, _dom$setStyle[pos] = '', _dom$setStyle));
            if (shape === 'circle' && (labelPlacement === 'horizontal' || labelPlacement === 'hoz') && index !== total - 1) {
                // 调整横向Content
                this.adjustTail();
            } else {
                resetTailStyle();
            }
            if (stretch) {
                this.adjustItemWidth();
            }
        } else if (index !== total - 1) {
            resetTailStyle();
        }
    };

    StepItem.prototype.componentWillUnmount = function componentWillUnmount() {
        this.eventHandler && this.eventHandler.off();
    };

    StepItem.prototype.adjustItemWidth = function adjustItemWidth() {
        var _props3 = this.props,
            index = _props3.index,
            total = _props3.total,
            labelPlacement = _props3.labelPlacement;

        var lastNodeWidth = labelPlacement === 'horizontal' || labelPlacement === 'hoz' ? this.container.offsetWidth + this.body.offsetWidth : this.title.offsetWidth;
        var width = total - 1 !== index ? 'calc((100% - ' + lastNodeWidth + 'px)/' + (total - 1) + ')' : 'auto';
        _util.dom.setStyle(this.step, {
            width: width
        });
    };

    StepItem.prototype.adjustTail = function adjustTail() {
        var width = this.container.offsetWidth + this.title.offsetWidth;
        _util.dom.setStyle(this.tail, {
            width: 'calc(100% - ' + width + 'px)',
            top: _util.dom.getStyle(this.container, 'height') / 2 + 'px'
        });
    };

    StepItem.prototype.resize = function resize() {
        var direction = this.props.direction;

        if (direction === 'vertical' || direction === 'ver') {
            var stepWidth = _util.dom.getStyle(this.step, 'width');
            var stepHozWhitespace = _util.dom.getNodeHozWhitespace(this.step.parentNode);
            var stepBodyHozWhitespace = _util.dom.getNodeHozWhitespace(this.body);
            var rtl = this.props.rtl;

            rtl ? this.body.style.right = stepWidth + 'px' : this.body.style.left = stepWidth + 'px';
            _util.dom.setStyle(this.body, {
                width: _util.dom.getStyle(this.step.parentNode.parentNode, 'width') - stepWidth - stepHozWhitespace - stepBodyHozWhitespace
            });
            _util.dom.setStyle(this.tail, 'height', _util.dom.getStyle(this.body, 'height') - _util.dom.getStyle(this.container, 'height'));
        }
    };

    StepItem.prototype._getNode = function _getNode() {
        var _props4 = this.props,
            prefix = _props4.prefix,
            index = _props4.index,
            status = _props4.status,
            icon = _props4.icon,
            shape = _props4.shape,
            percent = _props4.percent,
            itemRender = _props4.itemRender;

        var nodeElement = icon;
        if (shape === 'dot') {
            nodeElement = icon ? _react2.default.createElement(_icon2.default, { type: icon }) : _react2.default.createElement(
                'div',
                { className: prefix + 'step-item-node-dot' },
                ' '
            );
        } else if (shape === 'circle' && percent) {
            nodeElement = _react2.default.createElement(_progress2.default, { shape: 'circle', percent: percent, className: prefix + 'step-item-progress' });
        } else if (shape === 'circle' && !!itemRender && typeof itemRender === 'function') {
            nodeElement = null; // 如果是需要自定义节点，则不处理，返回空
        } else {
            nodeElement = _react2.default.createElement(
                'div',
                { className: prefix + 'step-item-node-circle' },
                icon ? _react2.default.createElement(_icon2.default, { type: icon }) : this._itemRender(index, status)
            );
        }

        return nodeElement;
    };

    StepItem.prototype.getNode = function getNode(args) {
        var _props5 = this.props,
            prefix = _props5.prefix,
            itemRender = _props5.itemRender,
            index = _props5.index,
            status = _props5.status,
            title = _props5.title,
            content = _props5.content,
            shape = _props5.shape;
        var others = args.others,
            stepCls = args.stepCls,
            overlayCls = args.overlayCls;

        var nodeElement = this._getNode();
        var containerStyle = shape === 'dot' && { fontSize: 'initial' } || {};
        var finalNodeElement = _react2.default.createElement(
            'div',
            {
                className: prefix + 'step-item-container',
                style: containerStyle,
                ref: this._refHandlerCreator('container')
            },
            _react2.default.createElement(
                'div',
                { className: prefix + 'step-item-node-placeholder', onClick: this.onClick },
                _react2.default.createElement(
                    'div',
                    {
                        className: prefix + 'step-item-node',
                        ref: this._refHandlerCreator('stepNode'),
                        onTransitionEnd: this.removeClickedCls
                    },
                    nodeElement
                )
            )
        );

        if (!nodeElement) {
            // 需要自定义子节点
            finalNodeElement = _react2.default.createElement(
                'div',
                {
                    className: prefix + 'step-item-container',
                    style: containerStyle,
                    ref: this._refHandlerCreator('container')
                },
                _react2.default.createElement(
                    'div',
                    { className: prefix + 'step-item-node-placeholder', onClick: this.onClick },
                    itemRender(index, status, title, content)
                )
            );
        }
        if (shape !== 'arrow') {
            delete others.tabIndex;
            delete others['aria-current'];
        }

        return _react2.default.createElement(
            'li',
            (0, _extends3.default)({}, others, { style: this.getStyle(), className: stepCls, ref: this._refHandlerCreator('step') }),
            finalNodeElement,
            _react2.default.createElement(
                'div',
                {
                    className: prefix + 'step-item-body',
                    ref: this._refHandlerCreator('body'),
                    tabIndex: this.props.tabIndex,
                    'aria-current': this.props['aria-current']
                },
                _react2.default.createElement(
                    'div',
                    { className: prefix + 'step-item-title', ref: this._refHandlerCreator('title') },
                    title
                ),
                _react2.default.createElement(
                    'div',
                    { className: prefix + 'step-item-content' },
                    content
                )
            ),
            _react2.default.createElement(
                'div',
                { className: prefix + 'step-item-tail', ref: this._refHandlerCreator('tail') },
                _react2.default.createElement(
                    'div',
                    { className: prefix + 'step-item-tail-underlay' },
                    _react2.default.createElement('div', { className: prefix + 'step-item-tail-overlay', style: overlayCls })
                )
            )
        );
    };

    StepItem.prototype.getStyle = function getStyle() {
        var _props6 = this.props,
            parentWidth = _props6.parentWidth,
            parentHeight = _props6.parentHeight,
            direction = _props6.direction,
            total = _props6.total,
            index = _props6.index,
            shape = _props6.shape;

        var width = 'auto';

        if (Number(parentWidth) && Number(parentHeight)) {
            if (!_util.support.flex && shape === 'arrow') {
                width = Math.floor(parentWidth / total - parentHeight / 2 - parentHeight / 8);
            }
        }
        if (shape !== 'arrow' && (direction === 'horizontal' || direction === 'hoz')) {
            width = total - 1 !== index ? Math.floor(100 / total) + '%' : 'auto';
        }
        return {
            width: width
        };
    };

    StepItem.prototype.removeClickedCls = function removeClickedCls() {
        var animation = this.props.animation;

        if (animation && this.stepNode && _util.dom.hasClass(this.stepNode, 'clicked')) {
            _util.dom.removeClass(this.stepNode, 'clicked');
        }
    };

    // 节点的渲染方法


    StepItem.prototype._itemRender = function _itemRender(index, status) {
        var itemRender = this.props.itemRender;

        if (itemRender) {
            return itemRender(index, status);
        }
        return status === 'finish' ? _react2.default.createElement(_icon2.default, { type: 'select' }) : index + 1;
    };

    StepItem.prototype._refHandlerCreator = function _refHandlerCreator(refName) {
        var self = this;
        return function (ref) {
            self[refName] = ref;
        };
    };

    StepItem.prototype.render = function render() {
        var _classNames;

        // eslint-disable-next-line
        var _props7 = this.props,
            prefix = _props7.prefix,
            locale = _props7.locale,
            className = _props7.className,
            status = _props7.status,
            title = _props7.title,
            icon = _props7.icon,
            index = _props7.index,
            total = _props7.total,
            shape = _props7.shape,
            content = _props7.content,
            direction = _props7.direction,
            disabled = _props7.disabled,
            onClick = _props7.onClick,
            readOnly = _props7.readOnly,
            animation = _props7.animation,
            parentHeight = _props7.parentHeight,
            itemRender = _props7.itemRender,
            parentWidth = _props7.parentWidth,
            labelPlacement = _props7.labelPlacement,
            rtl = _props7.rtl,
            onResize = _props7.onResize;


        var others = _util.obj.pickOthers(StepItem.propTypes, this.props);

        var stepCls = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'step-item'] = true, _classNames[prefix + 'step-item-' + status] = status, _classNames[prefix + 'step-item-first'] = index === 0, _classNames[prefix + 'step-item-last'] = index === total - 1, _classNames[prefix + 'step-item-disabled'] = disabled, _classNames[prefix + 'step-item-read-only'] = readOnly, _classNames[className] = className, _classNames));

        var overlayCls = status === 'finish' ? { width: '100%' } : null;
        var arrowElement = _react2.default.createElement(
            'li',
            (0, _extends3.default)({}, others, { style: this.getStyle(), className: stepCls, onClick: this.onClick }),
            _react2.default.createElement(
                'div',
                { className: prefix + 'step-item-container' },
                _react2.default.createElement(
                    'div',
                    { className: prefix + 'step-item-title' },
                    title
                )
            )
        );
        var otherElement = this.getNode({ others: others, stepCls: stepCls, overlayCls: overlayCls });

        return shape === 'arrow' ? arrowElement : otherElement;
    };

    return StepItem;
}(_react.Component), _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, {
    prefix: _propTypes2.default.string,
    rtl: _propTypes2.default.bool,
    /**
     * 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`
     */
    status: _propTypes2.default.oneOf(['wait', 'process', 'finish']),
    /**
     * 标题
     */
    title: _propTypes2.default.node,
    direction: _propTypes2.default.oneOf(['hoz', 'ver']),
    labelPlacement: _propTypes2.default.oneOf(['hoz', 'ver']),
    shape: _propTypes2.default.oneOf(['circle', 'arrow', 'dot']),
    /**
     * 图标
     */
    icon: _propTypes2.default.string,
    /**
     * 内容填充, shape为 arrow 时无效
     */
    content: _propTypes2.default.node,
    /**
     * StepItem 的自定义渲染, 会覆盖父节点设置的itemRender
     * @param {Number} index   节点索引
     * @param {String} status  节点状态
     * @returns {Node} 节点的渲染结果
     */
    itemRender: _propTypes2.default.func,
    /**
     * 百分比
     */
    percent: _propTypes2.default.number,
    index: _propTypes2.default.number,
    total: _propTypes2.default.number,
    animation: _propTypes2.default.bool, // 是否开启动效，由父级传入
    /**
     * 是否禁用
     */
    disabled: _propTypes2.default.bool,
    parentWidth: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
    parentHeight: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
    /**
     * 点击步骤时的回调
     * @param {Number} index 节点索引
     */
    onClick: _propTypes2.default.func,
    /**
     * 自定义样式
     */
    className: _propTypes2.default.string,
    readOnly: _propTypes2.default.bool,
    onResize: _propTypes2.default.func,
    stretch: _propTypes2.default.bool
}), _class.defaultProps = {
    shape: 'circle',
    index: 0,
    total: 1,
    onClick: function onClick() {},
    stretch: false
}, _temp);
StepItem.displayName = 'StepItem';
exports.default = _configProvider2.default.config(StepItem);
module.exports = exports['default'];