cefc-view-transactiondetails/lib/Decorator.js

CEFC-UI Component

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _format = require('cefc-biz-utils/format');

var _validator = require('cefc-biz-utils/validator');

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; }

var DIRECTION = {
  1: 'B', //买
  2: 'S' //卖
};
var EMPTY_VALUE = '--';

var Decorator = function Decorator() {
  var _class, _temp;

  var ComposedComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
    return _react2.default.createElement('div', null);
  };


  var initTransactionDetails = function initTransactionDetails(length) {
    var initData = [];

    for (var i = 0; i < length; i++) {
      initData.push({
        time: EMPTY_VALUE,
        price: EMPTY_VALUE,
        amount: EMPTY_VALUE
      });
    }

    return initData;
  };

  var getTransactionTime = function getTransactionTime(time) {
    if ((0, _validator.isEmpty)(time)) {

      return EMPTY_VALUE;
    }
    var curTime = time.toString().slice(8, 12); //获取当前的小时和分钟

    return curTime.slice(0, 2) + ':' + curTime.slice(2, 4);
  };

  var getTransactionPrice = function getTransactionPrice(price, precision) {
    return (0, _validator.isEmpty)(price) ? EMPTY_VALUE : (0, _format.decimalFormat)({ value: price, precision: precision });
  };

  var getTransactionAmount = function getTransactionAmount(amount, handCount) {
    if ((0, _validator.isEmpty)(amount)) {

      return EMPTY_VALUE;
    }

    var amt = (0, _format.switchUnit)(Math.floor(parseFloat(amount) / handCount));

    //防止盘口数量带单位时折行, 若有中文单位,改变盘口数量列的宽度
    if (amt.indexOf('万') !== -1) {
      //计算整数位的位数，为防止数量过长折行，整数位是2位或2位以上的，则略去小数点后的位数
      var amtTemp = amt.split('.');
      var integerLength = amtTemp[0].length;
      var decimalLength = amtTemp[1] && amtTemp[1].length;

      if (integerLength >= 2) {
        amt = amtTemp[0] + '\u4E07';
      }

      if (integerLength === 1 && decimalLength && decimalLength >= 2) {
        amt = amtTemp[0] + '.' + amtTemp[1].split('')[0] + '\u4E07';
      }
    }

    return amt;
  };

  var getTransactionDir = function getTransactionDir(dir, lastVol) {
    //成交量为空时也显示买卖方向
    return (0, _validator.isEmpty)(dir) || (0, _validator.isEmpty)(lastVol) ? '' : '' + DIRECTION[dir] || DIRECTION[1];
  };

  return _temp = _class = function (_Component) {
    _inherits(_class, _Component);

    function _class(props, context) {
      _classCallCheck(this, _class);

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

      _this.countTransactionDetails = function (data) {
        if ((0, _validator.isEmpty)(data)) {

          return _this.state.transactionDetails;
        }

        var len = data.length;
        var _this$props = _this.props,
            precision = _this$props.precision,
            handCount = _this$props.handCount;


        return _this.state.transactionDetails.map(function (item, index) {
          var dot = data[len - index - 1];
          if (!(0, _validator.isEmpty)(dot)) {
            item.time = getTransactionTime(dot.time);
            item.price = getTransactionPrice(dot.price, precision);
            item.amount = getTransactionAmount(dot.volume, handCount);
            item.direction = getTransactionDir(dot.direction, dot.volume);
          }

          return item;
        }).reverse();
      };

      _this.countSocketData = function (curSktdata, tickData, preSktData) {
        var curTimestamp = curSktdata.timestamp;
        var curTradeVol = curSktdata.tradeVol; //总成交量
        var lastDetailsDot = tickData[tickData.length - 1];
        var _this$props2 = _this.props,
            precision = _this$props2.precision,
            handCount = _this$props2.handCount;

        //推送的时间戳，与拉取的数据列表中的最新数据的时间戳相等时，不更新明细

        if (lastDetailsDot.timestamp === curTimestamp) {

          return;
        }

        //若已经连续推送数据，则直接对比前后推送数据，若交易总量相同，不更新明细
        if (!(0, _validator.isEmpty)(preSktData)) {
          var preTradeVol = preSktData.tradeVol;

          if (preTradeVol === curTradeVol) {

            return;
          }
        }

        _this.state.transactionDetails.shift(); //删除明细中最早的数据
        _this.state.transactionDetails.push({
          time: getTransactionTime(curTimestamp),
          price: getTransactionPrice(curSktdata.lastPrice, precision),
          amount: getTransactionAmount(curSktdata.lastVol, handCount),
          direction: getTransactionDir(curSktdata.direction, curSktdata.lastVol)
        });

        _this.setState({ transactionDetails: _this.state.transactionDetails });
      };

      _this.state = {
        transactionDetails: [],
        transLength: 9 // 明细的条数
      };
      _this.state.transactionDetails = initTransactionDetails(_this.state.transLength);
      return _this;
    }

    _createClass(_class, [{
      key: 'componentWillMount',
      value: function componentWillMount() {
        if (!this.initCompleted && !(0, _validator.isEmpty)(this.props.tickData)) {
          this.initCompleted = true;
          this.state.transactionDetails = this.countTransactionDetails(this.props.tickData);
        }

        if (!(0, _validator.isEmpty)(this.props.socketData) && !(0, _validator.isEmpty)(this.props.tickData)) {
          this.countSocketData(this.props.socketData, this.props.tickData);
        }
      }
    }, {
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        if (!this.initCompleted) {
          this.initCompleted = true;
          this.setState({
            transactionDetails: this.countTransactionDetails(nextProps.tickData)
          });
        }

        if (!(0, _validator.isEmpty)(nextProps.socketData) && !(0, _validator.isEmpty)(this.props.tickData)) {
          this.countSocketData(nextProps.socketData, nextProps.tickData, this.props.socketData);
        }
      }
    }, {
      key: 'render',
      value: function render() {
        return _react2.default.createElement(ComposedComponent, _extends({}, this.props, { transactionDetails: this.state.transactionDetails }));
      }
    }]);

    return _class;
  }(_react.Component), _class.propTypes = {
    //数据精度
    precision: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
    //数据一手的单位
    handCount: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
    //推送数据
    socketData: _propTypes2.default.object,
    //明细一次性请求的数据
    tickData: _propTypes2.default.array
  }, _class.defaultProps = {
    precision: 2,
    handCount: 100
  }, _temp;
};

exports.default = Decorator;
exports.DIRECTION = DIRECTION;