@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/admin/plugins/fieldRenderers/ref/components/useReferences.js

@@ -1,61 +1,69 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useApolloClient } from "../../../../hooks";
-import * as GQL from "./graphql";
-import { getOptions } from "./getOptions";
-
-function distinctBy(key, array) {
-  var keys = array.map(function (value) {
-    return value[key];
-  });
-  return array.filter(function (value, index) {
-    return keys.indexOf(value[key]) === index;
-  });
-}
-
-export var useReferences = function useReferences(_ref) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReferences = void 0;
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _hooks = require("../../../../hooks");
+
+var _graphql = require("./graphql");
+
+var _helpers = require("./helpers");
+
+var useReferences = function useReferences(_ref) {
   var bind = _ref.bind,
       field = _ref.field;
-  var allEntries = useRef([]);
-  var client = useApolloClient();
+  var isMounted = (0, _react.useRef)(true);
+  var allEntries = (0, _react.useRef)({});
+  var client = (0, _hooks.useApolloClient)();
 
-  var _useState = useState(""),
-      _useState2 = _slicedToArray(_useState, 2),
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       search = _useState2[0],
       setSearch = _useState2[1];
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       loading = _useState4[0],
       setLoading = _useState4[1];
 
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
+  var _useState5 = (0, _react.useState)({}),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       entries = _useState6[0],
       setEntries = _useState6[1];
 
-  var _useState7 = useState([]),
-      _useState8 = _slicedToArray(_useState7, 2),
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       latestEntries = _useState8[0],
       setLatestEntries = _useState8[1];
 
-  var _useState9 = useState([]),
-      _useState10 = _slicedToArray(_useState9, 2),
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
       valueEntries = _useState10[0],
       setValueEntries = _useState10[1];
 
-  var models = field.settings.models;
+  var models = field.settings ? field.settings.models || [] : [];
   var modelsHash = models.join(",");
   var values = bind.value ? bind.value : [];
 
   var searchEntries = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _yield$client$query, data;
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var _yield$client$query, data, collection;
 
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
@@ -70,7 +78,7 @@ export var useReferences = function useReferences(_ref) {
               setLoading(true);
               _context.next = 5;
               return client.query({
-                query: GQL.SEARCH_CONTENT_ENTRIES,
+                query: _graphql.SEARCH_CONTENT_ENTRIES,
                 variables: {
                   modelIds: models.map(function (m) {
                     return m.modelId;
@@ -83,10 +91,11 @@ export var useReferences = function useReferences(_ref) {
               _yield$client$query = _context.sent;
               data = _yield$client$query.data;
               setLoading(false);
-              allEntries.current = distinctBy("id", [].concat(_toConsumableArray(allEntries.current), _toConsumableArray(data.content.data)));
-              setEntries(data.content.data);
+              collection = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
+              allEntries.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, allEntries.current), collection);
+              setEntries(collection);
 
-            case 10:
+            case 11:
             case "end":
               return _context.stop();
           }
@@ -99,49 +108,90 @@ export var useReferences = function useReferences(_ref) {
     };
   }();
 
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
     searchEntries();
   }, [search]);
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
     client.query({
-      query: GQL.SEARCH_CONTENT_ENTRIES,
+      query: _graphql.SEARCH_CONTENT_ENTRIES,
       variables: {
         modelIds: models.map(function (m) {
           return m.modelId;
         }),
-        query: "__latest__",
         limit: 10
-      }
+      },
+
+      /**
+       * We cannot update this query response in cache after a reference entry being created/deleted,
+       * which result in cached response being stale, therefore, we're setting the fetchPolicy to "network-only" to by passing cache.
+       */
+      fetchPolicy: "network-only"
     }).then(function (_ref3) {
       var data = _ref3.data;
-      setLatestEntries(data.content.data);
-      allEntries.current = _toConsumableArray(data.content.data);
+
+      if (!isMounted.current) {
+        return;
+      }
+
+      var collection = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
+      setLatestEntries(Object.values(collection));
+      allEntries.current = (0, _objectSpread2.default)({}, collection);
     });
   }, [modelsHash]);
