decap-cms-widget-list 3.6.0 → 3.6.2

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "decap-cms-widget-list",
   "description": "Widget for editing lists in Decap CMS.",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "homepage": "https://www.decapcms.org/docs/widgets/#list",
-  "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-list",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-list"
+  },
   "bugs": "https://github.com/decaporg/decap-cms/issues",
   "module": "dist/esm/index.js",
   "main": "dist/decap-cms-widget-list.js",
@@ -15,11 +18,6 @@
     "object"
   ],
   "sideEffects": false,
-  "scripts": {
-    "develop": "npm run build:esm -- --watch",
-    "build": "cross-env NODE_ENV=production webpack",
-    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
-  },
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
@@ -29,14 +27,19 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "decap-cms-lib-widgets": "^3.0.0",
-    "decap-cms-ui-default": "^3.0.0",
-    "decap-cms-widget-object": "^3.0.0",
-    "immutable": "^3.7.6",
+    "immutable": "^4.3.9",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react": "^19.1.0",
-    "react-immutable-proptypes": "^2.1.0"
+    "react-immutable-proptypes": "^2.1.0",
+    "uuid": "^8.3.2",
+    "decap-cms-lib-widgets": "3.4.2",
+    "decap-cms-ui-default": "3.9.2",
+    "decap-cms-widget-object": "3.7.2"
   },
-  "gitHead": "567a80101f4846853701ad7d8abdc29b5e4fab56"
-}
+  "scripts": {
+    "develop": "pnpm run build:esm --watch",
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
+  }
+}

package/src/ListControl.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
@@ -171,7 +171,7 @@ function LabelComponent({ field, isActive, hasErrors, uniqueFieldId, isFieldOpti
   );
 }
 
-export default class ListControl extends React.Component {
+export default class ListControl extends Component {
   childRefs = {};
 
   static propTypes = {
@@ -419,20 +419,32 @@ export default class ListControl extends React.Component {
   getObjectValue = idx => this.props.value.get(idx) || Map();
 
   handleChangeFor(index) {
+    const key = this.state.keys[index];
+
     return (f, newValue, newMetadata) => {
       const { value, metadata, onChange, field } = this.props;
+
+      // Resolve the item's position when the change fires rather than when this
+      // handler was created. If an item has been removed or moved in between,
+      // `index` now points at a different item, or past the end of the list.
+      const currentIndex = this.state.keys.indexOf(key);
+
+      if (currentIndex === -1) {
+        return;
+      }
+
       const collectionName = field.get('name');
       const listFieldObjectWidget = field.getIn(['field', 'widget']) === 'object';
       const withNameKey =
         this.getValueType() !== valueTypes.SINGLE ||
         (this.getValueType() === valueTypes.SINGLE && listFieldObjectWidget);
       const newObjectValue = withNameKey
-        ? this.getObjectValue(index).set(f.get('name'), newValue)
+        ? this.getObjectValue(currentIndex).set(f.get('name'), newValue)
         : newValue;
       const parsedMetadata = {
         [collectionName]: Object.assign(metadata ? metadata.toJS() : {}, newMetadata || {}),
       };
-      onChange(value.set(index, newObjectValue), parsedMetadata);
+      onChange(value.set(currentIndex, newObjectValue), parsedMetadata);
     };
   }
 

package/src/__tests__/ListControl.spec.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 
@@ -787,4 +786,77 @@ describe('ListControl', () => {
     listControl.validate();
     expect(props.onValidateObject).toHaveBeenCalledWith('forID', []);
   });
+
+  const typedField = fromJS({
+    name: 'list',
+    label: 'List',
+    types: [
+      {
+        name: 'type_one',
+        widget: 'object',
+        fields: [{ name: 'text', widget: 'markdown', label: 'Text' }],
+      },
+    ],
+  });
+
+  it('should apply a change to the item it was made on after an earlier item is removed', () => {
+    const value = fromJS([
+      { type: 'type_one', text: 'one' },
+      { type: 'type_one', text: 'two' },
+      { type: 'type_one', text: 'three' },
+    ]);
+
+    let control;
+    const { getAllByText, rerender } = render(
+      <ListControl ref={ref => (control = ref)} {...props} field={typedField} value={value} />,
+    );
+
+    const changeThirdItem = control.handleChangeFor(2);
+
+    fireEvent.click(getAllByText('Remove')[0]);
+    const afterRemoval = props.onChange.mock.calls[0][0];
+    rerender(
+      <ListControl
+        ref={ref => (control = ref)}
+        {...props}
+        field={typedField}
+        value={afterRemoval}
+      />,
+    );
+
+    changeThirdItem(fromJS({ name: 'text' }), 'three edited');
+
+    const written = props.onChange.mock.calls[1][0].toJS();
+    expect(written).toHaveLength(2);
+    expect(written[1]).toEqual({ type: 'type_one', text: 'three edited' });
+  });
+
+  it('should discard a change made on an item that has since been removed', () => {
+    const value = fromJS([
+      { type: 'type_one', text: 'one' },
+      { type: 'type_one', text: 'two' },
+    ]);
+
+    let control;
+    const { getAllByText, rerender } = render(
+      <ListControl ref={ref => (control = ref)} {...props} field={typedField} value={value} />,
+    );
+
+    const changeSecondItem = control.handleChangeFor(1);
+
+    fireEvent.click(getAllByText('Remove')[1]);
+    const afterRemoval = props.onChange.mock.calls[0][0];
+    rerender(
+      <ListControl
+        ref={ref => (control = ref)}
+        {...props}
+        field={typedField}
+        value={afterRemoval}
+      />,
+    );
+
+    changeSecondItem(fromJS({ name: 'text' }), 'text for a removed item');
+
+    expect(props.onChange).toHaveBeenCalledTimes(1);
+  });
 });

package/LICENSE

@@ -1,22 +0,0 @@
-Copyright (c) 2016 Netlify <decap@p-m.si>
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.