@td-design/react-native/lib/module/modal/alert/AlertContainer.js

react-native UI组件库

import React from 'react';
import { StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import { useSafeState } from '@td-design/rn-hooks';
import Box from '../../box';
import Button from '../../button';
import Flex from '../../flex';
import helpers from '../../helpers';
import Text from '../../text';
import ModalView from '../Modal/ModalView';
const {
  ONE_PIXEL
} = helpers;
const AlertContainer = _ref => {
  let {
    icon,
    title,
    content,
    confirmText = '确定',
    onPress,
    onAnimationEnd
  } = _ref;
  const theme = useTheme();
  const [visible, setVisible] = useSafeState(true);
  const [loading, setLoading] = useSafeState(false);

  /** 确定操作 */
  const handlePress = async () => {
    if (!onPress) {
      setVisible(false);
      return;
    }
    try {
      setLoading(true);
      await onPress();
      setLoading(false);
      setVisible(false);
    } catch (error) {
      setLoading(false);
    }
  };
  const footer = /*#__PURE__*/React.createElement(Box, {
    borderTopWidth: ONE_PIXEL,
    borderTopColor: 'border'
  }, /*#__PURE__*/React.createElement(Button, {
    style: {
      paddingVertical: theme.spacing.x3
    },
    loading: loading,
    onPress: handlePress,
    title: confirmText,
    type: "secondary",
    bordered: false
  }));
  const styles = StyleSheet.create({
    modal: {
      marginHorizontal: theme.spacing.x3,
      borderRadius: theme.borderRadii.x3
    }
  });
  return /*#__PURE__*/React.createElement(ModalView, {
    position: "center",
    visible: visible,
    maskClosable: false,
    onAnimationEnd: onAnimationEnd,
    onClose: () => setVisible(false),
    bodyContainerStyle: styles.modal
  }, /*#__PURE__*/React.createElement(Box, {
    marginBottom: "x3"
  }, !!icon && /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center"
  }, icon), !!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), footer);
};
export default AlertContainer;
//# sourceMappingURL=AlertContainer.js.map