mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-06-29 07:59:31 +02:00
Use redux-form instead of custom actions/reducers (fixes #5524)
- Removed custom form reducers in favour of redux-form (updateField(), addForm(), etc) - Storing 'state' in schema reducer to avoid a separate forms reducer tree (no longer needed for other use cases). This means 'state' is only the "initial state", any form edits will be handled by redux-form internally in the 'reduxForm' reducer namespace - Removed componentWillUnmount() from <Form> since there's no more reducer state to clean up (removed formReducer.js), and redux-form handles that internally - Removed isFetching state from <FormBuilder> since there's now a props.submitting coming from redux-form - Improved passing of "clicked button" (submittingAction), using component state rather than reducer and passing it into action handlers (no need for components to inspect it any other way) - Hacky duplication of this.submittingAction and this.state.submittingAction to avoid re-render of <FormBuilder> *during* a submission (see https://github.com/erikras/redux-form/issues/1944) - Inlined handleSubmit() XHR (rather than using a redux action). There's other ways for form consumers to listen to form evens (e.g. onSubmitSuccess passed through <FormBuilder> into reduxForm()). - Adapting checkbox/radio fields to redux-forms Need to send onChange event with values rather than the original event, see http://redux-form.com/6.1.1/docs/api/Field.md/#-input-onchange-eventorvalue-function- - Using reduxForm() within render() causes DOM to get thrown away, and has weird side effects like https://github.com/erikras/redux-form/issues/1944. See https://github.com/erikras/redux-form/issues/603#issuecomment-176397728 - Refactored <FormBuilderLoader> as a separate container component which connects to redux and redux-form. This keeps the <FormBuilder> component dependency free and easy to test. It'll also be an advantage if we switch to a GraphQL backed component, in which case the async loading routines will look very different from the current <FormBuilderLoader> implementation - Refactoring out the redux-form dependency from FormBuilder to make it more testable (through baseFormComponent and baseFieldComponent) - Passing through 'form' to allow custom identifiers (which is important because currently the schema "id" contains the record identifier, making the form identifier non-deterministic - which means you can't use it with the redux-form selector API)
This commit is contained in:
Ingo Schommer
parent
5f81122ad3
commit
5b31a40593
|
|
@ -1,16 +1,16 @@
|
|||
import BootRoutes from './BootRoutes';
|
||||
import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
|
||||
import thunkMiddleware from 'redux-thunk';
|
||||
import { reducer as ReduxFormReducer } from 'redux-form';
|
||||
import { routerReducer } from 'react-router-redux';
|
||||
import Config from 'lib/Config';
|
||||
import reducerRegister from 'lib/ReducerRegister';
|
||||
import * as configActions from 'state/config/ConfigActions';
|
||||
import ConfigReducer from 'state/config/ConfigReducer';
|
||||
import FormReducer from 'state/form/FormReducer';
|
||||
import SchemaReducer from 'state/schema/SchemaReducer';
|
||||
import RecordsReducer from 'state/records/RecordsReducer';
|
||||
import CampaignReducer from 'state/campaign/CampaignReducer';
|
||||
import BreadcrumbsReducer from 'state/breadcrumbs/BreadcrumbsReducer';
|
||||
import { routerReducer } from 'react-router-redux';
|
||||
import bootInjector from 'boot/BootInjector';
|
||||
|
||||
// Sections
|
||||
|
|
@ -19,7 +19,7 @@ import CampaignAdmin from 'containers/CampaignAdmin/controller';
|
|||
|
||||
function appBoot() {
|
||||
reducerRegister.add('config', ConfigReducer);
|
||||
reducerRegister.add('form', FormReducer);
|
||||
reducerRegister.add('form', ReduxFormReducer);
|
||||
reducerRegister.add('schemas', SchemaReducer);
|
||||
reducerRegister.add('records', RecordsReducer);
|
||||
reducerRegister.add('campaign', CampaignReducer);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ require('expose?Form!components/Form/Form');
|
|||
require('expose?FormConstants!components/Form/FormConstants');
|
||||
require('expose?FormAction!components/FormAction/FormAction');
|
||||
require('expose?FormBuilder!components/FormBuilder/FormBuilder');
|
||||
require('expose?FormBuilderLoader!containers/FormBuilderLoader/FormBuilderLoader');
|
||||
require('expose?FormBuilderModal!components/FormBuilderModal/FormBuilderModal');
|
||||
require('expose?GridField!components/GridField/GridField');
|
||||
require('expose?GridFieldCell!components/GridField/GridFieldCell');
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ require('expose?Tether!tether');
|
|||
require('expose?ReactDom!react-dom');
|
||||
require('expose?Redux!redux');
|
||||
require('expose?ReactRedux!react-redux');
|
||||
require('expose?ReduxForm!redux-form');
|
||||
require('expose?ReduxThunk!redux-thunk');
|
||||
require('expose?ReactRouter!react-router');
|
||||
require('expose?ReactRouterRedux!react-router-redux');
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ class CheckboxSetField extends SilverStripeComponent {
|
|||
})
|
||||
.map((item) => `${item.value}`);
|
||||
|
||||
this.props.onChange(event, { id: this.props.id, value: newValue });
|
||||
this.props.onChange(newValue);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -90,8 +90,7 @@ describe('CheckboxSetField', () => {
|
|||
checkboxSetField.handleChange(event, { id: 'checkbox-two', value: 1 });
|
||||
|
||||
expect(checkboxSetField.props.onChange).toBeCalledWith(
|
||||
event,
|
||||
{ id: 'checkbox', value: ['one', 'two', 'four'] }
|
||||
['one', 'two', 'four']
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -101,8 +100,7 @@ describe('CheckboxSetField', () => {
|
|||
checkboxSetField.handleChange(event, { id: 'checkbox-one', value: 0 });
|
||||
|
||||
expect(checkboxSetField.props.onChange).toBeCalledWith(
|
||||
event,
|
||||
{ id: 'checkbox', value: ['four'] }
|
||||
['four']
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,21 +8,15 @@ class Form extends SilverStripeComponent {
|
|||
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (typeof this.props.componentWillUnmount === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.componentWillUnmount(this.props.formId);
|
||||
}
|
||||
|
||||
render() {
|
||||
const defaultFormProps = {
|
||||
className: 'form',
|
||||
onSubmit: this.handleSubmit,
|
||||
};
|
||||
const formProps = Object.assign({}, defaultFormProps, this.props.attributes);
|
||||
const formProps = Object.assign(
|
||||
{},
|
||||
{
|
||||
className: 'form',
|
||||
onSubmit: this.handleSubmit,
|
||||
},
|
||||
this.props.attributes
|
||||
);
|
||||
const fields = this.props.mapFieldsToComponents(this.props.fields);
|
||||
const actions = this.props.mapActionsToComponents(this.props.actions);
|
||||
|
||||
|
|
@ -62,10 +56,7 @@ Form.propTypes = {
|
|||
id: React.PropTypes.string,
|
||||
method: React.PropTypes.string.isRequired,
|
||||
}),
|
||||
componentWillUnmount: React.PropTypes.func,
|
||||
data: React.PropTypes.array,
|
||||
fields: React.PropTypes.array.isRequired,
|
||||
formId: React.PropTypes.string.isRequired,
|
||||
handleSubmit: React.PropTypes.func,
|
||||
mapActionsToComponents: React.PropTypes.func.isRequired,
|
||||
mapFieldsToComponents: React.PropTypes.func.isRequired,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# Form Component
|
||||
|
||||
The FormComponent is used to render forms in SilverStripe. The only time you should need to use `FormComponent` directly is when you're composing custom layouts. Forms can be automatically generated from a schema using the `FormBuilder` component.
|
||||
|
||||
This component should be moved to Framework when dependency injection is implemented.
|
||||
The `Form` component is used to render forms in SilverStripe.
|
||||
The only time you should need to use `FormComponent` directly is when you're composing custom layouts.
|
||||
Forms can be automatically generated from a schema using the `FormBuilder` component.
|
||||
|
||||
## Properties
|
||||
|
||||
|
|
@ -19,7 +19,6 @@ attributes = {
|
|||
}
|
||||
```
|
||||
|
||||
* `componentWillUnmount` (func): Optional function which will be called in the component's 'native' `componentWillUnmount` method. This can be used to tidy up Redux state that's no longer required.
|
||||
* `fields` (required): A list of field objects to display in the form. These objects should be transformed to Components using the `this.props.mapFieldsToComponents` method.
|
||||
* `mapFieldsToComponents` (required): A function that maps each schema field (`this.props.fields`) to the component responsibe for render it.
|
||||
* `handleSubmit` (func): Called then the form is submitted.
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ class FormAction extends SilverStripeComponent {
|
|||
typeof this.props.attributes === 'undefined' ? {} : this.props.attributes,
|
||||
{
|
||||
id: this.props.id,
|
||||
name: this.props.name,
|
||||
className: this.getButtonClasses(),
|
||||
disabled: this.props.disabled,
|
||||
onClick: this.handleClick,
|
||||
|
|
|
|||
|
|
@ -1,197 +1,45 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import * as formActions from 'state/form/FormActions';
|
||||
import * as schemaActions from 'state/schema/SchemaActions';
|
||||
import React, { PropTypes } from 'react';
|
||||
import SilverStripeComponent from 'lib/SilverStripeComponent';
|
||||
import Form from 'components/Form/Form';
|
||||
import fetch from 'isomorphic-fetch';
|
||||
import backend from 'lib/Backend';
|
||||
import injector from 'lib/Injector';
|
||||
import merge from 'merge';
|
||||
|
||||
import es6promise from 'es6-promise';
|
||||
es6promise.polyfill();
|
||||
|
||||
export class FormBuilderComponent extends SilverStripeComponent {
|
||||
class FormBuilder extends SilverStripeComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.formSchemaPromise = null;
|
||||
this.state = { isFetching: false };
|
||||
|
||||
const schemaStructure = props.schema.schema;
|
||||
this.state = { submittingAction: null };
|
||||
this.submitApi = backend.createEndpointFetcher({
|
||||
url: schemaStructure.attributes.action,
|
||||
method: schemaStructure.attributes.method,
|
||||
});
|
||||
this.mapActionsToComponents = this.mapActionsToComponents.bind(this);
|
||||
this.mapFieldsToComponents = this.mapFieldsToComponents.bind(this);
|
||||
this.handleFieldUpdate = this.handleFieldUpdate.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.handleAction = this.handleAction.bind(this);
|
||||
this.removeForm = this.removeForm.bind(this);
|
||||
this.getFormId = this.getFormId.bind(this);
|
||||
this.getFormSchema = this.getFormSchema.bind(this);
|
||||
this.findField = this.findField.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the schema for this form
|
||||
*
|
||||
* @returns {array}
|
||||
*/
|
||||
getFormSchema() {
|
||||
return this.props.schemas[this.props.schemaUrl];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the ID for this form
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
getFormId() {
|
||||
const schema = this.getFormSchema();
|
||||
if (schema) {
|
||||
return schema.id;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetch();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.schemaUrl !== prevProps.schemaUrl) {
|
||||
this.fetch();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches data used to generate a form. This can be form schema and or form state data.
|
||||
* When the response comes back the data is saved to state.
|
||||
*
|
||||
* @param {Boolean} schema If form schema data should be returned in the response.
|
||||
* @param {Boolean} state If form state data should be returned in the response.
|
||||
*
|
||||
* @return {Object} Promise from the AJAX request.
|
||||
*/
|
||||
fetch(schema = true, state = true) {
|
||||
const headerValues = [];
|
||||
|
||||
if (this.state.isFetching === true) {
|
||||
return this.formSchemaPromise;
|
||||
}
|
||||
|
||||
if (schema === true) {
|
||||
headerValues.push('schema');
|
||||
}
|
||||
|
||||
if (state === true) {
|
||||
headerValues.push('state');
|
||||
}
|
||||
|
||||
this.formSchemaPromise = fetch(this.props.schemaUrl, {
|
||||
headers: { 'X-FormSchema-Request': headerValues.join() },
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
const formSchema = Object.assign({}, { id: json.id, schema: json.schema });
|
||||
const formState = Object.assign({}, json.state);
|
||||
|
||||
// TODO See "Enable once <CampaignAdmin> ..." below
|
||||
// this.setState({ isFetching: false });
|
||||
|
||||
if (typeof formSchema.id !== 'undefined') {
|
||||
const defaultData = {
|
||||
SecurityID: this.props.config.SecurityID,
|
||||
};
|
||||
|
||||
this.submitApi = (...args) => {
|
||||
const endPoint = backend.createEndpointFetcher({
|
||||
url: formSchema.schema.attributes.action,
|
||||
method: formSchema.schema.attributes.method,
|
||||
defaultData,
|
||||
});
|
||||
|
||||
// Ensure that schema changes are handled prior to updating state
|
||||
return endPoint(...args)
|
||||
.then((response) => {
|
||||
if (response.schema) {
|
||||
const newSchema = Object.assign({}, { id: response.id, schema: response.schema });
|
||||
this.props.schemaActions.setSchema(newSchema);
|
||||
}
|
||||
return response;
|
||||
});
|
||||
};
|
||||
|
||||
this.props.schemaActions.setSchema(formSchema);
|
||||
}
|
||||
|
||||
if (typeof formState.id !== 'undefined') {
|
||||
this.props.formActions.addForm(formState);
|
||||
}
|
||||
});
|
||||
|
||||
// TODO Enable once <CampaignAdmin> is initialised via page.js route callbacks
|
||||
// At the moment, it's running an Entwine onadd() rule which ends up
|
||||
// rendering the index view, and only then calling route.start() to
|
||||
// match the detail view (admin/campaigns/set/:id/show).
|
||||
// This causes the form builder to be unmounted during a fetch() call.
|
||||
// this.setState({ isFetching: true });
|
||||
|
||||
return this.formSchemaPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update handler passed down to each form field as a prop.
|
||||
* Form fields call this method when their state changes.
|
||||
*
|
||||
* You can pass an optional callback as the third param. This can be used to
|
||||
* implement custom behaviour. For example you can use `createFn` hook from
|
||||
* your controller context like this.
|
||||
*
|
||||
* controller.js
|
||||
* ...
|
||||
* detailEditFormCreateFn(Component, props) {
|
||||
* const extendedProps = Object.assign({}, props, {
|
||||
* handleFieldUpdate: (event, updates) => {
|
||||
* props.handleFieldUpdate(event, updates, (formId, updateFieldAction) => {
|
||||
* const customUpdates = Object.assign({}, updates, {
|
||||
* value: someCustomParsing(updates.value),
|
||||
* };
|
||||
*
|
||||
* updateFieldAction(formId, customUpdates);
|
||||
* });
|
||||
* },
|
||||
* });
|
||||
*
|
||||
* return <Component {...extendedProps} />;
|
||||
* }
|
||||
* ...
|
||||
*
|
||||
* @param {object} event - Change event from the form field component.
|
||||
* @param {object} updates - Values to set in state.
|
||||
* @param {string} updates.id - Field ID. Required to identify the field in the store.
|
||||
* @param {function} [fn] - Optional function for custom behaviour. See example in description.
|
||||
*/
|
||||
handleFieldUpdate(event, updates, fn) {
|
||||
if (typeof fn === 'function') {
|
||||
fn(this.getFormId(), this.props.formActions.updateField);
|
||||
} else {
|
||||
this.props.formActions.updateField(this.getFormId(), updates);
|
||||
}
|
||||
this.buildComponent = this.buildComponent.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* When the action is clicked on, records which action was clicked on
|
||||
* This can allow for preventing the submit action, such as a custom action for the button
|
||||
*
|
||||
* @param event
|
||||
* @param submitAction
|
||||
* @param {Event} event
|
||||
*/
|
||||
handleAction(event, submitAction) {
|
||||
this.props.formActions.setSubmitAction(this.getFormId(), submitAction);
|
||||
handleAction(event) {
|
||||
// Custom handlers
|
||||
if (typeof this.props.handleAction === 'function') {
|
||||
this.props.handleAction(event, submitAction, this.getFieldValues());
|
||||
this.props.handleAction(event, this.getFieldValues());
|
||||
}
|
||||
|
||||
const name = event.currentTarget.name;
|
||||
|
||||
// Allow custom handlers to cancel event
|
||||
if (!event.isPropagationStopped()) {
|
||||
this.setState({ submittingAction: name });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -199,48 +47,45 @@ export class FormBuilderComponent extends SilverStripeComponent {
|
|||
* Form submission handler passed to the Form Component as a prop.
|
||||
* Provides a hook for controllers to access for state and provide custom functionality.
|
||||
*
|
||||
* For example:
|
||||
*
|
||||
* controller.js
|
||||
* ```
|
||||
* constructor(props) {
|
||||
* super(props);
|
||||
* this.handleSubmit = this.handleSubmit.bind(this);
|
||||
* }
|
||||
*
|
||||
* handleSubmit(event, fieldValues, submitFn) {
|
||||
* event.preventDefault();
|
||||
*
|
||||
* // Apply custom validation.
|
||||
* if (!this.validate(fieldValues)) {
|
||||
* return;
|
||||
* }
|
||||
*
|
||||
* submitFn();
|
||||
* }
|
||||
*
|
||||
* render() {
|
||||
* return <FormBuilder handleSubmit={this.handleSubmit} />
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @param {Object} event
|
||||
* @param {Object} data Processed and validated data from redux-form
|
||||
* (originally retrieved through getFieldValues())
|
||||
* @return {Promise|null}
|
||||
*/
|
||||
handleSubmit(event) {
|
||||
const fieldValues = this.getFieldValues();
|
||||
handleSubmit(data) {
|
||||
// Add form action data (or default to first action, same as browser behaviour)
|
||||
const action = this.state.submittingAction
|
||||
? this.state.submittingAction
|
||||
: this.props.schema.schema.actions[0].name;
|
||||
|
||||
const submitFn = () => this.props.formActions.submitForm(
|
||||
this.submitApi,
|
||||
this.getFormId(),
|
||||
fieldValues
|
||||
);
|
||||
const dataWithAction = Object.assign({}, data, {
|
||||
[action]: 1,
|
||||
});
|
||||
const headers = {
|
||||
'X-Formschema-Request': 'state,schema',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
};
|
||||
|
||||
if (typeof this.props.handleSubmit !== 'undefined') {
|
||||
return this.props.handleSubmit(event, fieldValues, submitFn);
|
||||
const resetSubmittingFn = () => {
|
||||
this.setState({ submittingAction: null });
|
||||
};
|
||||
|
||||
const submitFn = (customData) =>
|
||||
this.submitApi(customData || dataWithAction, headers)
|
||||
.then(formSchema => {
|
||||
resetSubmittingFn();
|
||||
return formSchema;
|
||||
})
|
||||
.catch((reason) => {
|
||||
// TODO Generic CMS error reporting
|
||||
// TODO Handle validation errors
|
||||
resetSubmittingFn();
|
||||
return reason;
|
||||
});
|
||||
|
||||
if (typeof this.props.handleSubmit === 'function') {
|
||||
return this.props.handleSubmit(dataWithAction, action, submitFn);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
return submitFn();
|
||||
}
|
||||
|
||||
|
|
@ -250,35 +95,31 @@ export class FormBuilderComponent extends SilverStripeComponent {
|
|||
* @returns {Object}
|
||||
*/
|
||||
getFieldValues() {
|
||||
const schema = this.props.schemas[this.props.schemaUrl];
|
||||
// using state is more efficient and has the same fields, fallback to nested schema
|
||||
const fields = (schema.state)
|
||||
? schema.state.fields
|
||||
: schema.schema.fields;
|
||||
const schema = this.props.schema.schema;
|
||||
const state = this.props.schema.state;
|
||||
|
||||
// Set action
|
||||
const action = this.getSubmitAction();
|
||||
const values = {};
|
||||
if (action) {
|
||||
values[action] = 1;
|
||||
if (!state) {
|
||||
return {};
|
||||
}
|
||||
|
||||
// Reduce all other fields
|
||||
return this.props.form[this.getFormId()].fields
|
||||
return state.fields
|
||||
.reduce((prev, curr) => {
|
||||
const match = this.findField(fields, curr.id);
|
||||
const match = this.findField(schema.fields, curr.id);
|
||||
|
||||
if (!match) {
|
||||
return prev;
|
||||
}
|
||||
|
||||
// Skip non-data fields
|
||||
if (match.type === 'Structural' || match.readOnly === true) {
|
||||
return prev;
|
||||
}
|
||||
|
||||
return Object.assign({}, prev, {
|
||||
[match.name]: curr.value,
|
||||
});
|
||||
}, values);
|
||||
}
|
||||
|
||||
getSubmitAction() {
|
||||
return this.props.form[this.getFormId()].submitAction;
|
||||
}, {});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -309,39 +150,42 @@ export class FormBuilderComponent extends SilverStripeComponent {
|
|||
/**
|
||||
* Common functionality for building a Field or Action from schema.
|
||||
*
|
||||
* @param field
|
||||
* @param extraProps
|
||||
* @param {Object} props Props which every form field receives. Leave it up to the
|
||||
* schema and component to determine which props are required.
|
||||
* @returns {*}
|
||||
*/
|
||||
buildComponent(field, extraProps = {}) {
|
||||
const Component = field.component !== null
|
||||
? injector.getComponentByName(field.component)
|
||||
: injector.getComponentByDataType(field.type);
|
||||
buildComponent(props) {
|
||||
let componentProps = props;
|
||||
// 'component' key is renamed to 'schemaComponent' in normalize*() methods
|
||||
const SchemaComponent = componentProps.schemaComponent !== null
|
||||
? injector.getComponentByName(componentProps.schemaComponent)
|
||||
: injector.getComponentByDataType(componentProps.type);
|
||||
|
||||
if (Component === null) {
|
||||
if (SchemaComponent === null) {
|
||||
return null;
|
||||
} else if (field.component !== null && Component === undefined) {
|
||||
throw Error(`Component not found in injector: ${field.component}`);
|
||||
} else if (componentProps.schemaComponent !== null && SchemaComponent === undefined) {
|
||||
throw Error(`Component not found in injector: ${componentProps.schemaComponent}`);
|
||||
}
|
||||
|
||||
// Props which every form field receives.
|
||||
// Leave it up to the schema and component to determine
|
||||
// which props are required.
|
||||
const props = Object.assign({}, field, extraProps);
|
||||
|
||||
// if no value, it is better to unset it
|
||||
if (props.value === null) {
|
||||
delete props.value;
|
||||
if (componentProps.value === null) {
|
||||
delete componentProps.value;
|
||||
}
|
||||
|
||||
// Inline `input` props into main field props
|
||||
// (each component can pick and choose the props required for it's <input>
|
||||
// See http://redux-form.com/6.0.5/docs/api/Field.md/#input-props
|
||||
componentProps = Object.assign({}, componentProps, componentProps.input);
|
||||
delete componentProps.input;
|
||||
|
||||
// Provides container components a place to hook in
|
||||
// and apply customisations to scaffolded components.
|
||||
const createFn = this.props.createFn;
|
||||
if (typeof createFn === 'function') {
|
||||
return createFn(Component, props);
|
||||
return createFn(SchemaComponent, componentProps);
|
||||
}
|
||||
|
||||
return <Component key={props.id} {...props} />;
|
||||
return <SchemaComponent key={componentProps.id} {...componentProps} />;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -353,16 +197,25 @@ export class FormBuilderComponent extends SilverStripeComponent {
|
|||
* @return {Array}
|
||||
*/
|
||||
mapFieldsToComponents(fields) {
|
||||
const FieldComponent = this.props.baseFieldComponent;
|
||||
return fields.map((field) => {
|
||||
// Events
|
||||
const extraProps = { onChange: this.handleFieldUpdate };
|
||||
let props = field;
|
||||
|
||||
// Build child nodes
|
||||
if (field.children) {
|
||||
extraProps.children = this.mapFieldsToComponents(field.children);
|
||||
props = Object.assign(
|
||||
{},
|
||||
field,
|
||||
{ children: this.mapFieldsToComponents(field.children) }
|
||||
);
|
||||
}
|
||||
|
||||
return this.buildComponent(field, extraProps);
|
||||
// Don't wrap structural or readonly fields, since they don't need connected fields.
|
||||
// The redux-form connected fields also messed up react-bootstrap's tab handling.
|
||||
if (field.type === 'Structural' || field.readOnly === true) {
|
||||
return this.buildComponent(props);
|
||||
}
|
||||
|
||||
return <FieldComponent key={props.id} {...props} component={this.buildComponent} />;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -373,23 +226,21 @@ export class FormBuilderComponent extends SilverStripeComponent {
|
|||
* @return {Array}
|
||||
*/
|
||||
mapActionsToComponents(actions) {
|
||||
const form = this.props.form[this.getFormId()];
|
||||
|
||||
return actions.map((action) => {
|
||||
const loading = (form && form.submitting && form.submitAction === action.name);
|
||||
// Events
|
||||
const extraProps = {
|
||||
handleClick: this.handleAction,
|
||||
loading,
|
||||
disabled: loading || action.disabled,
|
||||
};
|
||||
const props = Object.assign({}, action);
|
||||
|
||||
// Build child nodes
|
||||
if (action.children) {
|
||||
extraProps.children = this.mapActionsToComponents(action.children);
|
||||
props.children = this.mapActionsToComponents(action.children);
|
||||
} else {
|
||||
props.handleClick = this.handleAction;
|
||||
|
||||
// Reset through componentWillReceiveProps()
|
||||
if (this.state.submittingAction === action.name) {
|
||||
props.loading = true;
|
||||
}
|
||||
}
|
||||
|
||||
return this.buildComponent(action, extraProps);
|
||||
return this.buildComponent(props);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -416,32 +267,54 @@ export class FormBuilderComponent extends SilverStripeComponent {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Cleans up Redux state used by the form when the Form component is unmonuted.
|
||||
* If there is structural and state data available merge those data for each field.
|
||||
* Otherwise just use the structural data. Ensure that keys don't conflict
|
||||
* with redux-form expectations.
|
||||
*
|
||||
* @param {string} formId - ID of the form to clean up.
|
||||
* @param {array} fields
|
||||
* @param {Object} state Optional
|
||||
* @return {array}
|
||||
*/
|
||||
removeForm(formId) {
|
||||
this.props.formActions.removeForm(formId);
|
||||
normalizeFields(fields, state) {
|
||||
return fields.map((field) => {
|
||||
const fieldState = (state && state.fields)
|
||||
? state.fields.find((item) => item.id === field.id)
|
||||
: {};
|
||||
|
||||
const data = merge.recursive(
|
||||
true,
|
||||
this.mergeFieldData(field, fieldState),
|
||||
// Overlap with redux-form prop handling : createFieldProps filters out the 'component' key
|
||||
{ schemaComponent: field.component }
|
||||
);
|
||||
|
||||
if (field.children) {
|
||||
data.children = this.normalizeFields(field.children, state);
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* If there is structural and state data availabe merge those data for each field.
|
||||
* Otherwise just use the structural data.
|
||||
* Ensure that keys don't conflict with redux-form expectations.
|
||||
*
|
||||
* @param {array} actions
|
||||
* @return {array}
|
||||
*/
|
||||
getFieldData(formFields, formState) {
|
||||
if (!formFields || !formState || !formState.fields) {
|
||||
return formFields;
|
||||
}
|
||||
normalizeActions(actions) {
|
||||
return actions.map((action) => {
|
||||
const data = merge.recursive(
|
||||
true,
|
||||
action,
|
||||
// Overlap with redux-form prop handling : createFieldProps filters out the 'component' key
|
||||
{ schemaComponent: action.component }
|
||||
);
|
||||
|
||||
return formFields.map((field) => {
|
||||
const state = formState.fields.find((item) => item.id === field.id);
|
||||
const data = this.mergeFieldData(field, state);
|
||||
|
||||
if (field.children) {
|
||||
return Object.assign({}, data, {
|
||||
children: this.getFieldData(field.children, formState),
|
||||
});
|
||||
if (action.children) {
|
||||
data.children = this.normalizeActions(action.children);
|
||||
}
|
||||
|
||||
return data;
|
||||
|
|
@ -449,73 +322,89 @@ export class FormBuilderComponent extends SilverStripeComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const formId = this.getFormId();
|
||||
if (!formId) {
|
||||
return null;
|
||||
}
|
||||
const formSchema = this.getFormSchema();
|
||||
const formState = this.props.form[formId];
|
||||
|
||||
// If the response from fetching the initial data
|
||||
// hasn't come back yet, don't render anything.
|
||||
if (!formSchema || !formSchema.schema) {
|
||||
return null;
|
||||
}
|
||||
const schema = this.props.schema.schema;
|
||||
const state = this.props.schema.state;
|
||||
const BaseFormComponent = this.props.baseFormComponent;
|
||||
|
||||
// Map form schema to React component attribute names,
|
||||
// which requires renaming some of them (by unsetting the original keys)
|
||||
const attributes = Object.assign({}, formSchema.schema.attributes, {
|
||||
className: formSchema.schema.attributes.class,
|
||||
encType: formSchema.schema.attributes.enctype,
|
||||
const attributes = Object.assign({}, schema.attributes, {
|
||||
className: schema.attributes.class,
|
||||
encType: schema.attributes.enctype,
|
||||
});
|
||||
// these two still cause silent errors
|
||||
delete attributes.class;
|
||||
delete attributes.enctype;
|
||||
|
||||
const fieldData = this.getFieldData(formSchema.schema.fields, formState);
|
||||
const actionData = this.getFieldData(formSchema.schema.actions, formState);
|
||||
const {
|
||||
asyncValidate,
|
||||
onSubmitFail,
|
||||
onSubmitSuccess,
|
||||
shouldAsyncValidate,
|
||||
touchOnBlur,
|
||||
touchOnChange,
|
||||
persistentSubmitErrors,
|
||||
validate,
|
||||
form,
|
||||
} = this.props;
|
||||
|
||||
const formProps = {
|
||||
actions: actionData,
|
||||
const props = {
|
||||
form, // required as redux-form identifier
|
||||
fields: this.normalizeFields(schema.fields, state),
|
||||
actions: this.normalizeActions(schema.actions),
|
||||
attributes,
|
||||
componentWillUnmount: this.removeForm,
|
||||
data: formSchema.schema.data,
|
||||
fields: fieldData,
|
||||
formId,
|
||||
handleSubmit: this.handleSubmit,
|
||||
data: schema.data,
|
||||
initialValues: this.getFieldValues(),
|
||||
onSubmit: this.handleSubmit,
|
||||
mapActionsToComponents: this.mapActionsToComponents,
|
||||
mapFieldsToComponents: this.mapFieldsToComponents,
|
||||
asyncValidate,
|
||||
onSubmitFail,
|
||||
onSubmitSuccess,
|
||||
shouldAsyncValidate,
|
||||
touchOnBlur,
|
||||
touchOnChange,
|
||||
persistentSubmitErrors,
|
||||
validate,
|
||||
};
|
||||
|
||||
return <Form {...formProps} />;
|
||||
return <BaseFormComponent {...props} />;
|
||||
}
|
||||
}
|
||||
|
||||
FormBuilderComponent.propTypes = {
|
||||
config: React.PropTypes.object,
|
||||
createFn: React.PropTypes.func,
|
||||
form: React.PropTypes.object.isRequired,
|
||||
formActions: React.PropTypes.object.isRequired,
|
||||
handleSubmit: React.PropTypes.func,
|
||||
handleAction: React.PropTypes.func,
|
||||
schemas: React.PropTypes.object.isRequired,
|
||||
schemaActions: React.PropTypes.object.isRequired,
|
||||
schemaUrl: React.PropTypes.string.isRequired,
|
||||
const schemaPropType = PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
schema: PropTypes.shape({
|
||||
attributes: PropTypes.shape({
|
||||
class: PropTypes.string,
|
||||
enctype: PropTypes.string,
|
||||
}),
|
||||
fields: PropTypes.array.isRequired,
|
||||
}).isRequired,
|
||||
state: PropTypes.shape({
|
||||
fields: PropTypes.array,
|
||||
}),
|
||||
});
|
||||
|
||||
const basePropTypes = {
|
||||
createFn: PropTypes.func,
|
||||
handleSubmit: PropTypes.func,
|
||||
handleAction: PropTypes.func,
|
||||
asyncValidate: PropTypes.func,
|
||||
onSubmitFail: PropTypes.func,
|
||||
onSubmitSuccess: PropTypes.func,
|
||||
shouldAsyncValidate: PropTypes.func,
|
||||
touchOnBlur: PropTypes.bool,
|
||||
touchOnChange: PropTypes.bool,
|
||||
persistentSubmitErrors: PropTypes.bool,
|
||||
validate: PropTypes.func,
|
||||
baseFormComponent: PropTypes.func.isRequired,
|
||||
baseFieldComponent: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
config: state.config,
|
||||
form: state.form,
|
||||
schemas: state.schemas,
|
||||
};
|
||||
}
|
||||
FormBuilder.propTypes = Object.assign({}, basePropTypes, {
|
||||
form: PropTypes.string.isRequired,
|
||||
schema: schemaPropType.isRequired,
|
||||
});
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
formActions: bindActionCreators(formActions, dispatch),
|
||||
schemaActions: bindActionCreators(schemaActions, dispatch),
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(FormBuilderComponent);
|
||||
export { basePropTypes, schemaPropType };
|
||||
export default FormBuilder;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,90 @@
|
|||
# FormBuilder Component
|
||||
|
||||
Used to generate forms, made up of field components and actions, from FormFieldSchema data.
|
||||
Used to generate forms, made up of field components and actions, from form schema data.
|
||||
|
||||
This component will be moved to Framweork or CMS when dependency injection is implemented.
|
||||
Forms are usually rendered through [redux-form](http://redux-form.com/),
|
||||
although this can be controlled through the `baseFormComponent`
|
||||
and `baseFieldComponent` props.
|
||||
|
||||
If you want to load the schema from a server via XHR, use the
|
||||
[FormBuilderLoader](../../containers/FormBuilderLoader/README.md] instead.
|
||||
|
||||
## Properties
|
||||
|
||||
* `createFn` (function): Gives container components a chance to access a form component before it's constructed. Use this as an opportunity to pass a custom click handler to to a field for example.
|
||||
* `schemaUrl` (string): The schema URL where the form will be scaffolded from e.g. '/admin/pages/schema/1'.
|
||||
* `handleSubmit` (function): Event handler passed to the Form Component as a prop. Parameters received are:
|
||||
* `event` (Event): The submit event, it is strongly recommended to call `preventDefault()`
|
||||
* `fieldValues` (object): An object containing the field values captured by the Submit handler
|
||||
* `submitFn` (function): A callback for when the submission was successful, if submission fails, this function should not be called. (e.g. validation error)
|
||||
* `handleAction` (function): Event handler when a form action is clicked on, allows preventing submit and know which action was clicked on.
|
||||
* `form` (string): Form identifier (useful to reference this form through redux selectors)
|
||||
* `baseFormComponent` (function): A React component to render the form
|
||||
* `baseFieldComponent` (function): A React component to render each field. Should be a HOC which receives
|
||||
the actual field builder through a `component` prop.
|
||||
* `schema` (object): A form schema (see "Schema Structure" below)
|
||||
* `createFn` (function): Gives container components a chance to access a form component before it's constructed.
|
||||
Use this as an opportunity to pass a custom click handler to to a field for example.
|
||||
* `handleSubmit` (function): Event handler passed to the Form Component as a prop.
|
||||
Should return a promise (usually the result of the `submitFn` argument). Parameters received are:
|
||||
* `data` (object): An object containing the field values captured by the submit handler
|
||||
* `action` (string): The name of the button clicked to perform this action.
|
||||
Defaults to first button when form is submitted by pressing the "enter" key.
|
||||
* `submitFn` (function): A callback for when the submission was successful, if submission fails,
|
||||
this function should not be called. (e.g. validation error). Pass in your modified `data`
|
||||
to influence the data being sent through.
|
||||
* `handleAction` (function): Event handler when a form action is clicked on, allows preventing submit and know which action was clicked on. Arguments:
|
||||
* `event` (function) Allows cancellation of the submission through `event.stopPropagation()`.
|
||||
The action can be identified via `event.currentTarget.name`.
|
||||
* `data` (object): Validated and processed field values, ready for submission
|
||||
* `asyncValidate` (function): See [redux-form](http://redux-form.com/6.0.5/docs/api/ReduxForm.md/)
|
||||
* `onSubmitFail` (function): See [redux-form](http://redux-form.com/6.0.5/docs/api/ReduxForm.md/)
|
||||
* `onSubmitSuccess` (function): See [redux-form](http://redux-form.com/6.0.5/docs/api/ReduxForm.md/)
|
||||
* `shouldAsyncValidate` (function): See [redux-form](http://redux-form.com/6.0.5/docs/api/ReduxForm.md/)
|
||||
* `touchOnBlur` (bool): See [redux-form](http://redux-form.com/6.0.5/docs/api/ReduxForm.md/)
|
||||
* `touchOnChange` (bool): See [redux-form](http://redux-form.com/6.0.5/docs/api/ReduxForm.md/)
|
||||
* `persistentSubmitErrors` (bool): See [redux-form](http://redux-form.com/6.0.5/docs/api/ReduxForm.md/)
|
||||
* `validate` (function): See [redux-form](http://redux-form.com/6.0.5/docs/api/ReduxForm.md/)
|
||||
|
||||
## Schema Structure
|
||||
|
||||
The `schema` prop expects a particular structure, containing the form structure
|
||||
in a `schema` key, and the form values in a `state` key.
|
||||
See [RFC: FormField React Integration API](https://github.com/silverstripe/silverstripe-framework/issues/4938) for details.
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
import { Field as ReduxFormField, reduxForm } from 'redux-form';
|
||||
class MyComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
handleSubmit(data, action, submitFn) {
|
||||
// You can implement custom submission handling and data processing here.
|
||||
// Ensure to always return a promise if you want execution to continue.
|
||||
if (!this.myCheck(data)) {
|
||||
return;
|
||||
}
|
||||
return submitFn();
|
||||
}
|
||||
render() {
|
||||
const props = {
|
||||
form: 'MyForm',
|
||||
schema: { /* ... */ },
|
||||
baseFormComponent: reduxForm()(Form),
|
||||
baseFieldComponent: ReduxFormField,
|
||||
handleSubmit: this.handleSubmit
|
||||
};
|
||||
return <FormBuilder {...props} />
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
With the default implementation of [redux-form](http://http://redux-form.com)
|
||||
(passed in through `baseFormComponent` and `baseFieldComponent`),
|
||||
the submission process works as follows:
|
||||
|
||||
1. `<FormBuilder>` passes it's `handleSubmit` to `reduxForm()` as an `onSubmit` prop
|
||||
1. `reduxForm()` passes it's own `handleSubmit` to `<Form>`
|
||||
1. `<Form>` sets `<Form onSubmit={this.props.handleSubmit}>`
|
||||
1. `<Form>` calls `reduxForm()` own `handleSubmit()`, which does normalisation and validation
|
||||
1. `reduxForm()` calls its `onSubmit` prop, which is set to `<FormBuilder>` `handleSubmit()`
|
||||
1. `<FormBuilder>` either submits the form, or calls it's own overloaded `handleSubmit()` prop
|
||||
|
||||
See [handleSubmit](http://redux-form.com/6.0.5/docs/api/Props.md#-handlesubmit-eventorsubmit-function-)
|
||||
in the redux-form docs for more details.
|
||||
|
|
|
|||
|
|
@ -3,23 +3,39 @@
|
|||
jest.unmock('merge');
|
||||
jest.unmock('lib/SilverStripeComponent');
|
||||
jest.unmock('../FormBuilder');
|
||||
jest.unmock('redux-form');
|
||||
|
||||
import { FormBuilderComponent } from '../FormBuilder';
|
||||
const React = require('react');
|
||||
import ReactTestUtils from 'react-addons-test-utils';
|
||||
import FormBuilder from '../FormBuilder';
|
||||
|
||||
describe('FormBuilder', () => {
|
||||
const baseProps = {
|
||||
form: 'MyForm',
|
||||
baseFormComponent: () => <form />,
|
||||
baseFieldComponent: (props) => {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Component = props.component;
|
||||
return <Component {...props} />;
|
||||
},
|
||||
schema: {
|
||||
id: 'MyForm',
|
||||
schema: {
|
||||
attributes: {},
|
||||
fields: [],
|
||||
actions: [],
|
||||
},
|
||||
state: {
|
||||
fields: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
describe('FormBuilderComponent', () => {
|
||||
describe('mergeFieldData()', () => {
|
||||
let formBuilder = null;
|
||||
|
||||
beforeEach(() => {
|
||||
const props = {
|
||||
form: {},
|
||||
formActions: {},
|
||||
schemas: {},
|
||||
schemaActions: {},
|
||||
schemaUrl: 'admin/assets/schema/1',
|
||||
};
|
||||
|
||||
formBuilder = new FormBuilderComponent(props);
|
||||
formBuilder = new FormBuilder(baseProps);
|
||||
});
|
||||
|
||||
it('should deep merge properties on the originalobject', () => {
|
||||
|
|
@ -57,40 +73,22 @@ describe('FormBuilderComponent', () => {
|
|||
describe('getFieldValues()', () => {
|
||||
let formBuilder = null;
|
||||
let fieldValues = null;
|
||||
let props = null;
|
||||
const props = Object.assign({}, baseProps);
|
||||
|
||||
it('should retrieve field values based on schema', () => {
|
||||
props = {
|
||||
form: {
|
||||
MyForm: {
|
||||
submitAction: 'action_save',
|
||||
fields: [
|
||||
{ id: 'fieldOne', value: 'valOne' },
|
||||
{ id: 'fieldTwo', value: null },
|
||||
{ id: 'notInSchema', value: 'invalid' },
|
||||
],
|
||||
},
|
||||
},
|
||||
formActions: {},
|
||||
schemas: {
|
||||
'admin/assets/schema/1': {
|
||||
id: 'MyForm',
|
||||
schema: {
|
||||
fields: [
|
||||
{ id: 'fieldOne', name: 'fieldOne' },
|
||||
{ id: 'fieldTwo', name: 'fieldTwo' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
schemaActions: {},
|
||||
schemaUrl: 'admin/assets/schema/1',
|
||||
};
|
||||
formBuilder = new FormBuilderComponent(props);
|
||||
props.schema.schema.fields = [
|
||||
{ id: 'fieldOne', name: 'fieldOne' },
|
||||
{ id: 'fieldTwo', name: 'fieldTwo' },
|
||||
];
|
||||
props.schema.state.fields = [
|
||||
{ id: 'fieldOne', value: 'valOne' },
|
||||
{ id: 'fieldTwo', value: null },
|
||||
{ id: 'notInSchema', value: 'invalid' },
|
||||
];
|
||||
formBuilder = new FormBuilder(baseProps);
|
||||
|
||||
fieldValues = formBuilder.getFieldValues();
|
||||
expect(fieldValues).toEqual({
|
||||
action_save: 1,
|
||||
fieldOne: 'valOne',
|
||||
fieldTwo: null,
|
||||
});
|
||||
|
|
@ -100,23 +98,9 @@ describe('FormBuilderComponent', () => {
|
|||
describe('findField()', () => {
|
||||
let formBuilder = null;
|
||||
let fields = null;
|
||||
const props = {
|
||||
form: {
|
||||
myForm: {},
|
||||
formActions: {},
|
||||
schemas: {
|
||||
'admin/assets/schema/1': {
|
||||
id: 'myForm',
|
||||
schema: {},
|
||||
},
|
||||
},
|
||||
schemaActions: {},
|
||||
schemaUrl: 'admin/assets/schema/1',
|
||||
},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
formBuilder = new FormBuilderComponent(props);
|
||||
formBuilder = new FormBuilder(baseProps);
|
||||
});
|
||||
|
||||
it('should retrieve the field in the shallow fields list', () => {
|
||||
|
|
@ -152,4 +136,61 @@ describe('FormBuilderComponent', () => {
|
|||
expect(field.id).toBe('fieldTwoThree');
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleSubmit', () => {
|
||||
let formBuilder = null;
|
||||
const props = baseProps;
|
||||
|
||||
beforeEach(() => {
|
||||
formBuilder = ReactTestUtils.renderIntoDocument(<FormBuilder {...props} />);
|
||||
|
||||
props.schema.schema.fields = [
|
||||
{ id: 'fieldOne', name: 'fieldOne' },
|
||||
{ id: 'fieldTwo', name: 'fieldTwo' },
|
||||
];
|
||||
props.schema.schema.actions = [
|
||||
{ id: 'actionOne', name: 'actionOne' },
|
||||
{ id: 'actionTwo', name: 'actionTwo' },
|
||||
];
|
||||
props.schema.state.fields = [
|
||||
{ id: 'fieldOne', value: 'valOne' },
|
||||
{ id: 'fieldTwo', value: null },
|
||||
{ id: 'notInSchema', value: 'invalid' },
|
||||
];
|
||||
});
|
||||
|
||||
it('should include submitted action from schema', () => {
|
||||
formBuilder.setState({ submittingAction: 'actionTwo' });
|
||||
|
||||
const submitApiMock = jest.genMockFunction();
|
||||
submitApiMock.mockImplementation(() => Promise.resolve({}));
|
||||
formBuilder.submitApi = submitApiMock;
|
||||
|
||||
formBuilder.handleSubmit(formBuilder.getFieldValues());
|
||||
|
||||
expect(formBuilder.submitApi.mock.calls[0][0]).toEqual(
|
||||
{
|
||||
fieldOne: 'valOne',
|
||||
fieldTwo: null,
|
||||
actionTwo: 1,
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
it('should default to first button when none is specified', () => {
|
||||
const submitApiMock = jest.genMockFunction();
|
||||
submitApiMock.mockImplementation(() => Promise.resolve({}));
|
||||
formBuilder.submitApi = submitApiMock;
|
||||
|
||||
formBuilder.handleSubmit(formBuilder.getFieldValues());
|
||||
|
||||
expect(formBuilder.submitApi.mock.calls[0][0]).toEqual(
|
||||
{
|
||||
fieldOne: 'valOne',
|
||||
fieldTwo: null,
|
||||
actionOne: 1,
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Modal } from 'react-bootstrap-ss';
|
||||
import SilverStripeComponent from 'lib/SilverStripeComponent';
|
||||
import FormBuilder from 'components/FormBuilder/FormBuilder';
|
||||
import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
|
||||
|
||||
class FormBuilderModal extends SilverStripeComponent {
|
||||
constructor(props) {
|
||||
|
|
@ -19,7 +19,7 @@ class FormBuilderModal extends SilverStripeComponent {
|
|||
*/
|
||||
getForm() {
|
||||
return (
|
||||
<FormBuilder
|
||||
<FormBuilderLoader
|
||||
schemaUrl={this.props.schemaUrl}
|
||||
handleSubmit={this.handleSubmit}
|
||||
handleAction={this.props.handleAction}
|
||||
|
|
@ -74,17 +74,16 @@ class FormBuilderModal extends SilverStripeComponent {
|
|||
/**
|
||||
* Handle submitting the form in the Modal
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {object} fieldValues
|
||||
* @param {function} submitFn
|
||||
* @param {Object} data
|
||||
* @param {String} action
|
||||
* @param {Function} submitFn The original submit function
|
||||
* @returns {Promise}
|
||||
*/
|
||||
handleSubmit(event, fieldValues, submitFn) {
|
||||
handleSubmit(data, action, submitFn) {
|
||||
let promise = null;
|
||||
if (typeof this.props.handleSubmit === 'function') {
|
||||
promise = this.props.handleSubmit(event, fieldValues, submitFn);
|
||||
promise = this.props.handleSubmit(data, action, submitFn);
|
||||
} else {
|
||||
event.preventDefault();
|
||||
promise = submitFn();
|
||||
}
|
||||
|
||||
|
|
@ -106,6 +105,7 @@ class FormBuilderModal extends SilverStripeComponent {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ class OptionsetField extends SilverStripeComponent {
|
|||
const sourceItem = this.props.source
|
||||
.find((item, index) => this.getItemKey(item, index) === field.id);
|
||||
|
||||
this.props.onChange(event, { id: this.props.id, value: `${sourceItem.value}` });
|
||||
this.props.onChange(sourceItem.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,8 +47,7 @@ describe('OptionsetField', () => {
|
|||
setField.handleChange(event, { id: 'set-one', value: 1 });
|
||||
|
||||
expect(setField.props.onChange).toBeCalledWith(
|
||||
event,
|
||||
{ id: 'set', value: 'one' }
|
||||
'one'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import SilverStripeComponent from 'lib/SilverStripeComponent';
|
|||
import FormAction from 'components/FormAction/FormAction';
|
||||
import i18n from 'i18n';
|
||||
import Toolbar from 'components/Toolbar/Toolbar';
|
||||
import FormBuilder from 'components/FormBuilder/FormBuilder';
|
||||
import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
|
||||
import CampaignAdminList from './CampaignAdminList';
|
||||
|
||||
class CampaignAdmin extends SilverStripeComponent {
|
||||
|
|
@ -56,7 +56,7 @@ class CampaignAdmin extends SilverStripeComponent {
|
|||
// NOOP - Lazy loaded in CampaignAdminList.js
|
||||
break;
|
||||
case 'edit':
|
||||
// @todo - Lazy load in FormBuilder / GridField
|
||||
// @todo - Lazy load in FormBuilderLoader / GridField
|
||||
breadcrumbs.push({
|
||||
text: i18n._t('Campaigns.EDIT_CAMPAIGN', 'Editing Campaign'),
|
||||
href: this.getActionRoute(id, view),
|
||||
|
|
@ -137,7 +137,7 @@ class CampaignAdmin extends SilverStripeComponent {
|
|||
</div>
|
||||
</div>
|
||||
<div className="campaign-admin">
|
||||
<FormBuilder {...formBuilderProps} />
|
||||
<FormBuilderLoader {...formBuilderProps} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -184,7 +184,7 @@ class CampaignAdmin extends SilverStripeComponent {
|
|||
</Toolbar>
|
||||
|
||||
<div className="panel panel--padded panel--scrollable flexbox-area-grow form--inline">
|
||||
<FormBuilder {...formBuilderProps} />
|
||||
<FormBuilderLoader {...formBuilderProps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -210,7 +210,7 @@ class CampaignAdmin extends SilverStripeComponent {
|
|||
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
|
||||
</Toolbar>
|
||||
<div className="panel panel--padded panel--scrollable flexbox-area-grow form--inline">
|
||||
<FormBuilder {...formBuilderProps} />
|
||||
<FormBuilderLoader {...formBuilderProps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -218,10 +218,10 @@ class CampaignAdmin extends SilverStripeComponent {
|
|||
|
||||
/**
|
||||
* Hook to allow customisation of components being constructed
|
||||
* by the Campaign DetailEdit FormBuilder.
|
||||
* by the Campaign DetailEdit FormBuilderLoader.
|
||||
*
|
||||
* @param {Object} Component - Component constructor.
|
||||
* @param {Object} props - Props passed from FormBuilder.
|
||||
* @param {Object} props - Props passed from FormBuilderLoader.
|
||||
*
|
||||
* @return {Object} - Instanciated React component
|
||||
*/
|
||||
|
|
@ -245,10 +245,10 @@ class CampaignAdmin extends SilverStripeComponent {
|
|||
|
||||
/**
|
||||
* Hook to allow customisation of components being constructed
|
||||
* by the Campaign creation FormBuilder.
|
||||
* by the Campaign creation FormBuilderLoader.
|
||||
*
|
||||
* @param {Object} Component - Component constructor.
|
||||
* @param {Object} props - Props passed from FormBuilder.
|
||||
* @param {Object} props - Props passed from FormBuilderLoader.
|
||||
*
|
||||
* @return {Object} - Instanciated React component
|
||||
*/
|
||||
|
|
@ -272,10 +272,10 @@ class CampaignAdmin extends SilverStripeComponent {
|
|||
|
||||
/**
|
||||
* Hook to allow customisation of components being constructed
|
||||
* by the Campaign list FormBuilder.
|
||||
* by the Campaign list FormBuilderLoader.
|
||||
*
|
||||
* @param object Component - Component constructor.
|
||||
* @param object props - Props passed from FormBuilder.
|
||||
* @param object props - Props passed from FormBuilderLoader.
|
||||
*
|
||||
* @return object - Instanciated React component
|
||||
*/
|
||||
|
|
@ -283,7 +283,7 @@ class CampaignAdmin extends SilverStripeComponent {
|
|||
const sectionUrl = this.props.sectionConfig.url;
|
||||
const typeUrlParam = 'set';
|
||||
|
||||
if (props.component === 'GridField') {
|
||||
if (props.schemaComponent === 'GridField') {
|
||||
const extendedProps = Object.assign({}, props, {
|
||||
data: Object.assign({}, props.data, {
|
||||
handleDrillDown: (event, record) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
import React, { PropTypes, Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import fetch from 'isomorphic-fetch';
|
||||
import { Field as ReduxFormField, reduxForm } from 'redux-form';
|
||||
import * as schemaActions from 'state/schema/SchemaActions';
|
||||
import Form from 'components/Form/Form';
|
||||
import FormBuilder, { basePropTypes, schemaPropType } from 'components/FormBuilder/FormBuilder';
|
||||
|
||||
import es6promise from 'es6-promise';
|
||||
es6promise.polyfill();
|
||||
|
||||
class FormBuilderLoader extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleSubmitSuccess = this.handleSubmitSuccess.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetch();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.schemaUrl !== prevProps.schemaUrl) {
|
||||
this.fetch();
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmitSuccess(result) {
|
||||
this.props.schemaActions.setSchema(result);
|
||||
|
||||
if (this.props.onSubmitSuccess) {
|
||||
this.props.onSubmitSuccess(result);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches data used to generate a form. This can be form schema and or form state data.
|
||||
* When the response comes back the data is saved to state.
|
||||
*
|
||||
* @param {Boolean} schema If form schema data should be returned in the response.
|
||||
* @param {Boolean} state If form state data should be returned in the response.
|
||||
* @return {Object} Promise from the AJAX request.
|
||||
*/
|
||||
fetch(schema = true, state = true) {
|
||||
const headerValues = [];
|
||||
|
||||
if (schema === true) {
|
||||
headerValues.push('schema');
|
||||
}
|
||||
|
||||
if (state === true) {
|
||||
headerValues.push('state');
|
||||
}
|
||||
|
||||
return fetch(this.props.schemaUrl, {
|
||||
headers: { 'X-FormSchema-Request': headerValues.join() },
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(formSchema => {
|
||||
if (typeof formSchema.id !== 'undefined') {
|
||||
this.props.schemaActions.setSchema(formSchema);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
// If the response from fetching the initial data
|
||||
// hasn't come back yet, don't render anything.
|
||||
if (!this.props.schema) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const props = Object.assign({}, this.props, {
|
||||
onSubmitSuccess: this.handleSubmitSuccess,
|
||||
});
|
||||
return <FormBuilder {...props} />;
|
||||
}
|
||||
}
|
||||
|
||||
FormBuilderLoader.propTypes = Object.assign({}, basePropTypes, {
|
||||
schemaActions: PropTypes.object.isRequired,
|
||||
schemaUrl: PropTypes.string.isRequired,
|
||||
schema: schemaPropType,
|
||||
form: PropTypes.string,
|
||||
});
|
||||
FormBuilderLoader.defaultProps = {
|
||||
// Perform this *outside* of render() to avoid re-rendering of the whole DOM structure
|
||||
// every time render() is triggered.
|
||||
baseFormComponent: reduxForm()(Form),
|
||||
baseFieldComponent: ReduxFormField,
|
||||
};
|
||||
|
||||
export default connect(
|
||||
(state, ownProps) => {
|
||||
const schema = state.schemas[ownProps.schemaUrl];
|
||||
const form = schema ? schema.id : null;
|
||||
return { schema, form };
|
||||
},
|
||||
(dispatch) => ({
|
||||
schemaActions: bindActionCreators(schemaActions, dispatch),
|
||||
})
|
||||
)(FormBuilderLoader);
|
||||
12
admin/client/src/containers/FormBuilderLoader/README.md
Normal file
12
admin/client/src/containers/FormBuilderLoader/README.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
# FormBuilderLoader Component
|
||||
|
||||
Used to retrieve a schema for FormBuilder to generate forms made up of field components and actions.
|
||||
Wraps a [FormBuilder](../../components/FormBuilder/README.md] component with async loading logic,
|
||||
and stores the loaded schemas in a Redux store.
|
||||
|
||||
## Properties
|
||||
|
||||
* `schemaUrl` (string): The schema URL where the form will be scaffolded from e.g. '/admin/pages/schema/1'.
|
||||
* `schemaActions` (object): A `setSchema()` function to interact with the redux store.
|
||||
|
||||
See [FormBuilder](../../components/FormBuilder/README.md] for more properties.
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { reduxForm } from 'redux-form';
|
||||
import Form from 'components/Form/Form';
|
||||
|
||||
export default reduxForm({
|
||||
// configured at runtime
|
||||
})(Form);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
export const ACTION_TYPES = {
|
||||
ADD_FORM: 'ADD_FORM',
|
||||
REMOVE_FORM: 'REMOVE_FORM',
|
||||
SUBMIT_FORM_FAILURE: 'SUBMIT_FORM_FAILURE',
|
||||
SUBMIT_FORM_REQUEST: 'SUBMIT_FORM_REQUEST',
|
||||
SUBMIT_FORM_SUCCESS: 'SUBMIT_FORM_SUCCESS',
|
||||
UPDATE_FIELD: 'UPDATE_FIELD',
|
||||
SET_SUBMIT_ACTION: 'SET_SUBMIT_ACTION',
|
||||
};
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
import { ACTION_TYPES } from './FormActionTypes';
|
||||
|
||||
/**
|
||||
* Removes a form from state.
|
||||
* This action should be called when a Redux managed Form component unmounts.
|
||||
*
|
||||
* @param {string} formId - ID of the form you want to remove.
|
||||
* @return {function}
|
||||
*/
|
||||
export function removeForm(formId) {
|
||||
return (dispatch) => {
|
||||
dispatch({
|
||||
type: ACTION_TYPES.REMOVE_FORM,
|
||||
payload: { formId },
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets one or more values on an existing form field.
|
||||
*
|
||||
* @param {string} formId - Id of the form where the field lives.
|
||||
* @param {object} updates - The values to update on the field.
|
||||
* @param {string} updates.id - Field ID.
|
||||
* @return {function}
|
||||
*/
|
||||
export function updateField(formId, updates) {
|
||||
return (dispatch) => {
|
||||
dispatch({
|
||||
type: ACTION_TYPES.UPDATE_FIELD,
|
||||
payload: { formId, updates },
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a form to the store.
|
||||
*
|
||||
* @param {object} formState
|
||||
* @param {string} formState.id - The ID the form will be keyed as in state.
|
||||
* @return {function}
|
||||
*/
|
||||
export function addForm(formState) {
|
||||
return (dispatch) => {
|
||||
dispatch({
|
||||
type: ACTION_TYPES.ADD_FORM,
|
||||
payload: { formState },
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Submits a form and handles the response.
|
||||
*
|
||||
* @param {Function} submitApi
|
||||
* @param {String} formId
|
||||
*/
|
||||
export function submitForm(submitApi, formId, fieldValues) {
|
||||
return (dispatch) => {
|
||||
const headers = {
|
||||
'X-Formschema-Request': 'schema,state',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
};
|
||||
dispatch({
|
||||
type: ACTION_TYPES.SUBMIT_FORM_REQUEST,
|
||||
payload: { formId },
|
||||
});
|
||||
|
||||
return submitApi(Object.assign({ ID: formId }, fieldValues), headers)
|
||||
.then((response) => {
|
||||
dispatch({
|
||||
type: ACTION_TYPES.SUBMIT_FORM_SUCCESS,
|
||||
payload: { response },
|
||||
});
|
||||
return response;
|
||||
})
|
||||
.catch((error) => {
|
||||
throw error.response.text().then((errorText) => {
|
||||
dispatch({
|
||||
type: ACTION_TYPES.SUBMIT_FORM_FAILURE,
|
||||
payload: { formId, error: errorText },
|
||||
});
|
||||
return errorText;
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function setSubmitAction(formId, submitAction) {
|
||||
return (dispatch) => {
|
||||
dispatch({
|
||||
type: ACTION_TYPES.SET_SUBMIT_ACTION,
|
||||
payload: { formId, submitAction },
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
import deepFreeze from 'deep-freeze-strict';
|
||||
import { ACTION_TYPES } from './FormActionTypes';
|
||||
|
||||
const initialState = deepFreeze({});
|
||||
|
||||
function formReducer(state = initialState, action) {
|
||||
const updateForm = (formId, data) => Object.assign({},
|
||||
state, {
|
||||
[formId]: Object.assign({},
|
||||
state[formId],
|
||||
data
|
||||
),
|
||||
});
|
||||
|
||||
switch (action.type) {
|
||||
|
||||
case ACTION_TYPES.SUBMIT_FORM_REQUEST:
|
||||
return deepFreeze(updateForm(action.payload.formId, {
|
||||
error: false,
|
||||
submitting: true,
|
||||
}));
|
||||
|
||||
case ACTION_TYPES.REMOVE_FORM:
|
||||
return deepFreeze(Object.keys(state).reduce((previous, current) => {
|
||||
if (current === action.payload.formId) {
|
||||
return previous;
|
||||
}
|
||||
return Object.assign({}, previous, {
|
||||
[current]: state[current],
|
||||
});
|
||||
}, {}));
|
||||
|
||||
case ACTION_TYPES.ADD_FORM:
|
||||
return deepFreeze(Object.assign({}, state, {
|
||||
[action.payload.formState.id]: {
|
||||
fields: action.payload.formState.fields,
|
||||
error: false,
|
||||
submitting: false,
|
||||
},
|
||||
}));
|
||||
|
||||
case ACTION_TYPES.UPDATE_FIELD:
|
||||
return deepFreeze(updateForm(action.payload.formId, {
|
||||
fields: state[action.payload.formId].fields.map((field) => {
|
||||
if (field.id === action.payload.updates.id) {
|
||||
return Object.assign({}, field, action.payload.updates);
|
||||
}
|
||||
return field;
|
||||
}),
|
||||
}));
|
||||
|
||||
case ACTION_TYPES.SUBMIT_FORM_SUCCESS:
|
||||
return deepFreeze(updateForm(action.payload.response.id, {
|
||||
fields: action.payload.response.state.fields,
|
||||
error: false,
|
||||
messages: action.payload.response.state.messages,
|
||||
submitting: false,
|
||||
}));
|
||||
|
||||
case ACTION_TYPES.SUBMIT_FORM_FAILURE:
|
||||
return deepFreeze(updateForm(action.payload.formId, {
|
||||
error: true,
|
||||
messages: action.payload.error,
|
||||
submitting: false,
|
||||
}));
|
||||
|
||||
case ACTION_TYPES.SET_SUBMIT_ACTION:
|
||||
return deepFreeze(updateForm(action.payload.formId, {
|
||||
submitAction: action.payload.submitAction,
|
||||
}));
|
||||
|
||||
default:
|
||||
return state;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default formReducer;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
# form
|
||||
|
||||
This state key holds form and form field data. Forms built using the `FormBuilder` component
|
||||
have their state stored in child keys of `form` (keyed by form ID) automatically.
|
||||
|
||||
```js
|
||||
{
|
||||
form: {
|
||||
DetailEditForm: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: "Form_DetailEditForm_Name",
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: "My Campaign"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Forms built using `FormBuilder` will tidy up their state when unmounted.
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
/* global jest, describe, expect, it, beforeEach */
|
||||
|
||||
jest.unmock('deep-freeze-strict');
|
||||
jest.unmock('../FormReducer');
|
||||
jest.unmock('../FormActionTypes');
|
||||
|
||||
import deepFreeze from 'deep-freeze-strict';
|
||||
import { ACTION_TYPES } from '../FormActionTypes';
|
||||
import formReducer from '../FormReducer';
|
||||
|
||||
describe('formReducer', () => {
|
||||
describe('ADD_FORM', () => {
|
||||
const initialState = deepFreeze({
|
||||
DetailEditForm: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_DetailEditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
submitting: false,
|
||||
},
|
||||
});
|
||||
|
||||
it('should add a form', () => {
|
||||
const payload = {
|
||||
formState: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_EditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
id: 'EditForm',
|
||||
messages: [],
|
||||
},
|
||||
};
|
||||
|
||||
const nextState = formReducer(initialState, {
|
||||
type: ACTION_TYPES.ADD_FORM,
|
||||
payload,
|
||||
});
|
||||
|
||||
expect(nextState.DetailEditForm).toBeDefined();
|
||||
expect(nextState.EditForm).toBeDefined();
|
||||
expect(nextState.EditForm.fields).toBeDefined();
|
||||
expect(nextState.EditForm.fields[0].data).toBeDefined();
|
||||
expect(nextState.EditForm.fields[0].id).toBe('Form_EditForm_Name');
|
||||
expect(nextState.EditForm.fields[0].messages).toBeDefined();
|
||||
expect(nextState.EditForm.fields[0].valid).toBe(true);
|
||||
expect(nextState.EditForm.fields[0].value).toBe('Test');
|
||||
expect(nextState.EditForm.submitting).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('REMOVE_FORM', () => {
|
||||
const initialState = deepFreeze({
|
||||
DetailEditForm: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_DetailEditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
},
|
||||
EditForm: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_EditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
it('should remove the form', () => {
|
||||
const nextState = formReducer(initialState, {
|
||||
type: ACTION_TYPES.REMOVE_FORM,
|
||||
payload: { formId: 'DetailEditForm' },
|
||||
});
|
||||
|
||||
expect(nextState.DetailEditForm).toBeUndefined();
|
||||
expect(nextState.EditForm).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('UPDATE_FIELD', () => {
|
||||
const initialState = deepFreeze({
|
||||
DetailEditForm: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_DetailEditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
it('should update properties of a form field', () => {
|
||||
const nextState = formReducer(initialState, {
|
||||
type: ACTION_TYPES.UPDATE_FIELD,
|
||||
payload: {
|
||||
formId: 'DetailEditForm',
|
||||
updates: {
|
||||
id: 'Form_DetailEditForm_Name',
|
||||
value: 'Updated',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(nextState.DetailEditForm.fields[0].value).toBe('Updated');
|
||||
});
|
||||
});
|
||||
|
||||
describe('SUBMIT_FORM_SUCCESS', () => {
|
||||
const initialState = deepFreeze({
|
||||
DetailEditForm: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_DetailEditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
submitting: true,
|
||||
},
|
||||
});
|
||||
|
||||
it('should add top level form messages', () => {
|
||||
const nextState = formReducer(initialState, {
|
||||
type: ACTION_TYPES.SUBMIT_FORM_SUCCESS,
|
||||
payload: {
|
||||
id: 'DetailEditForm',
|
||||
response: {
|
||||
id: 'DetailEditForm',
|
||||
state: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_DetailEditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
messages: [
|
||||
{
|
||||
type: 'good',
|
||||
value: 'Saved.',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(nextState.DetailEditForm.messages).toBeDefined();
|
||||
expect(nextState.DetailEditForm.messages.length).toBe(1);
|
||||
expect(nextState.DetailEditForm.messages[0].type).toBe('good');
|
||||
expect(nextState.DetailEditForm.messages[0].value).toBe('Saved.');
|
||||
expect(nextState.DetailEditForm.submitting).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('SUBMIT_FORM_REQUEST', () => {
|
||||
it('should set submitting to true', () => {
|
||||
const initialState = deepFreeze({
|
||||
DetailEditForm: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_DetailEditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
submitting: false,
|
||||
},
|
||||
});
|
||||
|
||||
const nextState = formReducer(initialState, {
|
||||
type: ACTION_TYPES.SUBMIT_FORM_REQUEST,
|
||||
payload: { formId: 'DetailEditForm' },
|
||||
});
|
||||
|
||||
expect(nextState.DetailEditForm.submitting).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('SUBMIT_FORM_FAILURE', () => {
|
||||
it('should set submitting to false', () => {
|
||||
const initialState = deepFreeze({
|
||||
DetailEditForm: {
|
||||
fields: [
|
||||
{
|
||||
data: [],
|
||||
id: 'Form_DetailEditForm_Name',
|
||||
messages: [],
|
||||
valid: true,
|
||||
value: 'Test',
|
||||
},
|
||||
],
|
||||
submitting: true,
|
||||
},
|
||||
});
|
||||
|
||||
const nextState = formReducer(initialState, {
|
||||
type: ACTION_TYPES.SUBMIT_FORM_FAILURE,
|
||||
payload: { formId: 'DetailEditForm' },
|
||||
});
|
||||
|
||||
expect(nextState.DetailEditForm.submitting).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -2,6 +2,8 @@ import ACTION_TYPES from './SchemaActionTypes';
|
|||
|
||||
/**
|
||||
* Sets the schema being used to generate the current form layout.
|
||||
* Note that the `state` key just determines the initial form field values,
|
||||
* and is overruled by redux-form behaviour (stored in separate reducer key)
|
||||
*
|
||||
* @param string schema - JSON schema for the layout.
|
||||
*/
|
||||
|
|
|
|||
70
npm-shrinkwrap.json
generated
70
npm-shrinkwrap.json
generated
|
|
@ -8388,6 +8388,76 @@
|
|||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-3.0.5.tgz"
|
||||
},
|
||||
"redux-form": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/redux-form/-/redux-form-6.0.5.tgz",
|
||||
"dependencies": {
|
||||
"array-findindex-polyfill": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/array-findindex-polyfill/-/array-findindex-polyfill-0.1.0.tgz"
|
||||
},
|
||||
"es6-error": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es6-error/-/es6-error-3.1.0.tgz"
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz"
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.1.tgz",
|
||||
"dependencies": {
|
||||
"loose-envify": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.2.0.tgz",
|
||||
"dependencies": {
|
||||
"js-tokens": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-1.0.3.tgz"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"is-promise": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz"
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.16.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.16.0.tgz"
|
||||
},
|
||||
"lodash-es": {
|
||||
"version": "4.16.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.16.0.tgz"
|
||||
},
|
||||
"shallowequal": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
|
||||
"dependencies": {
|
||||
"lodash.keys": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
|
||||
"dependencies": {
|
||||
"lodash._getnative": {
|
||||
"version": "3.9.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz"
|
||||
},
|
||||
"lodash.isarguments": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz"
|
||||
},
|
||||
"lodash.isarray": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"redux-logger": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-2.6.1.tgz"
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@
|
|||
"react-router": "^2.4.1",
|
||||
"react-router-redux": "^4.0.5",
|
||||
"redux": "https://registry.npmjs.org/redux/-/redux-3.0.5.tgz",
|
||||
"redux-form": "^6.0.2",
|
||||
"redux-thunk": "^2.1.0",
|
||||
"tether": "^1.3.2",
|
||||
"url": "^0.11.0"
|
||||
|
|
@ -104,7 +105,8 @@
|
|||
"mocksPattern": "mocks",
|
||||
"unmockedModulePathPatterns": [
|
||||
"<rootDir>/node_modules/react",
|
||||
"<rootDir>/node_modules/qs"
|
||||
"<rootDir>/node_modules/qs",
|
||||
"<rootDir>/node_modules/redux-form"
|
||||
],
|
||||
"bail": true,
|
||||
"testRunner": "<rootDir>/node_modules/jest-cli/src/testRunners/jasmine/jasmine2.js"
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ const config = [
|
|||
'components/FormBuilderModal/FormBuilderModal': 'FormBuilderModal',
|
||||
'components/GridField/GridField': 'GridField',
|
||||
'components/Toolbar/Toolbar': 'Toolbar',
|
||||
'containers/FormBuilderLoader/FormBuilderLoader': 'FormBuilderLoader',
|
||||
'deep-freeze-strict': 'DeepFreezeStrict',
|
||||
i18n: 'i18n',
|
||||
jQuery: 'jQuery',
|
||||
|
|
@ -85,6 +86,7 @@ const config = [
|
|||
'react-router': 'ReactRouter',
|
||||
'react-addons-css-transition-group': 'ReactAddonsCssTransitionGroup',
|
||||
react: 'React',
|
||||
'redux-form': 'ReduxForm',
|
||||
'redux-thunk': 'ReduxThunk',
|
||||
redux: 'Redux',
|
||||
config: 'Config',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user