decap-cms-widget-list - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [3.0.2](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-list@3.0.1...decap-cms-widget-list@3.0.2) (2023-09-06)
+
+**Note:** Version bump only for package decap-cms-widget-list
+
+
+
+
+
 ## [3.0.1](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-list@3.0.0...decap-cms-widget-list@3.0.1) (2023-08-25)
@@ -8,0 +16,0 @@

package.json

 {
   "name": "decap-cms-widget-list",
   "description": "Widget for editing lists in Decap CMS.",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "homepage": "https://www.decapcms.org/docs/widgets/#list",
@@ -24,3 +24,5 @@ "repository": "https://github.com/decaporg/decap-cms/tree/master/packages/decap-cms-widget-list",
   "dependencies": {
-    "react-sortable-hoc": "^2.0.0"
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2"
   },
@@ -39,3 +41,3 @@ "peerDependencies": {
   },
-  "gitHead": "2f0f9dbd1654868da59cbdbaa2c9dce1d1bcb2c6"
+  "gitHead": "b1eae3bbb1661dfa5e3fc0407f03a2e0d564c14e"
 }

src/ListControl.js

@@ -9,5 +9,15 @@ import React from 'react';
 import uuid from 'uuid/v4';
-import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import DecapCmsWidgetObject from 'decap-cms-widget-object';
 import {
+  DndContext,
+  MouseSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { SortableContext, useSortable } from '@dnd-kit/sortable';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import { CSS } from '@dnd-kit/utilities';
+import {
   ListItemTopBar,
@@ -32,4 +42,2 @@ ObjectWidgetTopBar,
 
-const SortableListItem = SortableElement(ListItem);
-
 const StyledListItemTopBar = styled(ListItemTopBar)`
@@ -70,6 +78,66 @@ background-color: ${colors.textFieldBorder};
 
-const SortableList = SortableContainer(({ items, renderItem }) => {
-  return <div>{items.map(renderItem)}</div>;
-});
+function SortableList({ items, children, onSortEnd, keys }) {
+  const activationConstraint = { distance: 4 };
+  const sensors = useSensors(
+    useSensor(MouseSensor, { activationConstraint }),
+    useSensor(TouchSensor, { activationConstraint }),
+  );
 
+  function handleSortEnd({ active, over }) {
+    onSortEnd({
+      oldIndex: keys.indexOf(active.id),
+      newIndex: keys.indexOf(over.id),
+    });
+  }
+
+  return (
+    <div>
+      <DndContext
+        modifiers={[restrictToParentElement]}
+        collisionDetection={closestCenter}
+        sensors={sensors}
+        onDragEnd={handleSortEnd}
+      >
+        <SortableContext items={items}>{children}</SortableContext>
+      </DndContext>
+    </div>
+  );
+}
+
+function SortableListItem(props) {
+  const { setNodeRef, transform, transition } = useSortable({
+    id: props.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const { collapsed } = props;
+
+  return (
+    <ListItem
+      sortable
+      ref={setNodeRef}
+      style={style}
+      css={[styles.listControlItem, collapsed && styles.listControlItemCollapsed]}
+    >
+      {props.children}
+    </ListItem>
+  );
+}
+
+function DragHandle({ children, id }) {
+  const { attributes, listeners } = useSortable({
+    id,
+  });
+
+  return (
+    <div {...attributes} {...listeners}>
+      {children}
+    </div>
+  );
+}
+
 const valueTypes = {
@@ -530,2 +598,5 @@ SINGLE: 'SINGLE',
     }
+
+    console.log('kurwa', classNameWrapper);
+
     return (
@@ -536,2 +607,4 @@ <SortableListItem
         key={key}
+        id={key}
+        keys={keys}
       >
@@ -551,4 +624,5 @@ {isVariableTypesList && (
           onCollapseToggle={partial(this.handleItemCollapseToggle, index)}
+          dragHandle={DragHandle}
+          id={key}
           onRemove={partial(this.handleRemove, index)}
-          dragHandleHOC={SortableHandle}
           data-testid={`styled-list-item-top-bar-${key}`}
@@ -604,6 +678,7 @@ />
           onRemove={partial(this.handleRemove, index, key)}
-          dragHandleHOC={SortableHandle}
+          dragHandle={DragHandle}
+          id={key}
         />
         <NestedObjectLabel collapsed={true} error={true}>
-          {errorMessage}
+          {errorMessage}aaaasdd
         </NestedObjectLabel>
@@ -616,3 +691,3 @@ </SortableListItem>
     const { value, forID, field, classNameWrapper, t } = this.props;
-    const { itemsCollapsed, listCollapsed } = this.state;
+    const { itemsCollapsed, listCollapsed, keys } = this.state;
     const items = value || List();
@@ -626,2 +701,4 @@ const label = field.get('label', field.get('name'));
 
+    const itemsArray = keys.map(key => ({ id: key }));
+
     return (
@@ -651,9 +728,5 @@ <ClassNames>
             {(!selfCollapsed || !minimizeCollapsedItems) && (
-              <SortableList
-                items={items}
-                renderItem={this.renderItem}
-                onSortEnd={this.onSortEnd}
-                useDragHandle
-                lockAxis="y"
-              />
+              <SortableList items={itemsArray} keys={keys} onSortEnd={this.onSortEnd}>
+                {items.map(this.renderItem)}
+              </SortableList>
             )}
@@ -660,0 +733,0 @@ </div>

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1347333

increased by14.95%

Lines of code

4050

increased by10.41%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Dependency count

13

increased by18.18%

Number of low supply chain risk alerts

18

increased by12.5%

Dependency changes

• + Added@dnd-kit/core@^6.0.8

• + Added@dnd-kit/modifiers@^6.0.1

• + Added@dnd-kit/sortable@^7.0.2

• + Added@dnd-kit/accessibility@3.1.1(transitive)

• + Added@dnd-kit/core@6.3.1(transitive)

• + Added@dnd-kit/modifiers@6.0.1(transitive)

• + Added@dnd-kit/sortable@7.0.2(transitive)

• + Added@dnd-kit/utilities@3.2.2(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removedreact-sortable-hoc@^2.0.0

• - Removedreact-dom@17.0.2(transitive)

• - Removedreact-sortable-hoc@2.0.0(transitive)

• - Removedscheduler@0.20.2(transitive)