@wordpress/components/build-module/notice/index.native.js

UI components for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { Animated, Easing, Text, TouchableWithoutFeedback, View, useWindowDimensions } from 'react-native';
import { BlurView } from '@react-native-community/blur';
/**
 * WordPress dependencies
 */

import { useEffect, useRef, useCallback, Platform } from '@wordpress/element';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import styles from './style.scss';
const HIDE_TIMER = 3000;

const Notice = _ref => {
  let {
    onNoticeHidden,
    content,
    id,
    status
  } = _ref;
  const {
    width
  } = useWindowDimensions();
  const animationValue = useRef(new Animated.Value(0)).current;
  const timer = useRef(null);
  useEffect(() => {
    // start animation
    Animated.timing(animationValue, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
      easing: Easing.out(Easing.quad)
    }).start(_ref2 => {
      let {
        finished
      } = _ref2;

      if (finished && onNoticeHidden) {
        timer.current = setTimeout(() => {
          onHide();
        }, HIDE_TIMER);
      }
    });
    return () => {
      clearTimeout(timer === null || timer === void 0 ? void 0 : timer.current);
    };
  }, [animationValue, onHide, onNoticeHidden]);
  const onHide = useCallback(() => {
    Animated.timing(animationValue, {
      toValue: 0,
      duration: 150,
      useNativeDriver: true,
      easing: Easing.out(Easing.quad)
    }).start(_ref3 => {
      let {
        finished
      } = _ref3;

      if (finished && onNoticeHidden) {
        onNoticeHidden(id);
      }
    });
  }, [animationValue, onNoticeHidden, id]);
  const noticeSolidStyles = usePreferredColorSchemeStyle(styles.noticeSolid, styles.noticeSolidDark);
  const successTextStyles = usePreferredColorSchemeStyle(styles.successText, styles.successTextDark);
  const errorTextStyles = usePreferredColorSchemeStyle(styles.errorText, styles.errorTextDark);
  const textStyles = [status === 'success' && successTextStyles, status === 'error' && errorTextStyles];
  const containerStyles = [styles.notice, !Platform.isIOS && noticeSolidStyles, {
    width,
    transform: [{
      translateY: animationValue.interpolate({
        inputRange: [0, 1],
        outputRange: [-24, 0]
      })
    }]
  }];
  return createElement(Fragment, null, createElement(Animated.View, {
    style: containerStyles
  }, createElement(TouchableWithoutFeedback, {
    onPress: onHide
  }, createElement(View, {
    style: styles.noticeContent
  }, createElement(Text, {
    numberOfLines: 3,
    style: textStyles
  }, content))), Platform.isIOS && createElement(BlurView, {
    style: styles.blurBackground,
    blurType: "prominent",
    blurAmount: 10
  })));
};

export default Notice;
//# sourceMappingURL=index.native.js.map