Parcourir la source

Add peek pop example to playground app

This commit also allows TouchablePreview component to accept any touchable components,
not only the ones included in RN.
Guy Carmeli il y a 6 ans
Parent
révision
dc1b980274

+ 3
- 4
lib/src/adapters/TouchablePreview.tsx Voir le fichier

117
     const { children, touchableComponent, onPress, onPressIn, ...props } = this.props;
117
     const { children, touchableComponent, onPress, onPressIn, ...props } = this.props;
118
 
118
 
119
     // Default to TouchableWithoutFeedback for iOS if set to TouchableNativeFeedback
119
     // Default to TouchableWithoutFeedback for iOS if set to TouchableNativeFeedback
120
-    const Touchable = (Platform.OS === 'ios' &&
121
-    touchableComponent instanceof TouchableNativeFeedback
122
-      ? TouchableWithoutFeedback
123
-      : touchableComponent) as typeof TouchableWithoutFeedback;
120
+    const Touchable = (Platform.OS === 'ios' && touchableComponent instanceof TouchableNativeFeedback) ?
121
+      TouchableWithoutFeedback :
122
+      touchableComponent as typeof React.Component;
124
 
123
 
125
     // Wrap component with Touchable for handling platform touches
124
     // Wrap component with Touchable for handling platform touches
126
     // and a single react View for detecting force and timing.
125
     // and a single react View for detecting force and timing.

+ 15
- 8
playground/src/components/Button.js Voir le fichier

1
 const React = require('react');
1
 const React = require('react');
2
-const {Button} = require('react-native-ui-lib');
3
-module.exports = (props) =>
4
-  <Button
5
-    {...props}
6
-    style={{
7
-      marginBottom: 8,
8
-    }}
9
-  />;
2
+const { Button } = require('react-native-ui-lib');
3
+class RnnButton extends React.PureComponent {
4
+  render() {
5
+    return (
6
+      <Button
7
+        {...this.props}
8
+        style={{
9
+          marginBottom: 8,
10
+        }}
11
+      />
12
+    )
13
+  }
14
+}
15
+
16
+module.exports = RnnButton

+ 0
- 32
playground/src/screens/LayoutsScreen.js Voir le fichier

68
     }
68
     }
69
   });
69
   });
70
 
70
 
71
-  onClickShowPreview = async ({reactTag}) => {
72
-    await Navigation.push(this.props.componentId, {
73
-      component: {
74
-        name: 'navigation.playground.PushedScreen',
75
-        options: {
76
-          animations: {
77
-            push: {
78
-              enabled: false
79
-            }
80
-          },
81
-          preview: reactTag ? {
82
-            reactTag,
83
-            height: 300,
84
-            commit: true,
85
-            actions: [{
86
-              id: 'action-cancel',
87
-              title: 'Cancel'
88
-            }, {
89
-              id: 'action-delete',
90
-              title: 'Delete',
91
-              actions: [{
92
-                id: 'action-delete-sure',
93
-                title: 'Are you sure?',
94
-                style: 'destructive'
95
-              }]
96
-            }]
97
-          } : undefined,
98
-        }
99
-      }
100
-    });
101
-  }
102
-
103
   onClickSplitView = () => {
71
   onClickSplitView = () => {
104
     Navigation.setRoot({
72
     Navigation.setRoot({
105
       root: {
73
       root: {

+ 34
- 0
playground/src/screens/NavigationScreen.js Voir le fichier

36
         <Button label='External Component' testID={EXTERNAL_COMP_BTN} onPress={this.externalComponent} />
36
         <Button label='External Component' testID={EXTERNAL_COMP_BTN} onPress={this.externalComponent} />
37
         <Button label='Static Events' testID={SHOW_STATIC_EVENTS_SCREEN} onPress={this.pushStaticEventsScreen} />
37
         <Button label='Static Events' testID={SHOW_STATIC_EVENTS_SCREEN} onPress={this.pushStaticEventsScreen} />
38
         <Button label='Orientation' testID={SHOW_ORIENTATION_SCREEN} onPress={this.orientation} />
38
         <Button label='Orientation' testID={SHOW_ORIENTATION_SCREEN} onPress={this.orientation} />
39
+        <Navigation.TouchablePreview
40
+          touchableComponent={Button}
41
+          onPressIn={this.preview}
42
+          label='Preview' />
39
       </Root>
43
       </Root>
40
     );
44
     );
41
   }
45
   }
45
   externalComponent = () => Navigation.showModal(Screens.ExternalComponent);
49
   externalComponent = () => Navigation.showModal(Screens.ExternalComponent);
46
   pushStaticEventsScreen = () => Navigation.showModal(Screens.EventsScreen)
50
   pushStaticEventsScreen = () => Navigation.showModal(Screens.EventsScreen)
47
   orientation = () => Navigation.showModal(Screens.Orientation);
51
   orientation = () => Navigation.showModal(Screens.Orientation);
52
+  preview = ({ reactTag }) => {
53
+    Navigation.push(this.props.componentId, {
54
+      component: {
55
+        name: Screens.Pushed,
56
+        options: {
57
+          animations: {
58
+            push: {
59
+              enabled: false
60
+            }
61
+          },
62
+          preview: {
63
+            reactTag: reactTag,
64
+            height: 300,
65
+            actions: [{
66
+              id: 'action-cancel',
67
+              title: 'Cancel'
68
+            }, {
69
+              id: 'action-delete',
70
+              title: 'Delete',
71
+              actions: [{
72
+                id: 'action-delete-sure',
73
+                title: 'Are you sure?',
74
+                style: 'destructive'
75
+              }]
76
+            }]
77
+          }
78
+        }
79
+      }
80
+    });
81
+  }
48
 }
82
 }
49
 
83
 
50
 module.exports = NavigationScreen;
84
 module.exports = NavigationScreen;

+ 1
- 0
playground/src/services/Navigation.js Voir le fichier

48
   popTo: Navigation.popTo.bind(Navigation),
48
   popTo: Navigation.popTo.bind(Navigation),
49
   setDefaultOptions: Navigation.setDefaultOptions.bind(Navigation),
49
   setDefaultOptions: Navigation.setDefaultOptions.bind(Navigation),
50
   setRoot: Navigation.setRoot.bind(Navigation),
50
   setRoot: Navigation.setRoot.bind(Navigation),
51
+  TouchablePreview: Navigation.TouchablePreview,
51
   setStackRoot
52
   setStackRoot
52
 }
53
 }