1// @ts-nocheck
2/*
3 * From the RNW docs:
4 * https://necolas.github.io/react-native-web/docs/?path=/docs/components-pressable--disabled#pressable
5 */
6import * as React from 'react';
7import { Pressable, StyleSheet, Text, View, ScrollView } from 'react-native';
8
9import { Page, Section } from '../components/Page';
10
11export default function PressableScreen() {
12  return (
13    <ScrollView>
14      <Page>
15        <Section title="FeedbackEvents">
16          <FeedbackEvents />
17        </Section>
18        <Section title="Delay">
19          <DelayEvents />
20        </Section>
21        <Section title="Disabled">
22          <Disabled />
23        </Section>
24      </Page>
25    </ScrollView>
26  );
27}
28
29PressableScreen.navigationOptions = {
30  title: 'Pressable',
31};
32
33function DelayEvents() {
34  const [eventLog, updateEventLog] = React.useState([]);
35
36  const handlePress = (eventName: string) => {
37    return () => {
38      const limit = 6;
39      updateEventLog((state) => {
40        const nextState = state.slice(0, limit - 1);
41        nextState.unshift(eventName);
42        return nextState;
43      });
44    };
45  };
46
47  return (
48    <View>
49      <View>
50        <Pressable
51          delayLongPress={800}
52          delayPressIn={400}
53          delayPressOut={1000}
54          onLongPress={handlePress('longPress: 800ms delay')}
55          onPress={handlePress('press')}
56          onPressIn={handlePress('pressIn: 400ms delay')}
57          onPressOut={handlePress('pressOut: 1000ms delay')}>
58          <View>
59            <Text style={styles.touchableText}>Pressable</Text>
60          </View>
61        </Pressable>
62      </View>
63      <View style={styles.eventLogBox}>
64        {eventLog.map((e, ii) => (
65          <Text key={ii}>{e}</Text>
66        ))}
67      </View>
68    </View>
69  );
70}
71
72function Disabled() {
73  return (
74    <View>
75      <Pressable disabled onPress={action('Pressable')}>
76        <View style={[styles.row, styles.block]}>
77          <Text style={styles.disabledTouchableText}>Disabled Pressable</Text>
78        </View>
79      </Pressable>
80
81      <Pressable onPress={action('Pressable')}>
82        <View style={[styles.row, styles.block]}>
83          <Text style={styles.touchableText}>Enabled Pressable</Text>
84        </View>
85      </Pressable>
86    </View>
87  );
88}
89
90function FeedbackEvents() {
91  const [eventLog, updateEventLog] = React.useState([]);
92
93  const handlePress = (eventName: string) => {
94    return () => {
95      const limit = 6;
96      updateEventLog((state) => {
97        const nextState = state.slice(0, limit - 1);
98        nextState.unshift(eventName);
99        return nextState;
100      });
101    };
102  };
103
104  return (
105    <View>
106      <View>
107        <Pressable
108          onLongPress={handlePress('longPress')}
109          onPress={handlePress('press')}
110          onPressIn={handlePress('pressIn')}
111          onPressOut={handlePress('pressOut')}>
112          <View>
113            <Text style={styles.touchableText}>Press Me</Text>
114          </View>
115        </Pressable>
116      </View>
117
118      <View>
119        <Pressable
120          accessibilityRole="none"
121          onLongPress={handlePress('longPress')}
122          onPress={handlePress('press')}
123          onPressIn={handlePress('pressIn')}
124          onPressOut={handlePress('pressOut')}
125          style={({ pressed, focused }) => ({
126            padding: 10,
127            margin: 10,
128            borderWidth: 1,
129            borderColor: focused ? 'blue' : null,
130            backgroundColor: pressed ? 'lightblue' : 'white',
131          })}>
132          <Pressable
133            accessibilityRole="none"
134            onLongPress={handlePress('longPress - inner')}
135            onPress={handlePress('press - inner')}
136            onPressIn={handlePress('pressIn - inner')}
137            onPressOut={handlePress('pressOut - inner')}
138            style={({ pressed, focused }) => ({
139              padding: 10,
140              margin: 10,
141              borderWidth: 1,
142              borderColor: focused ? 'blue' : null,
143              backgroundColor: pressed ? 'lightblue' : 'white',
144            })}>
145            <Text>Nested pressables</Text>
146          </Pressable>
147        </Pressable>
148      </View>
149
150      <View style={styles.eventLogBox}>
151        {eventLog.map((e, ii) => (
152          <Text key={ii}>{e}</Text>
153        ))}
154      </View>
155    </View>
156  );
157}
158
159const action = (msg: string) => () => {
160  console.log(msg);
161};
162
163const styles = StyleSheet.create({
164  touchableText: {
165    borderRadius: 8,
166    padding: 5,
167    borderWidth: 1,
168    borderColor: 'black',
169    color: '#007AFF',
170    borderStyle: 'solid',
171    textAlign: 'center',
172  },
173  disabledTouchableText: {
174    borderRadius: 8,
175    padding: 5,
176    borderWidth: 1,
177    borderColor: 'gray',
178    color: 'gray',
179    borderStyle: 'solid',
180    textAlign: 'center',
181  },
182  eventLogBox: {
183    padding: 10,
184    marginTop: 10,
185    height: 120,
186    borderWidth: StyleSheet.hairlineWidth,
187    borderColor: '#f0f0f0',
188    backgroundColor: '#f9f9f9',
189  },
190  row: {
191    justifyContent: 'center',
192    flexDirection: 'row',
193  },
194  block: {
195    padding: 10,
196  },
197});
198