@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

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

@@ -1,278 +1,142 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useReference = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
-var _objectSpread3 = _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 _utils = require("@webiny/utils");
-
-var getValueHash = function getValueHash(value) {
-  if (!value || !value.id && !value.entryId) {
-    return null;
-  } else if (value.entryId) {
-    return value.entryId;
-  }
-
-  var _parseIdentifier = (0, _utils.parseIdentifier)(value.id),
-      id = _parseIdentifier.id;
-
-  return id;
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useApolloClient, useModelFieldGraphqlContext } from "../../../../hooks/index.js";
+import { GET_CONTENT_ENTRY, SEARCH_CONTENT_ENTRIES } from "./graphql.js";
+import { convertReferenceEntriesToOptionCollection, convertReferenceEntryToOption } from "./helpers.js";
+import { parseIdentifier } from "@webiny/utils";
+const getValueHash = (value)=>{
+    if (!value || !value.id && !value.entryId) return null;
+    if (value.entryId) return value.entryId;
+    const { id } = parseIdentifier(value.id);
+    return id;
 };
-
-var useReference = function useReference(_ref) {
-  var bind = _ref.bind,
-      field = _ref.field;
-  var allEntries = (0, _react.useRef)({});
-  var client = (0, _hooks.useApolloClient)();
-
-  var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      search = _useState2[0],
-      setSearch = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      loading = _useState4[0],
-      setLoading = _useState4[1];
-
-  var _useState5 = (0, _react.useState)({}),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      entries = _useState6[0],
-      setEntries = _useState6[1];
-
-  var _useState7 = (0, _react.useState)({}),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      latestEntries = _useState8[0],
-      setLatestEntries = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(null),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      valueEntry = _useState10[0],
-      setValueEntry = _useState10[1];
-
-  var models = field.settings ? field.settings.models || [] : [];
-  var modelsHash = models.map(function (model) {
-    return model.modelId;
-  }).join(",");
-  var value = bind.value;
-  var valueHash = getValueHash(value);
-
-  var searchEntries = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-      var _yield$client$query, data, collection;
-
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (search) {
-                _context.next = 2;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 2:
-              setLoading(true);
-              _context.next = 5;
-              return client.query({
-                query: _graphql.SEARCH_CONTENT_ENTRIES,
-                variables: {
-                  modelIds: models.map(function (m) {
-                    return m.modelId;
-                  }),
-                  query: search,
-                  limit: 10
+const useReference = ({ bind, field })=>{
+    const allEntries = useRef({});
+    const client = useApolloClient();
+    const [search, setSearch] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [entries, setEntries] = useState({});
+    const [latestEntries, setLatestEntries] = useState({});
+    const [valueEntry, setValueEntry] = useState(null);
+    const requestContext = useModelFieldGraphqlContext();
+    const models = field.settings ? field.settings.models || [] : [];
+    const modelsHash = models.map((model)=>model.modelId).join(",");
+    const value = bind.value;
+    const valueHash = getValueHash(value);
+    const searchEntries = async ()=>{
+        if (!search) return;
+        setLoading(true);
+        const { data } = await client.query({
+            query: SEARCH_CONTENT_ENTRIES,
+            variables: {
+                modelIds: models.map((m)=>m.modelId),
+                query: search,
+                limit: 10
+            },
+            context: requestContext
+        });
+        setLoading(false);
+        const collection = convertReferenceEntriesToOptionCollection(data.content.data);
+        if (valueEntry) collection[valueEntry.entryId] = valueEntry;
+        allEntries.current = {
+            ...allEntries.current,
+            ...collection
+        };
+        setEntries(collection);
+    };
+    useEffect(()=>{
+        searchEntries();
+    }, [
+        search
+    ]);
+    useEffect(()=>{
+        if (0 === models.length) return;
+        client.query({
+            query: SEARCH_CONTENT_ENTRIES,
+            variables: {
+                modelIds: models.map((m)=>m.modelId),
+                limit: 10
+            },
+            fetchPolicy: "network-only",
+            context: requestContext
+        }).then(({ data })=>{
+            const latestEntryData = convertReferenceEntriesToOptionCollection(data.content.data);
+            if (valueEntry) latestEntryData[valueEntry.entryId] = valueEntry;
+            setLatestEntries(latestEntryData);
+            allEntries.current = {
+                ...allEntries.current,
+                ...latestEntryData
+            };
+        });
+    }, [
+        modelsHash
+    ]);
+    useEffect(()=>{
+        if (!value || !models) return void setValueEntry(()=>null);
+        const entry = valueHash ? allEntries.current[valueHash] : null;
+        if (entry) return void setValueEntry(()=>entry);
+        setLoading(true);
+        client.query({
+            query: GET_CONTENT_ENTRY,
+            variables: {
+                entry: {
+                    modelId: value.modelId,
+                    id: value.id
                 }
-              });
-
-            case 5:
-              _yield$client$query = _context.sent;
-              data = _yield$client$query.data;
-              setLoading(false);
-              collection = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
-
-              if (valueEntry) {
-                collection[valueEntry.entryId] = valueEntry;
-              }
-
-              allEntries.current = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, allEntries.current), collection);
-              setEntries(collection);
-
-            case 12:
-            case "end":
-              return _context.stop();
-          }
+            },
+            context: requestContext
+        }).then((res)=>{
+            setLoading(false);
+            const dataEntry = res.data.latest.data;
+            if (!dataEntry) return;
+            const option = {
+                ...convertReferenceEntryToOption(dataEntry),
+                latest: dataEntry.id,
+                published: res.data.published.data ? res.data.published.data.id : null
+            };
+            allEntries.current[option.entryId] = option;
+            setLatestEntries((prev)=>({
+                    ...prev,
+                    [option.entryId]: {
+                        ...option
+                    }
+                }));
+            setValueEntry(()=>option);
+        });
+    }, [
+        valueHash,
+        modelsHash
+    ]);
+    const onChange = useCallback((value, entry)=>{
+        if (null !== value) {
+            setSearch("");
+            setValueEntry(()=>entry);
+            bind.onChange({
+                modelId: entry.modelId,
+                id: entry.id
+            });
+            return;
         }
-      }, _callee);
-    }));
-
-    return function searchEntries() {
-      return _ref2.apply(this, arguments);
+        setValueEntry(()=>null);
+        bind.onChange(null);
+    }, []);
+    const options = useMemo(()=>Object.values(entries), [
+        valueHash,
+        entries
+    ]);
+    const defaultOptions = useMemo(()=>Object.values(latestEntries), [
+        valueHash,
+        latestEntries
+    ]);
+    const outputOptions = (search && options ? options : defaultOptions) || [];
+    if (valueEntry && false === outputOptions.some((opt)=>opt.entryId === valueEntry.entryId)) outputOptions.push(valueEntry);
+    return {
+        onChange,
+        setSearch,
+        value: valueEntry,
+        loading,
+        options: outputOptions
     };
