@fruits-chain/react-native-xiaoshu/lib/module/progress/page.js

React Native UI library

import React, { useState, useCallback, useEffect, memo } from 'react';
import { View } from 'react-native';
import { useTheme } from '../theme';
import { getDefaultValue } from '../helpers';
import Progress from './progress';

const ProgressPage = _ref => {
  let {
    children,
    loading: loadingOut,
    backgroundColor
  } = _ref;
  const themeVar = useTheme();
  backgroundColor = getDefaultValue(backgroundColor, themeVar.progress_page_background_color);
  const [state, setState] = useState({
    loading: loadingOut,
    percentage: 0,
    duration: 0
  });
  const onAnimationEnd = useCallback(() => {
    if (state.percentage === 100) {
      setState(s => ({ ...s,
        loading: false
      }));
    }
  }, [state.percentage]);
  useEffect(() => {
    setState(s => ({ ...s,
      percentage: loadingOut ? 90 : 100,
      duration: loadingOut ? 1000 : 100
    }));
  }, [loadingOut]);
  const placeholderStyle = {
    flex: 1,
    backgroundColor: backgroundColor
  };

  if (state.loading) {
    return /*#__PURE__*/React.createElement(View, {
      style: placeholderStyle
    }, /*#__PURE__*/React.createElement(Progress, {
      percentage: state.percentage,
      showPivot: false,
      animated: true,
      animationDuration: state.duration,
      onAnimationEnd: onAnimationEnd,
      square: true
    }));
  } // eslint-disable-next-line react/jsx-no-useless-fragment


  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
};

export default /*#__PURE__*/memo(ProgressPage);
//# sourceMappingURL=page.js.map