@contentful/field-editor-reference 4.5.0 → 4.6.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.6.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.6.0...@contentful/field-editor-reference@4.6.1) (2022-07-18)
+
+### Bug Fixes
+
+- correctly pass props to children of SortableLinkList ([#1187](https://github.com/contentful/field-editors/issues/1187)) ([5f574b9](https://github.com/contentful/field-editors/commit/5f574b938670290e8e2bb8c0b9bcb67720a83da9))
+
+# [4.6.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.5.1...@contentful/field-editor-reference@4.6.0) (2022-07-15)
+
+### Features
+
+- export resource info type ([#1186](https://github.com/contentful/field-editors/issues/1186)) ([209e523](https://github.com/contentful/field-editors/commit/209e5237c634b05f40ad7b878deb65d5ff977008))
+
+## [4.5.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.5.0...@contentful/field-editor-reference@4.5.1) (2022-07-12)
+
+### Bug Fixes
+
+- generalise SortableLinkList into one component ([#1183](https://github.com/contentful/field-editors/issues/1183)) ([83117b0](https://github.com/contentful/field-editors/commit/83117b005ec93ef5481eb137a87733ae96c45d54))
+
 # [4.5.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.4.0...@contentful/field-editor-reference@4.5.0) (2022-07-11)
 
 ### Features

package/dist/common/SortableLinkList.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SortableContainerProps } from 'react-sortable-hoc';
+import { ReferenceEditorProps } from './ReferenceEditor';
+declare type SortableContainerChildProps<IType> = Pick<SortableLinkListProps<IType>, 'items' | 'isDisabled'> & {
+    item: IType;
+    index: number;
+    DragHandle?: typeof DragHandle;
+};
+declare type SortableLinkListProps<T> = ReferenceEditorProps & {
+    items: T[];
+    isDisabled: boolean;
+    children: (props: SortableContainerChildProps<T>) => React.ReactElement;
+    className?: string;
+};
+declare const DragHandle: (props: {
+    drag: React.ReactElement;
+}) => JSX.Element;
+export declare function SortableLinkList<T>(props: SortableLinkListProps<T> & SortableContainerProps): JSX.Element;
+export {};

package/dist/field-editor-reference.cjs.development.js

@@ -3318,36 +3318,29 @@ var SortableLink = /*#__PURE__*/reactSortableHoc.SortableElement(function (props
     className: styles$3.item
   }, props.children);
 });
-var SortableLinkList = /*#__PURE__*/reactSortableHoc.SortableContainer(function (props) {
-  var lastIndex = props.items.length - 1;
+var SortableLinkListInternal = /*#__PURE__*/reactSortableHoc.SortableContainer(function (props) {
   return React__default.createElement("div", {
-    className: styles$3.container
+    className: emotion.cx(styles$3.container, props.className)
   }, props.items.map(function (item, index) {
+    var _item$sys$urn;
+
     return React__default.createElement(SortableLink, {
       disabled: props.isDisabled,
-      key: item.sys.id + "-" + index,
+      key: ((_item$sys$urn = item.sys.urn) != null ? _item$sys$urn : item.sys.id) + "-" + index,
       index: index
-    }, React__default.createElement(FetchingWrappedEntryCard, Object.assign({}, props, {
-      key: item.sys.id + "-" + index,
-      index: index,
-      allContentTypes: props.allContentTypes,
+    }, props.children({
+      items: props.items,
       isDisabled: props.isDisabled,
-      entryId: item.sys.id,
-      onRemove: function onRemove() {
-        props.setValue(props.items.filter(function (_value, i) {
-          return i !== index;
-        }));
-      },
-      onMoveTop: index !== 0 ? function () {
-        return props.onMove(index, 0);
-      } : undefined,
-      onMoveBottom: index !== lastIndex ? function () {
-        return props.onMove(index, lastIndex);
-      } : undefined,
-      renderDragHandle: props.isDisabled ? undefined : DragHandle
-    })));
+      item: item,
+      index: index,
+      DragHandle: props.isDisabled ? undefined : DragHandle
+    }));
   }));
-});
+}); // HOC does not support generics, so we mimic it via additional component
+
+function SortableLinkList(props) {
+  return React__default.createElement(SortableLinkListInternal, Object.assign({}, props), props.children);
+}
 
 function MultipleEntryReferenceEditor(props) {
   return React.createElement(MultipleReferenceEditor, Object.assign({}, props, {
@@ -3356,7 +3349,33 @@ function MultipleEntryReferenceEditor(props) {
     return React.createElement(SortableLinkList, Object.assign({}, props, childrenProps, {
       axis: "y",
       useDragHandle: true
-    }));
+    }), function (_ref) {
+      var items = _ref.items,
+          item = _ref.item,
+          index = _ref.index,
+          isDisabled = _ref.isDisabled,
+          DragHandle = _ref.DragHandle;
+      var lastIndex = items.length - 1;
+      return React.createElement(FetchingWrappedEntryCard, Object.assign({}, props, {
+        key: item.sys.id + "-" + index,
+        index: index,
+        allContentTypes: childrenProps.allContentTypes,
+        isDisabled: isDisabled,
+        entryId: item.sys.id,
+        onRemove: function onRemove() {
+          childrenProps.setValue(items.filter(function (_value, i) {
+            return i !== index;
+          }));
+        },
+        onMoveTop: index !== 0 ? function () {
+          return childrenProps.onMove(index, 0);
+        } : undefined,
+        onMoveBottom: index !== lastIndex ? function () {
+          return childrenProps.onMove(index, lastIndex);
+        } : undefined,
+        renderDragHandle: DragHandle
+      }));
+    });
   });
 }
 
