1import { Picker } from '@react-native-picker/picker';
2import { Platform } from '@unimodules/core';
3import * as React from 'react';
4import { Text, Button } from 'react-native';
5
6import { ScrollPage, Section } from '../components/Page';
7
8export default function PickerScreen() {
9  // TODO: PickerIOS
10  return (
11    <ScrollPage>
12      <Section title="Standard">
13        <GenericPicker />
14      </Section>
15
16      {Platform.OS === 'ios' && (
17        <Section title="Item style">
18          <GenericPicker itemStyle={{ fontWeight: 'bold', color: 'blue' }} />
19        </Section>
20      )}
21
22      {Platform.OS !== 'ios' && (
23        <Section title="Disabled">
24          <GenericPicker enabled={false} />
25        </Section>
26      )}
27
28      {Platform.OS === 'android' && (
29        <Section title="Dropdown mode">
30          <GenericPicker mode="dropdown" />
31        </Section>
32      )}
33
34      {Platform.OS === 'android' && (
35        <Section title="Prompt">
36          <GenericPicker mode="dialog" prompt="This is the prompt" />
37        </Section>
38      )}
39
40      {Platform.OS === 'android' && (
41        <Section title="Focus Ref">
42          <FocusPicker />
43        </Section>
44      )}
45
46      {Platform.OS === 'web' && (
47        <Section title="Larger">
48          <GenericPicker style={{ height: 32, width: 128 }} />
49        </Section>
50      )}
51    </ScrollPage>
52  );
53}
54
55PickerScreen.navigationOptions = {
56  title: 'Picker',
57};
58
59function GenericPicker(props: Partial<React.ComponentProps<typeof Picker>>) {
60  const [value, setValue] = React.useState<any>('java');
61
62  return (
63    <>
64      <Picker {...props} selectedValue={value} onValueChange={item => setValue(item)}>
65        <Picker.Item label="Java" value="java" />
66        <Picker.Item label="JavaScript" value="js" />
67        <Picker.Item label="Objective C" value="objc" />
68        <Picker.Item label="Swift" value="swift" />
69      </Picker>
70      <Text>Selected: {value}</Text>
71    </>
72  );
73}
74
75function FocusPicker(props: Partial<React.ComponentProps<typeof Picker>>) {
76  const [value, setValue] = React.useState<any>('java');
77  const pickerRef = React.useRef<any>();
78
79  return (
80    <>
81      <Picker
82        ref={pickerRef}
83        {...props}
84        selectedValue={value}
85        onValueChange={item => setValue(item)}>
86        <Picker.Item label="Java" value="java" />
87        <Picker.Item label="JavaScript" value="js" />
88        <Picker.Item label="Objective C" value="objc" />
89        <Picker.Item label="Swift" value="swift" />
90      </Picker>
91      <Text>Selected: {value}</Text>
92
93      <Button title="Focus" onPress={() => pickerRef.current?.focus()} />
94    </>
95  );
96}
97