gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add widgets schema validation (#3841)

Browse Source
This commit is contained in:
Bartholomew
2020-06-03 14:43:34 +01:00
committed by GitHub
parent 995739a85c
commit 2b46608f86
27 changed files with 304 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
website/content/docs/custom-widgets.md
View File

@ -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:

7
website/content/docs/widgets/list.md
View File

@ -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):