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

63
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 { sqlDataTypes } from "../data/data";
import { import {
Collapse, Collapse,
@ -9,11 +9,14 @@ import {
Button, Button,
Card, Card,
TextArea, TextArea,
Popover,
Checkbox,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import { import {
IconMore, IconMore,
IconKeyStroked, IconKeyStroked,
IconColorPalette, IconColorPalette,
IconDeleteStroked,
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
export default function DiagramOverview(props) { export default function DiagramOverview(props) {
@ -29,8 +32,8 @@ export default function DiagramOverview(props) {
} }
itemKey={`${i}`} itemKey={`${i}`}
> >
<Form> {t.fields.map((f, j) => (
{t.fields.map((f, j) => ( <Form>
<div key={j}> <div key={j}>
<Row <Row
type="flex" type="flex"
@ -71,12 +74,60 @@ export default function DiagramOverview(props) {
<Button type="tertiary" icon={<IconKeyStroked />}></Button> <Button type="tertiary" icon={<IconKeyStroked />}></Button>
</Col> </Col>
<Col span={3}> <Col span={3}>
<Button type="tertiary" icon={<IconMore />}></Button> <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> </Col>
</Row> </Row>
</div> </div>
))} </Form>
</Form> ))}
<Card <Card
bodyStyle={{ padding: "4px" }} bodyStyle={{ padding: "4px" }}
style={{ marginTop: "12px", marginBottom: "12px" }} style={{ marginTop: "12px", marginBottom: "12px" }}