@audira/carbon-react-native/lib/commonjs/components/loading/Loading.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Loading = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _index = require("../../contexts/index.js");
var _index2 = require("../layer/index.js");
var _index3 = require("./_circular-progress/index.js");
var _mapCircleBackgroundColor = require("./_map-circle-background-color.js");
var _mapCircleStrokeColor = require("./_map-circle-stroke-color.js");
var _jsxRuntime = require("react/jsx-runtime");
const Loading = exports.Loading = /*#__PURE__*/(0, _react.forwardRef)(function ({
  type = 'large',
  style,
  ...props
}, ref) {
  const layerContext = (0, _react.useContext)(_index2.LayerContext),
    themeContext = (0, _react.useContext)(_index.ThemeContext),
    /**
     * To animate degree unit, we have to animate it through interpolation
     * 
     * - 0 = 0deg
     * - 1 = 360deg
     */
    rotationValue = (0, _react.useRef)(new _reactNative.Animated.Value(0));
  (0, _react.useEffect)(() => {
    const loop = _reactNative.Animated.loop(_reactNative.Animated.timing(rotationValue.current, {
      toValue: 1,
      duration: _carbonReactNativeElements.Motion.Duration.slow_02,
      easing: _reactNative.Easing.linear,
      useNativeDriver: false
    }), {
      iterations: -1
    });
    loop.start();
    return loop.stop;
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircularProgress, {
    forwardedRef: ref,
    ...props,
    type: type,
    circleStrokeColor: _mapCircleStrokeColor.MapCircleStrokeColor[themeContext.colorScheme],
    circleBackgroundColor: _mapCircleBackgroundColor.MapCircleBackgroundColor[layerContext][themeContext.colorScheme],
    style: [{
      transform: [{
        rotateZ: rotationValue.current.interpolate({
          inputRange: [0, 1],
          outputRange: ['0deg', '360deg']
        })
      }]
    }, style]
  });
});
const AnimatedCircularProgress = _reactNative.Animated.createAnimatedComponent(_index3.CircularProgress);
//# sourceMappingURL=Loading.js.map