Преглед изворни кода

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 пре 6 година
родитељ
комит
dc1b980274

+ 3
- 4
lib/src/adapters/TouchablePreview.tsx Прегледај датотеку

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 Прегледај датотеку

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 Прегледај датотеку

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 Прегледај датотеку

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 Прегледај датотеку

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
 }