新增readme，修改属性名称定义

README.md

@@ -17,6 +17,72 @@ Dragact is a react component, which allows you to build your own **dragable grid
 - [x] Draggable component
 
 
+# Dragact 提供的属性
+```ts
+interface DragactProps {
+    layout?: DragactLayout[] //暂时不推荐使用
+    /** 
+     * 宽度切分比 
+     * 这个参数会把容器的宽度平均分为col等份
+     * 于是容器内元素的最小宽度就等于 containerWidth/col
+    */
+    col: number,
+
+    /** 
+     * 容器的宽度
+    */
+    width: number,
+
+    /**容器内每个元素的最小高度 */
+    rowHeight: number,
+
+    /**
+     * 容器内部的padding
+     */
+    padding?: number,
+
+    children: any[] | any
+
+
+    // 
+    // interface GridItemEvent {
+    //     event: any //浏览器拖动事件
+    //     GridX: number //在布局中的x格子  
+    //     GridY: number //在布局中的y格子  
+    //     w: number //元素的宽度
+    //     h: number //元素的高度
+    //     UniqueKey: string | number //元素的唯一key
+    // }
+
+    /**
+     * 拖动开始的回调
+     */
+    onDragStart?: (event: GridItemEvent) => void
+
+    /**
+     * 拖动中的回调
+     */
+    onDrag?: (event: GridItemEvent) => void
+
+    /**
+     * 拖动结束的回调
+     */
+    onDragEnd?: (key: number | string) => void
+
+    /**
+     * 每个元素的margin,第一个参数是左右，第二个参数是上下
+     */
+    margin: [number, number]
+
+    /** 
+     * layout的名字
+    */
+    className: number | string
+}
+
+```
+
+
 
 # Contribute
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-dragger-layout",
-  "version": "0.0.7",
+  "name": "dragact",
+  "version": "0.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {

src/NormalLayout/index.tsx

@@ -1,5 +1,5 @@
 import *as React from 'react';
-import { DraggerLayout } from '../lib/dragact'
+import { Dragact } from '../lib/dragact'
 import './index.css';
 
 
@@ -34,11 +34,11 @@ export const LayoutDemo = () => {
         <div style={{ display: 'flex', justifyContent: 'center' }}>
             <div>
                 <h1 style={{ textAlign: 'center' }}>Normal Layout Demo</h1>
-                <DraggerLayout width={800} col={12} rowHeight={800 / 12} margin={[5, 5]} className='normal-layout'>
+                <Dragact width={800} col={12} rowHeight={800 / 12} margin={[5, 5]} className='normal-layout'>
                     {Words.map((el, index) => {
                         return <Card item={el} key={index} data-set={{ GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 }} />
                     })}
-                </DraggerLayout>
+                </Dragact>
             </div>
         </div>
     )

src/SortedTable/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DraggerLayout } from '../lib/dragact'
+import { Dragact } from '../lib/dragact'
 import './index.css'
 
 const Words = [
@@ -29,11 +29,11 @@ export const SortedTable = () => {
         <div style={{ display: 'flex', justifyContent: 'center' }}>
             <div>
                 <h1 style={{ textAlign: 'center' }}>Sorted Table Demo</h1>
-                <DraggerLayout width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
+                <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
                     {Words.map((el, index) => {
                         return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: 0, w: 1, h: 1 }} />
                     })}
-                </DraggerLayout>
+                </Dragact>
             </div>
         </div>
     )

src/StaticHeader/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DraggerLayout } from '../lib/dragact'
+import { Dragact } from '../lib/dragact'
 import './index.css'
 
 const Words = [
@@ -26,11 +26,11 @@ export const SortedTableWithStatic = () => {
         <div style={{ display: 'flex', justifyContent: 'center' }}>
             <div>
                 <h1 style={{ textAlign: 'center' }}>Static Header Table Demo</h1>
-                <DraggerLayout width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
+                <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
                     {Words.map((el, index) => {
                         return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: index, w: 1, h: 1, static: el.static }} />
                     })}
-                </DraggerLayout>
+                </Dragact>
             </div>
         </div>
     )

src/lib/dragact.tsx

@@ -21,22 +21,63 @@ export interface DragactLayout {
 }
 
 interface DragactProps {
-    layout?: DragactLayout[]
-    /**外部属性 */
+    layout?: DragactLayout[] //暂时不推荐使用
+    /** 
+     * 宽度切分比 
+     * 这个参数会把容器的宽度平均分为col等份
+     * 于是容器内元素的最小宽度就等于 containerWidth/col
+    */
     col: number,
+
+    /** 
+     * 容器的宽度
+    */
     width: number,
-    /**每个元素的最小高度 */
+
+    /**容器内每个元素的最小高度 */
     rowHeight: number,
+
+    /**
+     * 容器内部的padding
+     */
     padding?: number,
 
-    children: any[]
+    children: any[] | any
+
 
+    // 
+    // interface GridItemEvent {
+    //     event: any //浏览器拖动事件
+    //     GridX: number //在布局中的x格子  
+    //     GridY: number //在布局中的y格子  
+    //     w: number //元素的宽度
+    //     h: number //元素的高度
+    //     UniqueKey: string | number //元素的唯一key
+    // }
+
+    /**
+     * 拖动开始的回调
+     */
     onDragStart?: (event: GridItemEvent) => void
+
+    /**
+     * 拖动中的回调
+     */
     onDrag?: (event: GridItemEvent) => void
+
+    /**
+     * 拖动结束的回调
+     */
     onDragEnd?: (key: number | string) => void
 
+    /**
+     * 每个元素的margin,第一个参数是左右，第二个参数是上下
+     */
     margin: [number, number]
 
+    /** 
+     * layout的名字
+    */
     className: number | string
 }
 
@@ -51,7 +92,7 @@ interface DragactState {
     containerHeight: number
 }
 
-export class DraggerLayout extends React.Component<DragactProps, DragactState> {
+export class Dragact extends React.Component<DragactProps, DragactState> {
     constructor(props: DragactProps) {
         super(props)
         this.onDrag = this.onDrag.bind(this)