add flattenProps

docs/API.md

@@ -42,6 +42,7 @@ const PureComponent = pure(BaseComponent)
   + [`renameProp()`](#renameprop)
   + [`renameProps()`](#renameprops)
   + [`flattenProp()`](#flattenprop)
+  + [`flattenProps()`](#flattenprops)
   + [`withState()`](#withstate)
   + [`withReducer()`](#withreducer)
   + [`branch()`](#branch)
@@ -212,6 +213,16 @@ flattenProp(
 
 Flattens a prop so that its fields are spread out into the props object.
 
+### `flattenProps()`
+
+```js
+flattenProps(
+  propNames: Array<string>
+): HigherOrderComponent
+```
+
+Same as `flattenProp` but takes an array of prop names. Higher index props overwrite lower index props.
+
 ```js
 const enhance = compose(
   withProps({
@@ -343,7 +354,7 @@ const Post = enhance(({ title, author, content }) =>
 renderNothing: HigherOrderComponent
 ```
 
-A higher-order component that always renders `null`. 
+A higher-order component that always renders `null`.
 
 This is useful in combination with another helper that expects a higher-order component, like `branch()`:
 

src/packages/recompose/__tests__/flattenProp-test.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import { flattenProp } from '../'
 
-test('flattenProps flattens an object prop and spreads it into the top-level props object', () => {
+test('flattenProp flattens an object prop and spreads it into the top-level props object', () => {
   const Counter = flattenProp('data-state')('div')
   expect(Counter.displayName).toBe('flattenProp(div)')
 

src/packages/recompose/__tests__/flattenProps-test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { flattenProps } from '../'
+
+test('flattenProps flattens object props and spreads them into the top-level props object', () => {
+  const Counter = flattenProps(['data-first', 'data-second'])('div')
+  expect(Counter.displayName).toBe('flattenProps(div)')
+
+  const wrapper = shallow(
+    <Counter
+      data-pass="through"
+      data-first={{ 'data-foo': 1 }}
+      data-second={{ 'data-bar': 2 }}
+    />
+  )
+
+  expect(
+    wrapper.equals(
+      <div
+        data-pass="through"
+        data-first={{ 'data-foo': 1 }}
+        data-second={{ 'data-bar': 2 }}
+        data-foo={1}
+        data-bar={2}
+      />
+    )
+  ).toBe(true)
+})

src/packages/recompose/flattenProps.js

@@ -0,0 +1,20 @@
+import createHelper from './createHelper'
+import createEagerFactory from './createEagerFactory'
+
+const flattenProps = propNames => BaseComponent => {
+  const factory = createEagerFactory(BaseComponent)
+
+  return props =>
+    factory({
+      ...props,
+      ...propNames.reduce(
+        (flattenedProps, propName) => ({
+          ...flattenedProps,
+          ...props[propName],
+        }),
+        {}
+      ),
+    })
+}
+
+export default createHelper(flattenProps, 'flattenProps')

src/packages/recompose/index.js

@@ -7,6 +7,7 @@ export { default as defaultProps } from './defaultProps'
 export { default as renameProp } from './renameProp'
 export { default as renameProps } from './renameProps'
 export { default as flattenProp } from './flattenProp'
+export { default as flattenProps } from './flattenProps'
 export { default as withState } from './withState'
 export { default as withReducer } from './withReducer'
 export { default as branch } from './branch'