@@ -3767,62 +3786,40 @@ SingleMediaEditor.defaultProps = {
 };
 
 var styles$6 = {
-  gridContainter: /*#__PURE__*/emotion.css({
+  gridContainer: /*#__PURE__*/emotion.css({
     position: 'relative',
     display: 'flex',
     flexWrap: 'wrap'
-  }),
-  container: /*#__PURE__*/emotion.css({
-    position: 'relative'
-  }),
-  item: /*#__PURE__*/emotion.css({
-    marginBottom: tokens.spacingM,
-    marginRight: tokens.spacingM
   })
 };
-
-var DragHandle$1 = function DragHandle(props) {
-  var SortableDragHandle = reactSortableHoc.SortableHandle(function () {
-    return props.drag;
-  });
-  return React__default.createElement(SortableDragHandle, null);
-};
-
-var SortableLink$1 = /*#__PURE__*/reactSortableHoc.SortableElement(function (props) {
-  return React__default.createElement("div", {
-    className: styles$6.item
-  }, props.children);
-});
-var SortableLinkList$1 = /*#__PURE__*/reactSortableHoc.SortableContainer(function (props) {
-  return React__default.createElement("div", {
-    className: props.viewType === 'card' ? styles$6.gridContainter : styles$6.container
-  }, props.items.map(function (item, index) {
-    return React__default.createElement(SortableLink$1, {
-      disabled: props.isDisabled,
-      key: item.sys.id + "-" + index,
-      index: index
-    }, React__default.createElement(FetchingWrappedAssetCard, Object.assign({}, props, {
-      sdk: props.sdk,
-      key: item.sys.id + "-" + index,
-      assetId: item.sys.id,
-      onRemove: function onRemove() {
-        props.setValue(props.items.filter(function (_value, i) {
-          return i !== index;
-        }));
-      },
-      renderDragHandle: props.isDisabled ? undefined : DragHandle$1
-    })));
-  }));
-});
-
 function MultipleMediaEditor(props) {
   return React.createElement(MultipleReferenceEditor, Object.assign({}, props, {
     entityType: "Asset"
   }), function (childrenProps) {
-    return React.createElement(SortableLinkList$1, Object.assign({}, props, childrenProps, {
-      axis: props.viewType === 'card' ? 'xy' : 'y',
+    var _cx;
+
+    return React.createElement(SortableLinkList, Object.assign({}, childrenProps, {
+      className: emotion.cx((_cx = {}, _cx[styles$6.gridContainer] = childrenProps.viewType === 'card', _cx)),
+      axis: childrenProps.viewType === 'card' ? 'xy' : 'y',
       useDragHandle: true
-    }));
+    }), function (_ref) {
+      var items = _ref.items,
+          item = _ref.item,
+          index = _ref.index,
+          isDisabled = _ref.isDisabled,
+          DragHandle = _ref.DragHandle;
+      return React.createElement(FetchingWrappedAssetCard, Object.assign({}, props, {
+        isDisabled: isDisabled,
+        key: item.sys.id + "-" + index,
+        assetId: item.sys.id,
+        onRemove: function onRemove() {
+          childrenProps.setValue(items.filter(function (_value, i) {
+            return i !== index;
+          }));
+        },
+        renderDragHandle: DragHandle
+      }));
+    });
   });
 }
 MultipleMediaEditor.defaultProps = {
@@ -3840,6 +3837,7 @@ exports.MultipleMediaEditor = MultipleMediaEditor;
 exports.ScheduledIconWithTooltip = ScheduledIconWithTooltip;
 exports.SingleEntryReferenceEditor = SingleEntryReferenceEditor;
 exports.SingleMediaEditor = SingleMediaEditor;
+exports.SortableLinkList = SortableLinkList;
 exports.WrappedAssetCard = WrappedAssetCard;
 exports.WrappedEntryCard = WrappedEntryCard;
 exports.getScheduleTooltipContent = getScheduleTooltipContent;