@polls-platform/react-native/lib/commonjs/components/LoadingView/index.js

React Native SDK for Polls Platform

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LoadingView = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactNative = require("react-native");

var _internal = require("@polls-platform/core/built/internal");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// react
// @polls-platform/core
const LoadingView = _ref => {
  let {
    isVisible,
    title,
    imageUrl,
    theme
  } = _ref;

  // animations
  const imageOpacity = _react.default.useRef(new _reactNative.Animated.Value(0)).current; // initial


  const titleOpacity = _react.default.useRef(new _reactNative.Animated.Value(0)).current; // initial


  const spinnerOpacity = _react.default.useRef(new _reactNative.Animated.Value(0)).current; // initial
  // show/hide


  _react.default.useEffect(() => {
    const initialDelay = isVisible ? 400 : 0;
    const cascadeDelay = isVisible ? 80 : 0;

    _reactNative.Animated.timing(imageOpacity, {
      toValue: isVisible ? 1 : 0,
      duration: _internal.ANIMATION_DURATION,
      useNativeDriver: true,
      delay: initialDelay
    }).start();

    _reactNative.Animated.timing(titleOpacity, {
      toValue: isVisible ? 1 : 0,
      duration: _internal.ANIMATION_DURATION,
      useNativeDriver: true,
      delay: initialDelay + 1 * cascadeDelay
    }).start();

    _reactNative.Animated.timing(spinnerOpacity, {
      toValue: isVisible ? 1 : 0,
      duration: _internal.ANIMATION_DURATION,
      useNativeDriver: true,
      delay: initialDelay + 2 * cascadeDelay
    }).start(); // we do not want to run this if the animation ref changes
    // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [isVisible]);

  const themeProperties = (0, _internal.getThemeProperties)(theme);
  const styles = createStyles({
    themeProperties
  });
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.container
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: { ...styles.imageContainer,
      opacity: imageOpacity
    }
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
    style: styles.image,
    source: {
      uri: imageUrl
    }
  })), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: { ...styles.titleContainer,
      opacity: titleOpacity
    }
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: styles.titleText
  }, title)), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: { ...styles.spinner,
      opacity: spinnerOpacity
    }
  }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
    size: "large",
    color: themeProperties.colors.loadingIndicatorColor
  })));
};

exports.LoadingView = LoadingView;

const createStyles = styleProps => {
  const {
    themeProperties
  } = styleProps;
  const {
    colors: themeColors
  } = themeProperties;

  const styles = _reactNative.StyleSheet.create({
    container: {
      position: 'absolute',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
      backgroundColor: themeColors.backgroundColor
    },
    imageContainer: {
      marginTop: 100,
      padding: 20,
      width: '100%',
      height: 100
    },
    image: {
      width: '100%',
      height: '100%',
      resizeMode: 'contain'
    },
    titleContainer: {
      marginTop: 20
    },
    titleText: {
      fontSize: 26,
      fontWeight: '600',
      color: themeColors.loadingTitleColor
    },
    spinner: {
      position: 'absolute',
      bottom: 100,
      width: '100%',
      height: 80,
      justifyContent: 'center',
      alignItems: 'center'
    }
  });

  return styles;
};
//# sourceMappingURL=index.js.map