-  useEffect(function () {
-    if (!values || !values.length) {
+  (0, _react.useEffect)(function () {
+    if (!values || values.length == 0) {
       return;
     }
 
     setLoading(true);
     client.query({
-      query: GQL.GET_CONTENT_ENTRIES,
+      query: _graphql.GET_CONTENT_ENTRIES,
       variables: {
-        entries: values
+        /**
+         * We need make sure nothing else other than modelId and id is passed to entries variable.
+         */
+        entries: values.map(function (value) {
+          return {
+            modelId: value.modelId,
+            id: value.id
+          };
+        })
       }
     }).then(function (res) {
+      if (!isMounted.current) {
+        return;
+      }
+
       setLoading(false);
-      var entries = res.data.content.data; // Calculate a couple of props for the Autocomplete component.
-
-      setValueEntries(entries.map(function (entry) {
-        return {
-          id: entry.id,
-          modelId: entry.model.modelId,
-          modelName: entry.model.name,
-          published: entry.status === "published",
-          name: entry.title
-        };
-      }));
+      var latest = (res.data.latest.data || []).reduce(function (collection, item) {
+        collection[item.entryId] = item;
+        return collection;
+      }, {});
+      var entries = (res.data.published.data || []).reduce(function (collection, item) {
+        var entryId = item.entryId;
+        var existingItem = latest[entryId];
+
+        if (existingItem) {
+          collection[entryId] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, existingItem), {}, {
+            published: {
+              id: item.id,
+              entryId: item.entryId,
+              title: item.title
+            }
+          });
+          return collection;
+        }
+
+        collection[entryId] = item;
+        return collection;
+      }, latest); // Calculate a couple of props for the Autocomplete component.
+
+      setValueEntries(Object.values(entries).map(_helpers.convertReferenceEntryToOption));
     });
   }, []);
   /**
@@ -149,24 +199,24 @@ export var useReferences = function useReferences(_ref) {
    * It will also format the value to store to the DB.
    */
 
-  var onChange = useCallback(function (values) {
+  var onChange = (0, _react.useCallback)(function (values) {
     setSearch("");
     setValueEntries(values); // Update parent form
 
     bind.onChange(values.map(function (item) {
       return {
         modelId: item.modelId,
-        entryId: item.id
+        id: item.id
       };
     }));
   }, []); // Format options for the Autocomplete component.
 
-  var options = useMemo(function () {
-    return getOptions(entries);
+  var options = (0, _react.useMemo)(function () {
+    return Object.values(entries);
   }, [entries]); // Format default options for the Autocomplete component.
 
-  var defaultOptions = useMemo(function () {
-    return getOptions(latestEntries);
+  var defaultOptions = (0, _react.useMemo)(function () {
+    return Object.values(latestEntries);
   }, [latestEntries]);
   return {
     onChange: onChange,
@@ -177,4 +227,6 @@ export var useReferences = function useReferences(_ref) {
     // Options to show when the autocomplete dropdown is visible
     options: search ? options : defaultOptions || []
   };
-};
+};
+
+exports.useReferences = useReferences;

package/admin/plugins/fieldRenderers/ref/components/useReferences.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useReferences","bind","field","isMounted","useRef","allEntries","client","useApolloClient","useState","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntries","setValueEntries","models","settings","modelsHash","join","values","value","searchEntries","query","SEARCH_CONTENT_ENTRIES","variables","modelIds","map","m","modelId","data","collection","convertReferenceEntriesToOptionCollection","content","current","useEffect","limit","fetchPolicy","then","Object","length","GET_CONTENT_ENTRIES","id","res","latest","reduce","item","entryId","published","existingItem","title","convertReferenceEntryToOption","onChange","useCallback","options","useMemo","defaultOptions"],"sources":["useReferences.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks\";\nimport { CmsEditorField, CmsModel } from \"~/types\";\nimport {\n    SEARCH_CONTENT_ENTRIES,\n    GET_CONTENT_ENTRIES,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables,\n    CmsEntryGetListResponse,\n    CmsEntryGetListVariables,\n    CmsEntryGetEntryVariable\n} from \"./graphql\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { CmsReferenceContentEntry, OptionItem, OptionItemCollection } from \"./types\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"~/admin/plugins/fieldRenderers/ref/components/helpers\";\n\ninterface UseReferencesParams {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\nexport const useReferences = ({ bind, field }: UseReferencesParams) => {\n    const isMounted = useRef(true);\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItem[]>([]);\n    const [valueEntries, setValueEntries] = useState<OptionItem[]>([]);\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\"\n    >[];\n    const modelsHash = models.join(\",\");\n    const values: CmsEntryGetEntryVariable[] = bind.value ? bind.value : [];\n\n    const searchEntries = async (): Promise<void> => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search\n            }\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        return () => {\n            isMounted.current = false;\n        };\n    }, []);\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\"\n            })\n            .then(({ data }) => {\n                if (!isMounted.current) {\n                    return;\n                }\n\n                const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n                setLatestEntries(Object.values(collection));\n                allEntries.current = {\n                    ...collection\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!values || values.length == 0) {\n            return;\n        }\n\n        setLoading(true);\n\n        client\n            .query<CmsEntryGetListResponse, CmsEntryGetListVariables>({\n                query: GET_CONTENT_ENTRIES,\n                variables: {\n                    /**\n                     * We need make sure nothing else other than modelId and id is passed to entries variable.\n                     */\n                    entries: values.map(value => {\n                        return {\n                            modelId: value.modelId,\n                            id: value.id\n                        };\n                    })\n                }\n            })\n            .then(res => {\n                if (!isMounted.current) {\n                    return;\n                }\n\n                setLoading(false);\n\n                const latest = (res.data.latest.data || []).reduce((collection, item) => {\n                    collection[item.entryId] = item;\n                    return collection;\n                }, {} as Record<string, CmsReferenceContentEntry>);\n\n                const entries = (res.data.published.data || []).reduce((collection, item) => {\n                    const entryId = item.entryId;\n                    const existingItem = latest[entryId];\n                    if (existingItem) {\n                        collection[entryId] = {\n                            ...existingItem,\n                            published: {\n                                id: item.id,\n                                entryId: item.entryId,\n                                title: item.title\n                            }\n                        };\n                        return collection;\n                    }\n                    collection[entryId] = item;\n                    return collection;\n                }, latest);\n\n                // Calculate a couple of props for the Autocomplete component.\n                setValueEntries(Object.values(entries).map(convertReferenceEntryToOption));\n            });\n    }, []);\n\n    /**\n     * onChange callback will update internal component state using the previously loaded entries by IDs.\n     * It will also format the value to store to the DB.\n     */\n    const onChange = useCallback((values: OptionItem[]): void => {\n        setSearch(\"\");\n        setValueEntries(values);\n\n        // Update parent form\n        bind.onChange(\n            values.map(item => ({\n                modelId: item.modelId,\n                id: item.id\n            }))\n        );\n    }, []);\n\n    // Format options for the Autocomplete component.\n    const options = useMemo(() => Object.values(entries), [entries]);\n\n    // Format default options for the Autocomplete component.\n    const defaultOptions = useMemo(() => Object.values(latestEntries), [latestEntries]);\n\n    return {\n        onChange,\n        loading,\n        setSearch,\n        // Selected entries\n        entries: valueEntries,\n        // Options to show when the autocomplete dropdown is visible\n        options: search ? options : defaultOptions || []\n    };\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntry.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { CmsEditorField } from "../../../../../types";
+interface UseNewRefEntryParams {
+    field: CmsEditorField;
+}
+interface UseNewRefEntry {
+    renderNewEntryModal: boolean;
+    refModelId: string;
+    helpText: React.ReactElement;
+}
+export declare const useNewRefEntry: ({ field }: UseNewRefEntryParams) => UseNewRefEntry;
+export {};

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntry.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNewRefEntry = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ContentEntriesContext = require("../../../../views/contentEntries/ContentEntriesContext");
+
+var _MissingEntryHelpText = _interopRequireWildcard(require("../components/MissingEntryHelpText"));
+
+var useNewRefEntry = function useNewRefEntry(_ref) {
+  var field = _ref.field;
+  var models = (field.settings && field.settings.models ? field.settings.models : null) || [];
+
+  var _models = (0, _slicedToArray2.default)(models, 1),
+      refModelId = _models[0].modelId;
+
+  var referenceMultipleModels = models.length > 1;
+  var contentEntriesContextValue = (0, _react.useContext)(_ContentEntriesContext.Context);
+  /**
+   * We don't wrap the "ContentEntryForm" with "ContentEntriesContextProvider"
+   * when rendering it inside content model editor's preview tab.
+   *
+   * And we also don't want to have new ref field Dialog in the preview tab.
+   * Therefore, we check for "contentEntriesContextValue" to know that we're inside preview tab.
+   */
+
+  var renderedInPreviewTab = contentEntriesContextValue === null;
+  /**
+   * Set "renderNewEntryModal" value.
+   */
+
+  var renderNewEntryModal;
+
+  if (renderedInPreviewTab) {
+    renderNewEntryModal = false;
+  } else if (referenceMultipleModels) {
+    renderNewEntryModal = false;
+  } else {
+    var insideDialog = contentEntriesContextValue.insideDialog;
+    renderNewEntryModal = !insideDialog;
+  }
+  /**
+   * Set "helpText" value.
+   */
+
+
+  var helpText = null;
+
+  if (referenceMultipleModels) {
+    helpText = /*#__PURE__*/_react.default.createElement(_MissingEntryHelpText.ReferenceMultipleModelsHelpText, null);
+  } else {
+    helpText = /*#__PURE__*/_react.default.createElement(_MissingEntryHelpText.default, {
+      refModelId: refModelId
+    });
+  }
+
+  return {
+    renderNewEntryModal: renderNewEntryModal,
+    refModelId: refModelId,
+    helpText: helpText
+  };
+};
+
+exports.useNewRefEntry = useNewRefEntry;

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useNewRefEntry","field","models","settings","refModelId","modelId","referenceMultipleModels","length","contentEntriesContextValue","useContext","ContentEntriesContext","renderedInPreviewTab","renderNewEntryModal","insideDialog","helpText"],"sources":["useNewRefEntry.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { Context as ContentEntriesContext } from \"~/admin/views/contentEntries/ContentEntriesContext\";\nimport { CmsEditorField } from \"~/types\";\nimport MissingEntryHelpText, {\n    ReferenceMultipleModelsHelpText\n} from \"../components/MissingEntryHelpText\";\n\ninterface UseNewRefEntryParams {\n    field: CmsEditorField;\n}\n\ninterface UseNewRefEntry {\n    renderNewEntryModal: boolean;\n    refModelId: string;\n    helpText: React.ReactElement;\n}\n\nexport const useNewRefEntry = ({ field }: UseNewRefEntryParams): UseNewRefEntry => {\n    const models = (field.settings && field.settings.models ? field.settings.models : null) || [];\n    const [{ modelId: refModelId }] = models;\n    const referenceMultipleModels = models.length > 1;\n\n    const contentEntriesContextValue = useContext(ContentEntriesContext);\n\n    /**\n     * We don't wrap the \"ContentEntryForm\" with \"ContentEntriesContextProvider\"\n     * when rendering it inside content model editor's preview tab.\n     *\n     * And we also don't want to have new ref field Dialog in the preview tab.\n     * Therefore, we check for \"contentEntriesContextValue\" to know that we're inside preview tab.\n     */\n    const renderedInPreviewTab = contentEntriesContextValue === null;\n\n    /**\n     * Set \"renderNewEntryModal\" value.\n     */\n    let renderNewEntryModal;\n\n    if (renderedInPreviewTab) {\n        renderNewEntryModal = false;\n    } else if (referenceMultipleModels) {\n        renderNewEntryModal = false;\n    } else {\n        const { insideDialog } = contentEntriesContextValue;\n        renderNewEntryModal = !insideDialog;\n    }\n    /**\n     * Set \"helpText\" value.\n     */\n    let helpText = null;\n    if (referenceMultipleModels) {\n        helpText = <ReferenceMultipleModelsHelpText />;\n    } else {\n        helpText = <MissingEntryHelpText refModelId={refModelId} />;\n    }\n\n    return {\n        renderNewEntryModal,\n        refModelId,\n        helpText\n    };\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAcO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAAqD;EAAA,IAAlDC,KAAkD,QAAlDA,KAAkD;EAC/E,IAAMC,MAAM,GAAG,CAACD,KAAK,CAACE,QAAN,IAAkBF,KAAK,CAACE,QAAN,CAAeD,MAAjC,GAA0CD,KAAK,CAACE,QAAN,CAAeD,MAAzD,GAAkE,IAAnE,KAA4E,EAA3F;;EACA,2CAAkCA,MAAlC;EAAA,IAAkBE,UAAlB,cAASC,OAAT;;EACA,IAAMC,uBAAuB,GAAGJ,MAAM,CAACK,MAAP,GAAgB,CAAhD;EAEA,IAAMC,0BAA0B,GAAG,IAAAC,iBAAA,EAAWC,8BAAX,CAAnC;EAEA;AACJ;AACA;AACA;AACA;AACA;AACA;;EACI,IAAMC,oBAAoB,GAAGH,0BAA0B,KAAK,IAA5D;EAEA;AACJ;AACA;;EACI,IAAII,mBAAJ;;EAEA,IAAID,oBAAJ,EAA0B;IACtBC,mBAAmB,GAAG,KAAtB;EACH,CAFD,MAEO,IAAIN,uBAAJ,EAA6B;IAChCM,mBAAmB,GAAG,KAAtB;EACH,CAFM,MAEA;IACH,IAAQC,YAAR,GAAyBL,0BAAzB,CAAQK,YAAR;IACAD,mBAAmB,GAAG,CAACC,YAAvB;EACH;EACD;AACJ;AACA;;;EACI,IAAIC,QAAQ,GAAG,IAAf;;EACA,IAAIR,uBAAJ,EAA6B;IACzBQ,QAAQ,gBAAG,6BAAC,qDAAD,OAAX;EACH,CAFD,MAEO;IACHA,QAAQ,gBAAG,6BAAC,6BAAD;MAAsB,UAAU,EAAEV;IAAlC,EAAX;EACH;;EAED,OAAO;IACHQ,mBAAmB,EAAnBA,mBADG;IAEHR,UAAU,EAAVA,UAFG;IAGHU,QAAQ,EAARA;EAHG,CAAP;AAKH,CA5CM"}

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntryDialog.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface NewRefEntryDialogContextValue {
+    open: boolean;
+    setOpen: (value: boolean) => void;
+}
+export declare const NewRefEntryDialogContext: React.Context<NewRefEntryDialogContextValue>;
+export declare const NewRefEntryDialogContextProvider: React.FC;
+export declare const useNewRefEntryDialog: () => NewRefEntryDialogContextValue;

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntryDialog.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNewRefEntryDialog = exports.NewRefEntryDialogContextProvider = exports.NewRefEntryDialogContext = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var NewRefEntryDialogContext = /*#__PURE__*/(0, _react.createContext)({
+  open: false,
+  setOpen: function setOpen() {
+    return void 0;
+  }
+});
+exports.NewRefEntryDialogContext = NewRefEntryDialogContext;
+
+var NewRefEntryDialogContextProvider = function NewRefEntryDialogContextProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(NewRefEntryDialogContext.Provider, {
+    value: {
+      open: open,
+      setOpen: setOpen
+    }
+  }, children);
+};
+
+exports.NewRefEntryDialogContextProvider = NewRefEntryDialogContextProvider;
+
+var useNewRefEntryDialog = function useNewRefEntryDialog() {
+  var _useContext = (0, _react.useContext)(NewRefEntryDialogContext),
+      open = _useContext.open,
+      setOpen = _useContext.setOpen;
+
+  return {
+    open: open,
+    setOpen: setOpen
+  };
+};
+
+exports.useNewRefEntryDialog = useNewRefEntryDialog;

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntryDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NewRefEntryDialogContext","createContext","open","setOpen","NewRefEntryDialogContextProvider","children","useState","useNewRefEntryDialog","useContext"],"sources":["useNewRefEntryDialog.tsx"],"sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\n\nexport interface NewRefEntryDialogContextValue {\n    open: boolean;\n    setOpen: (value: boolean) => void;\n}\n\nexport const NewRefEntryDialogContext = createContext<NewRefEntryDialogContextValue>({\n    open: false,\n    setOpen: () => {\n        return void 0;\n    }\n});\n\nexport const NewRefEntryDialogContextProvider: React.FC = ({ children }) => {\n    const [open, setOpen] = useState<boolean>(false);\n\n    return (\n        <NewRefEntryDialogContext.Provider\n            value={{\n                open,\n                setOpen\n            }}\n        >\n            {children}\n        </NewRefEntryDialogContext.Provider>\n    );\n};\n\nexport const useNewRefEntryDialog = (): NewRefEntryDialogContextValue => {\n    const { open, setOpen } = useContext(NewRefEntryDialogContext);\n    return {\n        open,\n        setOpen\n    };\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAOO,IAAMA,wBAAwB,gBAAG,IAAAC,oBAAA,EAA6C;EACjFC,IAAI,EAAE,KAD2E;EAEjFC,OAAO,EAAE,mBAAM;IACX,OAAO,KAAK,CAAZ;EACH;AAJgF,CAA7C,CAAjC;;;AAOA,IAAMC,gCAA0C,GAAG,SAA7CA,gCAA6C,OAAkB;EAAA,IAAfC,QAAe,QAAfA,QAAe;;EACxE,gBAAwB,IAAAC,eAAA,EAAkB,KAAlB,CAAxB;EAAA;EAAA,IAAOJ,IAAP;EAAA,IAAaC,OAAb;;EAEA,oBACI,6BAAC,wBAAD,CAA0B,QAA1B;IACI,KAAK,EAAE;MACHD,IAAI,EAAJA,IADG;MAEHC,OAAO,EAAPA;IAFG;EADX,GAMKE,QANL,CADJ;AAUH,CAbM;;;;AAeA,IAAME,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAqC;EACrE,kBAA0B,IAAAC,iBAAA,EAAWR,wBAAX,CAA1B;EAAA,IAAQE,IAAR,eAAQA,IAAR;EAAA,IAAcC,OAAd,eAAcA,OAAd;;EACA,OAAO;IACHD,IAAI,EAAJA,IADG;IAEHC,OAAO,EAAPA;EAFG,CAAP;AAIH,CANM"}

package/admin/plugins/fieldRenderers/ref/index.js

@@ -1,3 +1,15 @@
-import refInput from "./refInput";
-import refInputs from "./refInputs";
-export default [refInput, refInputs];
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _refInput = _interopRequireDefault(require("./refInput"));
+
+var _refInputs = _interopRequireDefault(require("./refInputs"));
+
+var _default = [_refInput.default, _refInputs.default];
+exports.default = _default;

package/admin/plugins/fieldRenderers/ref/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["refInput","refInputs"],"sources":["index.ts"],"sourcesContent":["import refInput from \"./refInput\";\nimport refInputs from \"./refInputs\";\n\nexport default [refInput, refInputs];\n"],"mappings":";;;;;;;;;AAAA;;AACA;;eAEe,CAACA,iBAAD,EAAWC,kBAAX,C"}

package/admin/plugins/fieldRenderers/ref/refInput.js

@@ -1,30 +1,46 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _ContentEntriesAutocomplete = _interopRequireDefault(require("./components/ContentEntriesAutocomplete"));
+
+var _useNewRefEntryDialog = require("./hooks/useNewRefEntryDialog");
 
 var _templateObject, _templateObject2;
 
-import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import ContentEntriesAutocomplete from "./components/ContentEntriesAutocomplete";
-var t = i18n.ns("app-headless-cms/admin/fields/ref");
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
+
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-ref",
   renderer: {
     rendererName: "ref-input",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Reference Input"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders an auto-complete input, allowing selection of a single value."]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Reference Input"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders an auto-complete input, allowing selection of a single value."]))),
     canUse: function canUse(_ref) {
       var field = _ref.field;
       return field.type === "ref" && !field.multipleValues;
     },
     render: function render(props) {
       var Bind = props.getBind();
-      return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
-        return /*#__PURE__*/React.createElement(ContentEntriesAutocomplete, Object.assign({}, props, {
+      return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+        return /*#__PURE__*/_react.default.createElement(_useNewRefEntryDialog.NewRefEntryDialogContextProvider, null, /*#__PURE__*/_react.default.createElement(_ContentEntriesAutocomplete.default, Object.assign({}, props, {
           bind: bind
-        }));
+        })));
       });
     }
   }
 };