-  }();
-
-  (0, _react.useEffect)(function () {
-    searchEntries();
-  }, [search]);
-  (0, _react.useEffect)(function () {
-    if (models.length === 0) {
-      return;
-    }
-
-    client.query({
-      query: _graphql.SEARCH_CONTENT_ENTRIES,
-      variables: {
-        modelIds: models.map(function (m) {
-          return m.modelId;
-        }),
-        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;
-      var latestEntryData = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
-
-      if (valueEntry) {
-        latestEntryData[valueEntry.entryId] = valueEntry;
-      }
-
-      setLatestEntries(latestEntryData);
-      allEntries.current = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, allEntries.current), latestEntryData);
-    });
-  }, [modelsHash]);
-  (0, _react.useEffect)(function () {
-    if (!value || !models) {
-      setValueEntry(function () {
-        return null;
-      });
-      return;
-    }
-
-    var entry = valueHash ? allEntries.current[valueHash] : null;
-
-    if (entry) {
-      /**
-       * if entry exists set valueEntry to that one so we do not load new one
-       */
-      setValueEntry(function () {
-        return entry;
-      });
-      return;
-    }
-
-    setLoading(true);
-    /**
-     * Query loads both latest and published entries.
-     * We do this in a single query because there might not be a published entry so we can use the latest one.
-     */
-
-    client.query({
-      query: _graphql.GET_CONTENT_ENTRY,
-      variables: {
-        entry: {
-          modelId: value.modelId,
-          id: value.id
-        }
-      }
-    }).then(function (res) {
-      setLoading(false);
-      var dataEntry = res.data.latest.data;
-
-      if (!dataEntry) {
-        return;
-      }
-
-      var option = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _helpers.convertReferenceEntryToOption)(dataEntry)), {}, {
-        latest: dataEntry.id,
-        published: res.data.published.data ? res.data.published.data.id : null
-      });
-      allEntries.current[option.entryId] = option;
-      setLatestEntries(function (prev) {
-        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, (0, _defineProperty2.default)({}, option.entryId, (0, _objectSpread3.default)({}, option)));
-      });
-      /**
-       * Calculate a couple of props for the Autocomplete component.
-       */
-
-      setValueEntry(function () {
-        return option;
-      });
-    });
-  }, [valueHash, modelsHash]);
-  var onChange = (0, _react.useCallback)(function (value, entry) {
-    if (value !== null) {
-      setSearch("");
-      setValueEntry(function () {
-        return entry;
-      });
-      bind.onChange({
-        modelId: entry.modelId,
-        id: entry.id
-      });
-      return;
-    }
-
-    setValueEntry(function () {
-      return null;
-    });
-    bind.onChange(null);
-  }, []);
-  /**
-   * Format options for the Autocomplete component.
-   */
-
-  var options = (0, _react.useMemo)(function () {
-    return Object.values(entries);
-  }, [valueHash, entries]);
-  /**
-   * Format default options for the Autocomplete component.
-   */
-
-  var defaultOptions = (0, _react.useMemo)(function () {
-    return Object.values(latestEntries);
-  }, [valueHash, latestEntries]);
-  var outputOptions = (search && options ? options : defaultOptions) || [];
-
-  if (valueEntry && outputOptions.some(function (opt) {
-    return opt.entryId === valueEntry.entryId;
-  }) === false) {
-    outputOptions.push(valueEntry);
-  }
-
-  return {
-    onChange: onChange,
-    setSearch: setSearch,
-    value: valueEntry,
-    loading: loading,
-    options: outputOptions
-  };
 };
