drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-24 10:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix inputs

Browse Source
This commit is contained in:
1ilit 2025-05-04 21:56:10 +04:00
parent 75e3d4c8cc
commit ac15627237
5 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/EditorSidePanel/TablesTab/SearchBar.jsx
View File

@ -11,7 +11,6 @@ export default function SearchBar({ tables }) {
const treeData = useMemo(() => { const treeData = useMemo(() => {
return tables.map(({ id, name: parentName, fields }, i) => { return tables.map(({ id, name: parentName, fields }, i) => {
console.log(fields)
const children = fields?.map(({ name }, j) => ({ const children = fields?.map(({ name }, j) => ({
tableId: id, tableId: id,
id: `${j}`, id: `${j}`,

6
src/components/EditorSidePanel/TablesTab/TableField.jsx
View File

@ -18,11 +18,13 @@ export default function TableField({ data, tid, index }) {
const [editField, setEditField] = useState({}); const [editField, setEditField] = useState({});
return ( return (
<div className="hover-1 my-2 flex gap-2 items-center" > <div
id={`scroll_table_${tid}_input_${index}`}
className="hover-1 my-2 flex gap-2 items-center"
>
<DragHandle id={data.id} /> <DragHandle id={data.id} />
<div className="min-w-20 flex-1/3"> <div className="min-w-20 flex-1/3">
<Input <Input
id={`scroll_table_${tid}_input_${index}`}
value={data.name} value={data.name}
validateStatus={data.name.trim() === "" ? "error" : "default"} validateStatus={data.name.trim() === "" ? "error" : "default"}
placeholder="Name" placeholder="Name"

9
src/components/EditorSidePanel/TablesTab/TableInfo.jsx
View File

@ -65,13 +65,8 @@ export default function TableInfo({ data }) {
}); });
}} }}
afterChange={() => setSaveState(State.SAVING)} afterChange={() => setSaveState(State.SAVING)}
renderItem={(item) => ( renderItem={(item, i) => (
<TableField <TableField data={item} tid={data.id} index={i} />
key={"field_" + item.id}
data={item}
tid={data.id}
index={item.id}
/>
)} )}
/> />
{data.indices.length > 0 && ( {data.indices.length > 0 && (

3
src/components/EditorSidePanel/TablesTab/TablesTab.jsx
View File

@ -47,8 +47,9 @@ export default function TablesTab() {
accordion accordion
> >
<SortableList <SortableList
type="table"
items={tables} items={tables}
onChange={setTables} onChange={(newTables) => setTables(newTables)}
afterChange={() => setSaveState(State.SAVING)} afterChange={() => setSaveState(State.SAVING)}
renderItem={(item) => <TableListItem table={item} />} renderItem={(item) => <TableListItem table={item} />}
/> />

17
src/components/SortableList/SortableList.jsx
View File

@ -12,7 +12,13 @@ import {
} from "@dnd-kit/sortable"; } from "@dnd-kit/sortable";
import { SortableItem } from "./SortableItem"; import { SortableItem } from "./SortableItem";
export function SortableList({ items, onChange, afterChange, renderItem }) { export function SortableList({
items,
onChange,
afterChange,
renderItem,
type = "",
}) {
const sensors = useSensors(useSensor(PointerSensor)); const sensors = useSensors(useSensor(PointerSensor));
const handleDragEnd = (event) => { const handleDragEnd = (event) => {
@ -34,12 +40,9 @@ export function SortableList({ items, onChange, afterChange, renderItem }) {
onDragEnd={handleDragEnd} onDragEnd={handleDragEnd}
> >
<SortableContext items={items} strategy={verticalListSortingStrategy}> <SortableContext items={items} strategy={verticalListSortingStrategy}>
{items.map((item) => ( {items.map((item, i) => (
<SortableItem <SortableItem id={item.id} key={`sortable-item-${type}-${item.id}`}>
key={`sortable-item-${item.name ?? ""}-${item.id}`} {renderItem(item, i)}
id={item.id}
>
{renderItem(item)}
</SortableItem> </SortableItem>
))} ))}
</SortableContext> </SortableContext>