|
|
@@ -1,8 +1,9 @@
|
|
|
-import { useEffect, useState } from "react"
|
|
|
+import { useEffect, useMemo, useState } from "react"
|
|
|
import { Button, Form, Input, Modal, Select } from 'antd'
|
|
|
-import { CloseOutlined } from '@ant-design/icons'
|
|
|
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons'
|
|
|
import InputColor from 'react-input-color';
|
|
|
import style from './style.module.scss'
|
|
|
+import ReactEditeTable, { InputEditor } from 'react-edit-table'
|
|
|
|
|
|
import type { Board, BoardShape, ShapeType, ExtractShape } from "./board"
|
|
|
import type { RefObject, ComponentType } from 'react'
|
|
|
@@ -43,15 +44,53 @@ const TextInput = ({ shape }: { shape: ExtractShape<'text'> }) => (
|
|
|
|
|
|
const ContentInput = ({ shape }: { shape: ExtractShape<'content'> }) => {
|
|
|
const [edit, setEdit] = useState(false)
|
|
|
- const content = shape.data.content || [[]]
|
|
|
+ const [content, setContent] = useState(shape.data.content || [['', '']])
|
|
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
+ const refer = content[0] || ['', '']
|
|
|
+ const transformRow = (columns: any[], row?: string[]) => {
|
|
|
+ const source: { [key in number]: string } = {}
|
|
|
+ for (let i = 0; i < columns.length; i++) {
|
|
|
+ source[i] = (row && row[i]) || ''
|
|
|
+ }
|
|
|
+ return source
|
|
|
+ }
|
|
|
+ const tableAttrs = useMemo(() => ({
|
|
|
+ columns: refer.map((item, i) => ({
|
|
|
+ title: `列${i + 1}`,
|
|
|
+ dataIndex: i,
|
|
|
+ key: i,
|
|
|
+ editor: {
|
|
|
+ type: 'input',
|
|
|
+ component: InputEditor
|
|
|
+ }
|
|
|
+ })),
|
|
|
+ dataSource: content.map(item => transformRow(refer, item))
|
|
|
+ }), [content, refer])
|
|
|
+
|
|
|
+ const onChange = (data: any) => {
|
|
|
+ const newContent = [...content]
|
|
|
+ newContent[data.rowIndex][data.key] = data.newValue
|
|
|
+ setContent(newContent)
|
|
|
+ }
|
|
|
+ const onDelete = (data: any) => {
|
|
|
+ const newContent = [...content]
|
|
|
+ newContent.splice(data.rowIndex, 1)
|
|
|
+ setContent(newContent)
|
|
|
+ }
|
|
|
+ const onInsert = () => {
|
|
|
+ setContent([...content, refer.map(() => '')])
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<Form.Item label="内容">
|
|
|
<Button type="primary" onClick={() => setEdit(true)}>编辑</Button>
|
|
|
<Modal open={edit} onCancel={() => setEdit(false)}>
|
|
|
- <table>
|
|
|
- { content.map((tds, i) => (<tr key={i}>{tds.map((td, i) => <td key={i}>{td}</td>)}</tr>)) }
|
|
|
- </table>
|
|
|
+ <ReactEditeTable
|
|
|
+ {...tableAttrs}
|
|
|
+ onDelete={onDelete}
|
|
|
+ onChange={onChange}
|
|
|
+ />
|
|
|
+ <PlusOutlined onClick={onInsert} />
|
|
|
</Modal>
|
|
|
</Form.Item>
|
|
|
)
|