+export { useReference };
 
-exports.useReference = useReference;
+//# sourceMappingURL=useReference.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["getValueHash","value","id","entryId","parseIdentifier","useReference","bind","field","allEntries","useRef","client","useApolloClient","useState","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntry","setValueEntry","models","settings","modelsHash","map","model","modelId","join","valueHash","searchEntries","query","SEARCH_CONTENT_ENTRIES","variables","modelIds","m","limit","data","collection","convertReferenceEntriesToOptionCollection","content","current","useEffect","length","fetchPolicy","then","latestEntryData","entry","GET_CONTENT_ENTRY","res","dataEntry","latest","option","convertReferenceEntryToOption","published","prev","onChange","useCallback","options","useMemo","Object","values","defaultOptions","outputOptions","some","opt","push"],"sources":["useReference.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks\";\nimport {\n    SEARCH_CONTENT_ENTRIES,\n    GET_CONTENT_ENTRY,\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables\n} from \"./graphql\";\nimport { CmsEditorField, CmsModel } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem, OptionItemCollection } from \"./types\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"./helpers\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface UseReferenceHookArgs {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\n\ninterface UseReferenceHookValue {\n    onChange: (value: any, entry: OptionItem) => void;\n    setSearch: (value: string) => void;\n    value: OptionItem | null;\n    loading: boolean;\n    options: OptionItem[];\n}\n\ntype UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;\n\nconst getValueHash = (value: any): string | null => {\n    if (!value || (!value.id && !value.entryId)) {\n        return null;\n    } else if (value.entryId) {\n        return value.entryId;\n    }\n    const { id } = parseIdentifier(value.id);\n    return id;\n};\n\nexport const useReference: UseReferenceHook = ({ bind, field }) => {\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<OptionItemCollection>({});\n    const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\" | \"name\"\n    >[];\n    const modelsHash = models.map(model => model.modelId).join(\",\");\n\n    const value = bind.value;\n    const valueHash = getValueHash(value);\n\n    const searchEntries = async () => {\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                limit: 10\n            }\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n        if (valueEntry) {\n            collection[valueEntry.entryId] = valueEntry;\n        }\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        if (models.length === 0) {\n            return;\n        }\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                const latestEntryData = convertReferenceEntriesToOptionCollection(\n                    data.content.data\n                );\n                if (valueEntry) {\n                    latestEntryData[valueEntry.entryId] = valueEntry;\n                }\n\n                setLatestEntries(latestEntryData);\n                allEntries.current = {\n                    ...allEntries.current,\n                    ...latestEntryData\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!value || !models) {\n            setValueEntry(() => null);\n            return;\n        }\n\n        const entry = valueHash ? allEntries.current[valueHash] : null;\n        if (entry) {\n            /**\n             * if entry exists set valueEntry to that one so we do not load new one\n             */\n            setValueEntry(() => {\n                return entry;\n            });\n            return;\n        }\n\n        setLoading(true);\n        /**\n         * Query loads both latest and published entries.\n         * We do this in a single query because there might not be a published entry so we can use the latest one.\n         */\n        client\n            .query<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>({\n                query: GET_CONTENT_ENTRY,\n                variables: {\n                    entry: {\n                        modelId: value.modelId,\n                        id: value.id\n                    }\n                }\n            })\n            .then(res => {\n                setLoading(false);\n                const dataEntry = res.data.latest.data;\n                if (!dataEntry) {\n                    return;\n                }\n                const option: OptionItem = {\n                    ...convertReferenceEntryToOption(dataEntry),\n                    latest: dataEntry.id,\n                    published: res.data.published.data ? res.data.published.data.id : null\n                };\n                allEntries.current[option.entryId] = option;\n                setLatestEntries(prev => {\n                    return {\n                        ...prev,\n                        [option.entryId]: {\n                            ...option\n                        }\n                    };\n                });\n                /**\n                 * Calculate a couple of props for the Autocomplete component.\n                 */\n                setValueEntry(() => {\n                    return option;\n                });\n            });\n    }, [valueHash, modelsHash]);\n\n    const onChange = useCallback((value: string, entry: OptionItem) => {\n        if (value !== null) {\n            setSearch(\"\");\n\n            setValueEntry(() => {\n                return entry;\n            });\n            bind.onChange({\n                modelId: entry.modelId,\n                id: entry.id\n            });\n            return;\n        }\n\n        setValueEntry(() => null);\n        bind.onChange(null);\n    }, []);\n\n    /**\n     * Format options for the Autocomplete component.\n     */\n    const options = useMemo(() => Object.values(entries), [valueHash, entries]);\n\n    /**\n     * Format default options for the Autocomplete component.\n     */\n    const defaultOptions = useMemo(() => {\n        return Object.values(latestEntries);\n    }, [valueHash, latestEntries]);\n\n    const outputOptions: OptionItem[] = (search && options ? options : defaultOptions) || [];\n\n    if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {\n        outputOptions.push(valueEntry);\n    }\n\n    return {\n        onChange,\n        setSearch,\n        value: valueEntry,\n        loading,\n        options: outputOptions\n    };\n};\n"],"mappings":"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"}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/components/useReference.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/components/useReference.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient, useModelFieldGraphqlContext } from \"~/admin/hooks/index.js\";\nimport type {\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables\n} from \"./graphql.js\";\nimport { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRY } from \"./graphql.js\";\nimport type { CmsModelField, CmsModel } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { OptionItem, OptionItemCollection } from \"./types.js\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"./helpers.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface UseReferenceHookArgs {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\n\ninterface UseReferenceHookValue {\n    onChange: (value: any, entry: OptionItem) => void;\n    setSearch: (value: string) => void;\n    value: OptionItem | null;\n    loading: boolean;\n    options: OptionItem[];\n}\n\ntype UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;\n\nconst getValueHash = (value: any): string | null => {\n    if (!value || (!value.id && !value.entryId)) {\n        return null;\n    } else if (value.entryId) {\n        return value.entryId;\n    }\n    const { id } = parseIdentifier(value.id);\n    return id;\n};\n\nexport const useReference: UseReferenceHook = ({ bind, field }) => {\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<OptionItemCollection>({});\n    const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);\n    const requestContext = useModelFieldGraphqlContext();\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\" | \"name\"\n    >[];\n    const modelsHash = models.map(model => model.modelId).join(\",\");\n\n    const value = bind.value;\n    const valueHash = getValueHash(value);\n\n    const searchEntries = async () => {\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                limit: 10\n            },\n            context: requestContext\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n        if (valueEntry) {\n            collection[valueEntry.entryId] = valueEntry;\n        }\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        if (models.length === 0) {\n            return;\n        }\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                context: requestContext\n            })\n            .then(({ data }) => {\n                const latestEntryData = convertReferenceEntriesToOptionCollection(\n                    data.content.data\n                );\n                if (valueEntry) {\n                    latestEntryData[valueEntry.entryId] = valueEntry;\n                }\n\n                setLatestEntries(latestEntryData);\n                allEntries.current = {\n                    ...allEntries.current,\n                    ...latestEntryData\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!value || !models) {\n            setValueEntry(() => null);\n            return;\n        }\n\n        const entry = valueHash ? allEntries.current[valueHash] : null;\n        if (entry) {\n            /**\n             * if entry exists set valueEntry to that one so we do not load new one\n             */\n            setValueEntry(() => {\n                return entry;\n            });\n            return;\n        }\n\n        setLoading(true);\n        /**\n         * Query loads both latest and published entries.\n         * We do this in a single query because there might not be a published entry so we can use the latest one.\n         */\n        client\n            .query<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>({\n                query: GET_CONTENT_ENTRY,\n                variables: {\n                    entry: {\n                        modelId: value.modelId,\n                        id: value.id\n                    }\n                },\n                context: requestContext\n            })\n            .then(res => {\n                setLoading(false);\n                const dataEntry = res.data.latest.data;\n                if (!dataEntry) {\n                    return;\n                }\n                const option: OptionItem = {\n                    ...convertReferenceEntryToOption(dataEntry),\n                    latest: dataEntry.id,\n                    published: res.data.published.data ? res.data.published.data.id : null\n                };\n                allEntries.current[option.entryId] = option;\n                setLatestEntries(prev => {\n                    return {\n                        ...prev,\n                        [option.entryId]: {\n                            ...option\n                        }\n                    };\n                });\n                /**\n                 * Calculate a couple of props for the Autocomplete component.\n                 */\n                setValueEntry(() => {\n                    return option;\n                });\n            });\n    }, [valueHash, modelsHash]);\n\n    const onChange = useCallback((value: string, entry: OptionItem) => {\n        if (value !== null) {\n            setSearch(\"\");\n\n            setValueEntry(() => {\n                return entry;\n            });\n\n            bind.onChange({\n                modelId: entry.modelId,\n                id: entry.id\n            });\n            return;\n        }\n\n        setValueEntry(() => null);\n        bind.onChange(null);\n    }, []);\n\n    /**\n     * Format options for the Autocomplete component.\n     */\n    const options = useMemo(() => Object.values(entries), [valueHash, entries]);\n\n    /**\n     * Format default options for the Autocomplete component.\n     */\n    const defaultOptions = useMemo(() => {\n        return Object.values(latestEntries);\n    }, [valueHash, latestEntries]);\n\n    const outputOptions: OptionItem[] = (search && options ? options : defaultOptions) || [];\n\n    if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {\n        outputOptions.push(valueEntry);\n    }\n\n    return {\n        onChange,\n        setSearch,\n        value: valueEntry,\n        loading,\n        options: outputOptions\n    };\n};\n"],"names":["getValueHash","value","id","parseIdentifier","useReference","bind","field","allEntries","useRef","client","useApolloClient","search","setSearch","useState","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntry","setValueEntry","requestContext","useModelFieldGraphqlContext","models","modelsHash","model","valueHash","searchEntries","data","SEARCH_CONTENT_ENTRIES","m","collection","convertReferenceEntriesToOptionCollection","useEffect","latestEntryData","entry","GET_CONTENT_ENTRY","res","dataEntry","option","convertReferenceEntryToOption","prev","onChange","useCallback","options","useMemo","Object","defaultOptions","outputOptions","opt"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/components/useReferences.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { CmsEditorField } from "../../../../../types";
-import { BindComponentRenderProp } from "@webiny/form";
-import { OptionItem } from "./types";
+import type { CmsModelField } from "../../../../../types.js";
+import type { BindComponentRenderProp } from "@webiny/form";
+import type { OptionItem } from "./types.js";
 interface UseReferencesParams {
     bind: BindComponentRenderProp;
-    field: CmsEditorField;
+    field: CmsModelField;
 }
 export declare const useReferences: ({ bind, field }: UseReferencesParams) => {
     onChange: (values: OptionItem[]) => void;