Add composeEvents (#71)

* add composeEvents initial work

* add flow types to composeEvents

* docs: composeEvents & compose improves

* docs: add utils to readme

Author: renatorib

README.md

@@ -88,6 +88,13 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 | <h6>OTHER</h6>               |
 | **\<Compose>**               | `{ components }`        | _depends on components prop_                   | [:point_down:](#composing-components) [:books:](docs/components/Compose.md) |
 
+## Utilities
+
+| Name                          |                                        |
+| ----------------------------- | -------------------------------------- |
+| compose(...components)        | [:books:](docs/utils/compose.md)       |
+| composeEvents(...objOfEvents) | [:books:](docs/utils/composeEvents.md) |
+
 ## Examples
 
 #### State
@@ -262,23 +269,19 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 ```jsx
 <Form initial={{ subject: '', message: '' }}>
   {({ input, values }) => (
-    <form onSubmit={(e) => {
-      e.preventDefault()
-      console.log(values)
-    }}>
-      <ControlledInput
-        placeholder="Subject"
-        {...input('subject').bind}
-      />
-      <ControlledTextArea
-        placeholder="Message"
-        {...input('message').bind}
-      />
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        console.log(values)
+      }}
+    >
+      <ControlledInput placeholder="Subject" {...input('subject').bind} />
+      <ControlledTextArea placeholder="Message" {...input('message').bind} />
       <Submit>Send</Submit>
 
       {/*
-        input(id) => { bind, set, value }
-      */}
+                                                              input(id) => { bind, set, value }
+                                                            */}
     </form>
   )}
 </Form>

docs/components/Compose.md

@@ -39,22 +39,10 @@ Also, you can use a built-in Compose component and pass components on `component
 </Compose>
 ```
 
-In addition you can use a utility to create a Composed component
+In addition you can use `compose()` utility to create a Composed component.  
+[See docs](/docs/utils/compose.md)
 
-```js
-import { compose } from 'react-powerplug' // note lowercased (c)ompose
-```
-
-```jsx
-const ToggleCounter = compose(
-  <Counter initial={5} />,
-  <Toggle initial={false} />
-)
-
-<ToggleCounter>
-  {(counter, toggle) => (...)}
-</ToggleCounter>
-```
+---
 
 Behind the scenes, that's what happens:
 
@@ -77,16 +65,11 @@ Behind the scenes, that's what happens:
 </Counter>
 ```
 
-Because of that, when you use `toggle` function, only `<Toggle>` will be rerendered, but if you use `inc` or `dec` functions, both `<Counter>` and `<Toggle>` will be rerendered. **Even** using `compose()` utility.
-
 ## Compose Props
 
 **components** _(required)_  
 Set an array of React PowerPlug components (instance elements, not types) to compose.
 
-Note: if you use `compose` utility to create Composed components, you don't
-need to pass an array, just pass by arguments: `compose(<Foo />, <Bar />, <Baz />)`
-
 ## Compose Children Props
 
 The render props function provided will receive n arguments, each of them being

docs/utils/compose.md

@@ -0,0 +1,36 @@
+# compose
+
+The compose utility is a factory version of [Compose](/docs/components/Compose.md) component.
+
+```js
+import { compose, Counter, Toggle } from 'react-powerplug' // note lowercased (c)ompose
+
+// the order matters
+const ToggleCounter = compose(
+  <Counter initial={5} />, // accept a element
+  Toggle,                  // or just a component
+)
+
+<ToggleCounter>
+  {(counter, toggle) => {
+    // counter.inc, counter.dec, counter.count
+    // toggle.on, toggle.toggle, etc.
+  }}
+</ToggleCounter>
+```
+
+---
+
+Behind the scenes, that's what happens:
+
+```jsx
+<Counter initial={5}>
+  {counter => (
+    <Toggle>
+      {toggle => (
+        /* ... */
+      )}
+    </Toggle>
+  )}
+</Counter>
+```

docs/utils/composeEvents.md

@@ -0,0 +1,47 @@
+# composeEvents
+
+The composeEvents utility helps you when you need to pass the same callback more than once.
+
+```jsx
+import { Hover, composeEvents } from 'react-powerplug'
+
+const HoveredDiv = ({ children, onMouseEnter, onMouseLeave, ...restProps }) => (
+  <Hover>
+    {({ isHover, bindHover }) => (
+      <div
+        {...composeEvents({ onMouseEnter, onMouseLeave }, bindHover)}
+        {...restProps}
+        children={children(isHover)}
+      />
+    )}
+  </Hover>
+)
+```
+
+It's just merge array of events object into single one.
+
+```jsx
+const callbacks = composeEvents(
+  {
+    onMouseEnter: event => console.log('first call', event),
+    onMouseLeave: event => console.log('first call', event),
+  },
+  {
+    onMouseEnter: event => console.log('second call', event),
+  }
+)
+
+/**
+ * callbacks = {
+ *   onMouseEnter: Function,
+ *   onMouseLeave: Function
+ * }
+ */
+
+const App = () => (
+  <>
+    <div {...callbacks} />
+    <div onMouseEnter={callbacks.onMouseEnter} />
+  </>
+)
+```

src/index.js

@@ -15,4 +15,5 @@ export { default as Touch } from './components/Touch'
 export { default as Value } from './components/Value'
 
 export { default as compose } from './utils/compose'
+export { default as composeEvents } from './utils/composeEvents'
 export { default as renderProps } from './utils/renderProps'

src/index.js.flow

@@ -255,3 +255,9 @@ type ValueProps<T> =
   | {| initial: T, onChange?: ValueChange<T>, children: ValueRender<T> |}
 
 declare export class Value<T> extends React.Component<ValueProps<T>> {}
+
+/* composeEvents */
+
+type Events = { [name: string]: Function }
+
+declare export function composeEvents(...Array<Events>): Events

src/utils/composeEvents.js

@@ -0,0 +1,20 @@
+const composeEvents = (...objEvents) => {
+  return objEvents.reverse().reduce((allEvents, events) => {
+    let append = {}
+
+    for (const key in events) {
+      append[key] = allEvents[key]
+        ? // Already have this event: let's merge
+          (...args) => {
+            events[key](...args)
+            allEvents[key](...args)
+          }
+        : // Don't have this event yet: just assign the event
+          events[key]
+    }
+
+    return { ...allEvents, ...append }
+  })
+}
+
+export default composeEvents

tests/utils/composeEvents.test.js

@@ -0,0 +1,26 @@
+import { composeEvents } from '../../src'
+
+test('composeEvents should call all events', () => {
+  const arr = []
+  const composed = composeEvents(
+    {
+      onMouseEnter: () => arr.push(1),
+    },
+    {
+      onMouseEnter: () => arr.push(2),
+      onMouseLeave: () => arr.push(3),
+    },
+    {
+      onMouseEnter: () => arr.push(4),
+      onMouseLeave: () => arr.push(5),
+    },
+    {
+      onMouseLeave: () => arr.push(6),
+    }
+  )
+
+  composed.onMouseEnter()
+  composed.onMouseLeave()
+
+  expect(arr).toEqual([1, 2, 4, 3, 5, 6])
+})