Table 添加非确认模式

docs/components/form/table.md

@@ -224,6 +224,55 @@ order: 54
 }
 ```
 
+## 非确认模式
+
+配置`"needConfirm": false`，不需要确认，那么就是一直就是处于编辑形态。
+
+```schema:height="400" scope="body"
+{
+  "type": "form",
+  "data": {
+    "table": [
+      {
+        "a": "a1",
+        "b": "b1"
+      },
+      {
+        "a": "a2",
+        "b": "b2"
+      },
+      {
+        "a": "a3",
+        "b": "b3"
+      }
+    ]
+  },
+  "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
+  "controls": [
+    {
+      "type": "table",
+      "name": "table",
+      "label": "Table",
+      "needConfirm": false,
+      "addable": true,
+      "removable": true,
+      "columns": [
+        {
+          "label": "A",
+          "name": "a",
+          "quickEdit": true
+        },
+        {
+          "label": "B",
+          "name": "b",
+          "quickEdit": true
+        }
+      ]
+    }
+  ]
+}
+```
+
 ## 属性表
 
 | 属性名                       | 类型                    | 默认值           | 说明                                     |

examples/components/Form/Table.jsx

@@ -48,13 +48,16 @@ export default {
         name: 'colors',
         label: 'Table',
         draggable: true,
+        addable: true,
+        removable: true,
+        needConfirm: false,
         columns: [
           {
             label: 'Color',
             name: 'color',
             quickEdit: {
               type: 'color',
-              saveImmediately: true
+              mode: 'inline'
             }
           },
           {
@@ -62,8 +65,7 @@ export default {
             name: 'name',
             quickEdit: {
               type: 'text',
-              mode: 'inline',
+              mode: 'inline'
-              saveImmediately: true
             }
           }
         ]

src/renderers/Form/Table.tsx

@@ -36,6 +36,7 @@ export interface TableProps extends FormControlProps {
   scaffold?: any;
   deleteConfirmText?: string;
   valueField?: string;
+  needConfirm?: boolean;
 }
 
 export interface TableState {
@@ -69,7 +70,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     'editable',
     'addApi',
     'updateApi',
-    'deleteApi'
+    'deleteApi',
+    'needConfirm'
   ];
 
   entries: SimpleMap<any, number>;
@@ -359,12 +361,13 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       : [];
     const ns = this.props.classPrefix;
     const __ = this.props.translate;
+    const needConfirm = this.props.needConfirm;
 
     let btns = [];
     if (props.addable && props.showAddBtn !== false) {
       btns.push({
         children: ({key, rowIndex}: {key: any; rowIndex: number}) =>
-          ~this.state.editIndex ? null : (
+          ~this.state.editIndex && needConfirm !== false ? null : (
             <Button
               classPrefix={ns}
               size="sm"
@@ -385,7 +388,23 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       });
     }
 
-    if (props.editable) {
+    if (props.needConfirm === false) {
+      columns = columns.map(column => {
+        const quickEdit = column.quickEdit;
+
+        return quickEdit === false
+          ? omit(column, ['quickEdit'])
+          : {
+              ...column,
+              quickEdit: {
+                type: 'text',
+                ...quickEdit,
+                saveImmediately: true,
+                mode: 'inline'
+              }
+            };
+      });
+    } else if (props.editable) {
       columns = columns.map(column => {
         const quickEdit =
           !isCreateMode && column.hasOwnProperty('quickEditOnUpdate')
@@ -497,7 +516,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
           rowIndex: number;
           data: any;
         }) =>
-          ~this.state.editIndex || (data && data.__isPlaceholder) ? null : (
+          (~this.state.editIndex || (data && data.__isPlaceholder)) &&
+          needConfirm !== false ? null : (
             <Button
               classPrefix={ns}
               size="sm"
@@ -525,7 +545,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
         type: 'operation',
         buttons: btns,
         width: 150,
-        label: __('操作')
+        label: __('操作'),
+        className: 'v-middle'
       });
     }
 
@@ -537,16 +558,19 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     diff: Array<object> | object,
     rowIndexes: Array<number> | number
   ) {
-    const {onChange, value} = this.props;
+    const {onChange, value, needConfirm} = this.props;
 
     const newValue = Array.isArray(value) ? value.concat() : [];
 
     if (~this.state.editIndex) {
-      this.setState({
+      this.setState(
-        editting: this.editting = {
+        {
-          ...rows
+          editting: this.editting = {
-        }
+            ...rows
-      });
+          }
+        },
+        needConfirm === false ? this.confirmEdit : undefined
+      );
       return;
     } else if (Array.isArray(rows)) {
       (rowIndexes as Array<number>).forEach((rowIndex, index) => {