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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _element = require("@wordpress/element");

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

var _blur = require("@react-native-community/blur");

var _compose = require("@wordpress/compose");

var _style = _interopRequireDefault(require("./style.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const Notice = ({
  onNoticeHidden,
  content,
  id,
  status
}) => {
  const [width, setWidth] = (0, _element.useState)(_reactNative.Dimensions.get('window').width);
  const [visible, setVisible] = (0, _element.useState)(true);
  const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
  const timer = (0, _element.useRef)(null);
  const isIOS = _reactNative.Platform.OS === 'ios';

  const onDimensionsChange = () => {
    setWidth(_reactNative.Dimensions.get('window').width);
  };

  (0, _element.useEffect)(() => {
    _reactNative.Dimensions.addEventListener('change', onDimensionsChange);

    return () => {
      _reactNative.Dimensions.removeEventListener('change', onDimensionsChange);
    };
  }, []);
  (0, _element.useEffect)(() => {
    startAnimation();
    return () => {
      clearTimeout(timer === null || timer === void 0 ? void 0 : timer.current);
    };
  }, [visible, id]);

  const onHide = () => {
    setVisible(false);
  };

  const startAnimation = () => {
    _reactNative.Animated.timing(animationValue, {
      toValue: visible ? 1 : 0,
      duration: visible ? 300 : 150,
      useNativeDriver: true,
      easing: _reactNative.Easing.out(_reactNative.Easing.quad)
    }).start(() => {
      if (visible && onNoticeHidden) {
        timer.current = setTimeout(() => {
          onHide();
        }, 3000);
      }

      if (!visible && onNoticeHidden) {
        onNoticeHidden(id);
      }
    });
  };

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

var _default = Notice;
exports.default = _default;
//# sourceMappingURL=index.native.js.map