fix(bara): new operators and change hook function name (#20)

fix(bara): new operators and change hook function name

package.json

@@ -16,8 +16,8 @@
     "src/lib"
   ],
   "dependencies": {
-    "bara": "2.4.0",
-    "react-native-web": "0.11.2"
+    "bara": "^2.4.0",
+    "react-native-web": "^0.11.2"
   },
   "devDependencies": {
     "@semantic-release/changelog": "3.0.2",
@@ -27,7 +27,6 @@
     "@types/react": "16.8.14",
     "@types/react-dom": "16.8.4",
     "@types/react-native": "0.57.49",
-    "@typescript-eslint/typescript-estree": "1.7.0",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-scripts": "2.1.8",
@@ -40,7 +39,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react-dom": ">=16.8",
+    "bara": ">=2.4"
   },
   "scripts": {
     "compile": "rm -rf dist && yarn compile:tsc",

renovate.json

@@ -1,5 +1,17 @@
 {
   "extends": [
     "config:base"
-  ]
+  ],
+  "packageRules": [
+    {
+	  "packageName": ["bara"],
+      "groupName": "bara packages",
+      "pin": false,
+      "automerge": true
+	}
+  ],
+  "automerge": true,
+  "major": {
+    "automerge": false
+  }
 }

src/App.tsx

