109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
import { ChangeEvent, useState } from "react"
|
|
import { Alignment, generate, TableColumn, TableColumns } from "./TableMethodGenerator"
|
|
|
|
interface TableColumnProps {
|
|
value: TableColumn
|
|
onChange: { (e: TableColumn): void }
|
|
}
|
|
|
|
function TableDefinitionRow(props: TableColumnProps) {
|
|
let [, setName] = useState(props.value.name)
|
|
const onChangeName = (e: ChangeEvent<HTMLInputElement>) => {
|
|
props.value.name = e.target.value
|
|
setName(props.value.name)
|
|
props.onChange(props.value)
|
|
}
|
|
|
|
let [, setField] = useState(props.value.field)
|
|
const onChangeField = (e: ChangeEvent<HTMLInputElement>) => {
|
|
props.value.field = e.target.value
|
|
setField(props.value.field)
|
|
props.onChange(props.value)
|
|
}
|
|
|
|
let [, setWidth] = useState(props.value.width)
|
|
const onChangeWidth = (e: ChangeEvent<HTMLInputElement>) => {
|
|
props.value.width = parseFloat(e.target.value)
|
|
setWidth(props.value.width)
|
|
props.onChange(props.value)
|
|
}
|
|
|
|
let [, setAlignment] = useState(props.value.alignment)
|
|
const onChangeAlignment = (e: ChangeEvent<HTMLSelectElement>) => {
|
|
props.value.alignment = e.target.value as Alignment
|
|
setAlignment(props.value.alignment)
|
|
props.onChange(props.value)
|
|
}
|
|
|
|
return (
|
|
<li>
|
|
<input type="text" value={props.value.name} onChange={onChangeName} />
|
|
<input type="text" value={props.value.field} onChange={onChangeField} />
|
|
<input type="number" value={props.value.width || props.value.name.length} onChange={onChangeWidth}/>
|
|
<select value={props.value.alignment} onChange={onChangeAlignment}>
|
|
<option value="right">Right</option>
|
|
<option value="left">Left</option>
|
|
</select>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
interface TableDefinitionProps {
|
|
value: TableColumns
|
|
onChange?: { (e: TableColumns): void }
|
|
}
|
|
|
|
function TableDefinitionForm(props: TableDefinitionProps) {
|
|
let [currentName, setCurrentName] = useState("")
|
|
|
|
let [columns, setColumns] = useState<TableColumns>(props.value)
|
|
|
|
const addRow = () => {
|
|
if (currentName.length > 0) {
|
|
columns.push({ name: currentName })
|
|
setCurrentName("")
|
|
if (props.onChange !== undefined) {
|
|
props.onChange(columns)
|
|
}
|
|
}
|
|
}
|
|
|
|
const updateRow = (i: number, column: TableColumn) => {
|
|
if (column.name === "") {
|
|
columns.splice(i, 1)
|
|
setColumns([...columns])
|
|
} else {
|
|
columns[i] = column
|
|
setColumns([...columns])
|
|
}
|
|
if (props.onChange !== undefined) {
|
|
props.onChange(columns)
|
|
}
|
|
}
|
|
|
|
const onClickCopy = () => {
|
|
navigator.clipboard.writeText(generate(columns))
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={(e) => e.preventDefault()}>
|
|
<label>Column name:</label>
|
|
<input
|
|
type="text"
|
|
value={currentName}
|
|
onChange={(e) => setCurrentName(e.target.value)}
|
|
onKeyPress={(e) => e.key === "Enter" && addRow()}
|
|
/>
|
|
<button onClick={addRow}>Insert column</button>
|
|
<button onClick={onClickCopy}>Copy code 📋!</button>
|
|
<ol>
|
|
{columns.map((item, i) =>
|
|
<TableDefinitionRow key={i} value={item} onChange={(e) => updateRow(i, e)}/>
|
|
)}
|
|
</ol>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default TableDefinitionForm
|