mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Documentation updates for new Injector / FormStateManager API
This commit is contained in:
parent
9392380dd1
commit
dd189b917e
@ -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
|
||||||
|
@ -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?',
|
||||||
|
Loading…
Reference in New Issue
Block a user