fix(api): rules as props instead of hoc argument (#1)

* refactor(api): rules in props instead of hoc argument

* refactor(api): fix rules proptypes

README.md

@@ -24,7 +24,7 @@ The following code connect the `Text` component via an `HoC` to provide a
 By default, the component is hidden.
 
 To display a component, simply add the `isDisplayed` props to the connected
-component :
+component:
 
 ```javascript
 /* react stuff... */
@@ -47,7 +47,7 @@ export default function() {
 It's quite common to display or hide components based on business logic. This
 module also helps to display or not component by using an array of rules. The
 module expect each function to accept the component props as argument and to
-return a boolean value :
+return a boolean value:
 
 ```javascript
 /* react stuff... */
@@ -58,20 +58,20 @@ const isBiggerThan10 = props => props.number > 10;
 
 const rules = [isBiggerThan5, isBiggerThan10];
 
-const DisplayableText = displayable(Text, rules);
+const DisplayableText = displayable(Text);
 
 export default function() {
   return (
     <View>
-      <DisplayableText number={3}>
+      <DisplayableText number={3} rules={rules}>
         This is not displayed ! (first rule not resolved)
       </DisplayableText>
 
-      <DisplayableText number={8}>
+      <DisplayableText number={8} rules={rules}>
         This is not displayed ! (second rule not resolved)
       </DisplayableText>
 
-      <DisplayableText number={12}>This is displayed !</DisplayableText>
+      <DisplayableText number={12} rules={rules}>This is displayed !</DisplayableText>
     </View>
   );
 }

src/__tests__/displayable.spec.js

@@ -34,8 +34,8 @@ describe('displayable', () => {
       const isEvenA = props => props.a % 2 !== 0;
       const rules = [isPairB, isEvenA];
 
-      Component = displayable(TextComponent, rules);
-      wrapper = shallow(<Component a={5} b={6} />);
+      Component = displayable(TextComponent);
+      wrapper = shallow(<Component a={5} b={6} rules={rules} />);
 
       expect(wrapper.find('TextComponent').length).toEqual(1);
     });
@@ -46,8 +46,8 @@ describe('displayable', () => {
       const isEvenA = props => props.a % 2 !== 0;
       const rules = [isPairB, isEvenA];
 
-      Component = displayable(TextComponent, rules);
-      wrapper = shallow(<Component a={5} b={6} />);
+      Component = displayable(TextComponent);
+      wrapper = shallow(<Component a={5} b={6} rules={rules} />);
 
       expect(wrapper.type()).toEqual(null);
     });

src/displayable.js

@@ -11,13 +11,13 @@ const manageRules = (rules, props) => {
   return true;
 };
 
-const displayable = (Component, rules) => {
-  function Displayable(props) {
+const displayable = (Component) => {
+  function Displayable({ rules, ...props }) {
     if (props.isDisplayed) {
       return <Component {...props} />;
     }
 
-    if (rules) {
+    if (rules.length) {
       if (manageRules(rules, props)) {
         return <Component {...props} />;
       }
@@ -28,10 +28,12 @@ const displayable = (Component, rules) => {
 
   Displayable.propTypes = {
     isDisplayed: PropTypes.bool,
+    rules: PropTypes.arrayOf(PropTypes.func),
   };
 
   Displayable.defaultProps = {
     isDisplayed: false,
+    rules: [],
   };
 
   return Displayable;