From eeec8998e0bb1b0e46ef39c816e6dfc8c5f04d3c Mon Sep 17 00:00:00 2001 From: 1ilit Date: Tue, 19 Sep 2023 15:47:24 +0300 Subject: [PATCH] add modal for new fields --- package-lock.json | 256 +++++++++++++++++++++++++++++++ package.json | 1 + src/components/control_panel.jsx | 2 +- src/components/draw_area.jsx | 8 +- src/components/editor_panel.jsx | 8 +- src/components/rect.jsx | 94 ++++++++++-- 6 files changed, 346 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 49953c0..09c6eb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 19b4fab..74374fd 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx index 7f29496..40854d6 100644 --- a/src/components/control_panel.jsx +++ b/src/components/control_panel.jsx @@ -160,7 +160,7 @@ export default function ControlPanel() { title="Add" onClick={(e) => invert(e, Tool.ADD)} > - +
    prev === "" - ? `CREATE TABLE \`${d.label}\`;` - : `${prev}\n\nCREATE TABLE \`${d.label}\`;` + ? `CREATE TABLE \`${newRectangle.label}\`;` + : `${prev}\n\nCREATE TABLE \`${newRectangle.label}\`;` ); }, collect: (monitor) => ({ diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx index 52a87b2..7d2aea2 100644 --- a/src/components/editor_panel.jsx +++ b/src/components/editor_panel.jsx @@ -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]); }); diff --git a/src/components/rect.jsx b/src/components/rect.jsx index a3e904c..cf6e757 100644 --- a/src/components/rect.jsx +++ b/src/components/rect.jsx @@ -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) => {