@td-design/react-native/lib/module/toast/ToastRoot.js

react-native UI组件库

import React, { forwardRef, useImperativeHandle } from 'react';
import { ActivityIndicator, StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import helpers from '../helpers';
import Text from '../text';
import useToast from './useToast';
const ToastRoot = /*#__PURE__*/forwardRef((_, ref) => {
  const insets = useSafeAreaInsets();
  const theme = useTheme();
  const {
    show,
    hide,
    visible,
    options
  } = useToast();
  useImperativeHandle(ref, () => ({
    show,
    hide
  }));
  if (!visible || !options) return null;
  let contentStyle = {};
  switch (options.position) {
    case 'top':
      contentStyle = {
        top: insets.top + helpers.px(100)
      };
      break;
    case 'bottom':
      contentStyle = {
        bottom: insets.bottom + helpers.px(50)
      };
      break;
    case 'middle':
      contentStyle = {
        top: helpers.deviceHeight / 2
      };
      break;
    default:
      contentStyle = {};
  }
  const styles = StyleSheet.create({
    content: {
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute',
      width: helpers.deviceWidth,
      zIndex: 49
    }
  });
  const Content = /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.content, contentStyle]
  }, /*#__PURE__*/React.createElement(Box, {
    minWidth: helpers.px(80),
    padding: "x3",
    borderRadius: "x1",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "gray500",
    position: "absolute"
  }, !!options.indicator && /*#__PURE__*/React.createElement(Box, {
    marginBottom: 'x2'
  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
    size: helpers.px(20),
    color: theme.colors.gray50
  })), typeof options.content === 'string' ? /*#__PURE__*/React.createElement(Text, {
    variant: "p1",
    color: "gray50"
  }, options.content) : /*#__PURE__*/React.createElement(React.Fragment, null, options.content)));
  if (options.mask) {
    return /*#__PURE__*/React.createElement(Box, {
      style: StyleSheet.absoluteFill,
      pointerEvents: "box-only",
      zIndex: '59',
      backgroundColor: "mask"
    }, Content);
  }
  return Content;
});
export default ToastRoot;
//# sourceMappingURL=ToastRoot.js.map