@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 _reactNative = require("react-native");
var _blur = require("@react-native-community/blur");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const HIDE_TIMER = 3000;
const Notice = ({
  onNoticeHidden,
  content,
  id,
  status
}) => {
  const {
    width
  } = (0, _reactNative.useWindowDimensions)();
  const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
  const timer = (0, _element.useRef)(null);
  (0, _element.useEffect)(() => {
    // start animation
    _reactNative.Animated.timing(animationValue, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
      easing: _reactNative.Easing.out(_reactNative.Easing.quad)
    }).start(({
      finished
    }) => {
      if (finished && onNoticeHidden) {
        timer.current = setTimeout(() => {
          onHide();
        }, HIDE_TIMER);
      }
    });
    return () => {
      clearTimeout(timer?.current);
    };
  }, [animationValue, onHide, onNoticeHidden]);
  const onHide = (0, _element.useCallback)(() => {
    _reactNative.Animated.timing(animationValue, {
      toValue: 0,
      duration: 150,
      useNativeDriver: true,
      easing: _reactNative.Easing.out(_reactNative.Easing.quad)
    }).start(({
      finished
    }) => {
      if (finished && onNoticeHidden) {
        onNoticeHidden(id);
      }
    });
  }, [animationValue, 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];
  const containerStyles = [_style.default.notice, !_element.Platform.isIOS && noticeSolidStyles, {
    width,
    transform: [{
      translateY: animationValue.interpolate({
        inputRange: [0, 1],
        outputRange: [-24, 0]
      })
    }]
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
      style: containerStyles,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
        onPress: onHide,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: _style.default.noticeContent,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            numberOfLines: 3,
            style: textStyles,
            children: content
          })
        })
      }), _element.Platform.isIOS && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
        style: _style.default.blurBackground,
        blurType: "prominent",
        blurAmount: 10
      })]
    })
  });
};
var _default = exports.default = Notice;
//# sourceMappingURL=index.native.js.map