@td-design/react-native/lib/module/modal/tip/TipContainer.js

react-native UI组件库

import React from 'react';
import { StyleSheet } from 'react-native';
import Svg, { Circle, ClipPath, Image } from 'react-native-svg';
import { useTheme } from '@shopify/restyle';
import { useBoolean } from '@td-design/rn-hooks';
import Box from '../../box';
import Flex from '../../flex';
import Pressable from '../../pressable';
import SvgIcon from '../../svg-icon';
import Text from '../../text';
import ModalView from '../Modal/ModalView';
const TipContainer = _ref => {
  let {
    title,
    content,
    img,
    height,
    onAnimationEnd,
    closeIconActiveOpacity = 0.6
  } = _ref;
  const theme = useTheme();
  const [visible, {
    setFalse
  }] = useBoolean(true);
  const styles = StyleSheet.create({
    modal: {
      marginHorizontal: theme.spacing.x3
    }
  });
  return /*#__PURE__*/React.createElement(ModalView, {
    position: "center",
    visible: visible,
    maskClosable: false,
    onClose: setFalse,
    onAnimationEnd: onAnimationEnd,
    bodyContainerStyle: styles.modal
  }, /*#__PURE__*/React.createElement(Box, {
    borderRadius: "x3",
    overflow: "hidden"
  }, !!img && /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Svg, {
    width: "100%",
    height: height
  }, /*#__PURE__*/React.createElement(ClipPath, {
    id: "clip"
  }, /*#__PURE__*/React.createElement(Circle, {
    r: 300 + height,
    cx: "50%",
    cy: -300
  })), /*#__PURE__*/React.createElement(Image, {
    href: img,
    width: "100%",
    height: height,
    clipPath: "url(#clip)",
    preserveAspectRatio: "xMidYMid slice"
  }))), /*#__PURE__*/React.createElement(Box, {
    marginBottom: "x2"
  }, !!title && /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center",
    marginVertical: "x2"
  }, typeof title === 'string' ? /*#__PURE__*/React.createElement(Text, {
    variant: "h1",
    color: "text"
  }, title) : title), typeof content === 'string' ? /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p1",
    color: "text"
  }, content)) : content)), /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center",
    position: "absolute",
    width: "100%",
    bottom: -theme.spacing.x10
  }, /*#__PURE__*/React.createElement(Pressable, {
    hitOffset: 20,
    activeOpacity: closeIconActiveOpacity,
    onPress: setFalse
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "closecircleo",
    color: theme.colors.gray400,
    size: theme.spacing.x8
  }))));
};
export default TipContainer;
//# sourceMappingURL=TipContainer.js.map