feat(View): change hook function params with new Bara API

It's easier to pipe everything inside the hook

BREAKING CHANGE: make hook API pipable

src/lib/exports/View/View.tsx

@@ -12,12 +12,12 @@ export interface ViewProps extends ViewPropsOriginal, BaraBaseComponentProps {
 }
 
 export const View = React.forwardRef(
-  ({ onLayout: _onLayout, name, ...props }: ViewProps, ref: any) => {
+  ({ onLayout: _onLayout, name, kind, ...props }: ViewProps, ref: any) => {
     const context = useBaraContext()
-    const onLayout: typeof _onLayout = e => {
-      context.components.view.onLayout({ name, ...props })
+    const onLayout: typeof _onLayout = event => {
+      context.components.view.onLayout({ name, kind, event, ...props })
       if (_onLayout) {
-        _onLayout(e)
+        _onLayout(event)
       }
     }
 

src/lib/exports/View/condition.ts

@@ -1,5 +1,5 @@
-import { BaraReactView } from './event'
+import { kindOf, nameOf } from '../../functions/common'
 
-export const nameOfView = (name: string) => (
-  triggeringEvent: BaraReactView,
-): boolean => (name ? name === triggeringEvent.name : true)
+export const nameOfView = nameOf
+
+export const kindOfView  = kindOf

src/lib/exports/View/event.ts

@@ -1,8 +1,8 @@
 import { createEventType, useEvent } from 'bara'
 
-export interface BaraReactView {
-  name?: string
-  className?: string
+import { BaraBaseComponentProps } from '../../models'
+
+export interface BaraReactView extends BaraBaseComponentProps {
   ref?: any
   id?: any
 }

src/lib/exports/View/hook.ts

@@ -1,9 +1,26 @@
-import { ViewEventFilter } from './event'
-import { ViewLayoutCallback, useViewLayoutTrigger } from './trigger'
+import {
+  ActionPipe,
+  BaraEventPayload,
+  ConditionPipe,
+  createPipe,
+  useAction,
+  useTrigger,
+} from 'bara'
 
-export function useViewLayout(
-  eventFilter: ViewEventFilter,
-  callback: ViewLayoutCallback,
-) {
-  return useViewLayoutTrigger(eventFilter, callback)
+import { BaraReactView, useViewLayoutEvent } from './event'
+
+export const whenViewLayout = (
+  ...conditions: Array<ConditionPipe<BaraReactView>>
+) => (...actions: Array<ActionPipe<BaraReactView>>) => {
+  const piper = (
+    data: BaraReactView,
+    payload: BaraEventPayload<BaraReactView>,
+  ) => {
+    createPipe(data, payload)(...(conditions as any))(...actions)
+  }
+  useTrigger<BaraReactView>(() => {
+    const event = useViewLayoutEvent()
+    const action = useAction(piper)
+    return { event, action }
+  })
 }

src/lib/exports/View/stream.ts

@@ -1,4 +1,4 @@
-import { createEmitter, useEmitter, useStream } from 'bara'
+import { createEmitter, EventType, useEmitter, useStream } from 'bara'
 
 import { BaraReactView, ON_VIEW_LAYOUT } from './event'
 
@@ -29,9 +29,18 @@ export function useViewStream() {
   })
 }
 
+const getEmitter = (eventType: EventType) => {
+  let emit = useEmitter(eventType)
+  const warn = () => {
+    // tslint:disable-next-line
+    process.env.NODE_ENV === 'development' && console.warn(
+      `[View] No action executed because View is "false" when you call "useComponentsStream", call "useViewStream" to register this stream or change its value to "true"!`,
+    )
+  }
+  emit = emit! || warn
+  return emit
+}
+
 export const viewContext: BaraViewContext = {
-  onLayout: data => {
-    const emit = useEmitter(ON_VIEW_LAYOUT)
-    emit!(data)
-  },
+  onLayout: data => getEmitter(ON_VIEW_LAYOUT)(data),
 }