react-native-1app/lib/DialogAlert.js

import React from "react";
import { StyleSheet, Text, ScrollView, Dimensions } from "react-native";
import TextInput from "./TextInput";

import { View, TouchableOpacity } from "react-native";
let height = Dimensions.get("window").height;

import PopupDialog, {
  Dialog,
  DialogTitle,
  DialogButton,
  SlideAnimation,
  ScaleAnimation,
  FadeAnimation,
} from "react-native-popup-dialog";

const fadeAnimation = new FadeAnimation({ animationDuration: 150 });
const scaleAnimation = new ScaleAnimation();
const slideAnimation = new SlideAnimation({ slideFrom: "bottom" });

let _ref = null;

export default class DialogAlert extends React.Component {
  constructor(props) {
    super(props);
    _ref = this;
    this.state = {
      title: "",
      descricao: "",
      actions: [],
      body: [],
      styleDescricao: {},
      styleTitle: {},
      action: [],
      renderHead: null,
      styleTextButton: {},
      texto: "",
      input: null,
      dialogStyle: {},
      center: "center",
      containerStyle: {},
    };
  }
  showScaleAnimationDialog = ({
    title = "",
    descricao = "",
    actions=[],
    body = [],
    align = "center",
    styleDescricao = {},
    styleTitle = {},
    action = [],
    renderHead = null,
    styleTextButton = {},
    texto = "",
    input = null,
    dialogStyle = {},
    containerStyle = {},
  }) => {
    // console.log("opennn==>>",actions);
    this.setState({
      title,
      descricao,
      actions,
      body,
      align,
      styleDescricao,
      styleTitle,
      action,
      containerStyle,
      renderHead,
      texto,
      input,
      dialogStyle,
      visible: true,
    });
    // console.log(this.scaleAnimationDialog);
    // setTimeout( ()=> {
    //   this.scaleAnimationDialog.updateDialog();
    // }, 10);
  };
  closeDialog() {
    // this.scaleAnimationDialog.destroyDialog();
    this.setState({ input: null, body: [], visible: false });
  }
  render() {
    const {
      title,
      descricao,
      actions,
      body,
      styleDescricao,
      styleTitle,
      action,
      renderHead,
      styleTextButton,
      input,
      dialogStyle,
      align,
      containerStyle,
    } = this.state;
    console.log(this.state.actions);
    return (
      <Dialog
        ref={(popupDialog) => {
          this.scaleAnimationDialog = popupDialog;
        }}
        visible={this.state.visible || false}
        dialogAnimation={slideAnimation}
        width={0.91}
        height={0.8}
        useNativeDriver
        // onHardwareBackPress={()=>this.closeDialog()}
        containerStyle={[styles.zindex, containerStyle, styles[align]]}
        // dismissOnTouchOutside={false}
        dialogStyle={[styles.dialogStyle, dialogStyle]}
        dialogTitle={
          (title && <DialogTitle style={styles.title} title={title} />) ||
          renderHead || <View />
        }
        // actions={  }
      >
        <ScrollView style={styles.scroll}>
          <Text style={[styles.text, styleDescricao]}>{descricao}</Text>
          {body}
        </ScrollView>
        {input && <View style={styles.viewInput} />}
        {input && (
          <TextInput
            {...input}
            style={[styles.textinput, input.style]}
            value={this.state.texto}
            onChange={(texto) => {
              if (input.onChange) input.onChange(texto);
              this.setState({ texto });
            }}
            // autoFocus={true}
            onSubmitEditing={() => {
              if (input.onSubmitEditing) {
                input.onSubmitEditing();
                this.closeDialog();
              }
            }}
          />
        )}
  
        <View
            style={{
              flexWrap: 'wrap',
              flexDirection: 'row',
              justifyContent: 'space-around',
              alignSelf: 'stretch',
              // flex: 1,
            }}>
            {actions.map((prop, index) => (
              <TouchableOpacity
                style={{
                  borderStyle: 'solid',
                  borderWidth: 0,
                  borderTopWidth: 1,
                  borderColor: 'rgba(187,177,177,0.53)',
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  minWidth: 100,
                  height: 40,
                  flexDirection: 'row',
                }}
                onPress={() => {
                  if (prop.onPress) prop.onPress();
                  this.closeDialog();
                }}
                key={'button' + index}>
                <View
                  style={{
                    width: 0.5,
                    height: 25,
                    backgroundColor: 'rgba(187,177,177,0.53)',
                  }}
                />
                <Text
                  style={{
                    fontWeight: '400',
                    fontSize: 18,
                    flex: 1,
                    flexWrap: 'nowrap',
                    textAlign: 'center',
                    color: 'rgb(0, 85, 255)',
                  }}>
                  {prop.title}
                </Text>
                <View
                  style={{
                    width: 0.5,
                    height: 25,
                    backgroundColor: 'rgba(187,177,177,0.53)',
                  }}
                />
              </TouchableOpacity>
            ))}
          </View>
      </Dialog>
    );
  }
}
var styles = StyleSheet.create({
  top: {
    paddingTop: 50,
    justifyContent: "flex-start",
  },
  center: {},
  viewInput: {
    height: 1,
    backgroundColor: "rgba(187,177,177,0.53)",
    alignSelf: "stretch",
  },
  text: {
    textAlign: "center",
    alignSelf: "stretch",
    color: "rgba(55,55,55,1)",
    alignSelf: "auto",
    fontWeight: "normal",
    fontSize: 14,
    margin: 20,
  },
  textinput: {
    color: "rgba(0,0,0,1)",
    alignSelf: "stretch",
    textAlign: "left",
    fontWeight: "normal",
    borderStyle: "solid",
    borderWidth: 0,
    borderTopWidth: 1,
    marginLeft: 10,
    marginRight: 10,
    borderColor: "rgba(187,177,177,0.53)",
  },
  textContainer: {
    paddingHorizontal: 1,
    paddingVertical: 1,
    height: 40,
  },
  button: {
    borderStyle: "solid",
    borderWidth: 0,
    borderTopWidth: 1,
    borderColor: "rgba(187,177,177,0.53)",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    minWidth: 100,
    height: 40,
    flexDirection: "row",
  },
  borderB: {
    width: 0.5,
    height: 25,
    backgroundColor: "rgba(187,177,177,0.53)",
  },
  zindex: {
    zIndex: 5000,
  },
  textButton: {
    fontWeight: "400",
    fontSize: 18,
    flex: 1,
    flexWrap: "nowrap",
    textAlign: "center",
    color: "rgb(0, 85, 255)",
  },
  scroll: {
    alignSelf: "stretch",
    // flex: 1,
    maxHeight: height - 200,
    flexDirection: "column",
  },
  actionButton: {
    flexWrap: "wrap",
    flexDirection: "row",
    justifyContent: "space-around",
    alignSelf: "stretch",
    flex: 1,
  },
  dialogStyle: {
    height: null,
    minHeight: 200,
    backgroundColor: "rgba(248,255,248,0.96)",
  },
  title: {
    backgroundColor: "rgba(248,255,248,0.3)",
  },
});
export function openDialog(...args) {
  // const ref = App.getDefault();
  if (_ref) {
    _ref.showScaleAnimationDialog(...args);
  }
}
export function closeDialog(...args) {
  // const ref = App.getDefault();
  if (_ref) {
    _ref.closeDialog(...args);
  }
}