@@ -14,6 +14,7 @@ const styles = StyleSheet.create({
   view: {
     flex: 1,
     flexDirection: 'row',
+    backgroundColor: '#963899',
   },
   button: {
     margin: 5,
@@ -34,7 +35,7 @@ const App = () => {
 
   return (
     <BaraProvider>
-      <View style={styles.view}>
+      <View name="main-container" style={styles.view}>
         <Text name="version">Version: {version}</Text>
         <View style={styles.button}>
           <Touchable name="welcome-button">

src/examples/components/WelcomeText.tsx

@@ -13,6 +13,12 @@ export const WelcomeText = () => {
       <Touchable name="change-welcome-message" onPress={changeMessage}>
         <Text>{message}</Text>
       </Touchable>
+      <Text name="pressable-text" hasOnPress>
+        Press me! I'm a special Text
+      </Text>
+      <Text name="not-pressable-text">
+        Do not Press me! I'm a Text without any special
+      </Text>
     </View>
   )
 }

src/examples/features/welcome.ts

@@ -4,9 +4,11 @@ import {
   nameOfText,
   nameOfTouchable,
   nameOfTouchableOpacity,
-  useTextPress,
-  useTouchableOpacityPress,
-  useTouchablePress,
+  nameOfView,
+  whenTextPress,
+  whenTouchableOpacityPress,
+  whenTouchablePress,
+  whenViewLayout,
 } from '../../lib'
 
 export function welcomeTrigger() {
@@ -19,24 +21,28 @@ export function welcomeTrigger() {
     })
   })
 
-  useTouchablePress(
-    {
-      nameOf: nameOfTouchable('welcome-button'),
-    },
-    ({ name }) => {
-      setBarnState('welcome', `You (${name}) are already welcomed!`)
-    },
-  )
+  whenViewLayout(nameOfView('main-container'))(data => {
+    // tslint:disbale-next-line
+    console.log('Main container is updating its layout', data)
+  })
 
-  useTouchableOpacityPress(
-    {
-      nameOf: nameOfTouchableOpacity('greet-button'),
-    },
-    ({ name }) => {
-      alert(`${name} is PRESSED! YAY !!!`)
+  whenTouchablePress(nameOfTouchable('welcome-button'))(({ name }) => {
+    setBarnState('welcome', `You (${name}) are already welcomed!`)
+  })
+
+  whenTouchableOpacityPress(nameOfTouchableOpacity('greet-button'))(
+    (data: any) => {
+      alert(`${data.name} is PRESSED! YAY !!!`)
+      // tslint:disbale-next-line
+      console.log('greet-button', data)
     },
   )
 
+  whenTextPress(nameOfText('pressable-text'))((data: any) => {
+    // tslint:disbale-next-line
+    console.log('pressable-text', data)
+  })
+
   useTimerElapsed(5, () => {
     setBarnState('welcome', `Who are you?`)
   })

src/index.tsx

@@ -2,11 +2,8 @@ import { register, useBarnStream, useInitStream } from 'bara'
 import App from './App'
 import './index.css'
 import {
+  useComponentsStream,
   useReactApp,
-  useTextStream,
-  useTouchableOpacityStream,
-  useTouchableStream,
-  useViewStream,
 } from './lib'
 
 import { welcomeTrigger } from './examples/features/welcome'
@@ -18,10 +15,7 @@ const BaraApp = () => {
     welcome: 'Welcome to Bara React App!',
   })
   useReactApp({ name: 'bara-app', App })
-  useViewStream()
-  useTouchableStream()
-  useTouchableOpacityStream()
-  useTextStream()
+  useComponentsStream({TouchableOpacity: true})
   welcomeTrigger()
 }
 

src/lib/exports/Text/Text.tsx

@@ -9,19 +9,50 @@ import { BaraBaseComponentProps } from '../../models'
 
 export interface TextProps extends TextPropsOriginal, BaraBaseComponentProps {
   children?: ReactNode
+  hasOnPress?: boolean
+  hasOnLongPress?: boolean
 }
 
 export const Text = React.forwardRef(
-  ({ onPress: _onPress, ...props }: TextProps, ref: any) => {
+  (
+    {
+      name,
+      kind,
+      onPress: _onPress,
+      onLongPress: _onLongPress,
+      hasOnPress,
+      hasOnLongPress,
+      ...props
+    }: TextProps,
+    ref: any,
+  ) => {
     const context = useBaraContext()
-    const onPress: typeof _onPress = e => {
-      context.components.text.onPress({ name, ...props })
+    const onPress: typeof _onPress = event => {
+      event.persist()
+      context.components.text.onPress({ name, kind, event, ...props })
       if (_onPress) {
-        _onPress(e)
+        _onPress(event)
       }
     }
 
-    return <TextOriginal {...props} onPress={onPress} ref={ref} />
+    const onLongPress: typeof _onLongPress = event => {
+      context.components.text.onLongPress({ name, kind, event, ...props })
+      if (_onLongPress) {
+        _onLongPress(event)
+      }
+    }
+
+    const pressableProps: any = {}
+
+    if (hasOnPress) {
+      pressableProps.onPress = onPress
+    }
+
+    if (hasOnLongPress) {
+      pressableProps.onLongPress = onLongPress
+    }
+
+    return <TextOriginal {...props} {...pressableProps} ref={ref} />
   },
 )
 

src/lib/exports/Text/condition.ts

@@ -1,4 +1,5 @@
-import { BaraReactText, TextPressEventFilter } from './event'
+import { kindOf, nameOf } from '../../functions/common'
 
-export const nameOfText = (name: string) => (triggeringEvent: BaraReactText): boolean =>
-  name ? name === triggeringEvent.name : true
+export const nameOfText = nameOf
+
+export const kindOfText = kindOf

src/lib/exports/Text/event.ts

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

src/lib/exports/Text/hook.ts

@@ -1,9 +1,45 @@
-import { TextPressEventFilter } from './event'
+import {
+  ActionPipe,
+  BaraEventPayload,
+  ConditionPipe,
+  createPipe,
+  useAction,
+  useCondition,
+  useEvent,
+  useTrigger,
+} from 'bara'
+
+import { BaraReactText, useTextLongPressEvent, useTextPressEvent } from './event'
 import { TextPressCallback, useTextPressTrigger } from './trigger'
 
-export function useTextPress(
-  eventFilter: TextPressEventFilter,
-  callback: TextPressCallback,
-) {
-  return useTextPressTrigger(eventFilter, callback)
+export const whenTextPress = (
+  ...conditions: Array<ConditionPipe<BaraReactText>>
+) => (...actions: Array<ActionPipe<BaraReactText>>) => {
+  const piper = (
+    data: BaraReactText,
+    payload: BaraEventPayload<BaraReactText>,
+  ) => {
+    createPipe(data, payload)(...(conditions as any))(...actions)
+  }
+  useTrigger<BaraReactText>(() => {
+    const event = useTextPressEvent()
+    const action = useAction(piper)
+    return { event, action }
+  })
+}
+
+export const whenTextLongPress = (
+  ...conditions: Array<ConditionPipe<BaraReactText>>
+) => (...actions: Array<ActionPipe<BaraReactText>>) => {
+  const piper = (
+    data: BaraReactText,
+    payload: BaraEventPayload<BaraReactText>,
+  ) => {
+    createPipe(data, payload)(...(conditions as any))(...actions)
+  }
+  useTrigger<BaraReactText>(() => {
+    const event = useTextLongPressEvent()
+    const action = useAction(piper)
+    return { event, action }
+  })
 }

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

src/lib/exports/Touchable/condition.ts

@@ -1,8 +1,5 @@
-import { BaraReactTouchable, TouchableEventFilter } from './event'
+import { kindOf, nameOf } from '../../functions/common'
 
-export const nameOfTouchable = (name: string) => (triggeringEvent: BaraReactTouchable): boolean =>
-  name ? name === triggeringEvent.name : true
+export const nameOfTouchable = nameOf
 
-export const classOfTouchable = (className: string) => (
-  triggeringEvent: BaraReactTouchable,
-): boolean => (className ? className === triggeringEvent.className : true)
+export const kindOfTouchable = kindOf

src/lib/exports/Touchable/event.ts

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