From a3c6907e51c57dfcd52a430e61b03e1b553d859a Mon Sep 17 00:00:00 2001
From: Knovour <knovour@ten2.tw>
Date: Thu, 18 May 2017 13:34:03 +0800
Subject: [PATCH] add more custom icon

---
 README.md           | 21 +++++++++++++++++++--
 src/input-moment.js | 14 +++++++++-----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index d145a1d..e97766a 100644
--- a/README.md
+++ b/README.md
@@ -16,15 +16,32 @@ npm i input-moment --save
 http://wangzuo.github.io/input-moment
 
 ### Usage
+
+#### Default
+
+``` javascript
+<InputMoment
+  moment={this.state.moment}
+  onChange={this.handleChange}
+  onSave={this.handleSave}
+/>
+```
+
+#### Custom Icon
+
 ``` javascript
 <InputMoment
   moment={this.state.moment}
   onChange={this.handleChange}
   onSave={this.handleSave}
-  prevMonthIcon="ion-ios-arrow-left" // default
-  nextMonthIcon="ion-ios-arrow-right" // default
+  prevMonthIcon="fa fa-angle-left"
+  nextMonthIcon="fa fa-angle-right"
+  dateIcon="fa fa-calendar-o"
+  timeIcon="fa fa-clock-o"
+  saveIcon="fa fa-check"
 />
 ```
+
 Check [app.js](https://github.com/wangzuo/input-moment/blob/master/example/app.js) for a working example.
 
 ### Development
diff --git a/src/input-moment.js b/src/input-moment.js
index 590d34c..7cee732 100644
--- a/src/input-moment.js
+++ b/src/input-moment.js
@@ -17,23 +17,27 @@ module.exports = React.createClass({
   getDefaultProps() {
     return {
       prevMonthIcon: 'ion-ios-arrow-left',
-      nextMonthIcon: 'ion-ios-arrow-right'
+      nextMonthIcon: 'ion-ios-arrow-right',
+      dateIcon: 'ion-calendar',
+      timeIcon: 'ion-clock',
+      saveIcon: 'ion-checkmark'
     };
   },
 
   render() {
     var tab = this.state.tab;
     var m = this.props.moment;
-    var props = blacklist(this.props, 'className', 'moment', 'prevMonthIcon', 'nextMonthIcon', 'onSave');
+    var props = blacklist(this.props, 'className', 'moment', 'prevMonthIcon', 'nextMonthIcon', 'onSave', 'dateIcon', 'timeIcon', 'saveIcon');
     props.className = cx('m-input-moment', this.props.className);
 
+
     return (
       <div {...props}>
         <div className="options">
-          <button type="button" className={cx('ion-calendar im-btn', {'is-active': tab === 0})} onClick={this.handleClickTab.bind(null, 0)}>
+          <button type="button" className={cx(`${this.props.dateIcon} im-btn`, {'is-active': tab === 0})} onClick={this.handleClickTab.bind(null, 0)}>
             Date
           </button>
-          <button type="button" className={cx('ion-clock im-btn', {'is-active': tab === 1})} onClick={this.handleClickTab.bind(null, 1)}>
+          <button type="button" className={cx(`${this.props.timeIcon} im-btn`, {'is-active': tab === 1})} onClick={this.handleClickTab.bind(null, 1)}>
             Time
           </button>
         </div>
@@ -53,7 +57,7 @@ module.exports = React.createClass({
           />
         </div>
 
-        <button type="button" className="im-btn btn-save ion-checkmark"
+        <button type="button" className={`im-btn btn-save ${this.props.saveIcon}`}
           onClick={this.handleSave}>
           Save
         </button>