feat(TouchableOpacity): add new event handler and change hook method

It's better to prevent naming collision with React build in eslint of react-hooks

BREAKING CHANGE: change method name of `useTouchableOpacityPress` to `whenTouchableOpacityPress`

src/lib/exports/TouchableOpacity/TouchableOpacity.tsx

@@ -14,22 +14,51 @@ export const TouchableOpacity = React.forwardRef(
     {
       TouchableComponent,
       onPress: _onPress,
+      onPressIn: _onPressIn,
+      onPressOut: _onPressOut,
+      onLongPress: _onLongPress,
       name,
+      kind,
       ...props
     }: TouchableOpacityProps,
     ref: any,
   ) => {
     const context = useBaraContext()
     const onPress: typeof _onPress = e => {
-      context.components.touchableOpacity.onPress({ name, ...props })
+      context.components.touchableOpacity.onPress({ name, kind, ...props })
       if (_onPress) {
         _onPress(e)
       }
     }
+
+    const onPressIn: typeof _onPressIn = e => {
+      context.components.touchableOpacity.onPressIn({ name, kind, ...props })
+      if (_onPressIn) {
+        _onPressIn(e)
+      }
+    }
+
+    const onPressOut: typeof _onPressOut = e => {
+      context.components.touchableOpacity.onPressOut({ name, kind, ...props })
+      if (_onPressOut) {
+        _onPressOut(e)
+      }
+    }
+
+    const onLongPress: typeof _onLongPress = e => {
+      context.components.touchableOpacity.onLongPress({ name, kind, ...props })
+      if (_onLongPress) {
+        _onLongPress(e)
+      }
+    }
+
     return (
       <Touchable
         ref={ref}
         onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onLongPress={onLongPress}
         TouchableComponent={TouchableOpacityOriginal}
         activeOpacity={0.5}
         {...props}

src/lib/exports/TouchableOpacity/condition.ts

@@ -2,4 +2,4 @@ import { kindOf, nameOf } from '../../functions/common'
 
 export const nameOfTouchableOpacity = nameOf
 
-export const kindOfTouchableOpacity = nameOf
+export const kindOfTouchableOpacity = kindOf

src/lib/exports/TouchableOpacity/event.ts

@@ -1,10 +1,10 @@
 import { createEventType, useEvent } from 'bara'
 
-export interface BaraReactTouchableOpacity {
+import { BaraBaseComponentProps } from '../../models'
+
+export interface BaraReactTouchableOpacity extends BaraBaseComponentProps {
   name?: string
-  className?: string
   ref?: any
-  id?: string
 }
 
 export const ON_TOUCHABLE_OPACITY_PRESS = createEventType(

src/lib/exports/TouchableOpacity/hook.ts

@@ -12,10 +12,13 @@ import {
 import {
   BaraReactTouchableOpacity,
   TouchableOpacityEventFilter,
+  useTouchableOpacityLongPressEvent,
   useTouchableOpacityPressEvent,
+  useTouchableOpacityPressInEvent,
+  useTouchableOpacityPressOutEvent,
 } from './event'
 
-export const useTouchableOpacityPress = (
+export const whenTouchableOpacityPress = (
   ...conditions: Array<ConditionPipe<BaraReactTouchableOpacity>>
 ) => (...actions: Array<ActionPipe<BaraReactTouchableOpacity>>) => {
   const piper = (
@@ -30,3 +33,51 @@ export const useTouchableOpacityPress = (
     return { event, action }
   })
 }
+
+export const whenTouchableOpacityPressIn = (
+  ...conditions: Array<ConditionPipe<BaraReactTouchableOpacity>>
+) => (...actions: Array<ActionPipe<BaraReactTouchableOpacity>>) => {
+  const piper = (
+    data: BaraReactTouchableOpacity,
+    payload: BaraEventPayload<BaraReactTouchableOpacity>,
+  ) => {
+    createPipe(data, payload)(...(conditions as any))(...actions)
+  }
+  useTrigger<BaraReactTouchableOpacity>(() => {
+    const event = useTouchableOpacityPressInEvent()
+    const action = useAction(piper)
+    return { event, action }
+  })
+}
+
+export const whenTouchableOpacityPressOut = (
+  ...conditions: Array<ConditionPipe<BaraReactTouchableOpacity>>
+) => (...actions: Array<ActionPipe<BaraReactTouchableOpacity>>) => {
+  const piper = (
+    data: BaraReactTouchableOpacity,
+    payload: BaraEventPayload<BaraReactTouchableOpacity>,
+  ) => {
+    createPipe(data, payload)(...(conditions as any))(...actions)
+  }
+  useTrigger<BaraReactTouchableOpacity>(() => {
+    const event = useTouchableOpacityPressOutEvent()
+    const action = useAction(piper)
+    return { event, action }
+  })
+}
+
+export const whenTouchableOpacityLongPress = (
+  ...conditions: Array<ConditionPipe<BaraReactTouchableOpacity>>
+) => (...actions: Array<ActionPipe<BaraReactTouchableOpacity>>) => {
+  const piper = (
+    data: BaraReactTouchableOpacity,
+    payload: BaraEventPayload<BaraReactTouchableOpacity>,
+  ) => {
+    createPipe(data, payload)(...(conditions as any))(...actions)
+  }
+  useTrigger<BaraReactTouchableOpacity>(() => {
+    const event = useTouchableOpacityLongPressEvent()
+    const action = useAction(piper)
+    return { event, action }
+  })
+}