From ba6d9a3cec6a46ab0e6265afc9ed64ddc0a2a89c Mon Sep 17 00:00:00 2001 From: Dorian Goepp <dorian.goepp@gmail.com> Date: Thu, 2 May 2019 11:41:13 +0200 Subject: [PATCH] expermienting with auto-generated configuration form --- package.json | 1 + src/VideoStream/index.js | 21 +++++++++++++++++++-- src/demo-1-config.js | 3 ++- yarn.lock | 22 +++++++++++++++++++--- 4 files changed, 41 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 2508112..e5a86e7 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "prop-types": "^15.7.2", "react": "^16.7.0", "react-dom": "^16.7.0", + "react-jsonschema-form": "^1.5.0", "react-numeric-input": "^2.2.3", "react-scripts": "^2.1.8", "react-sizeme": "^2.5.2", diff --git a/src/VideoStream/index.js b/src/VideoStream/index.js index 905a480..28cb96d 100644 --- a/src/VideoStream/index.js +++ b/src/VideoStream/index.js @@ -1,6 +1,19 @@ import React, {Component} from 'react' +import Form from 'react-jsonschema-form' import './VideoStream.css' +const schema = { + title: "Video streamer", + type: "object", + required: ["host", "topic"], + properties: { + host: {type: "string", title: "Host (IP or name)", default:"localhost:8081"}, + topic: {type: "string", title: "ROS topic (absolute name)", default: "/pepper/image_raw"} + } +}; + +const log = (type) => console.log.bind(console, type); + class VideoStream extends Component { constructor(props) { super(props) @@ -30,7 +43,7 @@ class VideoStream extends Component { if (config && 'displayMode' in config) { if (config.displayMode === "settings") { return <div> - <form className="pure-form pure-form-stacked" onSubmit={(event)=>event.preventDefault()}> + {/* <form className="pure-form pure-form-stacked" onSubmit={(event)=>event.preventDefault()}> <fieldset> <label>Nice modification option for the module</label> @@ -39,7 +52,11 @@ class VideoStream extends Component { value={this.state.url} onChange={this.handleSettingsChange.bind(this)}/> </fieldset> </form> - <p>Changes are automatically saved!</p> + <p>Changes are automatically saved!</p> */} + <Form schema={schema} + onChange={log("changed")} + onSubmit={({formData}, e) => log(data.formData)} + onError={log("errors")} /> </div>; } if (config.displayMode === "readme") { diff --git a/src/demo-1-config.js b/src/demo-1-config.js index 870b7ff..7116aa9 100644 --- a/src/demo-1-config.js +++ b/src/demo-1-config.js @@ -95,7 +95,8 @@ export const flexlayout_json = { "type": "tab", "component": "video", "config": { - "hasReadme": true + "hasReadme": true, + "configurable": true } } ] diff --git a/yarn.lock b/yarn.lock index 2eeb885..4c7ad3c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1259,7 +1259,7 @@ ajv-keywords@^3.1.0: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d" integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw== -ajv@^6.1.0, ajv@^6.5.3, ajv@^6.5.5, ajv@^6.9.1: +ajv@^6.1.0, ajv@^6.5.3, ajv@^6.5.5, ajv@^6.7.0, ajv@^6.9.1: version "6.10.0" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1" integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg== @@ -2637,7 +2637,7 @@ core-js@3.0.0: resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.0.0.tgz#a8dbfa978d29bfc263bfb66c556d0ca924c28957" integrity sha512-WBmxlgH2122EzEJ6GH8o9L/FeoUKxxxZ6q6VUxoTlsE4EvbTWKJb447eyVxTEuq0LpXjlq/kCB2qgBvsYRkLvQ== -core-js@^2.4.0, core-js@^2.5.0: +core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7: version "2.6.5" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895" integrity sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A== @@ -6353,6 +6353,11 @@ lodash.throttle@^4.1.1: resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= +lodash.topath@^4.5.2: + version "4.5.2" + resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009" + integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak= + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" @@ -8210,7 +8215,7 @@ prompts@^0.1.9: kleur "^2.0.1" sisteransi "^0.1.1" -prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8444,6 +8449,17 @@ react-is@^16.7.0, react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2" integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA== +react-jsonschema-form@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/react-jsonschema-form/-/react-jsonschema-form-1.5.0.tgz#e088c993de25dbf5f87c2067d67b278939e1acb6" + integrity sha512-SsldN37+5dDLRAGmwNO6cKb9AH2zhgkhIST9+UVaBqQ/KONl4jj1KFerXiEySGGDFBe81CjMGapZV5Ydrdp4pg== + dependencies: + ajv "^6.7.0" + babel-runtime "^6.26.0" + core-js "^2.5.7" + lodash.topath "^4.5.2" + prop-types "^15.5.8" + react-lifecycles-compat@^3.0.2: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" -- GitLab