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

import React, { useEffect } from 'react';
import { Animated, View, Text, StyleSheet, TouchableWithoutFeedback, Easing } from 'react-native';
import Overlay from '../Overlay'; // import { useHeaderHeight } from '@react-navigation/elements'

import Icon from '../Icon';

const Toast = _ref => {
  let {
    message = "成功",
    show = false,
    icon,
    iconSize = 48,
    overlayNeed = true,
    //* 是否需要遮罩层 默认true
    overlay = false,
    closeOnClickOverlay = true,
    duration = 2000,
    color = "#fff",
    position = "middle",
    loading = false,
    ...rest
  } = _ref;

  const onChange = value => {
    (rest === null || rest === void 0 ? void 0 : rest.onChange) && (rest.id ? rest === null || rest === void 0 ? void 0 : rest.onChange(rest.id) : rest === null || rest === void 0 ? void 0 : rest.onChange(false));
  }; // 隐藏 2000s后隐藏


  const hide = () => {
    if (duration === 0) {
      return;
    }

    const tt = setTimeout(() => {
      onChange();
      clearTimeout(tt);
    }, Number(duration));
  };

  const turn = new Animated.Value(0);
  useEffect(() => {
    hide();
  }, [show]);
  useEffect(() => {
    Animated.loop(Animated.timing(turn, {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
      useNativeDriver: false
    }), {
      iterations: -1
    }).start(); // turn.setValue(360)
  }, [loading]);

  const lodingDom = () => {
    return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, null, /*#__PURE__*/React.createElement(Animated.View, {
      style: {
        transform: [{
          rotateZ: turn.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
          })
        }]
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      color: color,
      name: icon,
      size: Number(iconSize)
    })));
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, overlayNeed ? /*#__PURE__*/React.createElement(Overlay, {
    show: show,
    onChange: () => closeOnClickOverlay && onChange(false),
    style: [!overlay && {
      backgroundColor: ''
    }]
  }, /*#__PURE__*/React.createElement(View, {
    style: StyleSheet.flatten([styles.toast, position !== "middle" && styles[`position_${position}`]])
  }, loading && lodingDom(), !loading && icon && /*#__PURE__*/React.createElement(Icon, {
    color: color,
    name: icon,
    size: Number(iconSize)
  }), /*#__PURE__*/React.createElement(Text, {
    style: {
      color: color
    }
  }, message))) : /*#__PURE__*/React.createElement(View, {
    pointerEvents: "none",
    style: [styles.no_overlay_toast, {
      display: show ? 'flex' : 'none'
    }]
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.toast]
  }, loading && lodingDom(), !loading && icon && /*#__PURE__*/React.createElement(Icon, {
    color: color,
    name: icon,
    size: Number(iconSize)
  }), /*#__PURE__*/React.createElement(Text, {
    style: {
      color: color
    }
  }, message))));
};

const styles = StyleSheet.create({
  toast: {
    borderRadius: 6,
    padding: 16,
    overflow: "hidden",
    backgroundColor: 'rgba(0, 0, 0, .4)',
    minWidth: 96,
    alignItems: "center",
    position: "absolute"
  },
  no_overlay_toast: {
    width: '100%',
    height: '100%',
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    position: "absolute",
    top: 0,
    left: 0
  },
  position_top: {
    top: "10%"
  },
  position_bottom: {
    bottom: "10%"
  }
});
export default Toast;
//# sourceMappingURL=index.js.map