fix: table 支持函数自定义组件

NervJS · Mar 14, 2019 · b7634ba · b7634ba
1 parent 5e2d99e
commit b7634ba
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 31 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/site/markdown/zh/select.md b/site/markdown/zh/select.md
@@ -145,7 +145,7 @@ imports:
 
 :::demo
 ```jsx
-<Select   filterable size="large" style="width: 240px">
+<Select value='1'  filterable size="large" style="width: 240px">
   <Select.Option value="1">深圳</Select.Option>
   <Select.Option value="2">广州</Select.Option>
   <Select.Option value="3">上海</Select.Option>

diff --git a/site/markdown/zh/table.md b/site/markdown/zh/table.md
@@ -486,16 +486,19 @@ imports:
         title: '操作',
         width:'300',
         action: 'onClick',
-        component: <div>
-          <Button onClick={(index,event)=>{console.log('index1', index, event);alert(this.state.data[index].address)}}>查看地址</Button>
-          <Button onClick={(index,event)=>{console.log('index2', index, event);alert(this.state.data[index].name)}}>查看姓名</Button>
-        </div>
+        component: (item)=>{
+          return (<div>
+          <Button onClick={(event,index)=>{console.log('index1', index, event);alert(item.address)}}>查看地址</Button>
+          <Button onClick={(event, index)=>{console.log('index2', index, event);alert(item.name)}}>
+            {item.name}
+          </Button>
+        </div>)}
       },
       {
         title: '操作',
         width:'300',
         action: 'onClick',
-        component:<Button onClick={(index,event)=>{alert(this.state.data[index].name)}}>查看名字</Button>
+        component:(item)=>{return (<Button onClick={(index,event)=>{alert(item.name)}}>查看名字</Button>)}
       }
       ]}
       />

diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -350,6 +350,7 @@ class Select extends Nerv.Component<SelectProps, any> {
           }, null)
         }
       }, null)
+
     }
     componentWillUpdate (nextProps, nextState) {
       if (nextProps.children != this.props.children) {

diff --git a/src/table/table.tsx b/src/table/table.tsx
@@ -142,14 +142,14 @@ class Table extends Nerv.Component<TableProps, any> {
 
     const dataElement: any[] = []
 
-    for(let i=0;i<data.length;i++) {
+    for (let i = 0; i < data.length; i++) {
       const tdElement: any[] = []
-      let dataTemp = data[i]
+      const dataTemp = data[i]
       // 处理多选框
       if (this.props.optional) {
         const pageSize = this.state.currPageSize
         const currPage = this.state.currPage
-        let indexTemp = (currPage - 1) * pageSize + i
+        const indexTemp = (currPage - 1) * pageSize + i
         tdElement.push(
           <th
             className='at-table__cell at-table__column-selection'
@@ -166,39 +166,36 @@ class Table extends Nerv.Component<TableProps, any> {
         tdElement.push(<td className='at-table__cell'>{dataTemp[key]}</td>)
       })
       for (let index = 0; index < this.renderArr.length; index++) {
-        const item = this.renderArr[index];
-        const {action,render} = item;
-        const {type, props, children: myChildren} = render;
-        let element = Nerv.cloneElement(Nerv.createElement(type, props, myChildren))
-        let childrenTemp = myChildren
-        if(myChildren) {
-          if(typeof myChildren === 'object' && !(myChildren instanceof Array) ) { childrenTemp = [myChildren] }
-          for(let j = 0;j<childrenTemp.length;j++) {
-            let itemInner = childrenTemp[j]
-            let childPropsAction = itemInner.props[action] || this.noop;
-            if(!(element['children'] instanceof Array)) {
-              element['children'].props[action] = childPropsAction.bind(element, i)
-            } else {
-              element['children'][j].props[action] = childPropsAction.bind(element, i)
+        const item = this.renderArr[index]
+        const {action, render} = item
+        const element = Nerv.cloneElement(render(dataTemp))
+        let childrenTemp = element.props.children
+        if (childrenTemp) {
+          if (typeof childrenTemp === 'object' && !(childrenTemp instanceof Array)) { childrenTemp = [childrenTemp] }
+          for (let j = 0; j < childrenTemp.length; j++) {
+            const itemInner = childrenTemp[j]
+            if (itemInner.props && itemInner.props[action]) {
+              const childAction = itemInner.props[action]
+              if (childAction) {
+                itemInner.props[action] = childAction.bind(element, i)
+              }
             }
-
           }
         }
-
-        let propsAction = element.props[action] || this.noop
-        element.props[action] = propsAction.bind(element,i)
+        const propsAction = element.props[action] || this.noop
+        element.props[action] = propsAction.bind(element, i)
         tdElement.push(<td className='at-table__cell'>{element}</td>)
       }
-       
+
       // })
       dataElement.push(<tr>{tdElement}</tr>)
     }
-    return <tbody ref={(tablebody)=>{this.$tablebody = tablebody}} className='at-table__tbody'>{dataElement}</tbody>
+    return <tbody ref={(tablebody) => {this.$tablebody = tablebody}} className='at-table__tbody'>{dataElement}</tbody>
   }
-  coplyChildren(children) {
+  coplyChildren (children) {
     Nerv.cloneElement
   }
-  log(key){
+  log (key) {
 
   }
   noop () {