Merge pull request #27 from onefinestay/replaceable_icon

Replaceable icon
onefinestay · Apr 1, 2015 · 945ea59 · 945ea59
2 parents 8c27d87 + ee611b9
commit 945ea59
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 12 deletions.
diff --git a/dist/icon.js b/dist/icon.js
@@ -0,0 +1,24 @@
+"use strict";
+
+var React = require('react/addons');
+var cx = React.addons.classSet;
+
+var Icon = React.createClass({displayName: 'Icon',
+  propTypes: {
+    focused: React.PropTypes.bool.isRequired
+  },
+
+  render: function() {
+    var arrowClasses = cx({
+      'react-choice-icon__arrow': true,
+      'react-choice-icon__arrow--up': this.props.focused,
+      'react-choice-icon__arrow--down': !this.props.focused
+    });
+
+    return (
+      React.createElement("div", {className: arrowClasses})
+    );
+  }
+});
+
+module.exports = Icon;
diff --git a/dist/single.js b/dist/single.js
@@ -5,6 +5,7 @@ var _ = require('lodash');
 var cx = React.addons.classSet;
 var cloneWithProps = React.addons.cloneWithProps;
 
+var Icon = require('./icon');
 var OptionWrapper = require('./option-wrapper');
 
 var SearchMixin = require('./search-mixin');
@@ -25,6 +26,8 @@ var SingleChoice = React.createClass({displayName: 'SingleChoice',
 
     searchField: React.PropTypes.array, // array of search fields
 
+    icon: React.PropTypes.func, // icon render
+
     onSelect: React.PropTypes.func, // function called when option is selected
   },
 
@@ -188,11 +191,7 @@ var SingleChoice = React.createClass({displayName: 'SingleChoice',
       'react-choice-single--not-in-focus': !this.state.focus
     });
 
-    var arrowClasses = cx({
-      'react-choice-icon__arrow': true,
-      'react-choice-icon__arrow--up': this.state.focus,
-      'react-choice-icon__arrow--down': !this.state.focus
-    });
+    var IconRenderer = this.props.icon || Icon;
 
     return (
       React.createElement("div", {className: "react-choice"}, 
@@ -214,7 +213,7 @@ var SingleChoice = React.createClass({displayName: 'SingleChoice',
         ), 
 
         React.createElement("div", {className: "react-choice-icon", onMouseDown: this._handleArrowClick}, 
-          React.createElement("div", {className: arrowClasses})
+          React.createElement(IconRenderer, {focused: this.state.focus})
         ), 
 
         this.state.focus ?

diff --git a/src/icon.jsx b/src/icon.jsx
@@ -0,0 +1,24 @@
+"use strict";
+
+var React = require('react/addons');
+var cx = React.addons.classSet;
+
+var Icon = React.createClass({
+  propTypes: {
+    focused: React.PropTypes.bool.isRequired
+  },
+
+  render: function() {
+    var arrowClasses = cx({
+      'react-choice-icon__arrow': true,
+      'react-choice-icon__arrow--up': this.props.focused,
+      'react-choice-icon__arrow--down': !this.props.focused
+    });
+
+    return (
+      <div className={arrowClasses}></div>
+    );
+  }
+});
+
+module.exports = Icon;
diff --git a/src/single.jsx b/src/single.jsx
@@ -5,6 +5,7 @@ var _ = require('lodash');
 var cx = React.addons.classSet;
 var cloneWithProps = React.addons.cloneWithProps;
 
+var Icon = require('./icon');
 var OptionWrapper = require('./option-wrapper');
 
 var SearchMixin = require('./search-mixin');
@@ -25,6 +26,8 @@ var SingleChoice = React.createClass({
 
     searchField: React.PropTypes.array, // array of search fields
 
+    icon: React.PropTypes.func, // icon render
+
     onSelect: React.PropTypes.func, // function called when option is selected
   },
 
@@ -188,11 +191,7 @@ var SingleChoice = React.createClass({
       'react-choice-single--not-in-focus': !this.state.focus
     });
 
-    var arrowClasses = cx({
-      'react-choice-icon__arrow': true,
-      'react-choice-icon__arrow--up': this.state.focus,
-      'react-choice-icon__arrow--down': !this.state.focus
-    });
+    var IconRenderer = this.props.icon || Icon;
 
     return (
       <div className="react-choice">
@@ -214,7 +213,7 @@ var SingleChoice = React.createClass({
         </div>
 
         <div className="react-choice-icon" onMouseDown={this._handleArrowClick}>
-          <div className={arrowClasses}></div>
+          <IconRenderer focused={this.state.focus} />
         </div>
 
         {this.state.focus ?