choerodon-ui/lib/badge/ScrollNumber.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

var _omit = _interopRequireDefault(require("lodash/omit"));

var _classnames = _interopRequireDefault(require("classnames"));

var _configure = require("../configure");

function _createSuper(Derived) {
  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;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

function getNumberArray(num) {
  return num ? num.toString().split('').reverse().map(function (i) {
    return Number(i);
  }) : [];
}

var ScrollNumber =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(ScrollNumber, _Component);

  var _super = _createSuper(ScrollNumber);

  function ScrollNumber(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, ScrollNumber);
    _this = _super.call(this, props);

    _this.renderCurrentNumber = function (num, i) {
      var position = _this.getPositionByNum(num, i);

      var animateStarted = _this.state.animateStarted;
      var removeTransition = animateStarted || getNumberArray(_this.lastCount)[i] === undefined;
      return (0, _react.createElement)('span', {
        className: "".concat(_this.getPrefixCls(), "-only"),
        style: {
          transition: removeTransition && 'none',
          msTransform: "translateY(".concat(-position * 100, "%)"),
          WebkitTransform: "translateY(".concat(-position * 100, "%)"),
          transform: "translateY(".concat(-position * 100, "%)")
        },
        key: i
      }, _this.renderNumberList(position));
    };

    _this.state = {
      animateStarted: true,
      count: props.count
    };
    return _this;
  }

  (0, _createClass2["default"])(ScrollNumber, [{
    key: "getPositionByNum",
    value: function getPositionByNum(num, i) {
      var _this$state = this.state,
          animateStarted = _this$state.animateStarted,
          count = _this$state.count;

      if (animateStarted) {
        return 10 + num;
      }

      var currentDigit = getNumberArray(count)[i];
      var lastDigit = getNumberArray(this.lastCount)[i]; // 同方向则在同一侧切换数字

      if (count > this.lastCount) {
        if (currentDigit >= lastDigit) {
          return 10 + num;
        }

        return 20 + num;
      }

      if (currentDigit <= lastDigit) {
        return 10 + num;
      }

      return num;
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this2 = this;

      if ('count' in nextProps) {
        var count = this.state.count;

        if (count === nextProps.count) {
          return;
        }

        this.lastCount = count; // 复原数字初始位置

        this.setState({
          animateStarted: true
        }, function () {
          // 等待数字位置复原完毕
          // 开始设置完整的数字
          setTimeout(function () {
            _this2.setState({
              animateStarted: false,
              count: nextProps.count
            }, function () {
              var onAnimated = _this2.props.onAnimated;

              if (onAnimated) {
                onAnimated();
              }
            });
          }, 5);
        });
      }
    }
  }, {
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var prefixCls = this.props.prefixCls;
      return (0, _configure.getPrefixCls)('scroll-number', prefixCls);
    }
  }, {
    key: "renderNumberList",
    value: function renderNumberList(position) {
      var childrenToReturn = [];

      for (var i = 0; i < 30; i++) {
        var currentClassName = position === i ? 'current' : '';
        childrenToReturn.push(_react["default"].createElement("p", {
          key: i.toString(),
          className: currentClassName
        }, i % 10));
      }

      return childrenToReturn;
    }
  }, {
    key: "renderNumberElement",
    value: function renderNumberElement() {
      var state = this.state;

      if (!state.count || isNaN(state.count)) {
        return state.count;
      }

      return getNumberArray(state.count).map(this.renderCurrentNumber).reverse();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          className = _this$props.className,
          style = _this$props.style,
          _this$props$component = _this$props.component,
          component = _this$props$component === void 0 ? 'sup' : _this$props$component;
      var restProps = (0, _omit["default"])(this.props, ['count', 'onAnimated', 'component', 'prefixCls']);
      var newProps = (0, _objectSpread2["default"])({}, restProps, {
        className: (0, _classnames["default"])(this.getPrefixCls(), className)
      });

      if (style && style.borderColor) {
        newProps.style.boxShadow = "0 0 0 1px ".concat(style.borderColor, " inset");
      }

      return (0, _react.createElement)(component, newProps, this.renderNumberElement());
    }
  }]);
  return ScrollNumber;
}(_react.Component);

exports["default"] = ScrollNumber;
ScrollNumber.displayName = 'ScrollNumber';
ScrollNumber.defaultProps = {
  count: null,
  onAnimated: function onAnimated() {}
};
//# sourceMappingURL=ScrollNumber.js.map