add some doc

Author: CHEN HSUCHING

doc/index.mdx

@@ -3,9 +3,9 @@ name: Getting Start
 route: /
 ---
 
-import { Playground } from 'docz';
+import { Playground, PropsTable } from 'docz';
 import { State } from 'react-powerplug'
-import Input from '../bin/Input.js';
+import Input from '../src/components/Input.js';
 
 # React Autocorrect Input
 
@@ -67,3 +67,6 @@ render(<Main />, document.getElementById('app'));
 </div>
 </Playground>
 
+### Proptypes
+
+<PropsTable of={Input} />

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@reactmaker/react-autocorrect-input",
-  "description": "react component for 8 bit style",
-  "version": "1.0.3",
-  "main": "bin/index.js",
+  "description": "autocorrect input react component",
+  "version": "1.0.0",
+  "main": "bin/Input.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/reactmaker/react-autocorrect-input"
@@ -15,7 +15,6 @@
     "start": "webpack-dev-server --mode development --hot --config webpack.config.js",
     "build": "babel src/components/ --out-dir bin/",
     "deploy": "npm run docz:build && gh-pages -d .docz/dist",
-    "build:docker": "npm run dist && docker build -t reactdocker .",
     "lint": "eslint ./src",
     "lint:fix": "eslint ./src --fix",
     "docz:dev": "docz dev",

src/components/Input.js

@@ -63,13 +63,13 @@ export default class ACInput extends React.Component {
   state = initState
 
   onChange = (e) => {
-    const { dataSource } = this.props;
+    const { dataSource, onChange } = this.props;
     const { value, selectionStart } = e.target;
     // 1. get last keyword
     const lastWord = value.split(' ').pop().toLowerCase();
     if (!lastWord || selectionStart !== value.length) {
       this.setState(initState);
-      this.props.onChange(value);
+      onChange(value);
       return;
     }
     // 2. filter suggest
@@ -80,7 +80,7 @@ export default class ACInput extends React.Component {
     const selectedSuggest = suggest[0] || '';
     // 3. update suggest array
     this.setState({ suggest, selectedSuggest });
-    this.props.onChange(value);
+    onChange(value);
   }
 
   onKeyDown(e) {
@@ -114,7 +114,7 @@ export default class ACInput extends React.Component {
     }
   }
 
-  onClickSuggest = (selectedSuggest) => () => {
+  onClickSuggest = selectedSuggest => () => {
     this.onComplete(selectedSuggest);
     this.inputRef.current.focus();
   }

src/index.js

@@ -9,7 +9,7 @@ class Demo extends React.Component {
     dataSource: ['apple', 'ask', 'applice', 'best', 'book', 'beep', 'cat', 'can', 'car'],
   }
 
-  onChange = (value) => this.setState({ value })
+  onChange = value => this.setState({ value })
 
   render() {
     const { value, dataSource } = this.state;