udpate pkg&docs scripts

README.MD

@@ -2,19 +2,103 @@
 > React component for status manager.
 
 
-## resource:
-+ http://www.cnblogs.com/Kummy/p/4966937.html
-+ https://github.com/steven5538/vue-button
-+ https://yarnpkg.com/en/docs/install
-
+## properties:
+```javascript
 
-## props:
-| name | type | value | description |
-| :----| :----| :----| :----|
-| visible  | Boolean | true/false | v-show |
+  static propTypes = {
+    className:PropTypes.string,
+    statusList:PropTypes.array
+  };
 
+  static defaultProps = {
+    statusList:[]
+  };
+
+```
 
 ## usage:
-```html
-<react-status-manager :visible="true" />
+```jsx
+class App extends React.Component{
+  constructor(props){
+    super(props);
+    this.state = {
+      status:'init',
+      smStatus:'N',
+      step:0,
+    };
+  }
+
+  click1 = (e)=>{
+    this.setState({status:'init'});
+    console.log('click1');
+  }
+  click2 = (e)=>{
+    this.setState({status:'active'});
+    console.log('click2');
+  }
+  click3 = (e)=>{
+    this.setState({status:'running'});
+    console.log('click3');
+  }
+  click4 = (e)=>{
+    this.setState({status:'finish'});
+    console.log('click4');
+  }
+
+  _click5 =(e)=>{
+    this.setState({
+      smStatus:'A'
+    })
+  };
+
+  _clickStep = (e) =>{
+    let step = this.state.step;
+    this.setState({
+      step: step ===3 ? 0: step+1
+    })
+  };
+
+  render(){
+    return (
+      <div className="hello-react-refresher">
+        <ReactStatusManager size="16px" status={this.state.status} statusList={['init','active','running','finish']}>
+          <span>下拉刷新</span>
+          <span>释放更新</span>
+          <img width="30" src={loadingImg} alt="" />
+          <span>更新完毕</span>
+        </ReactStatusManager>
+
+
+        <ReactStatusManager status={this.state.smStatus} className={`wp-icon-${this.state.smStatus}`} statusList={['N','A','F']}>
+          <span>未开始</span>
+          <span>进行中</span>
+          <span>已经结束</span>
+        </ReactStatusManager>
+
+        <button onClick={this.click1}>to `init`</button>
+        <button onClick={this.click2}>to `active`</button>
+        <button onClick={this.click3}>to `running`</button>
+        <button onClick={this.click4}>to `finish`</button>
+
+        <button onClick={this._click5}>SetSMStatus</button>
+
+          <h2>Wizard</h2>
+          <button onClick={this._clickStep}>next step</button>
+          <ReactStatusManager status={this.state.step} statusList={[0,1,2,3]}>
+            <div className="step">step1,input password</div>
+            <div className="step">step2,input phone</div>
+            <div className="step">step3,input other info</div>
+            <div className="step">step4,do submit! <button>SUBMIT</button></div>
+          </ReactStatusManager>
+      </div>
+    );
+  }
+}
+
 ```
+
+
+
+## resource:
++ http://ionicframework.com/docs/components/#full-buttons
+

_README.MD

@@ -0,0 +1,19 @@
+# react-status-manager
+> React component for status manager.
+
+
+## properties:
+```javascript
+BACKUP_PROPERTIES
+```
+
+## usage:
+```jsx
+BACKUP_USAGE
+```
+
+
+
+## resource:
++ http://ionicframework.com/docs/components/#full-buttons
+

build/auto-readme.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+const fileRegExp = require('file-regexp');
+const exampleRE = /\/\*===example start===\*\/\n([a-zA-Z.{\s()<="-<_>}?:+0-9\[\]\u4E00-\u9FA5`!]*)\/\*===example end===\*\//;
+const templateRE = /\/\*===properties start===\*\/([()\[\]\w\s={}:.;,'"]*)\/\*===properties end===\*\//;
+
+const targetPropsRE = /## properties:\n```javascript\n(.*)\n```/;
+const targetUsageRE = /## usage:\n```jsx\n(.*)\n```/;
+
+let readmeFile = path.join(__dirname,'../README.MD');
+let _readmeFile = path.join(__dirname,'../_README.MD');
+let exampleFile = path.join(__dirname,'../src/dev.js');
+let templateFile = path.join(__dirname,'../src/components/react-status-manager.js');
+
+
+
+let exampleRs = fileRegExp.fileGetContent(exampleFile,exampleRE);
+let templateRs = fileRegExp.fileGetContent(templateFile,templateRE);
+
+// set default readme file:
+fs.writeFileSync(readmeFile, fs.readFileSync(_readmeFile,'utf-8'));
+
+//do replace:
+fileRegExp.fileReplaceContent(readmeFile,targetPropsRE,templateRs);
+fileRegExp.fileReplaceContent(readmeFile,targetUsageRE,exampleRs);

package.json

@@ -24,7 +24,8 @@
   "homepage": "https://github.com/afeiship/react-status-manager",
   "scripts": {
     "dev": "node build/dev-server.js",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "docs": "node build/auto-readme.js"
   },
   "main": "./dist/react-status-manager.js",
   "devDependencies": {
@@ -54,6 +55,7 @@
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
+    "file-regexp": "github:afeiship/file-regexp",
     "function-bind": "^1.0.2",
     "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.8.1",

src/components/react-status-manager.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export default class extends PureComponent{
+  /*===properties start===*/
   static propTypes = {
     className:PropTypes.string,
     statusList:PropTypes.array
@@ -12,6 +13,7 @@ export default class extends PureComponent{
   static defaultProps = {
     statusList:[]
   };
+  /*===properties end===*/
 
   render(){
     const { className, status, statusList, size ,children,...props} = this.props;

src/dev.js

@@ -3,12 +3,14 @@ import './dev.scss';
 import ReactStatusManager from './main';
 import loadingImg from 'assets/loading.svg';
 
+/*===example start===*/
 class App extends React.Component{
   constructor(props){
     super(props);
     this.state = {
       status:'init',
-      smStatus:'N'
+      smStatus:'N',
+      step:0,
     };
   }
 
@@ -35,6 +37,13 @@ class App extends React.Component{
     })
   };
 
+  _clickStep = (e) =>{
+    let step = this.state.step;
+    this.setState({
+      step: step ===3 ? 0: step+1
+    })
+  };
+
   render(){
     return (
       <div className="hello-react-refresher">
@@ -58,11 +67,20 @@ class App extends React.Component{
         <button onClick={this.click4}>to `finish`</button>
 
         <button onClick={this._click5}>SetSMStatus</button>
+
+          <h2>Wizard</h2>
+          <button onClick={this._clickStep}>next step</button>
+          <ReactStatusManager status={this.state.step} statusList={[0,1,2,3]}>
+            <div className="step">step1,input password</div>
+            <div className="step">step2,input phone</div>
+            <div className="step">step3,input other info</div>
+            <div className="step">step4,do submit! <button>SUBMIT</button></div>
+          </ReactStatusManager>
       </div>
     );
   }
 }
-
+/*===example end===*/
 
 ReactDOM.render(
     <App />,

src/dev.scss

@@ -40,4 +40,14 @@ ul,li{list-style: none;}
       outline: none;
     }
   }
+
+  .step{
+    background: #f60;
+    color:#fff;
+    padding:10px;
+    button{
+      width:30%;
+      padding:10px;
+    }
+  }
 }