react-native-animated-numbers/lib/commonjs/components/AnimatedNumber.js

Module that shows number changes through simple animation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _usePrevious = _interopRequireDefault(require("../hooks/usePrevious"));
var _utils = require("../utils");
var _constants = require("../constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const AnimatedNumber = ({
  animateToNumber: givenAnimateToNumber,
  fontStyle,
  animationDuration,
  includeComma,
  easing,
  containerStyle,
  fontVariant = _constants.DEFAULT_FONT_VARIANT,
  locale = 'en-US'
}) => {
  const animationRef = (0, _react.useRef)(null);
  const animateToNumber = (0, _utils.toAbsoluteInteger)(givenAnimateToNumber);
  const prevNumber = (0, _usePrevious.default)(animateToNumber);
  const animateToNumberString = animateToNumber.toString();
  const prevNumberString = prevNumber.toString();
  const NUMBERS = (0, _react.useMemo)(() => Array(10).fill(null).map((_, i) => i), []);
  const nextNumbersArr = (0, _react.useMemo)(() => {
    return includeComma ? (0, _utils.createNumberArrayWithComma)(animateToNumberString, locale) : Array.from(animateToNumberString, Number);
  }, [animateToNumberString, includeComma, locale]);
  const prevNumbersArr = (0, _react.useMemo)(() => {
    return includeComma ? (0, _utils.createNumberArrayWithComma)(prevNumberString, locale) : Array.from(prevNumberString, Number);
  }, [includeComma, prevNumberString, locale]);
  const [height, setHeight] = _react.default.useState(0);
  const animations = (0, _react.useMemo)(() => height === 0 ? [] : nextNumbersArr.map((__, index) => {
    const value = prevNumbersArr[index];
    if (typeof value !== 'number') {
      return new _reactNative.Animated.Value(0);
    }
    const animationHeight = -1 * (height * value);
    return new _reactNative.Animated.Value(animationHeight);
  }), [nextNumbersArr, height, prevNumbersArr]);
  const setButtonLayout = (0, _react.useCallback)(e => {
    setHeight(e.nativeEvent.layout.height);
  }, []);
  _react.default.useEffect(() => {
    if (height === 0) return;
    if (animationRef.current) {
      animationRef.current.stop();
    }
    const compositions = animations.reduce((acc, animation, index) => {
      const value = nextNumbersArr[index];
      if (typeof value === 'number') {
        acc.push(_reactNative.Animated.timing(animation, {
          toValue: -1 * (height * value),
          duration: animationDuration || 1400,
          useNativeDriver: true,
          easing: easing || _reactNative.Easing.elastic(1.2)
        }));
      }
      return acc;
    }, []);
    animationRef.current = _reactNative.Animated.parallel(compositions);
    animationRef.current.start();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [animations, height]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, height !== 0 && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: _reactNative.StyleSheet.flatten([containerStyle, {
      flexDirection: 'row',
      height
    }])
  }, animateToNumber < 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: [fontStyle, {
      height
    }]
  }, "-"), nextNumbersArr.map((n, index) => {
    if (typeof n === 'string') {
      return /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
        key: index,
        style: [fontStyle, {
          height
        }]
      }, n);
    }
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      key: index,
      style: {
        height,
        overflow: 'hidden'
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
      style: [{
        transform: [{
          translateY: animations[index]
        }]
      }]
    }, NUMBERS.map((number, i) => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: _reactNative.StyleSheet.flatten([fontStyle, {
        fontVariant,
        height
      }]),
      key: i
    }, number))));
  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: {
      opacity: 0,
      position: 'absolute'
    },
    pointerEvents: "none"
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: fontStyle,
    onLayout: setButtonLayout,
    numberOfLines: 1
  }, animateToNumber)));
};
var _default = exports.default = AnimatedNumber;
//# sourceMappingURL=AnimatedNumber.js.map