choerodon-ui/es/badge/ScrollNumber.js

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import React, { Component, createElement } from 'react';
import omit from 'lodash/omit';
import classNames from 'classnames';
import { getPrefixCls as _getPrefixCls } from '../configure';

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

var ScrollNumber =
/*#__PURE__*/
function (_Component) {
  _inherits(ScrollNumber, _Component);

  var _super = _createSuper(ScrollNumber);

  function ScrollNumber(props) {
    var _this;

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

  _createClass(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 _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.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 = omit(this.props, ['count', 'onAnimated', 'component', 'prefixCls']);

      var newProps = _objectSpread({}, restProps, {
        className: classNames(this.getPrefixCls(), className)
      });

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

      return createElement(component, newProps, this.renderNumberElement());
    }
  }]);

  return ScrollNumber;
}(Component);

export { ScrollNumber as default };
ScrollNumber.displayName = 'ScrollNumber';
ScrollNumber.defaultProps = {
  count: null,
  onAnimated: function onAnimated() {}
};
//# sourceMappingURL=ScrollNumber.js.map