react-native-gallery/NewArch/src/examples/TouchableWithoutFeedbackExamplePage.tsx at 356cacc9c49510dca14ad4d534ed526cfb216644 · microsoft/react-native-gallery · GitHub

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
'use strict';
import {Text} from 'react-native';
import React, {useState} from 'react';
import {Example} from '../components/Example';
import {Page} from '../components/Page';
import {useTheme} from '../Navigation';
import {TouchableWithoutFeedback} from 'react-native-windows';
import {usePageFocusManagement} from '../hooks/usePageFocusManagement';

export const TouchableWithoutFeedbackExamplePage: React.FunctionComponent<{
  navigation?: any;
}> = ({navigation}) => {
    const firstTouchableWithoutFeedbackRef = usePageFocusManagement(navigation);
    const [title, setTitle] = useState(0);
    const {colors} = useTheme();

    const example1jsx = `<TouchableWithoutFeedback>
    <Text style={{color: colors.text}}>TouchableWithoutFeedback</Text>
  </TouchableWithoutFeedback>`;

    const example2jsx = `<TouchableWithoutFeedback
    accessibilityRole="button"
    accessibilityLabel={'simple example TouchableWithoutFeedback'}
    onPress={() => {}}>
    <Text style={{color: 'white'}}>TouchableWithoutFeedback</Text>
    </TouchableWithoutFeedback>`;

    const example3jsx = `<TouchableWithoutFeedback
    accessibilityRole="button"
    accessibilityLabel={'simple example TouchableWithoutFeedback'}
    onPress={() => {}}
    onAccessibilityTap={() => {}}
    disabled={true}>
    <Text style={{color: colors.text}}>TouchableWithoutFeedback</Text>
    </TouchableWithoutFeedback>`;

    const example4jsx = `<TouchableWithoutFeedback
    accessibilityRole="button"
    accessibilityLabel={'counter example TouchableWithoutFeedback'}
    accessibilityHint={'click me to increase the example counter'}
    accessibilityValue={{text: ${title}}}
    onPress={() => {
        setTitle(title + 1);
    }}
    onAccessibilityTap={() => {
        setTitle(title + 1);
    }}>
    <Text style={{color: colors.text}}>{String(title)}</Text>
    </TouchableWithoutFeedback>`;

    const pressableMsg =
      'Note: It is strongly recommended to use the Pressable API instead of TouchableWithoutFeedback.';

    return (
      <Page
        title="Touchable Without Feedback"
        description="A View that does not provide feedback on touch."
        componentType="Core"
        pageCodeUrl="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/TouchableWithoutFeedbackExamplePage.tsx"
        documentation={[
          {
            label: 'TouchableWithoutFeedback',
            url: 'https://reactnative.dev/docs/touchablewithoutfeedback',
          },
          {
            label: 'TouchableWithoutFeedback Source Code',
            url: 'https://github.com/microsoft/react-native-windows/blob/main/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js',
          },
        ]}>
        <Text style={{fontWeight: 'bold', color: colors.text}}>{pressableMsg}</Text>
        <Example title="A simple TouchableWithoutFeedback." code={example1jsx}>
          <TouchableWithoutFeedback
            ref={firstTouchableWithoutFeedbackRef}
            accessibilityRole="button"
            accessibilityLabel={'simple example TouchableWithoutFeedback'}
            onPress={() => {}}
            onAccessibilityTap={() => {}}>
            <Text style={{color: colors.text}}>TouchableWithoutFeedback</Text>
          </TouchableWithoutFeedback>
        </Example>
        <Example title="A colored TouchableWithoutFeedback." code={example2jsx}>
          <TouchableWithoutFeedback
            accessibilityRole="button"
            accessibilityLabel={'colored example TouchableWithoutFeedback'}
            onPress={() => {}}
            onAccessibilityTap={() => {}}>
            <Text style={{color: colors.text}}>TouchableWithoutFeedback</Text>
          </TouchableWithoutFeedback>
        </Example>
        <Example
          title="A disabled TouchableWithoutFeedback."
          code={example3jsx}>
          <TouchableWithoutFeedback
            accessibilityRole="button"
            accessibilityLabel={'disabled example TouchableWithoutFeedback'}
            onPress={() => {}}
            onAccessibilityTap={() => {}}
            disabled={true}
            style={{
              height: 40,
              width: 150,
              backgroundColor: colors.text,
              borderRadius: 3,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{color: colors.text}}>TouchableWithoutFeedback</Text>
          </TouchableWithoutFeedback>
        </Example>
        <Example title="A TouchableWithoutFeedback counter." code={example4jsx}>
          <TouchableWithoutFeedback
            accessibilityRole="button"
            accessibilityLabel={'counter example TouchableWithoutFeedback'}
            accessibilityHint={'click me to increase the example counter'}
            accessibilityValue={{text: `${title}`}}
            onPress={() => {
              setTitle(title + 1);
            }}
            onAccessibilityTap={() => {
              setTitle(title + 1);
            }}>
            <Text style={{color: colors.text}}>{String(title)}</Text>
          </TouchableWithoutFeedback>
        </Example>
      </Page>
    );
  };