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

add modal for new fields

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:24 +03:00
parent a4d3dab249
commit eeec8998e0
6 changed files with 346 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"@arco-design/web-react": "^2.48.2",
"@codemirror/lang-sql": "^6.5.0",
"@douyinfe/semi-ui": "^2.36.0",
"@lezer/highlight": "^1.1.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
@ -1864,6 +1865,18 @@
"node": ">=6.9.0"
}
},
"node_modules/@babel/runtime-corejs3": {
"version": "7.22.3",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.22.3.tgz",
"integrity": "sha512-6bdmknScYKmt8I9VjsJuKKGr+TwUb555FTf6tT1P/ANlCjTHCiYLhiQ4X/O7J731w5NOqu8c1aYHEVuOwPz7jA==",
"dependencies": {
"core-js-pure": "^3.30.2",
"regenerator-runtime": "^0.13.11"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/template": {
"version": "7.21.9",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
@ -2284,6 +2297,148 @@
"postcss-selector-parser": "^6.0.10"
}
},
"node_modules/@douyinfe/semi-animation": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.36.0.tgz",
"integrity": "sha512-+VgtnsT1//EnotjicQnecL0jLSZhbwX3uRIGfu+bXB3fH1B6wd24xsMGOe+sjawOYyh1leqSdzPnelMxZbg7KQ==",
"dependencies": {
"bezier-easing": "^2.1.0"
}
},
"node_modules/@douyinfe/semi-animation-react": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.36.0.tgz",
"integrity": "sha512-W9wYVBx+B8N2dyT8A8tNXI2WbLaYzJcqbpViukiKQO+W5s+GsNzWOCssWo/Aqt1+WS/Y3I309+auClpVHTkI8A==",
"dependencies": {
"@douyinfe/semi-animation": "2.12.0",
"@douyinfe/semi-animation-styled": "2.23.2",
"classnames": "^2.2.6"
}
},
"node_modules/@douyinfe/semi-animation-react/node_modules/@douyinfe/semi-animation": {
"version": "2.12.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.12.0.tgz",
"integrity": "sha512-OAfL9Nk38ZPqfdKm9k4cvVXXzm16ALI4LxGNZ0qfe2RCLLnYGB/hNzTctoTDjYD35dFv0yroh3qsXtZuP2xNdg==",
"dependencies": {
"@babel/runtime-corejs3": "^7.15.4",
"bezier-easing": "^2.1.0"
}
},
"node_modules/@douyinfe/semi-animation-styled": {
"version": "2.23.2",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.23.2.tgz",
"integrity": "sha512-cKaA1yGHPF76Rx7EZDZicj+1oX1su2wnqb/UGFOTquAwqWmkTfgQ+EKxCd/N704WH+RtmGf4xbrJKpBvvcEdSQ=="
},
"node_modules/@douyinfe/semi-foundation": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.36.0.tgz",
"integrity": "sha512-lcDxviFlYdoq9KQTYQ0S+7x1ia8vWdu/uH3ACWAIZyUQ3W5Zd7pmDdmw9QsfQgdViJb9GnrejFrzgFEi4iEQjA==",
"dependencies": {
"@douyinfe/semi-animation": "2.12.0",
"async-validator": "^3.5.0",
"classnames": "^2.2.6",
"date-fns": "^2.29.3",
"date-fns-tz": "^1.3.8",
"lodash": "^4.17.21",
"memoize-one": "^5.2.1",
"scroll-into-view-if-needed": "^2.2.24"
}
},
"node_modules/@douyinfe/semi-foundation/node_modules/@douyinfe/semi-animation": {
"version": "2.12.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.12.0.tgz",
"integrity": "sha512-OAfL9Nk38ZPqfdKm9k4cvVXXzm16ALI4LxGNZ0qfe2RCLLnYGB/hNzTctoTDjYD35dFv0yroh3qsXtZuP2xNdg==",
"dependencies": {
"@babel/runtime-corejs3": "^7.15.4",
"bezier-easing": "^2.1.0"
}
},
"node_modules/@douyinfe/semi-foundation/node_modules/scroll-into-view-if-needed": {
"version": "2.2.31",
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
"dependencies": {
"compute-scroll-into-view": "^1.0.20"
}
},
"node_modules/@douyinfe/semi-icons": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.36.0.tgz",
"integrity": "sha512-BGnbxCdZ9uhHqvIR73lhulF0jxDEWZU45PxxHDBvaAmx2zcvfMeDcdjJWIco0Pqeo5sfCwDEOYUHIWdq/9v7cw==",
"dependencies": {
"classnames": "^2.2.6"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@douyinfe/semi-illustrations": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.36.0.tgz",
"integrity": "sha512-JTeCejgvPb8KqS+8dlOU5n5SoMQLcLK4FHfkMPcRA14ysmqdgNhrESLT+0WMNyB2A5RvfpNOBY/3ZGgi/veu5g==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@douyinfe/semi-theme-default": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.36.0.tgz",
"integrity": "sha512-Z6U+Z9b0W3QJlFAFjR0dljLKl3/jFMXhwfefc9LHKiA/yaYJGzTEPgKiTDU7p98rTiCxjTvWkeZSb6/dI0kq3Q==",
"dependencies": {
"glob": "^7.1.6"
}
},
"node_modules/@douyinfe/semi-ui": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.36.0.tgz",
"integrity": "sha512-6xGoQsy6Li1GZmEhRgZ5bSXSYEz3HrzpbfylSJbYb866zsMCl4VRzq4BkB4tebwJz/WmK8JSE6mfFauMYrLqYQ==",
"dependencies": {
"@douyinfe/semi-animation": "2.36.0",
"@douyinfe/semi-animation-react": "2.36.0",
"@douyinfe/semi-foundation": "2.36.0",
"@douyinfe/semi-icons": "2.36.0",
"@douyinfe/semi-illustrations": "2.36.0",
"@douyinfe/semi-theme-default": "2.36.0",
"async-validator": "^3.5.0",
"classnames": "^2.2.6",
"copy-text-to-clipboard": "^2.1.1",
"date-fns": "^2.29.3",
"date-fns-tz": "^1.3.8",
"lodash": "^4.17.21",
"prop-types": "^15.7.2",
"react-resizable": "^1.8.0",
"react-sortable-hoc": "^2.0.0",
"react-window": "^1.8.2",
"resize-observer-polyfill": "^1.5.1",
"scroll-into-view-if-needed": "^2.2.24",
"utility-types": "^3.10.0"
},
"peerDependencies": {
"react": ">=16.0.0",
"react-dom": ">=16.0.0"
}
},
"node_modules/@douyinfe/semi-ui/node_modules/react-resizable": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.11.1.tgz",
"integrity": "sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q==",
"dependencies": {
"prop-types": "15.x",
"react-draggable": "^4.0.3"
},
"peerDependencies": {
"react": "0.14.x || 15.x || 16.x || 17.x",
"react-dom": "0.14.x || 15.x || 16.x || 17.x"
}
},
"node_modules/@douyinfe/semi-ui/node_modules/scroll-into-view-if-needed": {
"version": "2.2.31",
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
"dependencies": {
"compute-scroll-into-view": "^1.0.20"
}
},
"node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@ -5196,6 +5351,11 @@
"resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
"integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
},
"node_modules/async-validator": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.2.tgz",
"integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@ -5576,6 +5736,11 @@
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
},
"node_modules/bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
"integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
},
"node_modules/bfj": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@ -5950,6 +6115,11 @@
"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
"integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
},
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/clean-css": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@ -6203,6 +6373,17 @@
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
},
"node_modules/copy-text-to-clipboard": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz",
"integrity": "sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ==",
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/core-js": {
"version": "3.30.2",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
@ -6702,6 +6883,29 @@
"node": ">=10"
}
},
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/date-fns-tz": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
"integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
"peerDependencies": {
"date-fns": ">=2.0.0"
}
},
"node_modules/dayjs": {
"version": "1.11.7",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
@ -9392,6 +9596,14 @@
"node": ">= 0.4"
}
},
"node_modules/invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/ipaddr.js": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@ -12235,6 +12447,11 @@
"node": ">= 4.0.0"
}
},
"node_modules/memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
},
"node_modules/merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@ -14894,6 +15111,21 @@
}
}
},
"node_modules/react-sortable-hoc": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz",
"integrity": "sha512-JZUw7hBsAHXK7PTyErJyI7SopSBFRcFHDjWW5SWjcugY0i6iH7f+eJkY8cJmGMlZ1C9xz1J3Vjz0plFpavVeRg==",
"dependencies": {
"@babel/runtime": "^7.2.0",
"invariant": "^2.2.4",
"prop-types": "^15.5.7"
},
"peerDependencies": {
"prop-types": "^15.5.7",
"react": "^16.3.0 || ^17.0.0",
"react-dom": "^16.3.0 || ^17.0.0"
}
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@ -14909,6 +15141,22 @@
"react-dom": ">=16.6.0"
}
},
"node_modules/react-window": {
"version": "1.8.9",
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.9.tgz",
"integrity": "sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==",
"dependencies": {
"@babel/runtime": "^7.0.0",
"memoize-one": ">=3.1.1 <6"
},
"engines": {
"node": ">8.0.0"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -16889,6 +17137,14 @@
"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
"integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
},
"node_modules/utility-types": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
"integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==",
"engines": {
"node": ">= 4"
}
},
"node_modules/utils-merge": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

