Documentation updates for new Injector / FormStateManager API

This commit is contained in:
Aaron Carlino 2017-07-31 16:55:44 +12:00
parent 9392380dd1
commit dd189b917e
2 changed files with 22 additions and 13 deletions

View File

@ -510,7 +510,7 @@ Injector.transform(
(updater) => { (updater) => {
updater.form.alterSchema( updater.form.alterSchema(
'AssetAdmin.*', 'AssetAdmin.*',
(values, form) => (form) =>
form.updateField('Title', { form.updateField('Title', {
myCustomProp: true myCustomProp: true
}) })
@ -520,7 +520,7 @@ Injector.transform(
); );
``` ```
The `alterSchema()` function takes a callback, with an instance of `SchemaStateManager` (`form` in the above example), and a map of the current form values as parameters. `SchemaStateMangaer` allows you to declaratively update the form schema API using several helper methods, including: The `alterSchema()` function takes a callback, with an instance of `FormStateManager` (`form` in the above example) as a parameter. `FormStateMangaer` allows you to declaratively update the form schema API using several helper methods, including:
* `updateField(fieldName:string, updates:object)` * `updateField(fieldName:string, updates:object)`
* `updateFields({ myFieldName: updates:object })` * `updateFields({ myFieldName: updates:object })`
@ -539,6 +539,15 @@ see http://redux-form.com/6.8.0/docs/api/Field.md/#props-you-can-pass-to-field-
It is critical that you end series of mutation calls with `getState()`. It is critical that you end series of mutation calls with `getState()`.
</div> </div>
In addition to mutation methods, several readonly methods are available on `FormSchemaManager` to read the current form state, including:
* `getValues()`: Returns a map of field names to their current values
* `getValue(fieldName:string)`: Returns the value of the given field
* `isDirty()`: Returns true if the form has been mutated from its original state
* `isPristine()`: Returns true if the form is in its original state
* `isValid()`: Returns true if the form has no validation errors
* `isInvalid()`: Returns true if the form has validation errors
### Adding validation to a form ### Adding validation to a form
Validation for React-rendered forms is handled by the [redux-form](http://redux-form.com) package. You can inject your own middleware to add custom validation rules using the `updater.form.addValidation()` function. Validation for React-rendered forms is handled by the [redux-form](http://redux-form.com) package. You can inject your own middleware to add custom validation rules using the `updater.form.addValidation()` function.
@ -599,7 +608,7 @@ Most importantly, it helps to understand the "Action" sub-tab on the right panel
We use currying to supply utilities which your transformer may require to handle the transformation. We use currying to supply utilities which your transformer may require to handle the transformation.
- `originalReducer` - reducer callback which the transformer is customising, this will need to be called in most cases. This will also callback other transformations down the chain of execution. Not calling this will break the chain. - `originalReducer` - reducer callback which the transformer is customising, this will need to be called in most cases. This will also callback other transformations down the chain of execution. Not calling this will break the chain.
- `globalState` - state of the global Redux store. There may be data outside the current scope in the reducer which you may need to help determine the transformation. - `getGlobalState` - A function that gets the state of the global Redux store. There may be data outside the current scope in the reducer which you may need to help determine the transformation.
- `state` - current state of the current scope. This is what should be used to form the new state. - `state` - current state of the current scope. This is what should be used to form the new state.
- `type` - the action to fire, like in any reducer in Redux. This helps determine if your transformer should do anything. - `type` - the action to fire, like in any reducer in Redux. This helps determine if your transformer should do anything.
- `payload` - the new data sent with the action to mutate the Redux store. - `payload` - the new data sent with the action to mutate the Redux store.
@ -631,7 +640,7 @@ This example we will illustrate modifying the payload to get different data save
We will rename anything in the breadcrumbs that is displaying "Files" to display "Custom Files" instead. We will rename anything in the breadcrumbs that is displaying "Files" to display "Custom Files" instead.
```js ```js
const MyReducerTransformer = (originalReducer) => (globalState) => (state, { type, payload }) => { const MyReducerTransformer = (originalReducer) => (getGlobalState) => (state, { type, payload }) => {
switch (type) { switch (type) {
case 'SET_BREADCRUMBS': { case 'SET_BREADCRUMBS': {
return originalReducer(state, { return originalReducer(state, {
@ -654,7 +663,7 @@ const MyReducerTransformer = (originalReducer) => (globalState) => (state, { typ
Accessing the globalState is easy, as it is passed in as part of the curried functions definition. Accessing the globalState is easy, as it is passed in as part of the curried functions definition.
```js ```js
export default (originalReducer) => (globalState) => (state, { type, payload }) => { export default (originalReducer) => (getGlobalState) => (state, { type, payload }) => {
const baseUrl = globalState.config.baseUrl; const baseUrl = globalState.config.baseUrl;
switch (type) { switch (type) {
@ -685,7 +694,7 @@ There are valid reasons to break the chain of reducer transformations, such as c
However, like an original reducer in redux, you will still need to return the original state. However, like an original reducer in redux, you will still need to return the original state.
```js ```js
export default (originalReducer) => (globalState) => (state, { type, payload }) => { export default (originalReducer) => (getGlobalState) => (state, { type, payload }) => {
switch (type) { switch (type) {
case 'CANCEL_THIS_ACTION': { case 'CANCEL_THIS_ACTION': {
return state; return state;
@ -700,7 +709,7 @@ You could manipulate the action called by the originalReducer, there isn't an ex
code will present the theory of how it can be achieved. code will present the theory of how it can be achieved.
```js ```js
default (originalReducer) => (globalState) => (state, { type, payload }) => { default (originalReducer) => (getGlobalState) => (state, { type, payload }) => {
switch (type) { switch (type) {
case 'REMOVE_ERROR': { case 'REMOVE_ERROR': {
// we'd like to archive errors instead of removing them // we'd like to archive errors instead of removing them

View File

@ -49,10 +49,10 @@ Injector.transform(
(updater) => { (updater) => {
updater.form.alterSchema( updater.form.alterSchema(
'AssetAdmin.*', 'AssetAdmin.*',
(values, form) => (form) =>
form form
.updateField('State', { .updateField('State', {
shouldHide: values.Country !== 'US' shouldHide: form.getValue('Country') !== 'US'
}) })
.getState() .getState()
) )
@ -71,9 +71,9 @@ Injector.transform(
(updater) => { (updater) => {
updater.form.alterSchema( updater.form.alterSchema(
'AssetAdmin.*', 'AssetAdmin.*',
(values, form) => (form) =>
form form
.setFieldClass('Price', 'danger', (values.TicketsRemaining < 10)) .setFieldClass('Price', 'danger', (form.getValue('TicketsRemaining') < 10))
.getState() .getState()
); );
} }
@ -116,7 +116,7 @@ Injector.transform(
(updater) => { (updater) => {
updater.form.alterSchema( updater.form.alterSchema(
'AssetAdmin.*', 'AssetAdmin.*',
(values, form) => (form) =>
form form
.setFieldComponent('PhoneNumber', 'PrettyPhoneNumberField') .setFieldComponent('PhoneNumber', 'PrettyPhoneNumberField')
.getState() .getState()
@ -225,7 +225,7 @@ Injector.transform(
(updater) => { (updater) => {
updater.form.alterSchema( updater.form.alterSchema(
'AssetAdmin.*', 'AssetAdmin.*',
(values, form) => (form) =>
form form
.updateField('action_delete', { .updateField('action_delete', {
confirmText: 'Are you sure you want to delete?', confirmText: 'Are you sure you want to delete?',