@beisen/ethos/lib/guide/index.js

beisencloud pc react components

'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

require('./index.scss');

var _iconButton = require('../icon-button');

var _iconButton2 = _interopRequireDefault(_iconButton);

var _item = require('./item.js');

var _item2 = _interopRequireDefault(_item);

var _commonFunc = require('../common-func');

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

var Guide = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(Guide, _Component);

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

    var _this = (0, _possibleConstructorReturn3.default)(this, (Guide.__proto__ || (0, _getPrototypeOf2.default)(Guide)).call(this, props));

    _this.hasScroll = function () {
      var guideDom = _this.guideWrap;
      _this.setState({ showOperation: guideDom.scrollWidth > guideDom.clientWidth });
    };

    _this.scrollGuide = function (bool) {
      //处理滚动距离
      var minScroll = _this.props.minScroll;

      var guideDom = _this.guideWrap;
      if (bool) {
        guideDom.scrollLeft += minScroll;
        if (guideDom.scrollWidth - guideDom.clientWidth === guideDom.scrollLeft) {
          _this.setState({ rightShadow: false });
        }
        _this.setState({ leftShadow: true });
      } else {
        guideDom.scrollLeft -= minScroll;
        if (guideDom.scrollLeft <= 0) {
          _this.setState({ leftShadow: false });
        }
        _this.setState({ rightShadow: true });
      }
    };

    _this.renderOperation = function () {
      //当超出长度放不下后展示按钮，点击按钮实现左右滚动效果
      var _this$state = _this.state,
          showOperation = _this$state.showOperation,
          leftShadow = _this$state.leftShadow,
          rightShadow = _this$state.rightShadow;


      var backBtnData = {
        "bsStyle": "weaken",
        "disabled": !leftShadow,
        "onClick": function onClick(target, _onClick, btnInfo) {
          _this.scrollGuide(false);
        },
        "iconName": "pc-sys-backward" + (leftShadow ? '' : '-disabled') + "-svg"
      };

      var btnData = {
        "bsStyle": "weaken",
        "disabled": !rightShadow,
        "onClick": function onClick(target, _onClick2, btnInfo) {
          _this.scrollGuide(true);
        },
        "iconName": "pc-sys-Forward" + (rightShadow ? '-nomal' : '-disabled') + "-svg"
      };

      if (showOperation) {
        return _react2.default.createElement(
          'div',
          { ref: 'operation', className: "bs-guide__operation " + (rightShadow ? 'bs-guide__operation_has-shadow' : '') },
          _react2.default.createElement(_iconButton2.default, backBtnData),
          _react2.default.createElement(_iconButton2.default, btnData)
        );
      } else {
        return null;
      }
    };

    _this.disposeData = function (data) {
      //在每条数据后面插入数据，渲染连接线
      var copyData = data.concat([]);
      for (var i in copyData) {
        copyData.splice(i * 2 + 1, 0, { "type": "line" });
      }
      copyData.pop();
      return copyData;
    };

    _this.state = {
      showOperation: false,
      leftShadow: false,
      rightShadow: true
    };
    _this.color = {
      "done": "#38ba72",
      "doing": "#1687d9",
      "todo": "#c2cbd1"
    };
    return _this;
  }

  (0, _createClass3.default)(Guide, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      var guideDom = this.guideWrap;
      if (guideDom.scrollWidth > guideDom.clientWidth) {
        this.setState({ showOperation: true });
      }
      //监听dom变化，判断是否出现滚动条
      this.resizeListener = function () {
        _this2.hasScroll();
      };
      (0, _commonFunc.addResizeListener)(this.guideList, this.resizeListener);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.resizeListener) {
        (0, _commonFunc.removeResizeListener)(this.guideList, this.resizeListener);
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps) {
      if ((0, _stringify2.default)(prevProps.list) != (0, _stringify2.default)(this.props.list)) {
        this.hasScroll();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _state = this.state,
          leftShadow = _state.leftShadow,
          showOperation = _state.showOperation;
      var _props = this.props,
          list = _props.list,
          onClick = _props.onClick;

      var mapData = this.disposeData(list);
      return _react2.default.createElement(
        'div',
        { className: 'bs-guide' },
        _react2.default.createElement(
          'div',
          {
            ref: function ref(guideWrap) {
              _this3.guideWrap = guideWrap;
            },
            style: { "maxWidth": showOperation ? "calc(100% - 67px)" : "100%" },
            className: "bs-guide__content " + (leftShadow ? 'bs-guide__content_has-shadow' : '')
          },
          _react2.default.createElement(
            'ul',
            {
              ref: function ref(guideList) {
                _this3.guideList = guideList;
              },
              className: 'bs-guide__list '
            },
            mapData.map(function (item, index) {
              if (item.type == 'line') {
                return _react2.default.createElement(
                  'li',
                  {
                    key: index,
                    className: 'bs-guide__line',
                    style: { "background": "linear-gradient(to right, " + _this3.color[mapData[index - 1].status] + " , " + _this3.color[mapData[index + 1].status] + ")" }
                  },
                  _react2.default.createElement('span', { className: 'bs-guide__line_is-dashed' })
                );
              } else {
                return _react2.default.createElement(_item2.default, (0, _extends3.default)({}, item, { key: index, onClick: onClick, index: index / 2 + 1 }));
              }
            })
          )
        ),
        this.renderOperation()
      );
    }
  }]);
  return Guide;
}(_react.Component), _class.defaultProps = {
  minScroll: 50 //最小滚动距离，默认50px
}, _temp);


module.exports = Guide;