From 510f9f398df3373401a422e9cf3e8f8bc86be05f Mon Sep 17 00:00:00 2001 From: Nicolas Perriault Date: Tue, 4 Apr 2017 10:32:20 +0200 Subject: [PATCH 1/4] Add sharing capability to the Playground. --- playground/app.js | 52 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 8 deletions(-) diff --git a/playground/app.js b/playground/app.js index 1db3ec6c6e..ce92ba150f 100644 --- a/playground/app.js +++ b/playground/app.js @@ -195,7 +195,6 @@ class Editor extends Component { try { this.props.onChange(fromJson(this.state.code)); } catch (err) { - console.error(err); this.setState({ valid: false, code }); } }); @@ -288,11 +287,21 @@ class App extends Component { editor: "default", theme: "default", liveValidate: true, + shareURL: null, }; } componentDidMount() { - this.load(samples.Simple); + const hash = document.location.hash.match(/#(.*)/); + if (hash && typeof hash[1] === "string" && hash[1].length > 0) { + try { + this.load(JSON.parse(atob(hash[1]))); + } catch (err) { + alert("Unable to load form setup data."); + } + } else { + this.load(samples.Simple); + } } shouldComponentUpdate(nextProps, nextState) { @@ -307,11 +316,11 @@ class App extends Component { this.setState({ ...data, form: true, ArrayFieldTemplate })); }; - onSchemaEdited = schema => this.setState({ schema }); + onSchemaEdited = schema => this.setState({ schema, shareURL: null }); - onUISchemaEdited = uiSchema => this.setState({ uiSchema }); + onUISchemaEdited = uiSchema => this.setState({ uiSchema, shareURL: null }); - onFormDataEdited = formData => this.setState({ formData }); + onFormDataEdited = formData => this.setState({ formData, shareURL: null }); onThemeSelected = (theme, { stylesheet, editor }) => { this.setState({ theme, editor: editor ? editor : "default" }); @@ -323,7 +332,18 @@ class App extends Component { setLiveValidate = ({ formData }) => this.setState({ liveValidate: formData }); - onFormDataChange = ({ formData }) => this.setState({ formData }); + onFormDataChange = ({ formData }) => + this.setState({ formData, shareURL: null }); + + onShare = () => { + const { formData, schema, uiSchema } = this.state; + try { + const hash = btoa(JSON.stringify({ formData, schema, uiSchema })); + this.setState({ shareURL: "#" + hash }); + } catch (err) { + this.setState({ shareURL: null }); + } + }; render() { const { @@ -401,8 +421,24 @@ class App extends Component { onBlur={(id, value) => console.log(`Touched ${id} with value ${value}`)} transformErrors={transformErrors} - onError={log("errors")} - />} + onError={log("errors")}> + + {" "} + + {" "} + {this.state.shareURL && + event.preventDefault()} + title="Right-click, copy link"> + Share link + } + } ); From 362eca47fa269158aff9c51fffe4ea10703b1cb8 Mon Sep 17 00:00:00 2001 From: Nicolas Perriault Date: Tue, 4 Apr 2017 14:48:11 +0200 Subject: [PATCH 2/4] Updated issue temlate. --- ISSUE_TEMPLATE.md | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md index 8252c8ee52..91aa129f11 100644 --- a/ISSUE_TEMPLATE.md +++ b/ISSUE_TEMPLATE.md @@ -13,7 +13,7 @@ 2. [Second Step] 3. [and so on...] -Ideally, I'm providing a [sample JSFiddle](https://jsfiddle.net/n1k0/f2y3fq7L/6/) demonstrating the issue. +Ideally, I'm providing a [sample JSFiddle](https://jsfiddle.net/n1k0/f2y3fq7L/6/) or a [shared playground link](https://mozilla-services.github.io/react-jsonschema-form/) demonstrating the issue. #### Expected behavior diff --git a/README.md b/README.md index e1c0b8e898..2ad800b250 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i - [Advanced customization](#advanced-customization) - [Field template](#field-template) - [Array Field Template](#array-field-template) - - [Error list Template](#error-list-template) + - [Error List template](#error-list-template) - [Custom widgets and fields](#custom-widgets-and-fields) - [Custom widget components](#custom-widget-components) - [Custom component registration](#custom-component-registration) From d0b187390d9c905eeb3cda8203f2fd5f79bf0a0e Mon Sep 17 00:00:00 2001 From: Nicolas Perriault Date: Tue, 4 Apr 2017 16:49:20 +0200 Subject: [PATCH 3/4] @revolunet review. --- playground/app.js | 67 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 50 insertions(+), 17 deletions(-) diff --git a/playground/app.js b/playground/app.js index ce92ba150f..31efda1d06 100644 --- a/playground/app.js +++ b/playground/app.js @@ -273,6 +273,42 @@ function ThemeSelector({ theme, select }) { ); } +class CopyLink extends Component { + onCopyClick = event => { + this.input.select(); + document.execCommand("copy"); + }; + + render() { + const { shareURL, onShare } = this.props; + if (!shareURL) { + return ( + + ); + } + return ( +
+ this.input = input} + className="form-control" + defaultValue={shareURL} + /> + + + +
+ ); + } +} + class App extends Component { constructor(props) { super(props); @@ -339,7 +375,7 @@ class App extends Component { const { formData, schema, uiSchema } = this.state; try { const hash = btoa(JSON.stringify({ formData, schema, uiSchema })); - this.setState({ shareURL: "#" + hash }); + this.setState({ shareURL: `${document.location.origin}/#${hash}` }); } catch (err) { this.setState({ shareURL: null }); } @@ -422,22 +458,19 @@ class App extends Component { console.log(`Touched ${id} with value ${value}`)} transformErrors={transformErrors} onError={log("errors")}> - - {" "} - - {" "} - {this.state.shareURL && - event.preventDefault()} - title="Right-click, copy link"> - Share link - } +
+
+ +
+
+ +
+
} From 9dfd0e74a961dc7a0b47317a907d8aebfa81dd08 Mon Sep 17 00:00:00 2001 From: Nicolas Perriault Date: Tue, 4 Apr 2017 16:59:09 +0200 Subject: [PATCH 4/4] Fix missing pathname in share URL. --- playground/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/playground/app.js b/playground/app.js index 31efda1d06..49e5cd3a9f 100644 --- a/playground/app.js +++ b/playground/app.js @@ -373,9 +373,10 @@ class App extends Component { onShare = () => { const { formData, schema, uiSchema } = this.state; + const { location: { origin, pathname } } = document; try { const hash = btoa(JSON.stringify({ formData, schema, uiSchema })); - this.setState({ shareURL: `${document.location.origin}/#${hash}` }); + this.setState({ shareURL: `${origin}${pathname}#${hash}` }); } catch (err) { this.setState({ shareURL: null }); }