@payloadcms/ui 3.0.0-canary.cee5702 → 3.0.0-canary.cf66341

package/dist/elements/WhereBuilder/Condition/Relationship/index.js

@@ -1,323 +1,302 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import QueryString from 'qs';
+import * as qs from 'qs-esm';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import { useDebounce } from '../../../../hooks/useDebounce.js';
 import { useConfig } from '../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
+import './index.scss';
 import optionsReducer from './optionsReducer.js';
 const baseClass = 'condition-value-relationship';
 const maxResultsPerRequest = 10;
-export const RelationshipField = (props)=>{
-    const { admin: { isSortable } = {}, disabled, hasMany, onChange, relationTo, value } = props;
-    const { collections, routes: { api }, serverURL } = useConfig();
-    const hasMultipleRelations = Array.isArray(relationTo);
-    const [options, dispatchOptions] = useReducer(optionsReducer, []);
-    const [search, setSearch] = useState('');
-    const [errorLoading, setErrorLoading] = useState('');
-    const [hasLoadedFirstOptions, setHasLoadedFirstOptions] = useState(false);
-    const debouncedSearch = useDebounce(search, 300);
-    const { i18n, t } = useTranslation();
-    const relationSlugs = hasMultipleRelations ? relationTo : [
-        relationTo
-    ];
-    const initialRelationMap = ()=>{
-        const map = new Map();
-        relationSlugs.forEach((relation)=>{
-            map.set(relation, 1);
+export const RelationshipField = props => {
+  const {
+    admin: {
+      isSortable
+    } = {},
+    disabled,
+    hasMany,
+    onChange,
+    relationTo,
+    value
+  } = props;
+  const {
+    config: {
+      collections,
+      routes: {
+        api
+      },
+      serverURL
+    }
+  } = useConfig();
+  const hasMultipleRelations = Array.isArray(relationTo);
+  const [options, dispatchOptions] = useReducer(optionsReducer, []);
+  const [search, setSearch] = useState('');
+  const [errorLoading, setErrorLoading] = useState('');
+  const [hasLoadedFirstOptions, setHasLoadedFirstOptions] = useState(false);
+  const debouncedSearch = useDebounce(search, 300);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const relationSlugs = hasMultipleRelations ? relationTo : [relationTo];
+  const initialRelationMap = () => {
+    const map = new Map();
+    relationSlugs.forEach(relation => {
+      map.set(relation, 1);
+    });
+    return map;
+  };
+  const nextPageByRelationshipRef = React.useRef(initialRelationMap());
+  const partiallyLoadedRelationshipSlugs = React.useRef(relationSlugs);
+  const addOptions = useCallback((data, relation_0) => {
+    const collection = collections.find(coll => coll.slug === relation_0);
+    dispatchOptions({
+      type: 'ADD',
+      collection,
+      data,
+      hasMultipleRelations,
+      i18n,
+      relation: relation_0
+    });
+  }, [collections, hasMultipleRelations, i18n]);
+  const loadRelationOptions = React.useCallback(async ({
+    abortController,
+    relationSlug
+  }) => {
+    if (relationSlug && partiallyLoadedRelationshipSlugs.current.includes(relationSlug)) {
+      const collection_0 = collections.find(coll_0 => coll_0.slug === relationSlug);
+      const fieldToSearch = collection_0?.admin?.useAsTitle || 'id';
+      const pageIndex = nextPageByRelationshipRef.current.get(relationSlug);
+      const query = {
+        depth: 0,
+        limit: maxResultsPerRequest,
+        page: pageIndex,
+        where: {
+          and: []
+        }
+      };
+      if (debouncedSearch) {
+        query.where.and.push({
+          [fieldToSearch]: {
+            like: debouncedSearch
+          }
         });
-        return map;
-    };
-    const nextPageByRelationshipRef = React.useRef(initialRelationMap());
-    const partiallyLoadedRelationshipSlugs = React.useRef(relationSlugs);
-    const addOptions = useCallback((data, relation)=>{
-        const collection = collections.find((coll)=>coll.slug === relation);
-        dispatchOptions({
-            type: 'ADD',
-            collection,
-            data,
-            hasMultipleRelations,
-            i18n,
-            relation
+      }
+      try {
+        const response = await fetch(`${serverURL}${api}/${relationSlug}${qs.stringify(query, {
+          addQueryPrefix: true
+        })}`, {
+          credentials: 'include',
+          headers: {
+            'Accept-Language': i18n.language
+          },
+          signal: abortController.signal
         });
-    }, [
-        collections,
-        hasMultipleRelations,
-        i18n
-    ]);
-    const loadRelationOptions = React.useCallback(async ({ abortController, relationSlug })=>{
-        const collection = collections.find((coll)=>coll.slug === relationSlug);
-        const fieldToSearch = collection?.admin?.useAsTitle || 'id';
-        const pageIndex = nextPageByRelationshipRef.current.get(relationSlug);
-        if (partiallyLoadedRelationshipSlugs.current.includes(relationSlug)) {
-            const query = {
-                depth: 0,
-                limit: maxResultsPerRequest,
-                page: pageIndex,
-                where: {
-                    and: []
-                }
-            };
-            if (debouncedSearch) {
-                query.where.and.push({
-                    [fieldToSearch]: {
-                        like: debouncedSearch
-                    }
-                });
-            }
-            try {
-                const response = await fetch(`${serverURL}${api}/${relationSlug}${QueryString.stringify(query, {
-                    addQueryPrefix: true
-                })}`, {
-                    credentials: 'include',
-                    headers: {
-                        'Accept-Language': i18n.language
-                    },
-                    signal: abortController.signal
-                });
-                if (response.ok) {
-                    const data = await response.json();
-                    if (data.docs.length > 0) {
-                        addOptions(data, relationSlug);
-                        if (!debouncedSearch) {
-                            if (data.nextPage) {
-                                nextPageByRelationshipRef.current.set(relationSlug, data.nextPage);
-                            } else {
-                                partiallyLoadedRelationshipSlugs.current = partiallyLoadedRelationshipSlugs.current.filter((partiallyLoadedRelation)=>partiallyLoadedRelation !== relationSlug);
-                            }
-                        }
-                    }
-                } else {
-                    setErrorLoading(t('error:unspecific'));
-                }
-            } catch (e) {
-                if (!abortController.signal.aborted) {
-                    console.error(e);
-                }
+        if (response.ok) {
+          const data_0 = await response.json();
+          if (data_0.docs.length > 0) {
+            addOptions(data_0, relationSlug);
+            if (!debouncedSearch) {
+              if (data_0.nextPage) {
+                nextPageByRelationshipRef.current.set(relationSlug, data_0.nextPage);
+              } else {
+                partiallyLoadedRelationshipSlugs.current = partiallyLoadedRelationshipSlugs.current.filter(partiallyLoadedRelation => partiallyLoadedRelation !== relationSlug);
+              }
             }
+          }
+        } else {
+          setErrorLoading(t('error:unspecific'));
         }
-        setHasLoadedFirstOptions(true);
-    }, [
-        addOptions,
-        api,
-        collections,
-        debouncedSearch,
-        i18n.language,
-        serverURL,
-        t
-    ]);
-    const loadMoreOptions = React.useCallback(()=>{
-        if (partiallyLoadedRelationshipSlugs.current.length > 0) {
-            const abortController = new AbortController();
-            loadRelationOptions({
-                abortController,
-                relationSlug: partiallyLoadedRelationshipSlugs.current[0]
-            });
+      } catch (e) {
+        if (!abortController.signal.aborted) {
+          console.error(e);
         }
-    }, [
-        loadRelationOptions
-    ]);
-    const findOptionsByValue = useCallback(()=>{
-        if (value) {
-            if (hasMany) {
-                if (Array.isArray(value)) {
-                    return value.map((val)=>{
-                        if (hasMultipleRelations) {
-                            let matchedOption;
-                            options.forEach((opt)=>{
-                                if (opt.options) {
-                                    opt.options.some((subOpt)=>{
-                                        if (subOpt?.value === val.value) {
-                                            matchedOption = subOpt;
-                                            return true;
-                                        }
-                                        return false;
-                                    });
-                                }
-                            });
-                            return matchedOption;
-                        }
-                        return options.find((opt)=>opt.value === val);
-                    });
-                }
-                return undefined;
-            }
+      }
+    }
+    setHasLoadedFirstOptions(true);
+  }, [addOptions, api, collections, debouncedSearch, i18n.language, serverURL, t]);
+  const loadMoreOptions = React.useCallback(() => {
+    if (partiallyLoadedRelationshipSlugs.current.length > 0) {
+      const abortController_0 = new AbortController();
+      void loadRelationOptions({
+        abortController: abortController_0,
+        relationSlug: partiallyLoadedRelationshipSlugs.current[0]
+      });
+    }
+  }, [loadRelationOptions]);
+  const findOptionsByValue = useCallback(() => {
+    if (value) {
+      if (hasMany) {
+        if (Array.isArray(value)) {
+          return value.map(val => {
             if (hasMultipleRelations) {
-                let matchedOption;
-                const valueWithRelation = value;
-                options.forEach((opt)=>{
-                    if (opt?.options) {
-                        opt.options.some((subOpt)=>{
-                            if (subOpt?.value === valueWithRelation.value) {
-                                matchedOption = subOpt;
-                                return true;
-                            }
-                            return false;
-                        });
+              let matchedOption;
+              options.forEach(opt => {
+                if (opt.options) {
+                  opt.options.some(subOpt => {
+                    if (subOpt?.value == val.value) {
+                      matchedOption = subOpt;
+                      return true;
                     }
-                });
-                return matchedOption;
+                    return false;
+                  });
+                }
+              });
+              return matchedOption;
             }
-            return options.find((opt)=>opt.value === value);
+            return options.find(opt_0 => opt_0.value == val);
+          });
         }
         return undefined;
-    }, [
-        hasMany,
-        hasMultipleRelations,
-        value,
-        options
-    ]);
-    const handleInputChange = useCallback((newSearch)=>{
-        if (search !== newSearch) {
-            setSearch(newSearch);
-        }
-    }, [
-        search
-    ]);
-    const addOptionByID = useCallback(async (id, relation)=>{
-        if (!errorLoading && id !== 'null' && id && relation) {
-            const response = await fetch(`${serverURL}${api}/${relation}/${id}?depth=0`, {
-                credentials: 'include',
-                headers: {
-                    'Accept-Language': i18n.language
-                }
+      }
+      if (hasMultipleRelations) {
+        let matchedOption_0;
+        const valueWithRelation = value;
+        options.forEach(opt_1 => {
+          if (opt_1?.options) {
+            opt_1.options.some(subOpt_0 => {
+              if (subOpt_0?.value == valueWithRelation.value) {
+                matchedOption_0 = subOpt_0;
+                return true;
+              }
+              return false;
             });
-            if (response.ok) {
-                const data = await response.json();
-                addOptions({
-                    docs: [
-                        data
-                    ]
-                }, relation);
+          }
+        });
+        return matchedOption_0;
+      }
+      return options.find(opt_2 => opt_2.value == value);
+    }
+    return undefined;
+  }, [hasMany, hasMultipleRelations, value, options]);
+  const handleInputChange = useCallback(newSearch => {
+    if (search !== newSearch) {
+      setSearch(newSearch);
+    }
+  }, [search]);
+  const addOptionByID = useCallback(async (id, relation_1) => {
+    if (!errorLoading && id !== 'null' && id && relation_1) {
+      const response_0 = await fetch(`${serverURL}${api}/${relation_1}/${id}?depth=0`, {
+        credentials: 'include',
+        headers: {
+          'Accept-Language': i18n.language
+        }
+      });
+      if (response_0.ok) {
+        const data_1 = await response_0.json();
+        addOptions({
+          docs: [data_1]
+        }, relation_1);
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(t('error:loadingDocument', {
+          id
+        }));
+      }
+    }
+  }, [i18n, addOptions, api, errorLoading, serverURL, t]);
+  /**
+  * 1. Trigger initial relationship options fetch
+  * 2. When search changes, loadRelationOptions will
+  *    fire off again
+  */
+  useEffect(() => {
+    const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
+    const abortControllers = [];
+    relations.forEach(relation_2 => {
+      const abortController_1 = new AbortController();
+      void loadRelationOptions({
+        abortController: abortController_1,
+        relationSlug: relation_2
+      });
+      abortControllers.push(abortController_1);
+    });
+    return () => {
+      abortControllers.forEach(controller => {
+        if (controller.signal) {
+          try {
+            controller.abort();
+          } catch (error) {
+            // swallow error
+          }
+        }
+      });
+    };
+  }, [i18n, loadRelationOptions, relationTo]);
+  /**
+  * Load any options that were not returned
+  * in the first 10 of each relation fetch
+  */
+  useEffect(() => {
+    if (value && hasLoadedFirstOptions) {
+      if (hasMany) {
+        const matchedOptions = findOptionsByValue();
+        (matchedOptions || []).forEach((option, i) => {
+          if (!option) {
+            if (hasMultipleRelations) {
+              void addOptionByID(value[i].value, value[i].relationTo);
             } else {
-                // eslint-disable-next-line no-console
-                console.error(t('error:loadingDocument', {
-                    id
-                }));
+              void addOptionByID(value[i], relationTo);
             }
-        }
-    }, [
-        i18n,
-        addOptions,
-        api,
-        errorLoading,
-        serverURL,
-        t
-    ]);
-    /**
-   * 1. Trigger initial relationship options fetch
-   * 2. When search changes, loadRelationOptions will
-   *    fire off again
-   */ useEffect(()=>{
-        const relations = Array.isArray(relationTo) ? relationTo : [
-            relationTo
-        ];
-        const abortControllers = [];
-        relations.forEach((relation)=>{
-            const abortController = new AbortController();
-            loadRelationOptions({
-                abortController,
-                relationSlug: relation
-            });
-            abortControllers.push(abortController);
+          }
         });
-        return ()=>{
-            abortControllers.forEach((controller)=>{
-                if (controller.signal) controller.abort();
-            });
-        };
-    }, [
-        i18n,
-        loadRelationOptions,
-        relationTo
-    ]);
-    /**
-   * Load any options that were not returned
-   * in the first 10 of each relation fetch
-   */ useEffect(()=>{
-        if (value && hasLoadedFirstOptions) {
-            if (hasMany) {
-                const matchedOptions = findOptionsByValue();
-                (matchedOptions || []).forEach((option, i)=>{
-                    if (!option) {
-                        if (hasMultipleRelations) {
-                            addOptionByID(value[i].value, value[i].relationTo);
-                        } else {
-                            addOptionByID(value[i], relationTo);
-                        }
-                    }
-                });
-            } else {
-                const matchedOption = findOptionsByValue();
-                if (!matchedOption) {
-                    if (hasMultipleRelations) {
-                        const valueWithRelation = value;
-                        addOptionByID(valueWithRelation.value, valueWithRelation.relationTo);
-                    } else {
-                        addOptionByID(value, relationTo);
-                    }
-                }
+      } else {
+        const matchedOption_1 = findOptionsByValue();
+        if (!matchedOption_1) {
+          if (hasMultipleRelations) {
+            const valueWithRelation_0 = value;
+            void addOptionByID(valueWithRelation_0.value, valueWithRelation_0.relationTo);
+          } else {
+            void addOptionByID(value, relationTo);
+          }
+        }
+      }
+    }
+  }, [addOptionByID, findOptionsByValue, hasMany, hasMultipleRelations, relationTo, value, hasLoadedFirstOptions]);
+  const classes = ['field-type', baseClass, errorLoading && 'error-loading'].filter(Boolean).join(' ');
+  const valueToRender = findOptionsByValue() || value;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    children: [!errorLoading && /*#__PURE__*/_jsx(ReactSelect, {
+      disabled: disabled,
+      isMulti: hasMany,
+      isSortable: isSortable,
+      onChange: selected => {
+        if (!selected) {
+          onChange(null);
+          return;
+        }
+        if (hasMany && Array.isArray(selected)) {
+          onChange(selected ? selected.map(option_0 => {
+            if (hasMultipleRelations) {
+              return {
+                relationTo: option_0?.relationTo,
+                value: option_0?.value
+              };
             }
+            return option_0?.value;
+          }) : null);
+        } else if (hasMultipleRelations && !Array.isArray(selected)) {
+          onChange({
+            relationTo: selected?.relationTo,
+            value: selected?.value
+          });
+        } else if (!Array.isArray(selected)) {
+          onChange(selected?.value);
         }
-    }, [
-        addOptionByID,
-        findOptionsByValue,
-        hasMany,
-        hasMultipleRelations,
-        relationTo,
-        value,
-        hasLoadedFirstOptions
-    ]);
-    const classes = [
-        'field-type',
-        baseClass,
-        errorLoading && 'error-loading'
-    ].filter(Boolean).join(' ');
-    const valueToRender = findOptionsByValue() || value;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: classes,
-        children: [
-            !errorLoading && /*#__PURE__*/ _jsx(ReactSelect, {
-                disabled: disabled,
-                isMulti: hasMany,
-                isSortable: isSortable,
-                onChange: (selected)=>{
-                    if (!selected) {
-                        onChange(null);
-                        return;
-                    }
-                    if (hasMany) {
-                        onChange(selected ? selected.map((option)=>{
-                            if (hasMultipleRelations) {
-                                return {
-                                    relationTo: option?.relationTo,
-                                    value: option?.value
-                                };
-                            }
-                            return option?.value;
-                        }) : null);
-                    } else if (hasMultipleRelations) {
-                        onChange({
-                            relationTo: selected?.relationTo,
-                            value: selected?.value
-                        });
-                    } else {
-                        onChange(selected?.value);
-                    }
-                },
-                onInputChange: handleInputChange,
-                onMenuScrollToBottom: loadMoreOptions,
-                options: options,
-                placeholder: t('general:selectValue'),
-                value: valueToRender
-            }),
-            errorLoading && /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__error-loading`,
-                children: errorLoading
-            })
-        ]
-    });
+      },
+      onInputChange: handleInputChange,
+      onMenuScrollToBottom: loadMoreOptions,
+      options: options,
+      placeholder: t('general:selectValue'),
+      value: valueToRender
+    }), errorLoading && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__error-loading`,
+      children: errorLoading
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map