mh-rn-component/module/Dialog/index.js

import React from 'react';
import { Animated, View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import Overlay from '../Overlay';
import Button from '../Button';

const Dialog = _ref => {
  let {
    show,
    zIndex,
    children,
    style,
    title,
    width = 360,
    message,
    messageAlign = "center",
    showConfirmButton = true,
    showCancelButton = true,
    confirmButtonText = "确认",
    confirmButtonColor = "#ee0a24",
    cancelButtonText = "取消",
    cancelButtonColor = "#333333",
    fontSizeButtonText = 16,
    overlay = true,
    closeOnClickOverlay = true,
    customButton,
    customTitle,
    ...rest
  } = _ref;

  const changeStatus = () => {
    rest.id ? rest.onChange(rest.id) : rest.onChange(false);
  };

  const cancel = () => {
    rest.cancel && rest.cancel();
    changeStatus();
  };

  const confirm = () => {
    rest.confirm && rest.confirm();
    changeStatus();
  };

  return /*#__PURE__*/React.createElement(Overlay, {
    show: show,
    style: [rest.overlayStyle, !overlay && {
      backgroundColor: ''
    }],
    onChange: () => closeOnClickOverlay && changeStatus(),
    zIndex: zIndex
  }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, null, /*#__PURE__*/React.createElement(Animated.View, null, /*#__PURE__*/React.createElement(View, {
    style: StyleSheet.flatten([styles.dialog, {
      width: width
    }, style])
  }, customTitle ? customTitle() : title && /*#__PURE__*/React.createElement(Text, {
    style: styles.title
  }, title), children ? children : /*#__PURE__*/React.createElement(View, {
    style: styles.content
  }, /*#__PURE__*/React.createElement(Text, {
    style: StyleSheet.flatten([styles.content_text, {
      textAlign: messageAlign
    }])
  }, typeof message === "string" ? message : message())), !customButton && /*#__PURE__*/React.createElement(View, {
    style: styles.dialog_confirm_button
  }, showCancelButton && /*#__PURE__*/React.createElement(Button, {
    onPress: cancel,
    textStyle: {
      fontSize: fontSizeButtonText,
      color: cancelButtonColor
    },
    style: StyleSheet.flatten([{
      width: showConfirmButton ? width / 2 : width,
      borderWidth: 0
    }])
  }, cancelButtonText), showConfirmButton && /*#__PURE__*/React.createElement(Button, {
    onPress: confirm,
    textStyle: {
      fontSize: fontSizeButtonText,
      color: confirmButtonColor
    },
    style: StyleSheet.flatten([{
      width: showCancelButton ? width / 2 : width,
      borderWidth: 0
    }])
  }, confirmButtonText)), customButton && customButton()))));
};

const styles = StyleSheet.create({
  dialog: {
    borderRadius: 10,
    backgroundColor: "#ffffff",
    paddingTop: 24,
    overflow: "hidden"
  },
  title: {
    fontSize: 18,
    width: "100%",
    textAlign: 'center',
    fontWeight: '600',
    paddingLeft: 16,
    paddingRight: 16
  },
  content: {
    width: "100%",
    marginTop: 16,
    marginBottom: 16,
    paddingLeft: 16,
    paddingRight: 16
  },
  content_text: {
    fontSize: 16,
    textAlign: 'center'
  },
  dialog_confirm_button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: "center"
  }
});
export default Dialog;
//# sourceMappingURL=index.js.map