feat(component): accept any type value

Author: azu

README.md

@@ -10,6 +10,35 @@ Install with [npm](https://www.npmjs.com/):
 
 ## Usage
 
+Put `<YourComponent />` into `<TogglePattern />`.
+
+```js
+class ToggleButton extends React.Component {
+    render(){
+        return (
+            <TogglePattern isEditing={this.props.isEditing}>
+                <LeaveEditingButton isEditing={true} />
+                <EnterEditingButton isEditing={false} />
+            </TogglePattern>
+        );
+    }
+}
+```
+
+It means that
+
+- if `this.props.isEditing` is `true`, show `<LeaveEditingButton />`
+- if `this.props.isEditing` is `false`, show `<EnterEditingButton />`
+- In the other case, show `null`
+
+### `<TogglePattern />` Interface
+
+- `<TogglePattern anyAttribute=anyValue />`
+    - `anyAttribute` is any name.
+    - `anyValue` is any type.
+
+### Example
+
 Show component that has truly attribute with `<TogglePattern attribute />`
 
 ```js
@@ -36,6 +65,17 @@ Show component that match attribute and value with `<TogglePattern attribute=val
 
 Result to `<ComponentY />`
 
+Also, it is ok that `value` it `string` type.
+
+```js
+<TogglePattern pattern="one">
+    <ComponentX pattern="one"/>
+    <ComponentY pattern="two"/>
+</TogglePattern>
+```
+
+Result to `<ComponentY />`
+
 -----
 
 Show component**s** that match attribute and value with `<TogglePattern attribute=value />`.
@@ -62,6 +102,8 @@ Not show when not match
 
 Result to `null`.
 
+
+
 ## Changelog
 
 See [Releases page](https://github.com/azu/react-toggle-pattern/releases).

src/react-toggle-pattern.js

@@ -4,11 +4,7 @@ import React, {Component, PropTypes} from 'react';
 
 export default class TogglePattern extends Component {
     getFlagNames() {
-        const keys = Object.keys(this.props);
-        return keys.filter(key => {
-            const flag = this.props[key];
-            return typeof flag === "boolean";
-        });
+        return Object.keys(this.props);
     }
 
     getUnMatchedComponent() {

test/react-toggle-pattern-test.js

@@ -50,4 +50,20 @@ describe('<TogglePattern />', () => {
         const result = wrapper.find(ComponentX);
         assert(result.length === 0);
     });
-});
+
+    it('match any type value', () => {
+        const wrapper = shallow(<TogglePattern pattern="one">
+            <ComponentX pattern="one"/>
+            <ComponentY pattern="two"/>
+        </TogglePattern>);
+        assert(wrapper.is(ComponentX));
+
+        const symbol = {};
+        const wrapper1 = shallow(<TogglePattern pattern={symbol}>
+            <ComponentX pattern={symbol}/>
+            <ComponentY pattern="two"/>
+        </TogglePattern>);
+        assert(wrapper1.is(ComponentX));
+
+    });
+});