feat(Touchable): add onPressIn, onPressOut, onLongPress

barajs · Apr 25, 2019 · 6d14a05 · 6d14a05
1 parent 8c23f3c
commit 6d14a05
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/src/lib/exports/Touchable/Touchable.tsx b/src/lib/exports/Touchable/Touchable.tsx
@@ -26,33 +26,66 @@ export const TouchableBase = React.forwardRef(
     {
       TouchableComponent,
       onPress: _onPress,
+      onPressIn: _onPressIn,
+      onPressOut: _onPressOut,
+      onLongPress: _onLongPress,
       name,
       ...props
     }: TouchableBaseProps,
     ref: any,
   ) => {
     const context = useBaraContext()
+
     const onPress: typeof _onPress = e => {
-      context.components.touchable.onPress({ name, ...props })
+      context.components.touchable.onPress({ name, ...props, event: e })
       if (_onPress) {
         _onPress(e)
       }
     }
-    return <TouchableComponent {...props} ref={ref} onPress={onPress} />
-  },
-)
 
-export const Touchable = React.forwardRef(
-  (props: TouchableProps, ref: any) => {
+    const onPressIn: typeof _onPressIn = e => {
+      context.components.touchable.onPressIn({ name, ...props, event: e })
+      if (_onPressIn) {
+        _onPressIn(e)
+      }
+    }
+
+    const onPressOut: typeof _onPressOut = e => {
+      context.components.touchable.onPressOut({ name, ...props, event: e })
+      if (_onPressOut) {
+        _onPressOut(e)
+      }
+    }
+
+    const onLongPress: typeof _onLongPress = e => {
+      context.components.touchable.onLongPress({ name, ...props, event: e })
+      if (_onLongPress) {
+        _onLongPress(e)
+      }
+    }
+
     return (
-      <TouchableBase
-        ref={ref}
-        TouchableComponent={TouchableOpacity}
-        activeOpacity={1}
+      <TouchableComponent
         {...props}
+        ref={ref}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onLongPress={onLongPress}
       />
     )
   },
 )
 
+export const Touchable = React.forwardRef((props: TouchableProps, ref: any) => {
+  return (
+    <TouchableBase
+      ref={ref}
+      TouchableComponent={TouchableOpacity}
+      activeOpacity={1}
+      {...props}
+    />
+  )
+})
+
 export type Touchable = TouchableOpacity
diff --git a/src/lib/exports/Touchable/event.ts b/src/lib/exports/Touchable/event.ts
@@ -5,6 +5,7 @@ export interface BaraReactTouchable {
   className?: string
   ref?: any
   id?: string
+  event?: any
 }
 
 export const ON_TOUCHABLE_PRESS = createEventType('ON_TOUCHABLE_PRESSED')