@fruits-chain/react-native-xiaoshu/lib/module/toast/toast.js

🌈 React Native UI library

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useEffect, useState, useImperativeHandle, forwardRef, memo } from 'react';
import { Text, View, TouchableWithoutFeedback } from 'react-native';
import CrossCircleOutline from '../icon/cross-circle';
import SuccessCircleOutline from '../icon/success-circle';
import Circular from '../loading/loading-circular';
import Spinner from '../loading/loading-spinner';
import Popup from '../popup/popup';
import Theme from '../theme';
import { varCreator, styleCreator } from './style';
const Toast = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    type,
    position = 'middle',
    message,
    overlay = false,
    forbidPress = false,
    closeOnPress = false,
    closeOnPressOverlay = false,
    loadingType = 'spinner',
    duration = 2000,
    icon,
    ...reset
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const STYLES = Theme.createStyle(CV, styleCreator);
  const [show, setShow] = useState(false);
  const [msg, setMsg] = useState(message); // 修正数据

  if (closeOnPress) {
    // 是否在点击后关闭
    // 是否禁止背景点击
    // 可以触发点击的地方正好被背景 View 挡住
    forbidPress = false;
  }
  /**
   * 点击遮罩层
   */


  const onPressOverlay = () => {
    // 是否在点击遮罩层后关闭
    if (closeOnPressOverlay) {
      setShow(false);
    }
  };
  /**
   * 点击内容
   */


  const onPressContent = () => {
    // 是否在点击后关闭
    if (closeOnPress) {
      setShow(false);
    }
  };

  useEffect(() => {
    setShow(true);
    let timer;

    if (duration !== 0) {
      timer = setTimeout(() => {
        // 隐藏弹窗
        setShow(false);
      }, duration);
    }

    return () => {
      clearTimeout(timer);
    };
  }, [duration]); // 向外暴露方法

  useImperativeHandle(ref, () => ({
    close: () => {
      setShow(false);
    },
    setMessage: s => {
      setMsg(s);
    }
  }), []);
  const toastStyles = [STYLES.toast, {
    justifyContent: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
  }];
  return /*#__PURE__*/React.createElement(Popup, _extends({}, reset, {
    visible: show,
    overlay: overlay,
    onPressOverlay: onPressOverlay
  }), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: onPressContent
  }, /*#__PURE__*/React.createElement(View, {
    style: toastStyles,
    pointerEvents: forbidPress ? undefined : 'box-none',
    collapsable: false
  }, /*#__PURE__*/React.createElement(View, {
    style: [STYLES.inner, type === 'text' ? STYLES.inner_type_text : null]
  }, type !== 'text' ? /*#__PURE__*/React.createElement(View, {
    style: STYLES.icon
  }, type === 'loading' ? loadingType === 'circular' ? /*#__PURE__*/React.createElement(Circular, {
    color: CV.toast_icon_color,
    size: CV.toast_icon_size
  }) : /*#__PURE__*/React.createElement(Spinner, {
    color: CV.toast_icon_color,
    size: CV.toast_icon_size
  }) : null, type === 'success' ? /*#__PURE__*/React.createElement(SuccessCircleOutline, {
    color: CV.toast_icon_color,
    size: CV.toast_icon_size
  }) : null, type === 'fail' ? /*#__PURE__*/React.createElement(CrossCircleOutline, {
    color: CV.toast_icon_color,
    size: CV.toast_icon_size
  }) : null, type === 'icon' ? icon : null) : null, /*#__PURE__*/React.createElement(Text, {
    style: [STYLES.text, type === 'text' ? STYLES.text_top_0 : null]
  }, msg)))));
});
export default /*#__PURE__*/memo(Toast);
//# sourceMappingURL=toast.js.map