1
package.json
View File

@ -5,6 +5,7 @@
"dependencies": {
"@arco-design/web-react": "^2.48.2",
"@codemirror/lang-sql": "^6.5.0",
"@douyinfe/semi-ui": "^2.36.0",
"@lezer/highlight": "^1.1.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",

2
src/components/control_panel.jsx
View File

@ -160,7 +160,7 @@ export default function ControlPanel() {
title="Add"
onClick={(e) => invert(e, Tool.ADD)}
>
<i class="fa-solid fa-plus"></i> <IconCaretDown />
<i className="fa-solid fa-plus"></i> <IconCaretDown />
</button>
<ul
className={`${

8
src/components/draw_area.jsx
View File

@ -124,7 +124,7 @@ export default function Canvas(props) {
const canvasRect = canvas.current.getBoundingClientRect();
const x = offset.x - canvasRect.left - 100 * 0.5;
const y = offset.y - canvasRect.top - 100 * 0.5;
const d = {
const newRectangle = {
id: props.rectangles.length + 1,
x,
y,
@ -132,11 +132,11 @@ export default function Canvas(props) {
height: 100,
label: `rect ${props.rectangles.length + 1}`,
};
props.setRectangles([...props.rectangles, d]);
props.setRectangles([...props.rectangles, newRectangle]);
props.setCode((prev) =>
prev === ""
? `CREATE TABLE \`${d.label}\`;`
: `${prev}\n\nCREATE TABLE \`${d.label}\`;`
? `CREATE TABLE \`${newRectangle.label}\`;`
: `${prev}\n\nCREATE TABLE \`${newRectangle.label}\`;`
);
},
collect: (monitor) => ({

8
src/components/editor_panel.jsx
View File

@ -54,13 +54,13 @@ export default function EditorPanel(props) {
y: 0,
width: 240,
height: 100,
label: `rect ${props.rectangles.length + 1}`,
name: `Table ${props.rectangles.length + 1}`,
};
props.setRectangles([...props.rectangles, newRectangle]);
props.setCode((prev) =>
prev === ""
? `CREATE TABLE \`${newRectangle.label}\`;`
: `${prev}\n\nCREATE TABLE \`${newRectangle.label}\`;`
? `CREATE TABLE \`${newRectangle.name}\`;`
: `${prev}\n\nCREATE TABLE \`${newRectangle.name}\`;`
);
}}
>
@ -97,7 +97,7 @@ export default function EditorPanel(props) {
y: 0,
width: 240,
height: 100,
label: `rect ${props.rectangles.length + 1}`,
name: `rect ${props.rectangles.length + 1}`,
};
props.setRectangles([...props.rectangles, newRectangle]);
});

