feat: add widgets schema validation (#3841)
This commit is contained in:
@ -23,11 +23,11 @@ Register a custom widget.
|
||||
|
||||
```js
|
||||
// Using global window object
|
||||
CMS.registerWidget(name, control, [preview]);
|
||||
CMS.registerWidget(name, control, [preview], [schema]);
|
||||
|
||||
// Using npm module import
|
||||
import CMS from 'netlify-cms';
|
||||
CMS.registerWidget(name, control, [preview]);
|
||||
CMS.registerWidget(name, control, [preview], [schema]);
|
||||
```
|
||||
|
||||
**Params:**
|
||||
@ -35,29 +35,34 @@ CMS.registerWidget(name, control, [preview]);
|
||||
| Param | Type | Description |
|
||||
| ----------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `name` | `string` | Widget name, allows this widget to be used via the field `widget` property in config |
|
||||
| `control` | `React.Component` or `string`| <ul><li>React component that renders the control, receives the following props: <ul><li>**value:** Current field value</li><li>**onChange:** Callback function to update the field value</li></ul></li><li>Name of a registered widget whose control should be used (includes built in widgets).</li></ul> |
|
||||
| `control` | `React.Component` or `string`| <ul><li>React component that renders the control, receives the following props: <ul><li>**value:** Current field value</li><li>**field:** Immutable map of current field configuration</li><li>**forID:** Unique identifier for the field</li><li>**classNameWrapper:** class name to apply CMS styling to the field</li><li>**onChange:** Callback function to update the field value</li></ul></li><li>Name of a registered widget whose control should be used (includes built in widgets).</li></ul> |
|
||||
| [`preview`] | `React.Component`, optional | Renders the widget preview, receives the following props: <ul><li>**value:** Current preview value</li><li>**field:** Immutable map of current field configuration</li><li>**metadata:** Immutable map of any available metadata for the current field</li><li>**getAsset:** Function for retrieving an asset url for image/file fields</li><li>**entry:** Immutable Map of all entry data</li><li>**fieldsMetaData:** Immutable map of metadata from all fields.</li></ul> |
|
||||
|
||||
* **field:** The field type that this widget will be used for.
|
||||
* **control:** A React component that renders the editing interface for this field. Two props will be passed:
|
||||
* **value:** The current value for this field.
|
||||
* **onChange:** Callback function to update the field value.
|
||||
* **preview (optional):** A React component that renders the preview of how the content will look. A `value` prop will be passed to this component.
|
||||
| [`schema`] | `JSON Schema object`, optional | Enforces a schema for the widget's field configuration
|
||||
|
||||
**Example:**
|
||||
|
||||
`admin/index.html`
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
|
||||
<script>
|
||||
var CategoriesControl = createClass({
|
||||
handleChange: function(e) {
|
||||
this.props.onChange(e.target.value.split(',').map((e) => e.trim()));
|
||||
const separator = this.props.field.get('separator', ', ')
|
||||
this.props.onChange(e.target.value.split(separator).map((e) => e.trim()));
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const separator = this.props.field.get('separator', ', ');
|
||||
var value = this.props.value;
|
||||
return h('input', { type: 'text', value: value ? value.join(', ') : '', onChange: this.handleChange });
|
||||
}
|
||||
return h('input', {
|
||||
id: this.props.forID,
|
||||
className: this.props.classNameWrapper,
|
||||
type: 'text',
|
||||
value: value ? value.join(separator) : '',
|
||||
onChange: this.handleChange,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
var CategoriesPreview = createClass({
|
||||
@ -70,10 +75,33 @@ var CategoriesPreview = createClass({
|
||||
}
|
||||
});
|
||||
|
||||
CMS.registerWidget('categories', CategoriesControl, CategoriesPreview);
|
||||
var schema = {
|
||||
properties: {
|
||||
separator: { type: 'string' },
|
||||
},
|
||||
}
|
||||
|
||||
CMS.registerWidget('categories', CategoriesControl, CategoriesPreview, schema);
|
||||
</script>
|
||||
```
|
||||
|
||||
`admin/config.yml`
|
||||
|
||||
```yml
|
||||
collections:
|
||||
- name: posts
|
||||
label: Posts
|
||||
folder: content/posts
|
||||
fields:
|
||||
- name: title
|
||||
label: Title
|
||||
widget: string
|
||||
- name: categories
|
||||
label: Categories
|
||||
widget: categories
|
||||
separator: __
|
||||
```
|
||||
|
||||
## `registerEditorComponent`
|
||||
|
||||
Register a block level component for the Markdown editor:
|
||||
|
@ -10,10 +10,11 @@ The list widget allows you to create a repeatable item in the UI which saves as
|
||||
- **Data type:** list of widget values
|
||||
- **Options:**
|
||||
- `default`: if `fields` is specified, declare defaults on the child widgets; if not, you may specify a list of strings to populate the text field
|
||||
- `allow_add`: if added and labeled `false`, button to add additional widgets disappears
|
||||
- `collapsed`: if added and labeled `false`, the list widget's content does not collapse by default
|
||||
- `allow_add`: if added and set to `false`, hides the button to add additional items
|
||||
- `collapsed`: if added and set to `false`, the list widget's content does not collapse by default
|
||||
- `summary`: allows customization of a collapsed list item object in a similar way to a [collection summary](/docs/configuration-options/?#summary)
|
||||
- `minimize_collapsed`: if added and labeled `true`, the list widget's content will be completely hidden instead of only collapsed if the list widget itself is collapsed
|
||||
- `minimize_collapsed`: if added and set to `true`, the list widget's content will be completely hidden instead of only collapsed if the list widget itself is collapsed
|
||||
- `label_singular`: singular label to show as a part of the add button
|
||||
- `field`: a single widget field to be repeated
|
||||
- `fields`: a nested list of multiple widget fields to be included in each repeatable iteration
|
||||
- **Example** (`field`/`fields` not specified):
|
||||
|
Reference in New Issue
Block a user