feat: add add_to_top option to list widget (#4465)

packages/netlify-cms-widget-list/src/ListControl.js

@@ -180,16 +180,12 @@ export default class ListControl extends React.Component {
 
   handleAdd = e => {
     e.preventDefault();
-    const { value, onChange, field } = this.props;
+    const { field } = this.props;
     const parsedValue =
       this.getValueType() === valueTypes.SINGLE
         ? this.singleDefault()
         : fromJS(this.multipleDefault(field.get('fields')));
-    this.setState({
-      itemsCollapsed: [...this.state.itemsCollapsed, false],
-      keys: [...this.state.keys, uuid()],
-    });
-    onChange((value || List()).push(parsedValue));
+    this.addItem(parsedValue);
   };
 
   singleDefault = () => {
@@ -201,13 +197,8 @@ export default class ListControl extends React.Component {
   };
 
   handleAddType = (type, typeKey) => {
-    const { value, onChange } = this.props;
     const parsedValue = fromJS(this.mixedDefault(typeKey, type));
-    this.setState({
-      itemsCollapsed: [...this.state.itemsCollapsed, false],
-      keys: [...this.state.keys, uuid()],
-    });
-    onChange((value || List()).push(parsedValue));
+    this.addItem(parsedValue);
   };
 
   mixedDefault = (typeKey, type) => {
@@ -244,6 +235,26 @@ export default class ListControl extends React.Component {
     }, initialValue);
   };
 
+  addItem = parsedValue => {
+    const { value, onChange, field } = this.props;
+    const addToTop = field.get('add_to_top', false);
+
+    const itemKey = uuid();
+    this.setState({
+      itemsCollapsed: addToTop
+        ? [false, ...this.state.itemsCollapsed]
+        : [...this.state.itemsCollapsed, false],
+      keys: addToTop ? [itemKey, ...this.state.keys] : [...this.state.keys, itemKey],
+    });
+
+    const listValue = value || List();
+    if (addToTop) {
+      onChange(listValue.unshift(parsedValue));
+    } else {
+      onChange(listValue.push(parsedValue));
+    }
+  };
+
   processControlRef = ref => {
     if (!ref) return;
     const {

website/content/docs/widgets/list.md

@@ -19,6 +19,7 @@ The list widget allows you to create a repeatable item in the UI which saves as
   * `fields`: a nested list of multiple widget fields to be included in each repeatable iteration
   * `max`: maximum number of items in the list
   * `min`: minimum number of items in the list
+  * `add_to_top`: when `true`, new entries will be added to the top of the list
 * **Example** (`field`/`fields` not specified):
 
   ```yaml
@@ -92,4 +93,11 @@ The list widget allows you to create a repeatable item in the UI which saves as
     max: 3
     min: 1
     default: ["news"]
+  ```
+* **Example** (`add_to_top` marked `true`):
+  ```yaml
+  - label: "Tags"
+    name: "tags"
+    widget: "list"
+    add_to_top: true
   ```