@payloadcms/ui 3.0.0-canary.9de3ffd → 3.0.0-canary.9f64534

package/dist/fields/Upload/Input.js

@@ -0,0 +1,690 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import * as qs from 'qs-esm';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useBulkUpload } from '../../elements/BulkUpload/index.js';
+import { Button } from '../../elements/Button/index.js';
+import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
+import { Dropzone } from '../../elements/Dropzone/index.js';
+import { useListDrawer } from '../../elements/ListDrawer/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { ShimmerEffect } from '../../elements/ShimmerEffect/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+import { UploadComponentHasMany } from './HasMany/index.js';
+import { UploadComponentHasOne } from './HasOne/index.js';
+import './index.scss';
+export const baseClass = 'upload';
+export function UploadInput(props) {
+  const $ = _c(122);
+  const {
+    AfterInput,
+    allowCreate,
+    api,
+    BeforeInput,
+    className,
+    Description,
+    description,
+    Error,
+    filterOptions: filterOptionsFromProps,
+    hasMany,
+    isSortable,
+    Label,
+    label,
+    localized,
+    maxRows,
+    onChange: onChangeFromProps,
+    path,
+    readOnly,
+    relationTo,
+    required,
+    serverURL,
+    showError,
+    style,
+    value,
+    width
+  } = props;
+  const [populatedDocs, setPopulatedDocs] = React.useState();
+  const [activeRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
+  const {
+    openModal
+  } = useModal();
+  const {
+    drawerSlug,
+    setCollectionSlug,
+    setInitialFiles,
+    setMaxFiles,
+    setOnSuccess
+  } = useBulkUpload();
+  const {
+    permissions
+  } = useAuth();
+  const {
+    code
+  } = useLocale();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  let t0;
+  let t1;
+  if ($[0] !== filterOptionsFromProps || $[1] !== activeRelationTo) {
+    t1 = filterOptionsFromProps?.[activeRelationTo] || {};
+    $[0] = filterOptionsFromProps;
+    $[1] = activeRelationTo;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== filterOptionsFromProps || $[4] !== activeRelationTo) {
+    t2 = filterOptionsFromProps?.[activeRelationTo]?.id || {};
+    $[3] = filterOptionsFromProps;
+    $[4] = activeRelationTo;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== filterOptionsFromProps || $[7] !== activeRelationTo) {
+    t3 = filterOptionsFromProps?.[activeRelationTo]?.id?.not_in || [];
+    $[6] = filterOptionsFromProps;
+    $[7] = activeRelationTo;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== value || $[10] !== t3) {
+    t4 = t3.concat(...(Array.isArray(value) || value ? [value] : []));
+    $[9] = value;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== t2 || $[13] !== t4) {
+    t5 = {
+      ...t2,
+      not_in: t4
+    };
+    $[12] = t2;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== t1 || $[16] !== t5) {
+    t6 = {
+      ...t1,
+      id: t5
+    };
+    $[15] = t1;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== filterOptionsFromProps || $[19] !== activeRelationTo || $[20] !== t6) {
+    t7 = {
+      ...filterOptionsFromProps,
+      [activeRelationTo]: t6
+    };
+    $[18] = filterOptionsFromProps;
+    $[19] = activeRelationTo;
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  t0 = t7;
+  const filterOptions = t0;
+  let t8;
+  if ($[22] !== relationTo) {
+    t8 = typeof relationTo === "string" ? [relationTo] : relationTo;
+    $[22] = relationTo;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== t8 || $[25] !== filterOptions) {
+    t9 = {
+      collectionSlugs: t8,
+      filterOptions
+    };
+    $[24] = t8;
+    $[25] = filterOptions;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  const [ListDrawer,, t10] = useListDrawer(t9);
+  const {
+    closeDrawer: closeListDrawer,
+    openDrawer: openListDrawer
+  } = t10;
+  let t11;
+  if ($[27] !== activeRelationTo) {
+    t11 = {
+      collectionSlug: activeRelationTo
+    };
+    $[27] = activeRelationTo;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  const [CreateDocDrawer,, t12] = useDocumentDrawer(t11);
+  const {
+    closeDrawer: closeCreateDocDrawer,
+    openDrawer: openCreateDocDrawer
+  } = t12;
+  const loadedValueDocsRef = React.useRef(false);
+  let t13;
+  bb0: {
+    if (!allowCreate) {
+      t13 = false;
+      break bb0;
+    }
+    if (typeof activeRelationTo === "string") {
+      if (permissions?.collections && permissions.collections?.[activeRelationTo]?.create) {
+        t13 = true;
+        break bb0;
+      }
+    }
+    t13 = false;
+  }
+  const canCreate = t13;
+  let t14;
+  if ($[29] !== onChangeFromProps) {
+    t14 = newValue => {
+      if (typeof onChangeFromProps === "function") {
+        onChangeFromProps(newValue);
+      }
+    };
+    $[29] = onChangeFromProps;
+    $[30] = t14;
+  } else {
+    t14 = $[30];
+  }
+  const onChange = t14;
+  let t15;
+  if ($[31] !== code || $[32] !== serverURL || $[33] !== api || $[34] !== i18n.language) {
+    t15 = async (ids, relatedCollectionSlug) => {
+      const query = {
+        depth: 0,
+        draft: true,
+        limit: ids.length,
+        locale: code,
+        where: {
+          and: [{
+            id: {
+              in: ids
+            }
+          }]
+        }
+      };
+      const response = await fetch(`${serverURL}${api}/${relatedCollectionSlug}`, {
+        body: qs.stringify(query),
+        credentials: "include",
+        headers: {
+          "Accept-Language": i18n.language,
+          "Content-Type": "application/x-www-form-urlencoded",
+          "X-HTTP-Method-Override": "GET"
+        },
+        method: "POST"
+      });
+      if (response.ok) {
+        const json = await response.json();
+        const sortedDocs = ids.map(id => json.docs.find(doc => String(doc.id) === String(id)));
+        return {
+          ...json,
+          docs: sortedDocs
+        };
+      }
+      return null;
+    };
+    $[31] = code;
+    $[32] = serverURL;
+    $[33] = api;
+    $[34] = i18n.language;
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  const populateDocs = t15;
+  let t16;
+  if ($[36] !== hasMany || $[37] !== value || $[38] !== onChange || $[39] !== activeRelationTo) {
+    t16 = newDocs => {
+      if (hasMany) {
+        const mergedValue = [...(Array.isArray(value) ? value : []), ...newDocs.map(doc_0 => doc_0.id)];
+        onChange(mergedValue);
+        setPopulatedDocs(currentDocs => [...(currentDocs || []), ...newDocs.map(doc_1 => ({
+          relationTo: activeRelationTo,
+          value: doc_1
+        }))]);
+      } else {
+        const firstDoc = newDocs[0];
+        onChange(firstDoc.id);
+        setPopulatedDocs([{
+          relationTo: activeRelationTo,
+          value: firstDoc
+        }]);
+      }
+    };
+    $[36] = hasMany;
+    $[37] = value;
+    $[38] = onChange;
+    $[39] = activeRelationTo;
+    $[40] = t16;
+  } else {
+    t16 = $[40];
+  }
+  const onUploadSuccess = t16;
+  let t17;
+  if ($[41] !== hasMany || $[42] !== setInitialFiles || $[43] !== setCollectionSlug || $[44] !== relationTo || $[45] !== setOnSuccess || $[46] !== onUploadSuccess || $[47] !== maxRows || $[48] !== setMaxFiles || $[49] !== openModal || $[50] !== drawerSlug) {
+    t17 = fileList => {
+      let fileListToUse = fileList;
+      if (!hasMany && fileList && fileList.length > 1) {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(fileList[0]);
+        fileListToUse = dataTransfer.files;
+      }
+      if (fileListToUse) {
+        setInitialFiles(fileListToUse);
+      }
+      setCollectionSlug(relationTo);
+      setOnSuccess(onUploadSuccess);
+      if (typeof maxRows === "number") {
+        setMaxFiles(maxRows);
+      }
+      openModal(drawerSlug);
+    };
+    $[41] = hasMany;
+    $[42] = setInitialFiles;
+    $[43] = setCollectionSlug;
+    $[44] = relationTo;
+    $[45] = setOnSuccess;
+    $[46] = onUploadSuccess;
+    $[47] = maxRows;
+    $[48] = setMaxFiles;
+    $[49] = openModal;
+    $[50] = drawerSlug;
+    $[51] = t17;
+  } else {
+    t17 = $[51];
+  }
+  const onLocalFileSelection = t17;
+  let t18;
+  if ($[52] !== populateDocs || $[53] !== activeRelationTo || $[54] !== onChange || $[55] !== value || $[56] !== closeListDrawer) {
+    t18 = async docs => {
+      const selectedDocIDs = [];
+      for (const [id_0, isSelected] of docs) {
+        if (isSelected) {
+          selectedDocIDs.push(id_0);
+        }
+      }
+      const loadedDocs = await populateDocs(selectedDocIDs, activeRelationTo);
+      if (loadedDocs) {
+        setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs.docs.map(doc_2 => ({
+          relationTo: activeRelationTo,
+          value: doc_2
+        }))]);
+      }
+      onChange([...(Array.isArray(value) ? value : []), ...selectedDocIDs]);
+      closeListDrawer();
+    };
+    $[52] = populateDocs;
+    $[53] = activeRelationTo;
+    $[54] = onChange;
+    $[55] = value;
+    $[56] = closeListDrawer;
+    $[57] = t18;
+  } else {
+    t18 = $[57];
+  }
+  const onListBulkSelect = t18;
+  let t19;
+  if ($[58] !== activeRelationTo || $[59] !== onChange || $[60] !== closeCreateDocDrawer) {
+    t19 = data => {
+      if (data.doc) {
+        setPopulatedDocs(currentDocs_1 => [...(currentDocs_1 || []), {
+          relationTo: activeRelationTo,
+          value: data.doc
+        }]);
+        onChange(data.doc.id);
+      }
+      closeCreateDocDrawer();
+    };
+    $[58] = activeRelationTo;
+    $[59] = onChange;
+    $[60] = closeCreateDocDrawer;
+    $[61] = t19;
+  } else {
+    t19 = $[61];
+  }
+  const onDocCreate = t19;
+  let t20;
+  if ($[62] !== populateDocs || $[63] !== hasMany || $[64] !== activeRelationTo || $[65] !== onChange || $[66] !== value || $[67] !== closeListDrawer) {
+    t20 = async t21 => {
+      const {
+        collectionSlug,
+        docID
+      } = t21;
+      const loadedDocs_0 = await populateDocs([docID], collectionSlug);
+      const selectedDoc = loadedDocs_0 ? loadedDocs_0.docs?.[0] : null;
+      setPopulatedDocs(currentDocs_2 => {
+        if (selectedDoc) {
+          if (hasMany) {
+            return [...(currentDocs_2 || []), {
+              relationTo: activeRelationTo,
+              value: selectedDoc
+            }];
+          }
+          return [{
+            relationTo: activeRelationTo,
+            value: selectedDoc
+          }];
+        }
+        return currentDocs_2;
+      });
+      if (hasMany) {
+        onChange([...(Array.isArray(value) ? value : []), docID]);
+      } else {
+        onChange(docID);
+      }
+      closeListDrawer();
+    };
+    $[62] = populateDocs;
+    $[63] = hasMany;
+    $[64] = activeRelationTo;
+    $[65] = onChange;
+    $[66] = value;
+    $[67] = closeListDrawer;
+    $[68] = t20;
+  } else {
+    t20 = $[68];
+  }
+  const onListSelect = t20;
+  let t21;
+  if ($[69] !== populateDocs) {
+    t21 = async (docID_0, collectionSlug_0) => {
+      const {
+        docs: docs_0
+      } = await populateDocs([docID_0], collectionSlug_0);
+      if (docs_0[0]) {
+        setPopulatedDocs(currentDocs_3 => {
+          const existingDocIndex = currentDocs_3?.findIndex(doc_3 => doc_3.value.id === docs_0[0].id && doc_3.relationTo === collectionSlug_0);
+          if (existingDocIndex > -1) {
+            const updatedDocs = [...currentDocs_3];
+            updatedDocs[existingDocIndex] = {
+              relationTo: collectionSlug_0,
+              value: docs_0[0]
+            };
+            return updatedDocs;
+          }
+        });
+      }
+    };
+    $[69] = populateDocs;
+    $[70] = t21;
+  } else {
+    t21 = $[70];
+  }
+  const reloadDoc = t21;
+  let t22;
+  if ($[71] !== onChange) {
+    t22 = newValue_0 => {
+      const newValueIDs = newValue_0.map(t23 => {
+        const {
+          value: value_0
+        } = t23;
+        return value_0.id;
+      });
+      onChange(newValueIDs);
+      setPopulatedDocs(newValue_0);
+    };
+    $[71] = onChange;
+    $[72] = t22;
+  } else {
+    t22 = $[72];
+  }
+  const onReorder = t22;
+  let t23;
+  if ($[73] !== onChange || $[74] !== hasMany) {
+    t23 = newValue_1 => {
+      const newValueIDs_0 = newValue_1 ? newValue_1.map(t24 => {
+        const {
+          value: value_1
+        } = t24;
+        return value_1.id;
+      }) : null;
+      onChange(hasMany ? newValueIDs_0 : newValueIDs_0 ? newValueIDs_0[0] : null);
+      setPopulatedDocs(newValue_1 ? newValue_1 : []);
+    };
+    $[73] = onChange;
+    $[74] = hasMany;
+    $[75] = t23;
+  } else {
+    t23 = $[75];
+  }
+  const onRemove = t23;
+  let t24;
+  let t25;
+  if ($[76] !== value || $[77] !== populateDocs || $[78] !== activeRelationTo) {
+    t24 = () => {
+      const loadInitialDocs = async function loadInitialDocs() {
+        if (value) {
+          loadedValueDocsRef.current = true;
+          const loadedDocs_1 = await populateDocs(Array.isArray(value) ? value : [value], activeRelationTo);
+          if (loadedDocs_1) {
+            setPopulatedDocs(loadedDocs_1.docs.map(doc_4 => ({
+              relationTo: activeRelationTo,
+              value: doc_4
+            })));
+          }
+        }
+      };
+      if (!loadedValueDocsRef.current) {
+        loadInitialDocs();
+      }
+    };
+    t25 = [populateDocs, activeRelationTo, value];
+    $[76] = value;
+    $[77] = populateDocs;
+    $[78] = activeRelationTo;
+    $[79] = t24;
+    $[80] = t25;
+  } else {
+    t24 = $[79];
+    t25 = $[80];
+  }
+  useEffect(t24, t25);
+  const showDropzone = !value || hasMany && Array.isArray(value) && (typeof maxRows !== "number" || value.length < maxRows) || !hasMany && populatedDocs?.[0] && typeof populatedDocs[0].value === "undefined";
+  const t26 = showError && "error";
+  const t27 = readOnly && "read-only";
+  let t28;
+  if ($[81] !== className || $[82] !== t26 || $[83] !== t27) {
+    t28 = [fieldBaseClass, baseClass, className, t26, t27].filter(Boolean);
+    $[81] = className;
+    $[82] = t26;
+    $[83] = t27;
+    $[84] = t28;
+  } else {
+    t28 = $[84];
+  }
+  const t29 = t28.join(" ");
+  const t30 = `field-${path?.replace(/\./g, "__")}`;
+  let t31;
+  if ($[85] !== style || $[86] !== width || $[87] !== label || $[88] !== localized || $[89] !== path || $[90] !== required || $[91] !== Label || $[92] !== showError || $[93] !== Error || $[94] !== hasMany || $[95] !== value || $[96] !== populatedDocs || $[97] !== isSortable || $[98] !== readOnly || $[99] !== onRemove || $[100] !== onReorder || $[101] !== reloadDoc || $[102] !== serverURL || $[103] !== t || $[104] !== showDropzone || $[105] !== canCreate || $[106] !== onLocalFileSelection || $[107] !== openCreateDocDrawer || $[108] !== openListDrawer || $[109] !== onDocCreate || $[110] !== CreateDocDrawer || $[111] !== onListBulkSelect || $[112] !== onListSelect || $[113] !== ListDrawer || $[114] !== maxRows || $[115] !== description || $[116] !== Description || $[117] !== BeforeInput || $[118] !== AfterInput || $[119] !== t29 || $[120] !== t30) {
+    t31 = _jsxs("div", {
+      className: t29,
+      id: t30,
+      style: {
+        ...style,
+        width
+      },
+      children: [_jsx(RenderCustomComponent, {
+        CustomComponent: Label,
+        Fallback: _jsx(FieldLabel, {
+          label,
+          localized,
+          path,
+          required
+        })
+      }), _jsx("div", {
+        className: `${baseClass}__wrap`,
+        children: _jsx(RenderCustomComponent, {
+          CustomComponent: Error,
+          Fallback: _jsx(FieldError, {
+            path,
+            showError
+          })
+        })
+      }), BeforeInput, _jsxs("div", {
+        className: `${baseClass}__dropzoneAndUpload`,
+        children: [hasMany && Array.isArray(value) && value.length > 0 ? _jsx(_Fragment, {
+          children: populatedDocs && populatedDocs?.length > 0 ? _jsx(UploadComponentHasMany, {
+            fileDocs: populatedDocs,
+            isSortable: isSortable && !readOnly,
+            onRemove,
+            onReorder,
+            readonly: readOnly,
+            reloadDoc,
+            serverURL
+          }) : _jsx("div", {
+            className: `${baseClass}__loadingRows`,
+            children: value.map(_temp)
+          })
+        }) : null, !hasMany && value ? _jsx(_Fragment, {
+          children: populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? _jsx(UploadComponentHasOne, {
+            fileDoc: populatedDocs[0],
+            onRemove,
+            readonly: readOnly,
+            reloadDoc,
+            serverURL
+          }) : populatedDocs && value && !populatedDocs?.[0]?.value ? _jsxs(_Fragment, {
+            children: [t("general:untitled"), " - ID: ", value]
+          }) : _jsx(ShimmerEffect, {
+            height: "62px"
+          })
+        }) : null, showDropzone ? _jsx(Dropzone, {
+          disabled: readOnly || !canCreate,
+          multipleFiles: hasMany,
+          onChange: onLocalFileSelection,
+          children: _jsxs("div", {
+            className: `${baseClass}__dropzoneContent`,
+            children: [_jsxs("div", {
+              className: `${baseClass}__dropzoneContent__buttons`,
+              children: [canCreate && _jsxs(_Fragment, {
+                children: [_jsx(Button, {
+                  buttonStyle: "pill",
+                  className: `${baseClass}__createNewToggler`,
+                  disabled: readOnly || !canCreate,
+                  onClick: () => {
+                    if (!readOnly) {
+                      if (hasMany) {
+                        onLocalFileSelection();
+                      } else {
+                        openCreateDocDrawer();
+                      }
+                    }
+                  },
+                  size: "small",
+                  children: t("general:createNew")
+                }), _jsx("span", {
+                  className: `${baseClass}__dropzoneContent__orText`,
+                  children: t("general:or")
+                })]
+              }), _jsx(Button, {
+                buttonStyle: "pill",
+                className: `${baseClass}__listToggler`,
+                disabled: readOnly,
+                onClick: openListDrawer,
+                size: "small",
+                children: t("fields:chooseFromExisting")
+              }), _jsx(CreateDocDrawer, {
+                onSave: onDocCreate
+              }), _jsx(ListDrawer, {
+                allowCreate: canCreate,
+                enableRowSelections: hasMany,
+                onBulkSelect: onListBulkSelect,
+                onSelect: onListSelect
+              })]
+            }), canCreate && !readOnly && _jsxs("p", {
+              className: `${baseClass}__dragAndDropText`,
+              children: [t("general:or"), " ", t("upload:dragAndDrop")]
+            })]
+          })
+        }) : _jsx(_Fragment, {
+          children: !readOnly && !populatedDocs && (!value || typeof maxRows !== "number" || Array.isArray(value) && value.length < maxRows) ? _jsx(ShimmerEffect, {
+            height: "40px"
+          }) : null
+        })]
+      }), AfterInput, _jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
+        })
+      })]
+    });
+    $[85] = style;
+    $[86] = width;
+    $[87] = label;
+    $[88] = localized;
+    $[89] = path;
+    $[90] = required;
+    $[91] = Label;
+    $[92] = showError;
+    $[93] = Error;
+    $[94] = hasMany;
+    $[95] = value;
+    $[96] = populatedDocs;
+    $[97] = isSortable;
+    $[98] = readOnly;
+    $[99] = onRemove;
+    $[100] = onReorder;
+    $[101] = reloadDoc;
+    $[102] = serverURL;
+    $[103] = t;
+    $[104] = showDropzone;
+    $[105] = canCreate;
+    $[106] = onLocalFileSelection;
+    $[107] = openCreateDocDrawer;
+    $[108] = openListDrawer;
+    $[109] = onDocCreate;
+    $[110] = CreateDocDrawer;
+    $[111] = onListBulkSelect;
+    $[112] = onListSelect;
+    $[113] = ListDrawer;
+    $[114] = maxRows;
+    $[115] = description;
+    $[116] = Description;
+    $[117] = BeforeInput;
+    $[118] = AfterInput;
+    $[119] = t29;
+    $[120] = t30;
+    $[121] = t31;
+  } else {
+    t31 = $[121];
+  }
+  return t31;
+}
+function _temp(id_1) {
+  return _jsx(ShimmerEffect, {
+    height: "40px"
+  }, id_1);
+}
+//# sourceMappingURL=Input.js.map