@contentful/field-editor-reference 5.0.0 → 5.1.2

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.
 
+## [5.1.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@5.1.1...@contentful/field-editor-reference@5.1.2) (2022-08-26)
+
+### Bug Fixes
+
+- change the props type definitions ([#1222](https://github.com/contentful/field-editors/issues/1222)) ([f71394b](https://github.com/contentful/field-editors/commit/f71394b3653c4e84bb45ed5745ba81eb0522e680))
+
+## [5.1.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@5.1.0...@contentful/field-editor-reference@5.1.1) (2022-08-25)
+
+### Bug Fixes
+
+- add p-queue as dependency ([#1220](https://github.com/contentful/field-editors/issues/1220)) ([8576389](https://github.com/contentful/field-editors/commit/85763896092414acce8e3e2f81f375dcf983b49f))
+
+# [5.1.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@5.0.0...@contentful/field-editor-reference@5.1.0) (2022-08-24)
+
+### Features
+
+- moving resource editors from web app [TOL-282] ([#1216](https://github.com/contentful/field-editors/issues/1216)) ([8e037d4](https://github.com/contentful/field-editors/commit/8e037d4f938aba8b9177de3e85a4a1d192ad3db5))
+
 # [5.0.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.6.10...@contentful/field-editor-reference@5.0.0) (2022-08-18)
 
 ### Features

package/dist/assets/MultipleMediaEditor.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ReferenceEditorProps } from '../common/ReferenceEditor';
-declare type EditorProps = Omit<ReferenceEditorProps, 'hasCardEditActions'>;
+declare type EditorProps = Pick<ReferenceEditorProps, Exclude<keyof ReferenceEditorProps, 'hasCardEditActions'>>;
 export declare function MultipleMediaEditor(props: EditorProps): JSX.Element;
 export declare namespace MultipleMediaEditor {
     var defaultProps: {

package/dist/assets/SingleMediaEditor.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ReferenceEditorProps } from '../common/ReferenceEditor';
-declare type EditorProps = Omit<ReferenceEditorProps, 'hasCardEditActions'>;
+declare type EditorProps = Pick<ReferenceEditorProps, Exclude<keyof ReferenceEditorProps, 'hasCardEditActions'>>;
 export declare function SingleMediaEditor(props: EditorProps): JSX.Element;
 export declare namespace SingleMediaEditor {
     var defaultProps: {

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

@@ -22,6 +22,7 @@ var isNumber = _interopDefault(require('lodash/isNumber'));
 var arrayMove = _interopDefault(require('array-move'));
 var reactSortableHoc = require('react-sortable-hoc');
 var mimetype = _interopDefault(require('@contentful/mimetype'));
+var reactIntersectionObserver = require('react-intersection-observer');
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1940,6 +1941,9 @@ var UnsupportedError = /*#__PURE__*/function (_Error) {
 
   return UnsupportedError;
 }( /*#__PURE__*/_wrapNativeSuper(Error));
+function isUnsupportedError(value) {
+  return typeof value === 'object' && (value == null ? void 0 : value.isUnsupportedError) === true;
+}
 
 var isEntityQueryKey = function isEntityQueryKey(queryKey) {
   return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
@@ -2280,8 +2284,7 @@ function useEntity(entityType, entityId, options) {
   var _useQuery = reactQuery.useQuery(queryKey, function () {
     return getEntity(entityType, entityId, options);
   }, {
-    enabled: options == null ? void 0 : options.enabled,
-    useErrorBoundary: false
+    enabled: options == null ? void 0 : options.enabled
   }),
       status = _useQuery.status,
       data = _useQuery.data;
@@ -2300,9 +2303,7 @@ function useResource(resourceType, urn, options) {
   var _useQuery2 = reactQuery.useQuery(queryKey, function () {
     return getResource(resourceType, urn, options);
   }, {
-    enabled: options == null ? void 0 : options.enabled,
-    // TODO: check if this is ok for all errors
-    useErrorBoundary: false
+    enabled: options == null ? void 0 : options.enabled
   }),
       status = _useQuery2.status,
       data = _useQuery2.data,
@@ -2325,7 +2326,7 @@ function EntityProvider(_ref8) {
       queryCache: queryCache,
       defaultOptions: {
         queries: {
-          useErrorBoundary: true,
+          useErrorBoundary: false,
           refetchOnWindowFocus: false,
           refetchOnReconnect: true,
           refetchOnMount: false,
@@ -3819,6 +3820,448 @@ MultipleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
+var resolveAsset = function resolveAsset() {
+  return Promise.resolve();
+}; // we don't want to show scheduled actions for resources
+
+
+var resolveScheduledActions = function resolveScheduledActions() {
+  return Promise.resolve([]);
+};
+
+function ContentfulEntryCard(_ref) {
+  var info = _ref.info,
+      isDisabled = _ref.isDisabled,
+      renderDragHandle = _ref.renderDragHandle,
+      onRemove = _ref.onRemove,
+      onMoveTop = _ref.onMoveTop,
+      onMoveBottom = _ref.onMoveBottom,
+      getEntryRouteHref = _ref.getEntryRouteHref;
+  var resourceSys = info.resource.sys;
+  var spaceId = resourceSys.space.sys.id;
+  var environmentId = resourceSys.environment.sys.id;
+  var entryId = resourceSys.id;
+  var resourceHref = getEntryRouteHref({
+    spaceId: spaceId,
+    environmentId: environmentId,
+    entryId: entryId
+  }); // TODO: move this into `sdk.navigator.openEntry()`, note that it's signature only include the entry id (not a space or environment)
+
+  var openEntryDetail = function openEntryDetail() {
+    window.open(resourceHref, '_blank', 'noopener,noreferrer');
+  };
+
+  return React.createElement(WrappedEntryCard, {
+    entry: info.resource,
+    isDisabled: isDisabled,
+    hasCardEditActions: false,
+    contentType: info.contentType,
+    // we use the default locale from the space the entry belongs to
+    // as we assume this gives a more consistent behaviour.
+    // locales will inevitably differ from space to space, so it's likely
+    // that the current locale does not exist in the "remote" space
+    localeCode: info.defaultLocaleCode,
+    defaultLocaleCode: info.defaultLocaleCode,
+    size: "small",
+    getAsset: resolveAsset,
+    getEntityScheduledActions: resolveScheduledActions,
+    spaceName: info.space.name,
+    renderDragHandle: renderDragHandle,
+    isClickable: true,
+    onEdit: openEntryDetail,
+    hasCardRemoveActions: Boolean(onRemove),
+    onRemove: onRemove,
+    onMoveBottom: onMoveBottom,
+    onMoveTop: onMoveTop,
+    entryUrl: resourceHref
+  });
+}
+
+var styles$7 = {
+  card: /*#__PURE__*/emotion.css({
+    position: 'relative'
+  })
+};
+function UnsupportedEntityCard(props) {
+  return React__default.createElement(f36Components.Card, {
+    className: styles$7.card
+  }, React__default.createElement(f36Components.SectionHeading, {
+    marginBottom: "none"
+  }, "Resource type ", props.entityType, " is currently not supported"));
+}
+
+function ResourceCardSkeleton() {
+  return React.createElement(f36Components.EntryCard, {
+    size: "small",
+    isLoading: true
+  });
+}
+
+function ExistingResourceCard(props) {
+  var resourceLink = props.resourceLink,
+      inView = props.inView,
+      _props$index = props.index,
+      index = _props$index === void 0 ? 0 : _props$index;
+  var resourceOptions = {
+    priority: index * -1,
+    enabled: inView
+  };
+
+  var _useResource = useResource(resourceLink.sys.linkType, resourceLink.sys.urn, resourceOptions),
+      data = _useResource.data,
+      error = _useResource.error;
+
+  if (!data && !error) {
+    return React.createElement(ResourceCardSkeleton, null);
+  }
+
+  if (data) {
+    return React.createElement(ContentfulEntryCard, _extends({
+      info: data
+    }, props));
+  }
+
+  if (isUnsupportedError(error)) {
+    return React.createElement(UnsupportedEntityCard, {
+      entityType: resourceLink.sys.linkType
+    });
+  }
+
+  return React.createElement(MissingEntityCard, {
+    entityType: "Entry",
+    isDisabled: props.isDisabled,
+    onRemove: props.onRemove
+  });
+}
+
+function ResourceCardWrapper(props) {
+  if (!props.resourceLink) {
+    return null;
+  }
+
+  return React.createElement(ExistingResourceCard, _extends({}, props, {
+    resourceLink: props.resourceLink,
+    getEntryRouteHref: props.getEntryRouteHref
+  }));
+}
+
+function ResourceCard(props) {
+  var _useInView = reactIntersectionObserver.useInView({
+    triggerOnce: true,
+    rootMargin: '300px 0px 0px 300px'
+  }),
+      ref = _useInView.ref,
+      inView = _useInView.inView; // Forma does not offer us to pass refs, so we need an additional wrapper here
+
+
+  return React.createElement("div", {
+    ref: ref
+  }, React.createElement(ResourceCardWrapper, _extends({}, props, {
+    inView: inView
+  })));
+}
+
+function useResourceLinkActions(_ref) {
+  var apiUrl = _ref.apiUrl,
+      dialogs = _ref.dialogs,
+      field = _ref.field,
+      onAfterLink = _ref.onAfterLink;
+  var handleAfterLink = React.useCallback(function (entries) {
+    if (!onAfterLink) {
+      return;
+    }
+
+    entries.forEach(onAfterLink);
+  }, [onAfterLink]);
+  var multiple = field.type === 'Array';
+  var toLinkItem = React.useMemo(function () {
+    function toUrn(entry) {
+      return "crn:" + apiUrl + ":::content:spaces/" + entry.sys.space.sys.id + "/entries/" + entry.sys.id;
+    }
+
+    return function (entry) {
+      return {
+        sys: {
+          type: 'ResourceLink',
+          linkType: 'Contentful:Entry',
+          urn: toUrn(entry)
+        }
+      };
+    };
+  }, [apiUrl]);
+  var onLinkedExisting = React.useMemo(function () {
+    if (multiple) {
+      return function (entries) {
+        var linkItems = entries.map(toLinkItem);
+        var prevValue = field.getValue() || [];
+        var updatedValue = [].concat(prevValue, linkItems);
+        field.setValue(updatedValue);
+        handleAfterLink(entries);
+      };
+    } else {
+      return function (entries) {
+        var entry = entries[0];
+        field.setValue(toLinkItem(entry));
+        handleAfterLink([entry]);
+      };
+    }
+  }, [field, handleAfterLink, multiple, toLinkItem]);
+  var onLinkExisting = React.useMemo(function () {
+    var promptSelection = multiple ? /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return dialogs.selectMultipleResourceEntries({
+                // @ts-expect-error wait for update of app-sdk version
+                allowedResources: field.allowedResources
+              });
+
+            case 2:
+              return _context.abrupt("return", _context.sent);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })) : /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return dialogs.selectSingleResourceEntry({
+                // @ts-expect-error wait for update of app-sdk version
+                allowedResources: field.allowedResources
+              });
+
+            case 2:
+              _context2.t0 = _context2.sent;
+              return _context2.abrupt("return", [_context2.t0]);
+
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
+      var res;
+      return runtime_1.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return promptSelection();
+
+            case 2:
+              res = _context3.sent;
+
+              if (res) {
+                _context3.next = 5;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 5:
+              onLinkedExisting(res);
+
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })); // @ts-expect-error wait for update of app-sdk version
+  }, [dialogs, field.allowedResources, multiple, onLinkedExisting]);
+  return {
+    onLinkExisting: onLinkExisting,
+    onLinkedExisting: onLinkedExisting,
+    // hardcoded values to match interface for standard reference field actions
+    entityType: 'Entry',
+    contentTypes: [],
+    canCreateEntity: false,
+    canLinkMultiple: multiple,
+    canLinkEntity: true,
+    isDisabled: false,
+    isEmpty: false,
+    isFull: false,
+    // eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
+    onCreate: function () {
+      var _onCreate = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
+        return runtime_1.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      function onCreate() {
+        return _onCreate.apply(this, arguments);
+      }
+
+      return onCreate;
+    }(),
+    // eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
+    onCreated: function onCreated() {}
+  };
+}
+
+function ResourceEditor(props) {
+  var setValue = props.setValue,
+      items = props.items,
+      apiUrl = props.apiUrl;
+  var onSortStart = React.useCallback(function (_, event) {
+    return event.preventDefault();
+  }, []);
+  var onSortEnd = React.useCallback(function (_ref) {
+    var oldIndex = _ref.oldIndex,
+        newIndex = _ref.newIndex;
+    var newItems = arrayMove(items, oldIndex, newIndex);
+    setValue(newItems);
+  }, [items, setValue]);
+  var onMove = React.useCallback(function (oldIndex, newIndex) {
+    var newItems = arrayMove(items, oldIndex, newIndex);
+    setValue(newItems);
+  }, [items, setValue]);
+  var onRemoteItemAtIndex = React.useCallback(function (index) {
+    setValue(items.filter(function (_v, i) {
+      return i !== index;
+    }));
+  }, [items, setValue]);
+  var _props$sdk = props.sdk,
+      dialogs = _props$sdk.dialogs,
+      field = _props$sdk.field;
+  var linkActionsProps = useResourceLinkActions({
+    dialogs: dialogs,
+    field: field,
+    apiUrl: apiUrl
+  });
+  return React.createElement(React.Fragment, null, props.children(_extends({}, props, {
+    onSortStart: onSortStart,
+    onSortEnd: onSortEnd,
+    onMove: onMove,
+    onRemoteItemAtIndex: onRemoteItemAtIndex
+  })), React.createElement(CombinedLinkActions, _extends({}, linkActionsProps)));
+} // provides memoized callbacks bound to a given item
+
+
+function WithPerItemCallbacks(_ref2) {
+  var listLength = _ref2.listLength,
+      index = _ref2.index,
+      onMove = _ref2.onMove,
+      onRemoteItemAtIndex = _ref2.onRemoteItemAtIndex,
+      children = _ref2.children;
+  var handleMoveTop = React.useMemo(function () {
+    return index > 0 ? function () {
+      return onMove(index, 0);
+    } : undefined;
+  }, [index, onMove]);
+  var handleMoveBottom = React.useMemo(function () {
+    return index < listLength - 1 ? function () {
+      return onMove(index, listLength - 1);
+    } : undefined;
+  }, [index, onMove, listLength]);
+  var handleRemove = React.useCallback(function () {
+    return onRemoteItemAtIndex(index);
+  }, [index, onRemoteItemAtIndex]);
+  return React.createElement(React.Fragment, null, children({
+    onMoveBottom: handleMoveBottom,
+    onMoveTop: handleMoveTop,
+    onRemove: handleRemove
+  }));
+}
+
+var EMPTY_ARRAY = [];
+function MultipleResourceReferenceEditor(props) {
+  return React.createElement(EntityProvider, {
+    sdk: props.sdk
+  }, React.createElement(fieldEditorShared.FieldConnector, {
+    throttle: 0,
+    field: props.sdk.field,
+    isInitiallyDisabled: props.isInitiallyDisabled,
+    isEqualValues: deepEqual
+  }, function (_ref3) {
+    var value = _ref3.value,
+        disabled = _ref3.disabled,
+        setValue = _ref3.setValue,
+        externalReset = _ref3.externalReset;
+    return React.createElement(ResourceEditor, _extends({}, props, {
+      items: value || EMPTY_ARRAY,
+      isDisabled: disabled,
+      setValue: setValue,
+      key: externalReset + "-list"
+    }), function (editorProps) {
+      return React.createElement(SortableLinkList, _extends({}, editorProps), function (_ref4) {
+        var item = _ref4.item,
+            isDisabled = _ref4.isDisabled,
+            DragHandle = _ref4.DragHandle,
+            index = _ref4.index;
+        return React.createElement(WithPerItemCallbacks, {
+          index: index,
+          onMove: editorProps.onMove,
+          onRemoteItemAtIndex: editorProps.onRemoteItemAtIndex,
+          listLength: (value == null ? void 0 : value.length) || 0
+        }, function (_ref5) {
+          var onMoveBottom = _ref5.onMoveBottom,
+              onMoveTop = _ref5.onMoveTop,
+              onRemove = _ref5.onRemove;
+          return React.createElement(ResourceCard, {
+            index: index,
+            resourceLink: item,
+            isDisabled: isDisabled,
+            renderDragHandle: DragHandle,
+            onMoveTop: onMoveTop,
+            onMoveBottom: onMoveBottom,
+            onRemove: onRemove,
+            getEntryRouteHref: props.getEntryRouteHref
+          });
+        });
+      });
+    });
+  }));
+}
+
+function SingleResourceReferenceEditor(props) {
+  var _props$sdk = props.sdk,
+      dialogs = _props$sdk.dialogs,
+      field = _props$sdk.field;
+  var linkActionsProps = useResourceLinkActions({
+    dialogs: dialogs,
+    field: field,
+    apiUrl: props.apiUrl
+  });
+  return React.createElement(EntityProvider, {
+    sdk: props.sdk
+  }, React.createElement(fieldEditorShared.FieldConnector, {
+    throttle: 0,
+    field: props.sdk.field,
+    isInitiallyDisabled: props.isInitiallyDisabled,
+    isEqualValues: deepEqual
+  }, function (_ref) {
+    var value = _ref.value,
+        disabled = _ref.disabled;
+    return value ? React.createElement(ResourceCard, {
+      onRemove: function onRemove() {
+        return props.sdk.field.removeValue();
+      },
+      resourceLink: value,
+      isDisabled: disabled,
+      getEntryRouteHref: props.getEntryRouteHref
+    }) : // TODO: support custom actions once publicly available
+    React.createElement(CombinedLinkActions, _extends({}, linkActionsProps));
+  }));
+}
+
 exports.AssetThumbnail = AssetThumbnail;
 exports.CombinedLinkActions = CombinedLinkActions;
 exports.CreateEntryLinkButton = CreateEntryLinkButton;
@@ -3827,9 +4270,11 @@ exports.EntityProvider = EntityProvider;
 exports.MissingEntityCard = MissingEntityCard;
 exports.MultipleEntryReferenceEditor = MultipleEntryReferenceEditor;
 exports.MultipleMediaEditor = MultipleMediaEditor;
+exports.MultipleResourceReferenceEditor = MultipleResourceReferenceEditor;
 exports.ScheduledIconWithTooltip = ScheduledIconWithTooltip;
 exports.SingleEntryReferenceEditor = SingleEntryReferenceEditor;
 exports.SingleMediaEditor = SingleMediaEditor;
+exports.SingleResourceReferenceEditor = SingleResourceReferenceEditor;
 exports.SortableLinkList = SortableLinkList;
 exports.WrappedAssetCard = WrappedAssetCard;
 exports.WrappedEntryCard = WrappedEntryCard;