-export default plugin;
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/ref/refInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","Bind","getBind","bind"],"sources":["refInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport ContentEntriesAutocomplete from \"./components/ContentEntriesAutocomplete\";\nimport { NewRefEntryDialogContextProvider } from \"./hooks/useNewRefEntryDialog\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-ref\",\n    renderer: {\n        rendererName: \"ref-input\",\n        name: t`Reference Input`,\n        description: t`Renders an auto-complete input, allowing selection of a single value.`,\n        canUse({ field }) {\n            return field.type === \"ref\" && !field.multipleValues;\n        },\n        render(props) {\n            const Bind = props.getBind();\n            return (\n                <Bind>\n                    {bind => (\n                        <NewRefEntryDialogContextProvider>\n                            <ContentEntriesAutocomplete {...props} bind={bind} />\n                        </NewRefEntryDialogContextProvider>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,mCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,+BAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,WADR;IAENF,IAAI,EAAEL,CAAF,kGAFE;IAGNQ,WAAW,EAAER,CAAF,0JAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,KAAf,IAAwB,CAACM,KAAK,CAACC,cAAtC;IACH,CANK;IAONC,MAPM,kBAOCC,KAPD,EAOQ;MACV,IAAMC,IAAI,GAAGD,KAAK,CAACE,OAAN,EAAb;MACA,oBACI,6BAAC,IAAD,QACK,UAAAC,IAAI;QAAA,oBACD,6BAAC,sDAAD,qBACI,6BAAC,mCAAD,oBAAgCH,KAAhC;UAAuC,IAAI,EAAEG;QAA7C,GADJ,CADC;MAAA,CADT,CADJ;IASH;EAlBK;AAH+B,CAA7C;eAyBeb,M"}

