silverstripe-frameworktest/client/src/legacy/TestReactFormBuilder.js

68 lines
1.8 KiB
JavaScript

import jQuery from 'jQuery';
import i18n from 'i18n';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import FormBuilder from 'components/FormBuilder/FormBuilder';
jQuery.entwine('ss', ($) => {
/**
* Kick off Test React FormBuilder admin section.
* Uses React to rebuild the list of fields from FrameworkTest's TestPages.
*/
$('.cms-content.TestReactFormBuilder').entwine({
onmatch() {
setTimeout(() => this._renderForm(), 100);
},
onunmatch() {
this._clearForm();
},
open() {
this._renderForm();
},
close() {
this._clearForm();
},
_renderForm() {
const store = window.ss.store;
const sectionConfig = store.getState()
.config.sections['TestReactFormBuilder'];
const schemaUrl = sectionConfig.form.TestEditForm.schemaUrl;
ReactDOM.render(
<Provider store={store}>
<FormBuilder
schemaUrl={schemaUrl}
handleSubmit={(...args) => this._handleSubmit(...args)}
/>
</Provider>,
this[0]
);
},
_clearForm() {
ReactDOM.unmountComponentAtNode(this[0]);
// this.empty();
},
_handleSubmit(event, fieldValues, submitFn) {
event.preventDefault();
return submitFn();
},
});
$('.cms-content.TestReactFormBuilder .nav-link').entwine({
onclick: function (e) {
// this is required because the React version of e.preventDefault() doesn't work
// this is to stop React Tabs from navigating the page
e.preventDefault();
}
});
});