mh-rn-component/module/Overlay/index.js

import React, { useState } from 'react';
import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import LazyRender from "../LazyRender";
import * as Animatable from 'react-native-animatable';

const Overlay = _ref => {
  let {
    show,
    onChange,
    zIndex = 1,
    style,
    lazyRender = true,
    duration = 300,
    ...rest
  } = _ref;

  const showChange = () => {
    onChange(!show);
    durationTime();
  };

  const [_none, set_none] = useState("none");

  const durationTime = () => {
    if (show) {
      set_none("flex");
      const tt = setTimeout(() => {
        set_none("none");
        clearTimeout(tt);
      }, duration);
    }
  };

  return /*#__PURE__*/React.createElement(LazyRender, {
    lazyRender: lazyRender,
    duration: duration,
    show: show
  }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: showChange
  }, /*#__PURE__*/React.createElement(Animatable.View, {
    duration: duration,
    animation: show ? "fadeIn" : "fadeOut",
    style: StyleSheet.flatten([{
      display: show ? 'flex' : _none,
      zIndex: Number(zIndex)
    }, styles.overlay, style])
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.overlay_content, {
      zIndex: Number(zIndex) + 10
    }]
  }, rest === null || rest === void 0 ? void 0 : rest.children))));
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, .4)'
  },
  overlay_bg: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, .4)'
  },
  overlay_content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});
export default Overlay;
//# sourceMappingURL=index.js.map