titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

popover to edit field

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:53 +03:00
parent 4bf37c143c
commit 249435f696
1 changed files with 57 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/diagram_overview.jsx
View File

@ -1,4 +1,4 @@
import React from "react";
import { React } from "react";
import { sqlDataTypes } from "../data/data";
import {
Collapse,
@ -9,11 +9,14 @@ import {
Button,
Card,
TextArea,
Popover,
Checkbox,
} from "@douyinfe/semi-ui";
import {
IconMore,
IconKeyStroked,
IconColorPalette,
IconDeleteStroked,
} from "@douyinfe/semi-icons";
export default function DiagramOverview(props) {
@ -29,8 +32,8 @@ export default function DiagramOverview(props) {
}
itemKey={`${i}`}
>
<Form>
{t.fields.map((f, j) => (
<Form>
<div key={j}>
<Row
type="flex"
@ -71,12 +74,60 @@ export default function DiagramOverview(props) {
<Button type="tertiary" icon={<IconKeyStroked />}></Button>
</Col>
<Col span={3}>
<Popover
content={
<div className="px-1">
<Form>
<Form.Input
field="default"
label="Default"
initValue={f.default}
trigger="blur"
/>
<Form.Input
field="check"
label="Check Expression"
trigger="blur"
/>
<div className="flex justify-between items-center my-3">
<label
htmlFor="increment"
className="font-medium"
>
Autoincrement
</label>
<Checkbox
value="increment"
defaultChecked={f.increment}
></Checkbox>
</div>
<label htmlFor="comment" className="font-medium">
Comment
</label>
<Form.TextArea
initValue={f.comment}
autosize
rows={2}
/>
</Form>
<div className="flex justify-end">
<Button icon={<IconDeleteStroked />} type="danger">
Delete
</Button>
</div>
</div>
}
trigger="click"
position="rightTop"
showArrow
>
<Button type="tertiary" icon={<IconMore />}></Button>
</Popover>
</Col>
</Row>
</div>
))}
</Form>
))}
<Card
bodyStyle={{ padding: "4px" }}
style={{ marginTop: "12px", marginBottom: "12px" }}