npm - @contentful/field-editor-tags - Versions diffs - 1.4.0 → 1.4.1 - Mend

@contentful/field-editor-tags 1.4.0 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/cjs/TagsEditor.js CHANGED Viewed

@@ -9,11 +9,12 @@ Object.defineProperty(exports, "TagsEditor", {
     }
 });
 const _react = _interop_require_wildcard(require("react"));
-const _reactsortablehoc = require("react-sortable-hoc");
 const _f36components = require("@contentful/f36-components");
-const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
-const _arraymove = _interop_require_default(require("array-move"));
+const _core = require("@dnd-kit/core");
+const _modifiers = require("@dnd-kit/modifiers");
+const _sortable = require("@dnd-kit/sortable");
+const _utilities = require("@dnd-kit/utilities");
 const _emotion = require("emotion");
 const _noop = _interop_require_default(require("lodash/noop"));
 const _TagsEditorConstraints = require("./TagsEditorConstraints");
@@ -62,11 +63,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    dropContainer: (0, _emotion.css)({
-        whiteSpace: 'nowrap',
-        display: 'flex',
-        flexWrap: 'wrap'
-    }),
     input: (0, _emotion.css)({
         marginTop: _f36tokens.default.spacingS,
         marginBottom: _f36tokens.default.spacingM
@@ -81,59 +77,69 @@ const styles = {
             cursor: 'not-allowed !important',
             pointerEvents: 'none'
         }
-    }),
-    handle: (0, _emotion.css)({
-        lineHeight: '1.5rem',
-        padding: '0.375rem 0.625rem',
-        paddingRight: 0,
-        cursor: 'grab',
-        userSelect: 'none',
-        svg: {
-            fill: _f36tokens.default.gray500,
-            verticalAlign: 'middle'
-        }
     })
 };
