@td-design/react-native/lib/module/indicator/MaterialIndicator.js

react-native UI组件库

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { PureComponent } from 'react';
import { Animated, Easing, StyleSheet } from 'react-native';
import Box from '../box';
import Indicator from './Indicator';
export default class MaterialIndicator extends PureComponent {
  static displayName = 'MaterialIndicator';
  static defaultProps = {
    animationDuration: 4000,
    color: 'rgb(0, 0, 0)',
    size: 40
  };
  _renderComponent = _ref => {
    let {
      index,
      progress
    } = _ref;
    const {
      size,
      color,
      animationDuration
    } = this.props;
    const frames = 60 * animationDuration / 1000;
    const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
    const sa = 7.5;
    const ea = 30;
    const sequences = 3;
    const rotations = 5;
    const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
    const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
      let _progress = 2 * sequences * frameIndex / (frames - 1);
      const rotation = index ? +(360 - sa) : -(180 - sa);
      const sequence = Math.ceil(_progress);
      if (sequence % 2) {
        _progress = _progress - sequence + 1;
      } else {
        _progress = sequence - _progress;
      }
      const direction = index ? -1 : +1;
      return direction * (180 - (sa + ea)) * easing(_progress) + rotation + 'deg';
    });
    const layerStyle = {
      width: size,
      height: size,
      transform: [{
        rotate: 90 - sa + 'deg'
      }, {
        rotate: progress.interpolate({
          inputRange: [0, 1],
          outputRange: ['0deg', 360 * rotations + 'deg']
        })
      }]
    };
    const viewportStyle = {
      width: size,
      height: size,
      transform: [{
        translateY: index ? -size / 2 : 0
      }, {
        rotate: progress.interpolate({
          inputRange,
          outputRange
        })
      }]
    };
    const containerStyle = {
      width: size,
      height: size / 2,
      overflow: 'hidden'
    };
    const offsetStyle = index ? {
      top: size / 2
    } : null;
    const lineStyle = {
      width: size,
      height: size,
      borderColor: color,
      borderRadius: size / 2,
      borderWidth: size / 20
    };
    return /*#__PURE__*/React.createElement(Animated.View, {
      style: styles.layer,
      key: index
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: layerStyle
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: [containerStyle, offsetStyle],
      collapsable: false
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: viewportStyle
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: containerStyle,
      collapsable: false
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: lineStyle
    }))))));
  };
  render() {
    const {
      style,
      size: width,
      size: height,
      ...props
    } = this.props;
    return /*#__PURE__*/React.createElement(Box, {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      style: style
    }, /*#__PURE__*/React.createElement(Indicator, _extends({
      style: {
        width,
        height
      },
      renderComponent: this._renderComponent
    }, props, {
      count: 2
    })));
  }
}
const styles = StyleSheet.create({
  layer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center'
  }
});
//# sourceMappingURL=MaterialIndicator.js.map