removes Icon dependency, use react-bootstrap Glyphicon instead

Author: chollier

package.json

@@ -47,6 +47,8 @@
     "grunt-contrib-requirejs": "~0.4.1",
     "grunt-shell": "~0.6.4",
     "grunt-contrib-copy": "~0.5.0"
-
+  },
+  "dependencies": {
+    "react-bootstrap": "^0.11.1"
   }
-}
+}

src/DateTimeField.jsx

@@ -2,7 +2,9 @@
 /** @jsx React.DOM */
 import React from './react-es6';
 import DateTimePicker from './DateTimePicker';
-var DateTimeField;
+var DateTimeField, Glyphicon;
+
+Glyphicon = require('react-bootstrap/Glyphicon');
 
 DateTimeField = React.createClass({
   propTypes: {
@@ -268,7 +270,7 @@ DateTimeField = React.createClass({
             />
             <div className="input-group date" ref="datetimepicker">
               <input type="text" className="form-control" onChange={this.onChange} value={this.state.selectedDate.format("MM/DD/YY h:mm A")} />
-              <span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Icon name="calendar" type="glyphicon" /></span>
+              <span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Glyphicon glyph="calendar" /></span>
             </div>
           </div>
     );

src/DateTimePicker.jsx

@@ -3,7 +3,9 @@
 import React from './react-es6';
 import DateTimePickerDate from './DateTimePickerDate';
 import DateTimePickerTime from './DateTimePickerTime';
-var DateTimePicker;
+var DateTimePicker, Glyphicon;
+
+Glyphicon = require('react-bootstrap/Glyphicon');
 
 DateTimePicker = React.createClass({
   propTypes: {
@@ -72,7 +74,7 @@ DateTimePicker = React.createClass({
 
         {this.renderDatePicker()}
 
-        <a className="btn btn-default picker-switch" style={{width:'100%'}} onClick={this.props.togglePicker}><Icon name={this.props.showTimePicker ? 'calendar' : 'time'} type="glyphicon" /></a>
+        <a className="btn btn-default picker-switch" style={{width:'100%'}} onClick={this.props.togglePicker}><Glyphicon name={this.props.showTimePicker ? 'calendar' : 'time'} /></a>
 
         {this.renderTimePicker()}
 

src/DateTimePickerTime.jsx

@@ -3,7 +3,9 @@
 import React from './react-es6';
 import DateTimePickerMinutes from './DateTimePickerMinutes';
 import DateTimePickerHours from './DateTimePickerHours';
-var DateTimePickerTime;
+var DateTimePickerTime, Glyphicon;
+
+Glyphicon = require('react-bootstrap/Glyphicon');
 
 DateTimePickerTime = React.createClass({
   propTypes: {
@@ -62,11 +64,11 @@ DateTimePickerTime = React.createClass({
         <table className="table-condensed">
           <tbody>
             <tr>
-              <td><a className="btn" onClick={this.props.addHour}><Icon name="chevron-up" type="glyphicon" /></a></td>
+              <td><a className="btn" onClick={this.props.addHour}><Glyphicon glyph="chevron-up" /></a></td>
 
               <td className="separator"></td>
 
-              <td><a className="btn" onClick={this.props.addMinute}><Icon name="chevron-up" type="glyphicon" /></a></td>
+              <td><a className="btn" onClick={this.props.addMinute}><Glyphicon glyph="chevron-up" /></a></td>
 
               <td className="separator"></td>
             </tr>
@@ -84,11 +86,11 @@ DateTimePickerTime = React.createClass({
             </tr>
 
             <tr>
-              <td><a className="btn" onClick={this.props.subtractHour}><Icon name="chevron-down" type="glyphicon" /></a></td>
+              <td><a className="btn" onClick={this.props.subtractHour}><Glyphicon glyph="chevron-down" /></a></td>
 
               <td className="separator"></td>
 
-              <td><a className="btn" onClick={this.props.subtractMinute}><Icon name="chevron-down" type="glyphicon" /></a></td>
+              <td><a className="btn" onClick={this.props.subtractMinute}><Glyphicon glyph="chevron-down" /></a></td>
 
               <td className="separator"></td>
             </tr>

src/coffee/DateTimeField.jsx.coffee

@@ -2,6 +2,7 @@
 
 `import React from './react-es6'`
 `import DateTimePicker from './DateTimePicker'`
+Glyphicon = require('react-bootstrap/Glyphicon')
 
 DateTimeField = React.createClass(
 
@@ -242,7 +243,7 @@ DateTimeField = React.createClass(
             />
             <div className="input-group date" ref="datetimepicker">
               <input type="text" className="form-control" onChange={this.onChange} value={this.state.selectedDate.format("MM/DD/YY h:mm A")} />
-              <span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Icon name="calendar" type="glyphicon" /></span>
+              <span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Glyphicon glyph="calendar" /></span>
             </div>
           </div>
     )`

src/coffee/DateTimePicker.jsx.coffee

@@ -3,6 +3,7 @@
 `import React from './react-es6'`
 `import DateTimePickerDate from './DateTimePickerDate'`
 `import DateTimePickerTime from './DateTimePickerTime'`
+Glyphicon = require('react-bootstrap/Glyphicon')
 
 DateTimePicker = React.createClass(
 
@@ -72,7 +73,7 @@ DateTimePicker = React.createClass(
 
         {this.renderDatePicker()}
 
-        <a className="btn btn-default picker-switch" style={{width:'100%'}} onClick={this.props.togglePicker}><Icon name={this.props.showTimePicker ? 'calendar' : 'time'} type="glyphicon" /></a>
+        <a className="btn btn-default picker-switch" style={{width:'100%'}} onClick={this.props.togglePicker}><Glyphicon name={this.props.showTimePicker ? 'calendar' : 'time'} /></a>
 
         {this.renderTimePicker()}
 

src/coffee/DateTimePickerTime.jsx.coffee

@@ -3,7 +3,7 @@
 `import React from './react-es6'`
 `import DateTimePickerMinutes from './DateTimePickerMinutes'`
 `import DateTimePickerHours from './DateTimePickerHours'`
-
+Glyphicon = require('react-bootstrap/Glyphicon')
 
 DateTimePickerTime = React.createClass(
 
@@ -55,11 +55,11 @@ DateTimePickerTime = React.createClass(
         <table className="table-condensed">
           <tbody>
             <tr>
-              <td><a className="btn" onClick={this.props.addHour}><Icon name="chevron-up" type="glyphicon" /></a></td>
+              <td><a className="btn" onClick={this.props.addHour}><Glyphicon glyph="chevron-up" /></a></td>
 
               <td className="separator"></td>
 
-              <td><a className="btn" onClick={this.props.addMinute}><Icon name="chevron-up" type="glyphicon" /></a></td>
+              <td><a className="btn" onClick={this.props.addMinute}><Glyphicon glyph="chevron-up" /></a></td>
 
               <td className="separator"></td>
             </tr>
@@ -77,11 +77,11 @@ DateTimePickerTime = React.createClass(
             </tr>
 
             <tr>
-              <td><a className="btn" onClick={this.props.subtractHour}><Icon name="chevron-down" type="glyphicon" /></a></td>
+              <td><a className="btn" onClick={this.props.subtractHour}><Glyphicon glyph="chevron-down" /></a></td>
 
               <td className="separator"></td>
 
-              <td><a className="btn" onClick={this.props.subtractMinute}><Icon name="chevron-down" type="glyphicon" /></a></td>
+              <td><a className="btn" onClick={this.props.subtractMinute}><Glyphicon glyph="chevron-down" /></a></td>
 
               <td className="separator"></td>
             </tr>

tools/cjs/package.json

@@ -20,5 +20,8 @@
   },
   "peerDependencies": {
     "react": ">=0.9"
+  },
+  "dependencies": {
+    "react-bootstrap": "^0.11.1"
   }
 }