FakeScreenshotApp/src/common/Dialog.js at master · thegreatjavascript/FakeScreenshotApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import { Overlay } from 'teaset'
import mobx from '../utils/mobx'

// 消息确认框
class InputDialog {
  constructor() {
    this.key = undefined
  }
  /**
   * @description
   * @param {title}: 弹框的标题
   * @param {options}: 高级选项
   * @param {style}: 自定义样式
   * @param {isModal}: 同Oveylay文档
   * @param {content}: 弹框中间的内容
   * @param {cb}: 确认后的回调函数
   */
  show = (
    title,
    options = { style: {}, isModal: true, content: undefined, cb }
  ) => {
    let overlayView = (
      <Overlay.View
        style={{ alignItems: 'center', justifyContent: 'center' }}
        modal={options.isModal}
        overlayOpacity={0.5}
        ref={v => (this.overlayView = v)}
      >
        <View
          style={{
            backgroundColor: '#FFFFFF',
            padding: 10,
            paddingLeft: 20,
            paddingRight: 20,
            width: '85%',
            height: 120,
            borderRadius: 5,
            alignItems: 'flex-start',
            justifyContent: 'space-between',
            ...options.style
          }}
        >
          {typeof title === 'string' ? (
            <Text
              style={{
                marginTop: 5,
                fontSize: 18,
                color: '#000000'
              }}
            >
              {title || '提示'}
            </Text>
          ) : (
            title
          )}
          {typeof options.content === 'string' ? (
            <Text
              style={{
                marginTop: 20,
                fontSize: 18,
                color: '#000000'
              }}
            >
              {options.content}
            </Text>
          ) : (
            options.content
          )}
          <View
            style={{
              alignSelf: 'flex-end',
              flexDirection: 'row',
              marginBottom: 10
            }}
          >
            {options.hideCancel || (
              <TouchableOpacity
                onPress={() => this.overlayView && this.overlayView.close()}
              >
                <Text
                  style={{
                    color: '#DDDDDD',
                    fontSize: 15,
                    fontWeight: 'bold',
                    marginRight: 20
                  }}
                >
                  取消
                </Text>
              </TouchableOpacity>
            )}
            <TouchableOpacity
              onPress={() => {
                options.cb && options.cb()
                this.overlayView && this.overlayView.close()
              }}
            >
              <Text
                style={{
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#000000'
                }}
              >
                确定
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </Overlay.View>
    )
    this.key = Overlay.show(overlayView)
  }

  hide = () => {
    Overlay.hide(this.key)
  }
}
export const inputDialog = new InputDialog()