81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
/* global window */
|
|
import jQuery from 'jquery';
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { Provider } from 'react-redux';
|
|
import { provideInjector } from 'lib/Injector';
|
|
import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
|
|
|
|
const sectionConfigKey = 'TestReactFormBuilder';
|
|
const InjectedFormBuilderLoader = provideInjector(FormBuilderLoader);
|
|
|
|
jQuery.entwine('ss', ($) => {
|
|
/**
|
|
* Kick off Test React FormBuilder admin section.
|
|
* Uses React to rebuild the list of fields from FrameworkTest's TestPages.
|
|
*/
|
|
$('.js-injector-boot .TestReactFormBuilder').entwine({
|
|
onmatch() {
|
|
this._renderForm();
|
|
},
|
|
|
|
onunmatch() {
|
|
this._clearForm();
|
|
},
|
|
|
|
container() {
|
|
let container = this.find('.frameworktest-react-container');
|
|
|
|
if (!container.length) {
|
|
container = $('<div class="frameworktest-react-container panel panel--padded" style="overflow-y: auto; max-height: 100%;"></div>');
|
|
this.append(container);
|
|
}
|
|
|
|
container.siblings('form').hide();
|
|
|
|
return container[0];
|
|
},
|
|
|
|
_renderForm() {
|
|
const store = window.ss.store;
|
|
const sectionConfig = store.getState()
|
|
.config.sections.find((section) => section.name === sectionConfigKey);
|
|
const schemaUrl = sectionConfig.form.TestEditForm.schemaUrl;
|
|
|
|
ReactDOM.render(
|
|
<Provider store={store}>
|
|
<InjectedFormBuilderLoader
|
|
schemaUrl={schemaUrl}
|
|
handleSubmit={(...args) => this._handleSubmit(...args)}
|
|
identifier="FrameworkTest.ReactSection"
|
|
/>
|
|
</Provider>,
|
|
this.container()
|
|
);
|
|
},
|
|
|
|
_clearForm() {
|
|
ReactDOM.unmountComponentAtNode(this.container());
|
|
// this.empty();
|
|
},
|
|
|
|
_handleSubmit(event, fieldValues, submitFn) {
|
|
event.preventDefault();
|
|
|
|
// eslint-disable-next-line no-console
|
|
console.log(fieldValues);
|
|
|
|
return submitFn();
|
|
},
|
|
|
|
});
|
|
|
|
$('.TestReactFormBuilder .nav-link').entwine({
|
|
onclick(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();
|
|
},
|
|
});
|
|
});
|