单元格编辑

src/components/Editcell/index.jsx

@@ -2,15 +2,88 @@ import { Input,Form } from 'antd'
 import React, { useContext, useState, useEffect, useRef } from 'react'
 import { connect } from 'dva'
 
-const Editcell = props => {
-  const { options, dispatch, onSelect } = props
+const EditableContext = React.createContext(null)
+
+const EditableRow = ({ index, ...props }) => {
+  const [form] = Form.useForm()
+  return (
+    <Form form={form} component={false}>
+      <EditableContext.Provider value={form}>
+        <tr {...props} />
+      </EditableContext.Provider>
+    </Form>
+  )
+}
+
+const EditableCell = ({
+  title,
+  editable,
+  children,
+  dataIndex,
+  record,
+  handleSave,
+  ...restProps
+}) => {
+  const [editing, setEditing] = useState(false)
+  const inputRef = useRef(null)
+  const form = useContext(EditableContext)
   useEffect(() => {
-    if (!options.length) {
-      dispatch({
-        type: 'district/fetch'
-      })
+    if (editing) {
+      inputRef.current.focus()
+    }
+  }, [editing])
+
+  const toggleEdit = () => {
+    setEditing(!editing)
+    form.setFieldsValue({
+      [dataIndex]: record[dataIndex]
+    })
+  }
+
+  const save = async () => {
+    try {
+      const values = await form.validateFields()
+      toggleEdit()
+      handleSave({ ...record, ...values })
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo)
     }
-  }, [])
+  }
+
+  let childNode = children
+  if (editable) {
+    childNode = editing ? (
+      <Form.Item
+        style={{
+          margin: 0
+        }}
+        name={dataIndex}
+        rules={[
+          {
+            required: true,
+            message: `${title} is required.`
+          }
+        ]}
+      >
+        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
+      </Form.Item>
+    ) : (
+      <div
+        className="editable-cell-value-wrap"
+        style={{
+          paddingRight: 24
+        }}
+        onClick={toggleEdit}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  return <td {...restProps}>{childNode}</td>
+}
+
+const Editcell = props => {
 
   return (
     <div>

src/components/Editcell/index.less

@@ -0,0 +1,18 @@
+.editable-cell {
+  position: relative;
+}
+
+.editable-cell-value-wrap {
+  padding: 5px 12px;
+  cursor: pointer;
+}
+
+.editable-row:hover .editable-cell-value-wrap {
+  padding: 4px 11px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
+  border: 1px solid #434343;
+}

src/components/PopContent/index.scss

@@ -17,21 +17,3 @@
   overflow-x: hidden;
   overflow-y: auto;
 }
-.editable-cell {
-  position: relative;
-}
-
-.editable-cell-value-wrap {
-  padding: 5px 12px;
-  cursor: pointer;
-}
-
-.editable-row:hover .editable-cell-value-wrap {
-  padding: 4px 11px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
-  border: 1px solid #434343;
-}