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

🌈 React Native UI library

"use strict";

import { CrossCircleOutline, SuccessCircleOutline } from '@fruits-chain/icons-react-native';
import isNil from 'lodash/isNil';
import React, { useEffect, useState, useImperativeHandle, forwardRef, memo } from 'react';
import { Text, View, TouchableWithoutFeedback } from 'react-native';
import Circular from "../loading/loading-circular.js";
import Spinner from "../loading/loading-spinner.js";
import Popup from "../popup/popup.js";
import Theme from "../theme/index.js";
import { varCreator, styleCreator } from "./style.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Toast = /*#__PURE__*/forwardRef(({
  theme,
  type,
  position = 'middle',
  message,
  overlay = false,
  forbidPress = false,
  closeOnPress = false,
  closeOnPressOverlay = false,
  loadingType = 'spinner',
  duration = 2000,
  icon,
  ...resetProps
}, ref) => {
  const [CV, STYLES] = Theme.useStyle({
    varCreator,
    styleCreator,
    theme
  });
  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__*/_jsx(Popup, {
    ...resetProps,
    visible: show,
    overlay: overlay,
    onPressOverlay: onPressOverlay,
    children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
      onPress: onPressContent,
      children: /*#__PURE__*/_jsx(View, {
        style: toastStyles,
        pointerEvents: forbidPress ? undefined : 'box-none',
        collapsable: false,
        children: /*#__PURE__*/_jsxs(View, {
          style: [STYLES.inner, type === 'text' ? STYLES.inner_type_text : null],
          children: [type !== 'text' ? /*#__PURE__*/_jsxs(View, {
            style: STYLES.icon,
            children: [type === 'loading' ? loadingType === 'circular' ? /*#__PURE__*/_jsx(Circular, {
              color: CV.toast_icon_color,
              size: CV.toast_icon_size
            }) : /*#__PURE__*/_jsx(Spinner, {
              color: CV.toast_icon_color,
              size: CV.toast_icon_size
            }) : null, type === 'success' ? /*#__PURE__*/_jsx(SuccessCircleOutline, {
              color: CV.toast_icon_color,
              size: CV.toast_icon_size
            }) : null, type === 'fail' ? /*#__PURE__*/_jsx(CrossCircleOutline, {
              color: CV.toast_icon_color,
              size: CV.toast_icon_size
            }) : null, type === 'icon' ? icon : null]
          }) : null, !isNil(msg) && msg !== '' ? /*#__PURE__*/_jsx(Text, {
            style: [STYLES.text, type === 'text' ? STYLES.text_top_0 : null],
            children: msg
          }) : null]
        })
      })
    })
  });
});
export default /*#__PURE__*/memo(Toast);
//# sourceMappingURL=toast.js.map