diff --git a/src/App.css b/src/App.css index 9ee18b0..e7f574c 100644 --- a/src/App.css +++ b/src/App.css @@ -10,12 +10,12 @@ } .App { + padding: 3em; background-color: #1E1E1E; color: #CAD6DC; min-height: 100vh; display: flex; flex-direction: column; - align-items: center; justify-content: center; font-size: calc(10px + 1vmin); color: white; diff --git a/src/App.tsx b/src/App.tsx index f028e91..7eae034 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,41 +1,34 @@ +import { useState } from 'react'; import './App.css'; +import TableDefinitionForm from './TableDefinitionForm'; import TableMethodCodeBlock from './TableMethodCodeBlock'; import { TableDefinition } from './TableMethodGenerator'; -import TableRenderer from './TableRenderer'; function App() { - let definition: TableDefinition = { + let [definition, setDefinition] = useState({ names: ["Miestas", "Atsakingas", "Vardas", "Adresas", "Metai"], fields: ["City", "Manager", "Name", "Address", "Year"], widths: [10, 20, 18, 15, 5], alignments: ["left", "left", "left", "left", "right"] - } - - let data = { - method_name: "PrintLocations", - empty_message: "Nėra", - - container_type: "LocationsContainer", - entry_name: "l", - entry_type: "Location", + }) + let [data, setData] = useState({ definition - }; + }); - let test_entries = [ - ["Alytus", "AlytausMuziejusA", "Jonas Jonaitis", "GatveA", "1999"], - ["Alytus", "AlytausMuziejusB", "Ona Onaite", "GatveB", "2018"], - ["Kaunas", "KaunasMuziejusC", "Jonas Jonaitis", "GatveC", "2004"], - ["Klaipėda", "KlaipėdaMuziejusD", "Ona Onaite", "GatveD", "1988"], - ]; + const onChange = (e: TableDefinition) => { + definition = e + data.definition = e + setDefinition(e) + setData({...data}) + } return (
+
{TableMethodCodeBlock(data)} -
-
); diff --git a/src/TableDefinitionForm.tsx b/src/TableDefinitionForm.tsx new file mode 100644 index 0000000..13d1b64 --- /dev/null +++ b/src/TableDefinitionForm.tsx @@ -0,0 +1,151 @@ +import { ChangeEvent, useState } from "react" +import { Alignment, TableDefinition } from "./TableMethodGenerator" + + +interface TableDefinitionRowProps { + value: Row + onChange?: { (e: Row): void } +} + +function TableDefinitionRow(props: TableDefinitionRowProps) { + let [, setName] = useState(props.value.name) + const onChangeName = (e: ChangeEvent) => { + props.value.name = e.target.value + setName(props.value.name) + if (props.onChange) { + props.onChange(props.value) + } + } + + let [, setField] = useState(props.value.field) + const onChangeField = (e: ChangeEvent) => { + props.value.field = e.target.value + setField(props.value.field) + if (props.onChange) { + props.onChange(props.value) + } + } + + let [, setWidth] = useState(props.value.width) + const onChangeWidth = (e: ChangeEvent) => { + props.value.width = parseFloat(e.target.value) + setWidth(props.value.width) + if (props.onChange) { + props.onChange(props.value) + } + } + + let [, setAlignment] = useState(props.value.alighment) + const onChangeAlignment = (e: ChangeEvent) => { + props.value.alighment = e.target.value as Alignment + setAlignment(props.value.alighment) + if (props.onChange) { + props.onChange(props.value) + } + } + + return ( +
  • + + + + +
    • + ) +} + +interface TableDefinitionProps { + value: TableDefinition + onChange?: { (e: TableDefinition): void } +} + +interface Row { + name: string + width?: number + field?: string + alighment?: Alignment +} + +function intoRows(definition: TableDefinition): Row[] { + const rows: Row[] = [] + if (definition.names !== undefined) { + for (let i = 0; i < definition.names.length; i++) { + rows.push({ + name: definition.names[i], + width: (definition.widths || [])[i], + field: (definition.fields || [])[i], + alighment: (definition.alignments || [])[i], + }) + } + } + return rows +} + +function fromRows(rows: Row[]): TableDefinition { + const definition: TableDefinition = { + names: [], + widths: [], + fields: [], + alignments: [] + } + for (const row of rows) { + (definition.names as string[]).push(row.name); + (definition.widths as (number|undefined)[]).push(row.width); + (definition.fields as (string|undefined)[]).push(row.field); + (definition.alignments as (Alignment|undefined)[]).push(row.alighment); + } + return definition +} + +function TableDefinitionForm(props: TableDefinitionProps) { + let [currentName, setCurrentName] = useState("") + + let [rows, setRows] = useState(intoRows(props.value)) + + const addRow = () => { + rows.push({ name: currentName }) + setCurrentName("") + if (props.onChange !== undefined) { + props.onChange(fromRows(rows)) + } + } + + const updateRow = (i: number, row: Row) => { + if (row.name === "") { + rows.splice(i, 1) + rows = [...rows] + setRows(rows) + } else { + rows = [...rows] + rows[i] = row + setRows(rows) + } + if (props.onChange !== undefined) { + props.onChange(fromRows(rows)) + } + } + + return ( +
    e.preventDefault()}> + + setCurrentName(e.target.value)} + onKeyPress={(e) => e.key === "Enter" && addRow()} + /> +
      + { + rows.map((item, i) => + updateRow(i, e)}/> + ) + } +
    +
    + ) +} + +export default TableDefinitionForm diff --git a/src/TableMethodGenerator.ts b/src/TableMethodGenerator.ts index 73e0fc1..35e8927 100644 --- a/src/TableMethodGenerator.ts +++ b/src/TableMethodGenerator.ts @@ -1,4 +1,4 @@ -type Alignment = "left"|"right" +export type Alignment = "left"|"right" export interface TableDefinition { names?: string[] @@ -21,7 +21,7 @@ export interface TableMethodGeneratorOptions { function get_total_width(definition: TableDefinition): number { let names = definition.names || [] - if (names.length == 0) { return 0; } + if (names.length === 0) { return 0; } let total_width = 0 let widths = definition.widths || [] @@ -38,7 +38,7 @@ function get_total_width(definition: TableDefinition): number { export function generate(options: TableMethodGeneratorOptions): string { const section_names = options.definition.names || [] const method_name = options.method_name || "PrintTable" - if (section_names.length == 0) { + if (section_names.length === 0) { return `static void ${method_name}()\n{\n}`; } @@ -60,7 +60,7 @@ export function generate(options: TableMethodGeneratorOptions): string { const section = section_names[i] const width = section_widths[i] || section.length const alighment = section_alignments[i] || "right" - if (alighment == "left") { + if (alighment === "left") { row_components.push(`{${i},-${width}}`) } else { row_components.push(`{${i},${width}}`) @@ -107,7 +107,7 @@ export function generate(options: TableMethodGeneratorOptions): string { function render_table_row(definition: TableDefinition, entry: string[]): string { let names = definition.names || [] - if (names.length == 0) { return ""; } + if (names.length === 0) { return ""; } const columns: string[] = [] const alighments = definition.alignments || [] @@ -118,7 +118,7 @@ function render_table_row(definition: TableDefinition, entry: string[]): string const width = widths[i] || names[i].length const filler = " ".repeat(Math.max(width - value.length, 0)); - if (alighment == "left") { + if (alighment === "left") { columns.push(value + filler); } else { columns.push(filler + value);