-const SortablePillHandle = (0, _reactsortablehoc.SortableHandle)((props)=>_react.default.createElement("div", {
-        className: (0, _emotion.cx)(styles.handle, {
-            [styles.pillDisabled]: props.isDisabled
-        })
-    }, _react.default.createElement(_f36icons.DragIcon, {
-        variant: "muted"
-    })));
-const SortablePill = (0, _reactsortablehoc.SortableElement)((props)=>_react.default.createElement(_f36components.Pill, {
+const SortablePill = ({ id , label , index , disabled , onRemove  })=>{
+    const { listeners , setNodeRef , setActivatorNodeRef , transform , transition  } = (0, _sortable.useSortable)({
+        id
+    });
+    const style = {
+        transform: transform ? _utilities.CSS.Transform.toString({
+            ...transform,
+            scaleX: 1,
+            scaleY: 1
+        }) : '',
+        transition
+    };
+    return _react.default.createElement(_f36components.Pill, {
+        ref: setNodeRef,
         testId: "tag-editor-pill",
         className: (0, _emotion.cx)(styles.pill, {
-            [styles.pillDisabled]: props.isSortablePillDisabled
+            [styles.pillDisabled]: disabled
         }),
-        label: props.label,
+        style: style,
+        label: label,
         onClose: ()=>{
-            if (!props.isSortablePillDisabled) {
-                props.onRemove(props.index);
+            if (!disabled) {
+                onRemove(index);
             }
         },
         onDrag: _noop.default,
-        dragHandleComponent: _react.default.createElement(SortablePillHandle, {
-            isDisabled: props.isSortablePillDisabled
+        dragHandleComponent: _react.default.createElement(_f36components.DragHandle, {
+            ref: setActivatorNodeRef,
+            variant: "transparent",
+            label: "",
+            ...listeners
         })
-    }));
-const SortableList = (0, _reactsortablehoc.SortableContainer)((props)=>_react.default.createElement("div", {
-        className: styles.dropContainer
-    }, props.children));
+    });
+};
 function TagsEditor(props) {
     const [pendingValue, setPendingValue] = (0, _react.useState)('');
-    const { isDisabled , items , constraints , constraintsType , hasError  } = props;
+    const { isDisabled , items , constraints , constraintsType , hasError , onUpdate  } = props;
+    const itemsMap = _react.default.useMemo(()=>items.map((item, index)=>({
+                id: item + index,
+                value: item
+            })), [
+        items
+    ]);
     const removeItem = (0, _react.useCallback)((index)=>{
-        const newItems = props.items.filter((_, filterIndex)=>index !== filterIndex);
-        props.onUpdate(newItems);
+        const newItems = items.filter((_, filterIndex)=>index !== filterIndex);
+        onUpdate(newItems);
     }, [
-        props
+        items,
+        onUpdate
     ]);
-    const swapItems = (0, _react.useCallback)(({ oldIndex , newIndex  })=>{
-        const newItems = (0, _arraymove.default)(props.items, oldIndex, newIndex);
-        props.onUpdate(newItems);
+    const swapItems = (0, _react.useCallback)(({ active , over  })=>{
+        if (active.id !== over.id) {
+            const oldIndex = itemsMap.findIndex(({ id  })=>id === active.id);
+            const newIndex = itemsMap.findIndex(({ id  })=>id === over.id);
+            const newItems = (0, _sortable.arrayMove)(items, oldIndex, newIndex);
+            onUpdate(newItems);
+        }
     }, [
-        props
+        items,
+        itemsMap,
+        onUpdate
     ]);
     return _react.default.createElement("div", {
         "data-test-id": "tag-editor-container"
@@ -147,8 +153,8 @@ function TagsEditor(props) {
         placeholder: "Type the value and hit enter",
         onKeyDown: (e)=>{
             if (pendingValue && e.keyCode === 13) {
-                props.onUpdate([
-                    ...props.items,
+                onUpdate([
+                    ...items,
                     pendingValue
                 ]);
                 setPendingValue('');
@@ -157,28 +163,21 @@ function TagsEditor(props) {
         onChange: (e)=>{
             setPendingValue(e.target.value);
         }
-    }), _react.default.createElement(SortableList, {
-        useDragHandle: true,
-        axis: "xy",
-        distance: 10,
-        onSortEnd: ({ oldIndex , newIndex  })=>{
-            swapItems({
-                oldIndex,
-                newIndex
-            });
-        }
-    }, items.map((item, index)=>{
-        return _react.default.createElement(SortablePill, {
-            label: item,
+    }), _react.default.createElement(_core.DndContext, {
+        onDragEnd: swapItems,
+        modifiers: [
+            _modifiers.restrictToParentElement
+        ]
+    }, _react.default.createElement(_sortable.SortableContext, {
+        items: itemsMap
+    }, itemsMap.map((item, index)=>_react.default.createElement(SortablePill, {
+            key: item.id,
+            id: item.id,
+            label: item.value,
             index: index,
-            key: item + index,
             disabled: isDisabled,
-            isSortablePillDisabled: isDisabled,
-            onRemove: ()=>{
-                removeItem(index);
-            }
-        });
-    })), constraints && constraintsType && _react.default.createElement(_TagsEditorConstraints.TagsEditorConstraints, {
+            onRemove: ()=>removeItem(index)
+        })))), constraints && constraintsType && _react.default.createElement(_TagsEditorConstraints.TagsEditorConstraints, {
         constraints: constraints,
         constraintsType: constraintsType
     }));

package/dist/esm/TagsEditor.js CHANGED Viewed

@@ -1,18 +1,14 @@
 import React, { useCallback, useState } from 'react';
-import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
-import { Pill, TextInput } from '@contentful/f36-components';
-import { DragIcon } from '@contentful/f36-icons';
+import { DragHandle, Pill, TextInput } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import arrayMove from 'array-move';
+import { DndContext } from '@dnd-kit/core';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { css, cx } from 'emotion';
 import noop from 'lodash/noop';
 import { TagsEditorConstraints } from './TagsEditorConstraints';
 const styles = {
-    dropContainer: css({
-        whiteSpace: 'nowrap',
-        display: 'flex',
-        flexWrap: 'wrap'
-    }),
     input: css({
         marginTop: tokens.spacingS,
         marginBottom: tokens.spacingM
@@ -27,59 +23,69 @@ const styles = {
             cursor: 'not-allowed !important',
             pointerEvents: 'none'
         }
-    }),
-    handle: css({
-        lineHeight: '1.5rem',
-        padding: '0.375rem 0.625rem',
-        paddingRight: 0,
-        cursor: 'grab',
-        userSelect: 'none',
-        svg: {
-            fill: tokens.gray500,
-            verticalAlign: 'middle'
-        }
     })
 };
-const SortablePillHandle = SortableHandle((props)=>React.createElement("div", {
-        className: cx(styles.handle, {
-            [styles.pillDisabled]: props.isDisabled
-        })
-    }, React.createElement(DragIcon, {
-        variant: "muted"
-    })));
-const SortablePill = SortableElement((props)=>React.createElement(Pill, {
+const SortablePill = ({ id , label , index , disabled , onRemove  })=>{
+    const { listeners , setNodeRef , setActivatorNodeRef , transform , transition  } = useSortable({
+        id
+    });
+    const style = {
+        transform: transform ? CSS.Transform.toString({
+            ...transform,
+            scaleX: 1,
+            scaleY: 1
+        }) : '',
+        transition
+    };
+    return React.createElement(Pill, {
+        ref: setNodeRef,
         testId: "tag-editor-pill",
         className: cx(styles.pill, {
-            [styles.pillDisabled]: props.isSortablePillDisabled
+            [styles.pillDisabled]: disabled
         }),
-        label: props.label,
+        style: style,
+        label: label,
         onClose: ()=>{
-            if (!props.isSortablePillDisabled) {
-                props.onRemove(props.index);
+            if (!disabled) {
+                onRemove(index);
             }
         },
         onDrag: noop,
-        dragHandleComponent: React.createElement(SortablePillHandle, {
-            isDisabled: props.isSortablePillDisabled
+        dragHandleComponent: React.createElement(DragHandle, {
+            ref: setActivatorNodeRef,
+            variant: "transparent",
+            label: "",
+            ...listeners
         })
-    }));
-const SortableList = SortableContainer((props)=>React.createElement("div", {
-        className: styles.dropContainer
-    }, props.children));
+    });
+};
 export function TagsEditor(props) {
     const [pendingValue, setPendingValue] = useState('');
-    const { isDisabled , items , constraints , constraintsType , hasError  } = props;
+    const { isDisabled , items , constraints , constraintsType , hasError , onUpdate  } = props;
+    const itemsMap = React.useMemo(()=>items.map((item, index)=>({
+                id: item + index,
+                value: item
+            })), [
+        items
+    ]);
     const removeItem = useCallback((index)=>{
-        const newItems = props.items.filter((_, filterIndex)=>index !== filterIndex);
-        props.onUpdate(newItems);
+        const newItems = items.filter((_, filterIndex)=>index !== filterIndex);
+        onUpdate(newItems);
     }, [
-        props
+        items,
+        onUpdate
     ]);
-    const swapItems = useCallback(({ oldIndex , newIndex  })=>{
-        const newItems = arrayMove(props.items, oldIndex, newIndex);
-        props.onUpdate(newItems);
+    const swapItems = useCallback(({ active , over  })=>{
+        if (active.id !== over.id) {
+            const oldIndex = itemsMap.findIndex(({ id  })=>id === active.id);
+            const newIndex = itemsMap.findIndex(({ id  })=>id === over.id);
+            const newItems = arrayMove(items, oldIndex, newIndex);
+            onUpdate(newItems);
+        }
     }, [
-        props
+        items,
+        itemsMap,
+        onUpdate
     ]);
     return React.createElement("div", {
         "data-test-id": "tag-editor-container"
@@ -93,8 +99,8 @@ export function TagsEditor(props) {
         placeholder: "Type the value and hit enter",
         onKeyDown: (e)=>{
             if (pendingValue && e.keyCode === 13) {
-                props.onUpdate([
-                    ...props.items,
+                onUpdate([
+                    ...items,
                     pendingValue
                 ]);
                 setPendingValue('');
@@ -103,28 +109,21 @@ export function TagsEditor(props) {
         onChange: (e)=>{
             setPendingValue(e.target.value);
         }
-    }), React.createElement(SortableList, {
-        useDragHandle: true,
-        axis: "xy",
-        distance: 10,
-        onSortEnd: ({ oldIndex , newIndex  })=>{
-            swapItems({
-                oldIndex,
-                newIndex
-            });
-        }
-    }, items.map((item, index)=>{
-        return React.createElement(SortablePill, {
-            label: item,
+    }), React.createElement(DndContext, {
+        onDragEnd: swapItems,
+        modifiers: [
+            restrictToParentElement
+        ]
+    }, React.createElement(SortableContext, {
+        items: itemsMap
+    }, itemsMap.map((item, index)=>React.createElement(SortablePill, {
+            key: item.id,
+            id: item.id,
+            label: item.value,
             index: index,
-            key: item + index,
             disabled: isDisabled,
-            isSortablePillDisabled: isDisabled,
-            onRemove: ()=>{
-                removeItem(index);
-            }
-        });
-    })), constraints && constraintsType && React.createElement(TagsEditorConstraints, {
+            onRemove: ()=>removeItem(index)
+        })))), constraints && constraintsType && React.createElement(TagsEditorConstraints, {
         constraints: constraints,
         constraintsType: constraintsType
     }));

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-tags",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -38,17 +38,18 @@
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-icons": "^4.1.0",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.4.0",
-    "array-move": "^3.0.0",
+    "@contentful/field-editor-shared": "^1.4.1",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
     "emotion": "^10.0.0",
-    "lodash": "^4.17.15",
-    "react-sortable-hoc": "^2.0.0"
+    "lodash": "^4.17.15"
   },
   "devDependencies": {
-    "@contentful/field-editor-test-utils": "^1.4.1"
+    "@contentful/field-editor-test-utils": "^1.4.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "gitHead": "2db95226af0417c42aae8d1be85796fc8774e283"
+  "gitHead": "0fc8da4aa8ad8603c3adf4bd77b26ba46de11e33"
 }