From cf75b5bbbe1ad206466c09ea174d322bb726bd72 Mon Sep 17 00:00:00 2001
From: Marvin Frachet <marvin.frachet@gmail.com>
Date: Fri, 14 Sep 2018 19:00:11 +0200
Subject: [PATCH] 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                         | 12 ++++++------
 src/__tests__/displayable.spec.js |  8 ++++----
 src/displayable.js                |  8 +++++---
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 86be4eb..40d7e38 100644
--- a/README.md
+++ b/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>
   );
 }
diff --git a/src/__tests__/displayable.spec.js b/src/__tests__/displayable.spec.js
index b873def..558ab55 100644
--- a/src/__tests__/displayable.spec.js
+++ b/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);
     });
diff --git a/src/displayable.js b/src/displayable.js
index fbf6850..1842d44 100644
--- a/src/displayable.js
+++ b/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;