Skip to content

Commit e8b6809

Browse files
grabbougrabbou
authored
Merge pull request rescript-react-native#275 from reasonml-community/docs/pickers-n-progressbars-docs
pickers and progress bars docs migration and enhancements
2 parents a9e6017 + 4f987c6 commit e8b6809

7 files changed

Lines changed: 491 additions & 36 deletions

File tree

‎lib/js/src/components/picker.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/js/src/components/pickerIOS.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/imageBackground.rei‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
[ImageBackground] component has the same props as {{:\BsReactNative/Image-BsReactNative} [Image] component}
3+
You can read more on ImageBackground component usage in official docs: {{:https://facebook.github.io/react-native/docs/images}}
4+
*/
5+
16
module Event: {
27
type error;
38
type progress = {
@@ -32,4 +37,4 @@ let make:
3237
ReasonReact.stateless,
3338
ReasonReact.noRetainedProps,
3439
unit,
35-
);
40+
);

‎src/components/picker.rei‎

Lines changed: 287 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,255 @@
1-
module Item: {
2-
let make:
3-
(
4-
~color: string=?,
5-
~label: string,
6-
~value: 'value=?,
7-
~testID: string=?,
8-
array(ReasonReact.reactElement)
9-
) =>
10-
ReasonReact.component(
11-
ReasonReact.stateless,
12-
ReasonReact.noRetainedProps,
13-
unit,
14-
);
15-
};
1+
2+
/**
3+
{3 Example of use}
4+
In order to render a [Picker] component {{:https://facebook.github.io/react-native/docs/picker}} you will need to pass one or many [Picker.Item]
5+
components as children.
6+
7+
And [Picker.Item] has a required [label] prop
8+
9+
{4 default}
10+
{[
11+
let component = ReasonReact.statelessComponent("MyComponent");
12+
13+
let make = _children => {
14+
...component,
15+
render: _self =>
16+
<View>
17+
<Picker>
18+
<Picker.Item label="ReasonML" value="reason" />
19+
<Picker.Item label="Ocaml" value="ocaml" />
20+
<Picker.Item label="JavaScript" value="js" />
21+
</Picker>
22+
</View>,
23+
};
24+
]}
25+
{4 selectedValue and onValueChange}
26+
{[
27+
let component = ReasonReact.statelessComponent("MyComponent");
28+
29+
let make = _children => {
30+
...component,
31+
render: _self =>
32+
<View>
33+
<Picker selectedValue="ocaml" onValueChange=(value => Js.log(value))>
34+
<Picker.Item label="ReasonML" value="reason" />
35+
<Picker.Item label="Ocaml" value="ocaml" />
36+
<Picker.Item label="JavaScript" value="js" />
37+
</Picker>
38+
</View>,
39+
};
40+
]}
41+
{3 Props}
42+
{4 onValueChange}
43+
{[
44+
onValueChange: 'value => unit=?
45+
]}
46+
{4 selectedValue}
47+
{[
48+
selectedValue: 'value=?
49+
]}
50+
{4 enabled}
51+
{[
52+
enabled: bool=?
53+
]}
54+
{4 mode}
55+
On {b Android only}, specifies how to display the selection items when the user taps on the picker:
56+
57+
- [`dialog] - shows a modal dialog. This is the default.
58+
- [`dropdown] - shows a dropdown anchored to the picker view
59+
{[
60+
mode: [
61+
| `dialog
62+
| `dropdown
63+
]=?
64+
]}
65+
{4 prompt}
66+
{[
67+
prompt: string=?
68+
]}
69+
{4 itemStyle}
70+
{[
71+
itemStyle: Style.t=?
72+
]}
73+
{4 accessibilityLabel}
74+
{[
75+
accessibilityLabel: ReasonReact.reactElement=?
76+
]}
77+
{4 accessible}
78+
{[
79+
accessible: bool=?
80+
]}
81+
{4 hitSlop}
82+
{[
83+
hitSlop: Types.insets=?
84+
]}
85+
reference:
86+
{4 Types.rei}
87+
{[
88+
type insets = {
89+
.
90+
"left": int,
91+
"right": int,
92+
"top": int,
93+
"bottom": int,
94+
};
95+
]}
96+
{4 onAccessibilityTap}
97+
{[
98+
onAccessibilityTap: unit => unit=?
99+
]}
100+
{4 onLayout}
101+
{[
102+
onLayout: RNEvent.NativeLayoutEvent.t => unit=?
103+
]}
104+
reference:
105+
{4 RNEvent.rei}
106+
{[
107+
module NativeLayoutEvent: {
108+
type t;
109+
type layout = {
110+
x: float,
111+
y: float,
112+
width: float,
113+
height: float
114+
};
115+
let layout: t => layout;
116+
};
117+
]}
118+
{4 onMagicTap}
119+
{[
120+
onMagicTap: unit => unit=?
121+
]}
122+
{4 responderHandlers}
123+
{[
124+
responderHandlers: Types.touchResponderHandlers=?
125+
]}
126+
reference:
127+
{4 Types.rei}
128+
{[
129+
type touchResponderHandlers = {
130+
onMoveShouldSetResponder: option(RNEvent.NativeEvent.t => bool),
131+
onMoveShouldSetResponderCapture: option(RNEvent.NativeEvent.t => bool),
132+
onResponderGrant: option(RNEvent.NativeEvent.t => unit),
133+
onResponderMove: option(RNEvent.NativeEvent.t => unit),
134+
onResponderReject: option(RNEvent.NativeEvent.t => unit),
135+
onResponderRelease: option(RNEvent.NativeEvent.t => unit),
136+
onResponderTerminate: option(RNEvent.NativeEvent.t => unit),
137+
onResponderTerminationRequest: option(RNEvent.NativeEvent.t => unit),
138+
onStartShouldSetResponder: option(RNEvent.NativeEvent.t => bool),
139+
onStartShouldSetResponderCapture: option(RNEvent.NativeEvent.t => bool)
140+
};
141+
]}
142+
{4 RNEvent.rei}
143+
{[
144+
module NativeEvent: {
145+
type t;
146+
let changedTouches: t => array(Js.t({..}));
147+
let identifier: t => int;
148+
let locationX: t => float;
149+
let locationY: t => float;
150+
let pageX: t => float;
151+
let pageY: t => float;
152+
let target: t => Js.t({..});
153+
let touches: t => array(Js.t({..}));
154+
let timestamp: t => int;
155+
let data: t => string;
156+
};
157+
]}
158+
{4 pointerEvents}
159+
{[
160+
pointerEvents: [
161+
| `auto
162+
| `none
163+
| `boxNone
164+
| `boxOnly
165+
]=?
166+
]}
167+
{4 removeClippedSubviews}
168+
{[
169+
removeClippedSubviews: bool=?
170+
]}
171+
{4 style}
172+
{[
173+
style: Style.t=?
174+
]}
175+
{4 testID}
176+
{[
177+
testID: string=?
178+
]}
179+
{4 accessibilityComponentType}
180+
{[
181+
accessibilityComponentType: [
182+
| `none
183+
| `button
184+
| `radiobutton_checked
185+
| `radiobutton_unchecked
186+
]=?
187+
]}
188+
{4 accessibilityLiveRegion}
189+
{[
190+
accessibilityLiveRegion: [
191+
| `none
192+
| `polite
193+
| `assertive
194+
]=?
195+
]}
196+
{4 collapsable}
197+
{[
198+
collapsable: bool=?
199+
]}
200+
{4 importantForAccessibility}
201+
{[
202+
importantForAccessibility: [
203+
| `auto
204+
| `yes
205+
| `no
206+
| `noHideDescendants
207+
]=?
208+
]}
209+
{4 needsOffscreenAlphaCompositing}
210+
{[
211+
needsOffscreenAlphaCompositing: bool=?
212+
]}
213+
{4 renderToHardwareTextureAndroid}
214+
{[
215+
renderToHardwareTextureAndroid: bool=?
216+
]}
217+
{4 accessibilityTraits}
218+
{[
219+
accessibilityTraits: list(
220+
[
221+
| `none
222+
| `button
223+
| `link
224+
| `header
225+
| `search
226+
| `image
227+
| `selected
228+
| `plays
229+
| `key
230+
| `text
231+
| `summary
232+
| `disabled
233+
| `frequentUpdates
234+
| `startsMedia
235+
| `adjustable
236+
| `allowsDirectInteraction
237+
| `pageTurn
238+
]
239+
)=?
240+
]}
241+
{4 accessibilityViewIsModal}
242+
{[
243+
accessibilityViewIsModal: bool=?
244+
]}
245+
{4 shouldRasterizeIOS}
246+
{[
247+
shouldRasterizeIOS: bool=?
248+
]}
249+
*/
250+
251+
252+
16253

17254
let make:
18255
(
@@ -75,4 +312,38 @@ let make:
75312
ReasonReact.stateless,
76313
ReasonReact.noRetainedProps,
77314
unit,
78-
);
315+
);
316+
317+
/**
318+
[Picker.Item] component is used {b only} inside [<Picker></Picker>] component
319+
320+
{3 Props}
321+
{4 label}
322+
{[
323+
label: string
324+
]}
325+
{4 color}
326+
{[
327+
color: string=?
328+
]}
329+
{4 value}
330+
{[
331+
value: 'value=?
332+
]}
333+
*/
334+
335+
module Item: {
336+
let make:
337+
(
338+
~color: string=?,
339+
~label: string,
340+
~value: 'value=?,
341+
~testID: string=?,
342+
array(ReasonReact.reactElement)
343+
) =>
344+
ReasonReact.component(
345+
ReasonReact.stateless,
346+
ReasonReact.noRetainedProps,
347+
unit,
348+
);
349+
};

0 commit comments

Comments
 (0)