@contentful/field-editor-reference 5.0.0 → 5.1.0

package/dist/field-editor-reference.esm.js

@@ -15,6 +15,7 @@ import isNumber from 'lodash-es/isNumber';
 import arrayMove from 'array-move';
 import { SortableContainer, SortableHandle, SortableElement } from 'react-sortable-hoc';
 import mimetype from '@contentful/mimetype';
+import { useInView } from 'react-intersection-observer';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1933,6 +1934,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;
@@ -2273,8 +2277,7 @@ function useEntity(entityType, entityId, options) {
   var _useQuery = 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;
@@ -2293,9 +2296,7 @@ function useResource(resourceType, urn, options) {
   var _useQuery2 = 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,
@@ -2318,7 +2319,7 @@ function EntityProvider(_ref8) {
       queryCache: queryCache,
       defaultOptions: {
         queries: {
-          useErrorBoundary: true,
+          useErrorBoundary: false,
           refetchOnWindowFocus: false,
           refetchOnReconnect: true,
           refetchOnMount: false,
@@ -3812,5 +3813,447 @@ MultipleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
-export { AssetThumbnail, CombinedLinkActions, CreateEntryLinkButton, CreateEntryMenuTrigger, EntityProvider, MissingEntityCard, MultipleEntryReferenceEditor, MultipleMediaEditor, ScheduledIconWithTooltip, SingleEntryReferenceEditor, SingleMediaEditor, SortableLinkList, WrappedAssetCard, WrappedEntryCard, getScheduleTooltipContent, useEntity, useEntityLoader, useResource };
+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 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__*/css({
+    position: 'relative'
+  })
+};
+function UnsupportedEntityCard(props) {
+  return React__default.createElement(Card, {
+    className: styles$7.card
+  }, React__default.createElement(SectionHeading, {
+    marginBottom: "none"
+  }, "Resource type ", props.entityType, " is currently not supported"));
+}
+
+function ResourceCardSkeleton() {
+  return createElement(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 createElement(ResourceCardSkeleton, null);
+  }
+
+  if (data) {
+    return createElement(ContentfulEntryCard, _extends({
+      info: data
+    }, props));
+  }
+
+  if (isUnsupportedError(error)) {
+    return createElement(UnsupportedEntityCard, {
+      entityType: resourceLink.sys.linkType
+    });
+  }
+
+  return createElement(MissingEntityCard, {
+    entityType: "Entry",
+    isDisabled: props.isDisabled,
+    onRemove: props.onRemove
+  });
+}
+
+function ResourceCardWrapper(props) {
+  if (!props.resourceLink) {
+    return null;
+  }
+
+  return createElement(ExistingResourceCard, _extends({}, props, {
+    resourceLink: props.resourceLink,
+    getEntryRouteHref: props.getEntryRouteHref
+  }));
+}
+
+function ResourceCard(props) {
+  var _useInView = 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 createElement("div", {
+    ref: ref
+  }, createElement(ResourceCardWrapper, _extends({}, props, {
+    inView: inView
+  })));
+}
+
+function useResourceLinkActions(_ref) {
+  var apiUrl = _ref.apiUrl,
+      dialogs = _ref.dialogs,
+      field = _ref.field,
+      onAfterLink = _ref.onAfterLink;
+  var handleAfterLink = useCallback(function (entries) {
+    if (!onAfterLink) {
+      return;
+    }
+
+    entries.forEach(onAfterLink);
+  }, [onAfterLink]);
+  var multiple = field.type === 'Array';
+  var toLinkItem = 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 = 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 = 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 = useCallback(function (_, event) {
+    return event.preventDefault();
+  }, []);
+  var onSortEnd = useCallback(function (_ref) {
+    var oldIndex = _ref.oldIndex,
+        newIndex = _ref.newIndex;
+    var newItems = arrayMove(items, oldIndex, newIndex);
+    setValue(newItems);
+  }, [items, setValue]);
+  var onMove = useCallback(function (oldIndex, newIndex) {
+    var newItems = arrayMove(items, oldIndex, newIndex);
+    setValue(newItems);
+  }, [items, setValue]);
+  var onRemoteItemAtIndex = 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 createElement(Fragment, null, props.children(_extends({}, props, {
+    onSortStart: onSortStart,
+    onSortEnd: onSortEnd,
+    onMove: onMove,
+    onRemoteItemAtIndex: onRemoteItemAtIndex
+  })), 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 = useMemo(function () {
+    return index > 0 ? function () {
+      return onMove(index, 0);
+    } : undefined;
+  }, [index, onMove]);
+  var handleMoveBottom = useMemo(function () {
+    return index < listLength - 1 ? function () {
+      return onMove(index, listLength - 1);
+    } : undefined;
+  }, [index, onMove, listLength]);
+  var handleRemove = useCallback(function () {
+    return onRemoteItemAtIndex(index);
+  }, [index, onRemoteItemAtIndex]);
+  return createElement(Fragment, null, children({
+    onMoveBottom: handleMoveBottom,
+    onMoveTop: handleMoveTop,
+    onRemove: handleRemove
+  }));
+}
+
+var EMPTY_ARRAY = [];
+function MultipleResourceReferenceEditor(props) {
+  return createElement(EntityProvider, {
+    sdk: props.sdk
+  }, createElement(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 createElement(ResourceEditor, _extends({}, props, {
+      items: value || EMPTY_ARRAY,
+      isDisabled: disabled,
+      setValue: setValue,
+      key: externalReset + "-list"
+    }), function (editorProps) {
+      return createElement(SortableLinkList, _extends({}, editorProps), function (_ref4) {
+        var item = _ref4.item,
+            isDisabled = _ref4.isDisabled,
+            DragHandle = _ref4.DragHandle,
+            index = _ref4.index;
+        return 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 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 createElement(EntityProvider, {
+    sdk: props.sdk
+  }, createElement(FieldConnector, {
+    throttle: 0,
+    field: props.sdk.field,
+    isInitiallyDisabled: props.isInitiallyDisabled,
+    isEqualValues: deepEqual
+  }, function (_ref) {
+    var value = _ref.value,
+        disabled = _ref.disabled;
+    return value ? createElement(ResourceCard, {
+      onRemove: function onRemove() {
+        return props.sdk.field.removeValue();
+      },
+      resourceLink: value,
+      isDisabled: disabled,
+      getEntryRouteHref: props.getEntryRouteHref
+    }) : // TODO: support custom actions once publicly available
+    createElement(CombinedLinkActions, _extends({}, linkActionsProps));
+  }));
+}
+
+export { AssetThumbnail, CombinedLinkActions, CreateEntryLinkButton, CreateEntryMenuTrigger, EntityProvider, MissingEntityCard, MultipleEntryReferenceEditor, MultipleMediaEditor, MultipleResourceReferenceEditor, ScheduledIconWithTooltip, SingleEntryReferenceEditor, SingleMediaEditor, SingleResourceReferenceEditor, SortableLinkList, WrappedAssetCard, WrappedEntryCard, getScheduleTooltipContent, useEntity, useEntityLoader, useResource };
 //# sourceMappingURL=field-editor-reference.esm.js.map