From a13f85c18f0145749c90196935fae3b0ae41b6cc Mon Sep 17 00:00:00 2001 From: Martin Karkowski Date: Wed, 2 Sep 2020 07:49:53 +0200 Subject: [PATCH] adding new files --- package-lock.json | 151 +++++++++++++++++++++++++++++++++ package.json | 2 + pages/test/test.tsx | 91 ++++++++++++++++++-- pages/ui/forms/dynamicForm.tsx | 23 +++++ pages/ui/layout/layout.tsx | 51 +++++++++++ 5 files changed, 311 insertions(+), 7 deletions(-) create mode 100644 pages/ui/forms/dynamicForm.tsx create mode 100644 pages/ui/layout/layout.tsx diff --git a/package-lock.json b/package-lock.json index 849d783..78dcd3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1542,6 +1542,32 @@ "lodash-es": "^4.17.15" } }, + "@rjsf/bootstrap-4": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@rjsf/bootstrap-4/-/bootstrap-4-2.3.0.tgz", + "integrity": "sha512-SuuLj/GokP5v2VK8o07d2R/qO+rv+XpRLQYV39Bhh3XIkdhfirYU46JXBt0Kb0usyyvyvRSRTO7i+6Lggnz88w==", + "requires": { + "react-icons": "^3.10.0" + } + }, + "@rjsf/core": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-2.3.0.tgz", + "integrity": "sha512-OZKYHt9tjKhzOH4CvsPiCwepuIacqI++cNmnL2fsxh1IF+uEWGlo3NLDWhhSaBbOv9jps6a5YQcLbLtjNuSwug==", + "requires": { + "@babel/runtime-corejs2": "^7.8.7", + "@types/json-schema": "^7.0.4", + "ajv": "^6.7.0", + "core-js": "^2.5.7", + "json-schema-merge-allof": "^0.6.0", + "jsonpointer": "^4.0.1", + "lodash": "^4.17.15", + "prop-types": "^15.7.2", + "react-app-polyfill": "^1.0.4", + "react-is": "^16.9.0", + "shortid": "^2.2.14" + } + }, "@ts-morph/common": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.5.2.tgz", @@ -2907,6 +2933,27 @@ "arity-n": "^1.0.4" } }, + "compute-gcd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/compute-gcd/-/compute-gcd-1.2.0.tgz", + "integrity": "sha1-/B7eW2UAHpUCJlAvRlQ4Y+T+oQ4=", + "requires": { + "validate.io-array": "^1.0.3", + "validate.io-function": "^1.0.2", + "validate.io-integer-array": "^1.0.0" + } + }, + "compute-lcm": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/compute-lcm/-/compute-lcm-1.1.0.tgz", + "integrity": "sha1-q9ltBAtBsKFm+JlEtci3xRHiGtU=", + "requires": { + "compute-gcd": "^1.2.0", + "validate.io-array": "^1.0.3", + "validate.io-function": "^1.0.2", + "validate.io-integer-array": "^1.0.0" + } + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -5191,6 +5238,24 @@ "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==" }, + "json-schema-compare": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/json-schema-compare/-/json-schema-compare-0.2.2.tgz", + "integrity": "sha512-c4WYmDKyJXhs7WWvAWm3uIYnfyWFoIp+JEoX34rctVvEkMYCPGhXtvmFFXiffBbxfZsvQ0RNnV5H7GvDF5HCqQ==", + "requires": { + "lodash": "^4.17.4" + } + }, + "json-schema-merge-allof": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/json-schema-merge-allof/-/json-schema-merge-allof-0.6.0.tgz", + "integrity": "sha512-LEw4VMQVRceOPLuGRWcxW5orTTiR9ZAtqTAe4rQUjNADTeR81bezBVFa0MqIwp0YmHIM1KkhSjZM7o+IQhaPbQ==", + "requires": { + "compute-lcm": "^1.1.0", + "json-schema-compare": "^0.2.2", + "lodash": "^4.17.4" + } + }, "json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -5226,6 +5291,11 @@ "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=" }, + "jsonpointer": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.1.0.tgz", + "integrity": "sha512-CXcRvMyTlnR53xMcKnuMzfCA5i/nfblTnnr74CZb6C4vG39eu6w51t7nKmU5MfLfbTgGItliNyjO/ciNPDqClg==" + }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -5713,6 +5783,11 @@ "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==", "optional": true }, + "nanoid": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz", + "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==" + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -6698,6 +6773,34 @@ "prop-types": "^15.6.2" } }, + "react-app-polyfill": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz", + "integrity": "sha512-OfBnObtnGgLGfweORmdZbyEz+3dgVePQBb3zipiaDsMHV1NpWm0rDFYIVXFV/AK+x4VIIfWHhrdMIeoTLyRr2g==", + "requires": { + "core-js": "^3.5.0", + "object-assign": "^4.1.1", + "promise": "^8.0.3", + "raf": "^3.4.1", + "regenerator-runtime": "^0.13.3", + "whatwg-fetch": "^3.0.0" + }, + "dependencies": { + "core-js": { + "version": "3.6.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz", + "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==" + }, + "promise": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz", + "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==", + "requires": { + "asap": "~2.0.6" + } + } + } + }, "react-bootstrap": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.3.0.tgz", @@ -6752,6 +6855,14 @@ "scheduler": "^0.19.1" } }, + "react-icons": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.11.0.tgz", + "integrity": "sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==", + "requires": { + "camelcase": "^5.0.0" + } + }, "react-immutable-proptypes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz", @@ -7404,6 +7515,14 @@ "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz", "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==" }, + "shortid": { + "version": "2.2.15", + "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.15.tgz", + "integrity": "sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==", + "requires": { + "nanoid": "^2.1.0" + } + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", @@ -8564,6 +8683,38 @@ "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.0.tgz", "integrity": "sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==" }, + "validate.io-array": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz", + "integrity": "sha1-W1osr9j4uFq7L4hroVPy2Tond00=" + }, + "validate.io-function": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/validate.io-function/-/validate.io-function-1.0.2.tgz", + "integrity": "sha1-NDoZgC7TsZaCaceA5VjpNBHAutc=" + }, + "validate.io-integer": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/validate.io-integer/-/validate.io-integer-1.0.5.tgz", + "integrity": "sha1-FoSWSAuVviJH7EQ/IjPeT4mHgGg=", + "requires": { + "validate.io-number": "^1.0.3" + } + }, + "validate.io-integer-array": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/validate.io-integer-array/-/validate.io-integer-array-1.0.0.tgz", + "integrity": "sha1-LKveAzKTpry+Bj/q/pHq9GsToIk=", + "requires": { + "validate.io-array": "^1.0.3", + "validate.io-integer": "^1.0.4" + } + }, + "validate.io-number": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/validate.io-number/-/validate.io-number-1.0.3.tgz", + "integrity": "sha1-9j/+2iSL8opnqNSODjtGGhZluvg=" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index dbcaf05..6d413bf 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,8 @@ }, "homepage": "https://github.com/anti-held-333/nope-backend#readme", "dependencies": { + "@rjsf/bootstrap-4": "^2.3.0", + "@rjsf/core": "^2.3.0", "arangojs": "^7.0.1", "bootstrap": "^4.5.2", "cors": "^2.8.5", diff --git a/pages/test/test.tsx b/pages/test/test.tsx index f9099e2..18ea5d2 100644 --- a/pages/test/test.tsx +++ b/pages/test/test.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; import * as vis from '../../resources/visjs/vis'; +import LocalNavbar from '../ui/navbar'; +import { Container, Row, Col, InputGroup, FormControl, ListGroup } from 'react-bootstrap'; export interface TestComponentProps { @@ -9,6 +11,19 @@ export interface TestComponentState { } +const mainStyle = { + minHeight: '90vh', +} + +const sidebarStyle = { + padding: '10px', + background: "primary" +} + +const contentStyle = { + padding: '10px', +} + class TestComponent extends React.Component { ref: React.RefObject; @@ -17,7 +32,7 @@ class TestComponent extends React.Component console.log(e)) + + const _this = this; + function handleResize() { + _this.network.setSize(undefined,undefined); + _this.network.redraw(); + } + + // handleResize(); + + this.handleResize = handleResize; + window.addEventListener('resize', this.handleResize) + } + handleResize: any + + componentWillUnmount(){ + window.removeEventListener('resize', this.handleResize) + } + + network: any; + constructor(props) { super(props); - this.ref = React.createRef(); + this.ref = React.createRef(); } render() { - return (<> -
- ); + return ( + <> + + + + + {/* A Search Field. */} + + + Search + + + +
+

Group1

+
+ + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +
+

Group 2

+
+ + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + + + {/* style={{height: '100%'}} */} +
+ + + + ) } } diff --git a/pages/ui/forms/dynamicForm.tsx b/pages/ui/forms/dynamicForm.tsx new file mode 100644 index 0000000..35e71ae --- /dev/null +++ b/pages/ui/forms/dynamicForm.tsx @@ -0,0 +1,23 @@ +// https://react-jsonschema-form.readthedocs.io/en/latest/ + +import Form from "@rjsf/bootstrap-4"; + +const schema = { + "type": "object", + "properties": { + "hello": { + "type": "string" + } + }, + "required": [ + "hello" + ] +}; + +const formData = "a"; +const log = (type) => console.log.bind(console, type); + +export default () => ( +
+
+); diff --git a/pages/ui/layout/layout.tsx b/pages/ui/layout/layout.tsx new file mode 100644 index 0000000..9aed087 --- /dev/null +++ b/pages/ui/layout/layout.tsx @@ -0,0 +1,51 @@ +/** + * @author Martin Karkowski + * @email m.karkowski@zema.de + * @create date 2019-02-20 09:19:06 + * @modify date 2020-07-22 22:06:39 + * @desc [description] + */ + +import React from 'react'; +import LocalNavbar from '../navbar'; +import { ListGroup, Container, Row, Col, InputGroup, FormControl } from 'react-bootstrap'; + +const mainStyle = { + minHeight: '90vh', +} + +const sidebarStyle = { + padding: '10px', + background: "primary" +} + +const contentStyle = { + padding: '10px', +} + +export default () => ( + <> + + + + + {/* A Search Field. */} + + + Search + + + + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + + Content + + + +);