package/admin/plugins/fieldRenderers/ref/refInputs.js

@@ -1,11 +1,25 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ContentEntriesMultiAutoComplete = _interopRequireDefault(require("./components/ContentEntriesMultiAutoComplete"));
+
+var _useNewRefEntryDialog = require("./hooks/useNewRefEntryDialog");
+
+var _i18n = require("@webiny/app/i18n");
 
 var _templateObject, _templateObject2;
 
-import React from "react";
-import ContentEntriesMultiAutocomplete from "./components/ContentEntriesMultiAutoComplete";
-import { i18n } from "@webiny/app/i18n";
-var t = i18n.ns("app-headless-cms/admin/fields/ref");
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
 
 var getKey = function getKey(field, bind) {
   return bind.form.data.id + "." + field.fieldId;
@@ -16,22 +30,23 @@ var plugin = {
   name: "cms-editor-field-renderer-ref-inputs",
   renderer: {
     rendererName: "ref-inputs",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Reference Inputs"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders an auto-complete input, allowing selection of multiple values."]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Reference Inputs"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders an auto-complete input, allowing selection of multiple values."]))),
     canUse: function canUse(_ref) {
       var field = _ref.field;
-      return field.type === "ref" && field.multipleValues;
+      return field.type === "ref" && !!field.multipleValues;
     },
     render: function render(props) {
       var Bind = props.getBind();
-      return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
-        return /*#__PURE__*/React.createElement(ContentEntriesMultiAutocomplete, Object.assign({
+      return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+        return /*#__PURE__*/_react.default.createElement(_useNewRefEntryDialog.NewRefEntryDialogContextProvider, null, /*#__PURE__*/_react.default.createElement(_ContentEntriesMultiAutoComplete.default, Object.assign({
           key: getKey(props.field, bind)
         }, props, {
           bind: bind
-        }));
+        })));
       });
     }
   }
 };
