-
Notifications
You must be signed in to change notification settings - Fork 0
/
phoenix-rn-helper.d.ts
200 lines (174 loc) · 5.22 KB
/
phoenix-rn-helper.d.ts
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
declare module 'phoenix-rn-helper'{
import * as React from "react"
import * as ReactNative from "react-native"
export interface DividerProps {
/**
* defines the height of Divider.
*
* @deafault StyleSheet.hairlineWidth which is very thin
*/
size?: number;
/**
* defines the color of the Divider
*
* @default grey
*/
color?: string;
/**
* defines the space left on both the end from end of the object
*
* @default 0
*/
margin?: number;
}
export interface ColorSelectorProps {
/**
* The value of the color to start with
*/
value: string;
/**
* Function to assign to listen to change of color
*/
onChange: (color: string) => void;
/**
* style object to modify the default styling of the representing box.
*
* @default {
width: 30,
height: 30,
borderRadius: 10,
borderColor: "black",
borderWidth: 1,
marginRight: 5,
}
*/
style?: ReactNative.StyleProp<ReactNative.ViewStyle>;
}
export interface CheckBoxProps {
/**
* Boolean value to control the checkbox
*/
value: boolean;
/**
* Function that will be called with updated boolean value
*/
onChange: (value: boolean) => void;
/**
* Outer Box styling.
*
* `Advice` Keep in mind that deafult style will be applied first and then custom style
*/
boxStyle?: ReactNative.StyleProp<ReactNative.ViewStyle>;
/**
* Component to render when checkbox value is `true`.
*
* @default ✔️
*/
TrueComponent?: React.Component<any>;
/**
* Component to render when checkbox value is `false`.
*
* @default ❌
*/
FalseCoponent?: React.Component<any>;
}
export interface ThemeTogglerProps {
/**
* value that contains current theme value.
*
* `Warning` It should only contain `"light"` or `"dark"`.
*/
value: "light" | "dark";
/**
* Function that will be called each time theme changes.
*/
onChange: (value: "light" | "dark") => void;
/**
* Duration of animation. In millisecond.
*
* @default 100
*/
duration?: number;
/**
* Style object for main container.
*
* `Advice`: Make sure to have proper backgroundColor reltive to `sunColor` and `moonColor`
*
* @default {
* width: 60,
* height: 60,
* borderRadius: 100,
* backgroundColor: "#2155ff",
* padding: 5,
* alignItems: "center",
* justifyContent: "center"
* }
*/
boxStyle?: ReactNative.StyleProp<ReactNative.ViewStyle>;
/**
* Color of sun (light theme indicator).
*
* @default #fff
*/
sunColor?: string;
/**
* Color of moon (dark theme indicator)
*
* @default #fff
*/
moonColor?: string;
}
export interface TouchHereProps {
/**
* X cordination of touch to be shown
*/
x: number;
/**
* Y cordination of touch to be shown
*/
y: number;
/**
* The control variable to show the modal.
*
* `Advice`: Recomended to set true in start and use delay prop to adjust timing.
*/
visible: boolean;
/**
* Function that will be called on closing of component.
*
* @required for android
*/
onRequestClose: () => void;
/**
* Duration of the whole animation includes both hand down and waves so make sure to have higher value. In millisecond.
*
* @default 3500
*/
duration?: number;
/**
* How much time after animation should be shown.
*
* `Advice`: Generally you want to wait for the user to touch on desired location and if not touched then show this so you can use `delay` property for that.
*
* @default 0
*/
delay?: number;
/**
* Color of hand. It is just outline like color. Whole hand won't be filled with this color because it is better to show as much as background to user as possible
*
* @default #fff
*/
handColor?: string;
/**
* Color of waves. Currently 2 waves will be shown.
*
* @default #fff
*/
ringColor?: string;
}
export const Divider: React.FunctionComponent<DividerProps>;
export const ColorSelector: React.FunctionComponent<ColorSelectorProps>;
export const CheckBox: React.FunctionComponent<CheckBoxProps>;
export const ThemeToggler: React.FunctionComponent<ThemeTogglerProps>;
export const TouchHere: React.FunctionComponent<TouchHereProps>;
}