@td-design/react-native/lib/module/notify/NotifyRoot.js

react-native UI组件库

import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
import { StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Shadow } from 'react-native-shadow-2';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
import { normalShadowOpt, NotifyType } from './constant';
import useNotify from './useNotify';
const {
  px,
  hexToRgba
} = helpers;
const NotifyRoot = /*#__PURE__*/forwardRef((_, ref) => {
  const insets = useSafeAreaInsets();
  const {
    show,
    hide,
    shadowColor,
    bgColor,
    style,
    visible,
    options
  } = useNotify();
  useImperativeHandle(ref, () => ({
    show
  }));
  if (!visible || !options) return null;
  const styles = StyleSheet.create({
    container: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute',
      left: 0,
      right: 0,
      zIndex: 49,
      bottom: -insets.bottom
    },
    wrapper: {
      borderRadius: normalShadowOpt.radius,
      backgroundColor: bgColor
    }
  });
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.container, style]
  }, /*#__PURE__*/React.createElement(Shadow, {
    distance: 8,
    startColor: hexToRgba(shadowColor, normalShadowOpt.opacity)
  }, /*#__PURE__*/React.createElement(Flex, {
    paddingHorizontal: "x4",
    justifyContent: "center",
    alignItems: "center",
    width: normalShadowOpt.width,
    height: normalShadowOpt.height,
    style: styles.wrapper
  }, /*#__PURE__*/React.createElement(Content, {
    shadowColor,
    options,
    hide
  }))));
});
export default NotifyRoot;

/**
 * 渲染Notify内容。分为以下几种情况：
 * 1. notify的类型不是INFO，这时候直接返回Content
 * 2. notify类型是INFO：
 *    1: onPress有值，Content被TouchableOpacity包裹，同时显示right图标；
 *       如果同时onClose有值，再显示一个close图标，点击可关闭notify
 *    2: onPress没有值，Contentbu包裹，不显示right图标；
 *       如果同时onClose有值，再显示一个close图标，点击可关闭notify
 */
const Content = _ref => {
  let {
    shadowColor,
    options,
    hide
  } = _ref;
  const styles = StyleSheet.create({
    content: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center'
    }
  });
  const BaseContent = useMemo(() => /*#__PURE__*/React.createElement(Flex, {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }, options.type === NotifyType.SUCCESS && /*#__PURE__*/React.createElement(Box, {
    marginRight: "x1"
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "checkcircle",
    color: shadowColor
  })), options.type === NotifyType.FAIL && /*#__PURE__*/React.createElement(Box, {
    marginRight: "x1"
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "closecircleo",
    color: shadowColor
  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, {
    style: {
      fontSize: px(14),
      color: shadowColor
    }
  }, options.content))), [options.type, options.content, shadowColor]);
  if (options.type !== NotifyType.INFO) return BaseContent;
  if (options.onPress) {
    if (options.onClose) {
      return /*#__PURE__*/React.createElement(Pressable, {
        activeOpacity: options.activeOpacity,
        onPress: options.onPress,
        style: styles.content
      }, BaseContent, /*#__PURE__*/React.createElement(Pressable, {
        onPress: e => {
          e.stopPropagation();
          hide();
        }
      }, /*#__PURE__*/React.createElement(SvgIcon, {
        name: "close",
        color: shadowColor
      })), /*#__PURE__*/React.createElement(SvgIcon, {
        name: "right",
        color: shadowColor
      }));
    }
    return /*#__PURE__*/React.createElement(Pressable, {
      activeOpacity: options.activeOpacity,
      onPress: options.onPress,
      style: styles.content
    }, BaseContent, /*#__PURE__*/React.createElement(SvgIcon, {
      name: "right",
      color: shadowColor
    }));
  }
  if (options.onClose) {
    return /*#__PURE__*/React.createElement(Flex, {
      justifyContent: 'center',
      alignItems: 'center'
    }, BaseContent, /*#__PURE__*/React.createElement(Pressable, {
      onPress: e => {
        e.stopPropagation();
        hide();
      }
    }, /*#__PURE__*/React.createElement(SvgIcon, {
      name: "close",
      color: shadowColor
    })));
  }
  return BaseContent;
};
//# sourceMappingURL=NotifyRoot.js.map