@td-design/react-native/lib/module/modal/prompt/PromptContainer.js

react-native UI组件库

import React from 'react';
import { StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
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';
import usePrompt from './usePrompt';
const {
  ONE_PIXEL
} = helpers;
const PromptContainer = _ref => {
  let {
    title,
    content,
    okText,
    cancelText,
    onOk,
    onCancel,
    onAnimationEnd,
    input
  } = _ref;
  const theme = useTheme();
  const {
    value,
    onChange,
    visible,
    hide,
    handleOk,
    handleCancel,
    okBtnLoading,
    cancelBtnLoading
  } = usePrompt({
    onOk,
    onCancel
  });
  const InputComp = /*#__PURE__*/React.cloneElement(input, {
    value,
    onChange
  });
  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: hide,
    bodyContainerStyle: styles.modal
  }, /*#__PURE__*/React.createElement(Box, {
    marginBottom: "x2"
  }, /*#__PURE__*/React.createElement(Flex, {
    flexDirection: "column",
    justifyContent: "center",
    marginBottom: "x2"
  }, /*#__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(Text, {
    variant: "p1",
    color: "text"
  }, content) : content), /*#__PURE__*/React.createElement(Box, {
    marginHorizontal: "x3"
  }, InputComp)), /*#__PURE__*/React.createElement(Flex, {
    borderTopWidth: ONE_PIXEL,
    borderTopColor: "border"
  }, /*#__PURE__*/React.createElement(Flex.Item, {
    borderRightWidth: ONE_PIXEL,
    borderRightColor: "border"
  }, /*#__PURE__*/React.createElement(Button, {
    loading: cancelBtnLoading,
    onPress: handleCancel,
    title: /*#__PURE__*/React.createElement(Text, {
      variant: "p0",
      color: "text"
    }, cancelText),
    type: "secondary",
    bordered: false,
    style: {
      paddingVertical: theme.spacing.x3
    }
  })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
    loading: okBtnLoading,
    onPress: handleOk,
    title: okText,
    type: "secondary",
    bordered: false,
    style: {
      paddingVertical: theme.spacing.x3
    }
  }))));
};
export default PromptContainer;
//# sourceMappingURL=PromptContainer.js.map