decap-cms-widget-file 3.0.1 → 3.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-widget-file",
   "description": "Widget for uploading files in Decap CMS.",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "homepage": "https://www.decapcms.org/docs/widgets/#file",
   "repository": "https://github.com/decaporg/decap-cms/tree/master/packages/decap-cms-widget-file",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
@@ -22,9 +22,11 @@
     "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",
+    "@dnd-kit/sortable": "^7.0.2",
     "array-move": "4.0.0",
-    "common-tags": "^1.8.0",
-    "react-sortable-hoc": "^2.0.0"
+    "common-tags": "^1.8.0"
   },
   "peerDependencies": {
     "@emotion/core": "^10.0.35",
@@ -36,5 +38,5 @@
     "react-immutable-proptypes": "^2.1.0",
     "uuid": "^3.3.2"
   },
-  "gitHead": "2f0f9dbd1654868da59cbdbaa2c9dce1d1bcb2c6"
+  "gitHead": "b1eae3bbb1661dfa5e3fc0407f03a2e0d564c14e"
 }

package/src/withFileControl.js

@@ -17,8 +17,18 @@ import {
   IconButton,
 } from 'decap-cms-ui-default';
 import { basename } from 'decap-cms-lib-util';
-import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import { arrayMoveImmutable as arrayMove } from 'array-move';
+import {
+  DndContext,
+  MouseSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { SortableContext, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -64,9 +74,20 @@ function SortableImageButtons({ onRemove, onReplace }) {
   );
 }
 
-const SortableImage = SortableElement(({ itemValue, getAsset, field, onRemove, onReplace }) => {
+function SortableImage(props) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: props.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const { itemValue, getAsset, field, onRemove, onReplace } = props;
+
   return (
-    <div>
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
       <ImageWrapper sortable>
         <Image src={getAsset(itemValue, field) || ''} />
       </ImageWrapper>
@@ -77,32 +98,61 @@ const SortableImage = SortableElement(({ itemValue, getAsset, field, onRemove, o
       ></SortableImageButtons>
     </div>
   );
-});
-
-const SortableMultiImageWrapper = SortableContainer(
-  ({ items, getAsset, field, onRemoveOne, onReplaceOne }) => {
-    return (
-      <div
-        css={css`
-          display: flex;
-          flex-wrap: wrap;
-        `}
+}
+
+function SortableMultiImageWrapper({
+  items,
+  getAsset,
+  field,
+  onSortEnd,
+  onRemoveOne,
+  onReplaceOne,
+}) {
+  const activationConstraint = { distance: 4 };
+  const sensors = useSensors(
+    useSensor(MouseSensor, { activationConstraint }),
+    useSensor(TouchSensor, { activationConstraint }),
+  );
+
+  function handleSortEnd({ active, over }) {
+    onSortEnd({
+      oldIndex: items.findIndex(item => item.id === active.id),
+      newIndex: items.findIndex(item => item.id === over.id),
+    });
+  }
+
+  return (
+    <div
+      // eslint-disable-next-line react/no-unknown-property
+      css={css`
+        display: flex;
+        flex-wrap: wrap;
+      `}
+    >
+      <DndContext
+        modifiers={[restrictToParentElement]}
+        collisionDetection={closestCenter}
+        sensors={sensors}
+        onDragEnd={handleSortEnd}
       >
-        {items.map((itemValue, index) => (
-          <SortableImage
-            key={`item-${itemValue}`}
-            index={index}
-            itemValue={itemValue}
-            getAsset={getAsset}
-            field={field}
-            onRemove={onRemoveOne(index)}
-            onReplace={onReplaceOne(index)}
-          />
-        ))}
-      </div>
-    );
-  },
-);
+        <SortableContext items={items}>
+          {items.map((item, index) => (
+            <SortableImage
+              key={item.id}
+              id={item.id}
+              index={index}
+              itemValue={item.value}
+              getAsset={getAsset}
+              field={field}
+              onRemove={onRemoveOne(index)}
+              onReplace={onReplaceOne(index)}
+            ></SortableImage>
+          ))}
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}
 
 const FileLink = styled.a`
   margin-bottom: 20px;
@@ -152,7 +202,20 @@ function sizeOfValue(value) {
 }
 
 function valueListToArray(value) {
-  return List.isList(value) ? value.toArray() : value;
+  return List.isList(value) ? value.toArray() : value ?? [];
+}
+
+function valueListToSortableArray(value) {
+  if (!isMultiple(value)) {
+    return value;
+  }
+
+  const valueArray = valueListToArray(value).map(value => ({
+    id: uuid(),
+    value,
+  }));
+
+  return valueArray;
 }
 
 const warnDeprecatedOptions = once(field =>
@@ -259,7 +322,7 @@ export default function withFileControl({ forImage } = {}) {
     };
 
     onRemoveOne = index => () => {
-      const { value } = this.props;
+      const value = valueListToArray(this.props.value);
       value.splice(index, 1);
       return this.props.onChange(sizeOfValue(value) > 0 ? [...value] : null);
     };
@@ -346,11 +409,11 @@ export default function withFileControl({ forImage } = {}) {
 
     renderImages = () => {
       const { getAsset, value, field } = this.props;
-
+      const items = valueListToSortableArray(value);
       if (isMultiple(value)) {
         return (
           <SortableMultiImageWrapper
-            items={value}
+            items={items}
             onSortEnd={this.onSortEnd}
             onRemoveOne={this.onRemoveOne}
             onReplaceOne={this.onReplaceOne}