Skip to content
This repository was archived by the owner on Aug 14, 2024. It is now read-only.

Commit 50ee33c

Browse files
mmarinovicmikaello
mmarinovic
authored and
mikaello
committed
Typescript typings (peacechen#123)
* added type definitions * fix space * label extractor returns string * label optional for data item * added markdown to type summary, added correct type for key property
1 parent ab7a190 commit 50ee33c

File tree

2 files changed

+332
-0
lines changed

2 files changed

+332
-0
lines changed

‎index.d.ts‎

Lines changed: 331 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,331 @@
1+
import React from 'react';
2+
import { ViewStyle, TextStyle } from 'react-native';
3+
4+
export interface IOption {
5+
key: React.Key;
6+
label?: string;
7+
section?: boolean;
8+
accessibilityLabel?: string;
9+
component?: React.ReactNode;
10+
[key:string]: any;
11+
}
12+
13+
type AnimationType = 'none' | 'slide' | 'fade';
14+
type OrientationType = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
15+
16+
interface IModalSelectorProps<TOption> {
17+
/**
18+
* Array of objects with a unique key and label to select in the modal
19+
* Optional component overrides label text
20+
*
21+
* Default is `[]`
22+
*/
23+
data: TOption[],
24+
25+
/**
26+
* Callback function, when the users has selected an option
27+
*
28+
* Default is `() => {}`
29+
*/
30+
onChange?: (option: TOption) => void;
31+
32+
/**
33+
* Callback function, when modal is opening
34+
*
35+
* Default is `() => {}`
36+
*/
37+
onModalOpen?: () => void;
38+
39+
/**
40+
* Callback function, when modal is closing
41+
*
42+
* Default is `() => {}`
43+
*/
44+
onModalClose?: () => void;
45+
46+
/**
47+
* Extract the key from the data item
48+
*
49+
* Default is `(data) => data.key`
50+
*/
51+
keyExtractor?: (option: TOption) => React.Key;
52+
53+
/**
54+
* Extract the label from the data item
55+
*
56+
* Default is `(data) => data.label`
57+
*/
58+
labelExtractor?: (option: TOption) => string;
59+
60+
/**
61+
* Extract the component from the data item
62+
*
63+
* Default is `(data) => data.component`
64+
*/
65+
componentExtractor?: (option: TOption) => React.ReactNode;
66+
67+
/**
68+
* Control open/close state of modal
69+
*
70+
* Default is `false`
71+
*/
72+
visible?: boolean;
73+
74+
/**
75+
* Control if modal closes on select
76+
*
77+
* Default is `true`
78+
*/
79+
closeOnChange?: boolean;
80+
81+
/**
82+
* Text that is initially shown on the button
83+
*
84+
* Default is `'Select me!'`
85+
*/
86+
initValue?: string;
87+
88+
/**
89+
* Text of the cancel button
90+
*
91+
* Default is `'cancel'`
92+
*/
93+
cancelText?: string;
94+
95+
/**
96+
* Type of animation to be used to show the modal.
97+
*
98+
* Default is `'slide'`
99+
*/
100+
animationType?: AnimationType;
101+
102+
/**
103+
* Style definitions for the root element
104+
*/
105+
style?: ViewStyle;
106+
107+
/**
108+
* Style definitions for the select element (available in default mode only!)
109+
* NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass flex:1 explicitly to selectStyle as a prop
110+
*
111+
* Default is `{}`
112+
*/
113+
selectStyle?: ViewStyle;
114+
115+
/**
116+
* Style definitions for the select element (available in default mode only!)
117+
*
118+
* Default is `{}`
119+
*/
120+
selectTextStyle?: ViewStyle;
121+
122+
/**
123+
* Style definitions for the option element
124+
*
125+
* Default is `{}`
126+
*/
127+
optionStyle?: ViewStyle;
128+
129+
/**
130+
* Style definitions for the option text element
131+
*
132+
* Default is `{}`
133+
*/
134+
optionTextStyle?: TextStyle;
135+
136+
/**
137+
* Style definitions for the option container element
138+
*
139+
* Default is `{}`
140+
*/
141+
optionContainerStyle?: ViewStyle;
142+
143+
/**
144+
* Style definitions for the section element
145+
*
146+
* Default is `{}`
147+
*/
148+
sectionStyle?: ViewStyle;
149+
150+
/**
151+
* Style definitions for the children container view
152+
*
153+
* Default is `{}`
154+
*/
155+
childrenContainerStyle?: ViewStyle;
156+
157+
/**
158+
* Style definitions for the touchable element
159+
*
160+
* Default is `{}`
161+
*/
162+
touchableStyle?: ViewStyle;
163+
164+
/**
165+
* Opacity for the touchable element on touch
166+
*
167+
* Default is `0.2`
168+
*/
169+
touchableActiveOpacity?: number;
170+
171+
/**
172+
* Style definitions for the select text element
173+
*
174+
* Default is `{}`
175+
*/
176+
sectionTextStyle?: TextStyle;
177+
178+
/**
179+
* Style definitions for the currently selected text element
180+
*
181+
* Default is `{}`
182+
*/
183+
selectedItemTextStyle?: TextStyle;
184+
185+
/**
186+
* Style definitions for the cancel container
187+
*
188+
* Default is `{}`
189+
*/
190+
cancelContainerStyle?: ViewStyle;
191+
192+
/**
193+
* Style definitions for the cancel element
194+
*
195+
* Default is `{}`
196+
*/
197+
cancelStyle?: ViewStyle;
198+
199+
/**
200+
* Style definitions for the cancel text element
201+
*
202+
* Default is `{}`
203+
*/
204+
cancelTextStyle?: TextStyle;
205+
206+
/**
207+
* Style definitions for the overlay background element
208+
* RN <= 0.41 should override this with pixel value for padding
209+
*
210+
* Default is `{ flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' }`
211+
*/
212+
overlayStyle?: ViewStyle;
213+
214+
/**
215+
* Style definitions for the initValue text element
216+
*
217+
* Default is `{}`
218+
*/
219+
initValueTextStyle?: TextStyle;
220+
221+
/**
222+
* Disables opening of the modal
223+
*
224+
* Default is `false`
225+
*/
226+
disabled?: boolean;
227+
228+
/**
229+
* Orientations the modal supports
230+
*
231+
* Default is `['portrait', 'landscape']`
232+
*/
233+
supportedOrientations?: OrientationType[];
234+
235+
/**
236+
* Passed to underlying ScrollView
237+
*
238+
* Default is `'always'`
239+
*/
240+
keyboardShouldPersistTaps?: string | boolean;
241+
242+
/**
243+
* true makes the modal close when the overlay is pressed
244+
*
245+
* Default is `false`
246+
*/
247+
backdropPressToClose?: boolean;
248+
249+
/**
250+
* true enables accessibility for the open button container
251+
* Note: if false be sure to define accessibility props directly in the wrapped component
252+
*
253+
* Default is `false`
254+
*/
255+
openButtonContainerAccessible?: boolean;
256+
257+
/**
258+
* true enables accessibility for data items.
259+
* Note: data items should have an accessibilityLabel property if this is enabled
260+
*
261+
* Default is `false`
262+
*/
263+
listItemAccessible?: boolean;
264+
265+
/**
266+
* true enables accessibility for cancel button.
267+
*
268+
* Default is `false`
269+
*/
270+
cancelButtonAccessible?: boolean;
271+
272+
/**
273+
* true enables accessibility for the scroll view.
274+
* Only enable this if you don't want to interact with individual data items.
275+
*
276+
* Default is `false`
277+
*/
278+
scrollViewAccessible?: boolean;
279+
280+
/**
281+
* Accessibility label for the modal ScrollView
282+
*/
283+
scrollViewAccessibilityLabel?: string;
284+
285+
/**
286+
* Accessibility label for the cancel button
287+
*/
288+
cancelButtonAccessibilityLabel?: string;
289+
290+
/**
291+
* props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
292+
*
293+
* Default is `{}`
294+
*/
295+
passThruProps?: object;
296+
297+
/**
298+
* props to pass through to the select text component
299+
*
300+
* Default is `{}`
301+
*/
302+
selectTextPassThruProps?: object;
303+
304+
/**
305+
* props to pass through to the options text components in the modal
306+
*
307+
* Default is `{}`
308+
*/
309+
optionTextPassThruProps?: object;
310+
311+
/**
312+
* How far touch can stray away from touchable that opens modal
313+
*
314+
* Default is `{}`
315+
*/
316+
modalOpenerHitSlop?: object;
317+
318+
/**
319+
* Render a custom node instead of the built-in select box
320+
*/
321+
customSelector?: React.ReactNode;
322+
323+
/**
324+
* Key of the item to be initially selected
325+
*
326+
* Default is `''`
327+
*/
328+
selectedKey?: React.Key;
329+
}
330+
331+
export default class ModalSelector<TOption = IOption> extends React.Component<IModalSelectorProps<TOption>, any> {}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.1.1",
44
"description": "A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.",
55
"main": "index.js",
6+
"typings": "index.d.ts",
67
"scripts": {
78
"test": "echo \"Error: no test specified\" && exit 1",
89
"postversion": "git push && git push --tags",

0 commit comments

Comments
 (0)