@fruits-chain/react-native-xiaoshu/lib/module/loading/loading-spinner.js

🌈 React Native UI library

import React, { useRef, memo } from 'react';
import { View, Animated, StyleSheet, Easing } from 'react-native';
import { getDefaultValue } from '../helpers';
import Theme from '../theme';
import { varCreator } from './style';
import useLoop from './useLoop';
const PETAL_COUNT = 8;
const PETALS = new Array(PETAL_COUNT).fill(0);
const A_OPACITY = 1 / PETAL_COUNT;
const A_ROTATE = 360 / PETAL_COUNT;

const Spinner = _ref => {
  let {
    size,
    color
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const AnimatedSpinnerValue = useRef(new Animated.Value(0)).current;
  size = getDefaultValue(size, CV.loading_icon_size);
  color = getDefaultValue(color, CV.loading_icon_color);
  useLoop(AnimatedSpinnerValue, 0, {
    toValue: 1,
    duration: CV.loading_icon_animation_duration,
    easing: Easing.linear
  });
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: [STYLES.icon, {
      width: size,
      height: size,
      transform: [{
        rotateZ: AnimatedSpinnerValue.interpolate({
          inputRange: [0, 1],
          outputRange: ['0deg', '360deg']
        })
      }]
    }]
  }, PETALS.map((_, i) => {
    return /*#__PURE__*/React.createElement(View, {
      key: i,
      style: StyleSheet.flatten([STYLES.petal, {
        opacity: A_OPACITY * (i + 1),
        transform: [{
          rotate: `${A_ROTATE * i}deg`
        }]
      }])
    }, /*#__PURE__*/React.createElement(View, {
      style: [STYLES.inner, {
        backgroundColor: color
      }]
    }));
  }));
};

const STYLES = StyleSheet.create({
  icon: {
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative' // backgroundColor: '#999', // to test ui
    // transform: [
    //   {
    //     rotate: '-90deg',
    //   },
    // ],

  },
  petal: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center' // backgroundColor: '#f30', // to test ui

  },
  inner: {
    width: 2,
    height: '30%',
    borderRadius: 1 // backgroundColor: '#000',

  }
});
export default /*#__PURE__*/memo(Spinner);
//# sourceMappingURL=loading-spinner.js.map