-export default plugin;
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/ref/refInputs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","getKey","field","bind","form","data","id","fieldId","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render","props","Bind","getBind"],"sources":["refInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorContentEntry, CmsEditorField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport ContentEntriesMultiAutocomplete from \"./components/ContentEntriesMultiAutoComplete\";\nimport { NewRefEntryDialogContextProvider } from \"./hooks/useNewRefEntryDialog\";\n\nimport { i18n } from \"@webiny/app/i18n\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst getKey = (\n    field: CmsEditorField,\n    bind: BindComponentRenderProp<string, CmsEditorContentEntry>\n): string => {\n    return bind.form.data.id + \".\" + field.fieldId;\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-ref-inputs\",\n    renderer: {\n        rendererName: \"ref-inputs\",\n        name: t`Reference Inputs`,\n        description: t`Renders an auto-complete input, allowing selection of multiple values.`,\n        canUse({ field }) {\n            return field.type === \"ref\" && !!field.multipleValues;\n        },\n        render(props) {\n            const Bind = props.getBind();\n            return (\n                <Bind>\n                    {bind => (\n                        <NewRefEntryDialogContextProvider>\n                            <ContentEntriesMultiAutocomplete\n                                key={getKey(props.field, bind as any)}\n                                {...props}\n                                bind={bind}\n                            />\n                        </NewRefEntryDialogContextProvider>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AAEA;;;;AAGA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,mCAAR,CAAV;;AAEA,IAAMC,MAAM,GAAG,SAATA,MAAS,CACXC,KADW,EAEXC,IAFW,EAGF;EACT,OAAOA,IAAI,CAACC,IAAL,CAAUC,IAAV,CAAeC,EAAf,GAAoB,GAApB,GAA0BJ,KAAK,CAACK,OAAvC;AACH,CALD;;AAOA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,sCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,YADR;IAENF,IAAI,EAAEZ,CAAF,mGAFE;IAGNe,WAAW,EAAEf,CAAF,2JAHL;IAINgB,MAJM,wBAIY;MAAA,IAATZ,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACO,IAAN,KAAe,KAAf,IAAwB,CAAC,CAACP,KAAK,CAACa,cAAvC;IACH,CANK;IAONC,MAPM,kBAOCC,KAPD,EAOQ;MACV,IAAMC,IAAI,GAAGD,KAAK,CAACE,OAAN,EAAb;MACA,oBACI,6BAAC,IAAD,QACK,UAAAhB,IAAI;QAAA,oBACD,6BAAC,sDAAD,qBACI,6BAAC,wCAAD;UACI,GAAG,EAAEF,MAAM,CAACgB,KAAK,CAACf,KAAP,EAAcC,IAAd;QADf,GAEQc,KAFR;UAGI,IAAI,EAAEd;QAHV,GADJ,CADC;MAAA,CADT,CADJ;IAaH;EAtBK;AAH+B,CAA7C;eA6BeK,M"}