94
src/components/rect.jsx
View File

@ -5,13 +5,45 @@ import {
IconDelete,
IconPlus,
IconMinus,
} from "@arco-design/web-react/icon";
} from "@douyinfe/semi-icons";
import { Modal, Form, Checkbox, Row, Col } from "@douyinfe/semi-ui";
const Rect = (props) => {
const [node, setNode] = useState(Node.NONE);
const [isHovered, setIsHovered] = useState(false);
const [hoveredField, setHoveredField] = useState(-1);
const [name, setName] = useState("New table");
const [name, setName] = useState("New Table");
const [visible, setVisible] = useState(false);
const handleOk = () => {
setVisible(false);
};
const sqlDataTypes = [
"INT",
"SMALLINT",
"BIGINT",
"DECIMAL",
"NUMERIC",
"FLOAT",
"REAL",
"DOUBLE PRECISION",
"CHAR",
"VARCHAR",
"TEXT",
"DATE",
"TIME",
"TIMESTAMP",
"INTERVAL",
"BOOLEAN",
"BINARY",
"VARBINARY",
"BLOB",
"CLOB",
"UUID",
"XML",
"JSON",
];
const [fields, setFields] = useState([
{
@ -83,18 +115,7 @@ const Rect = (props) => {
<button
className="btn bg-green-600 text-white text-xs py-1 px-2 me-2 opacity-80"
onClick={(e) => {
setFields([
...fields,
{
name: "age",
type: "numeric",
default: "n/a",
primary: false,
unique: false,
notNull: true,
increment: false,
},
]);
setVisible(true);
}}
>
<IconPlus />
@ -108,6 +129,7 @@ const Rect = (props) => {
{fields.map((e, i) => {
return (
<div
key={i}
className={`${
i === fields.length - 1 ? "" : "border-b-2 border-gray-400"
} h-[36px] p-2 flex justify-between`}
@ -221,6 +243,50 @@ const Rect = (props) => {
}}
style={{ fill: node === Node.BOTTOM ? "green" : "black" }}
/>
<Modal
title="Add new field"
visible={visible}
onOk={handleOk}
afterClose={handleOk}
onCancel={handleOk}
centered
closeOnEsc={true}
okText="Add"
cancelText="Cancel"
>
<Form labelPosition="left" labelAlign="right">
<Row>
<Col span={11}>
<Form.Input field="name" label="Name" trigger="blur" />
</Col>
<Col span={2}></Col>
<Col span={11}>
<Form.Input field="default" label="Default" trigger="blur" />
</Col>
</Row>
<Row>
<Col span={24}>
<Form.Select
field="type"
label="Type"
className="w-full"
optionList={sqlDataTypes.map((value, index) => {
return {
label: value,
value: index,
};
})}
></Form.Select>
<div className="flex justify-around mt-2">
<Checkbox value="A">Primary</Checkbox>
<Checkbox value="B">Unique</Checkbox>
<Checkbox value="C">Not null</Checkbox>
<Checkbox value="D">Increment</Checkbox>
</div>
</Col>
</Row>
</Form>
</Modal>
</g>
);
};