@payloadcms/ui 3.0.0-canary.78bbed6 → 3.0.0-canary.79ab53e

package/dist/fields/Upload/Input.js

@@ -0,0 +1,672 @@
+'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 { ShimmerEffect } from '../../elements/ShimmerEffect/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { FieldDescription } from '../FieldDescription/index.js';
+import { FieldError } from '../FieldError/index.js';
+import { FieldLabel } from '../FieldLabel/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(125);
+  const {
+    api,
+    className,
+    Description,
+    description,
+    descriptionProps,
+    Error,
+    errorProps,
+    field,
+    filterOptions: filterOptionsFromProps,
+    hasMany,
+    isSortable,
+    Label,
+    label,
+    labelProps,
+    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 (typeof activeRelationTo === "string") {
+      if (permissions?.collections && permissions.collections?.[activeRelationTo]?.create) {
+        if (permissions.collections[activeRelationTo].create?.permission === true) {
+          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] !== onChange) {
+    t21 = newValue_0 => {
+      const newValueIDs = newValue_0.map(t22 => {
+        const {
+          value: value_0
+        } = t22;
+        return value_0.id;
+      });
+      onChange(newValueIDs);
+      setPopulatedDocs(newValue_0);
+    };
+    $[69] = onChange;
+    $[70] = t21;
+  } else {
+    t21 = $[70];
+  }
+  const onReorder = t21;
+  let t22;
+  if ($[71] !== onChange || $[72] !== hasMany) {
+    t22 = newValue_1 => {
+      const newValueIDs_0 = newValue_1 ? newValue_1.map(t23 => {
+        const {
+          value: value_1
+        } = t23;
+        return value_1.id;
+      }) : null;
+      onChange(hasMany ? newValueIDs_0 : newValueIDs_0 ? newValueIDs_0[0] : null);
+      setPopulatedDocs(newValue_1 ? newValue_1 : []);
+    };
+    $[71] = onChange;
+    $[72] = hasMany;
+    $[73] = t22;
+  } else {
+    t22 = $[73];
+  }
+  const onRemove = t22;
+  let t23;
+  let t24;
+  if ($[74] !== value || $[75] !== populateDocs || $[76] !== activeRelationTo) {
+    t23 = () => {
+      const loadInitialDocs = async function loadInitialDocs() {
+        if (value) {
+          const loadedDocs_1 = await populateDocs(Array.isArray(value) ? value : [value], activeRelationTo);
+          if (loadedDocs_1) {
+            setPopulatedDocs(loadedDocs_1.docs.map(doc_3 => ({
+              relationTo: activeRelationTo,
+              value: doc_3
+            })));
+          }
+        }
+        loadedValueDocsRef.current = true;
+      };
+      if (!loadedValueDocsRef.current) {
+        loadInitialDocs();
+      }
+    };
+    t24 = [populateDocs, activeRelationTo, value];
+    $[74] = value;
+    $[75] = populateDocs;
+    $[76] = activeRelationTo;
+    $[77] = t23;
+    $[78] = t24;
+  } else {
+    t23 = $[77];
+    t24 = $[78];
+  }
+  useEffect(t23, t24);
+  const showDropzone = !readOnly && (!value || hasMany && Array.isArray(value) && (typeof maxRows !== "number" || value.length < maxRows));
+  const t25 = showError && "error";
+  const t26 = readOnly && "read-only";
+  let t27;
+  if ($[79] !== className || $[80] !== t25 || $[81] !== t26) {
+    t27 = [fieldBaseClass, baseClass, className, t25, t26].filter(Boolean);
+    $[79] = className;
+    $[80] = t25;
+    $[81] = t26;
+    $[82] = t27;
+  } else {
+    t27 = $[82];
+  }
+  const t28 = t27.join(" ");
+  const t29 = `field-${path.replace(/\./g, "__")}`;
+  let t30;
+  if ($[83] !== style || $[84] !== width || $[85] !== labelProps || $[86] !== Label || $[87] !== label || $[88] !== required || $[89] !== field || $[90] !== errorProps || $[91] !== Error || $[92] !== path || $[93] !== hasMany || $[94] !== value || $[95] !== populatedDocs || $[96] !== isSortable || $[97] !== readOnly || $[98] !== onRemove || $[99] !== onReorder || $[100] !== serverURL || $[101] !== showDropzone || $[102] !== canCreate || $[103] !== onLocalFileSelection || $[104] !== openCreateDocDrawer || $[105] !== t || $[106] !== openListDrawer || $[107] !== onDocCreate || $[108] !== CreateDocDrawer || $[109] !== onListBulkSelect || $[110] !== onListSelect || $[111] !== ListDrawer || $[112] !== maxRows || $[113] !== descriptionProps || $[114] !== Description || $[115] !== description || $[116] !== t28 || $[117] !== t29) {
+    let t31;
+    if ($[119] !== labelProps) {
+      t31 = labelProps || {};
+      $[119] = labelProps;
+      $[120] = t31;
+    } else {
+      t31 = $[120];
+    }
+    let t32;
+    if ($[121] !== errorProps) {
+      t32 = errorProps || {};
+      $[121] = errorProps;
+      $[122] = t32;
+    } else {
+      t32 = $[122];
+    }
+    let t33;
+    if ($[123] !== descriptionProps) {
+      t33 = descriptionProps || {};
+      $[123] = descriptionProps;
+      $[124] = t33;
+    } else {
+      t33 = $[124];
+    }
+    t30 = _jsxs("div", {
+      className: t28,
+      id: t29,
+      style: {
+        ...style,
+        width
+      },
+      children: [_jsx(FieldLabel, {
+        Label,
+        label,
+        required,
+        ...t31,
+        field
+      }), _jsx("div", {
+        className: `${baseClass}__wrap`,
+        children: _jsx(FieldError, {
+          CustomError: Error,
+          path,
+          ...t32,
+          field
+        })
+      }), _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,
+            serverURL
+          }) : _jsx("div", {
+            className: `${baseClass}__loadingRows`,
+            children: value.map(_temp)
+          })
+        }) : null, !hasMany && value ? _jsx(_Fragment, {
+          children: populatedDocs && populatedDocs?.length > 0 ? _jsx(UploadComponentHasOne, {
+            fileDoc: populatedDocs[0],
+            onRemove,
+            readonly: readOnly,
+            serverURL
+          }) : _jsx(ShimmerEffect, {
+            height: "62px"
+          })
+        }) : null, showDropzone ? _jsx(Dropzone, {
+          multipleFiles: hasMany,
+          onChange: onLocalFileSelection,
+          children: _jsxs("div", {
+            className: `${baseClass}__dropzoneContent`,
+            children: [_jsxs("div", {
+              className: `${baseClass}__dropzoneContent__buttons`,
+              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, {
+                enableRowSelections: hasMany,
+                onBulkSelect: onListBulkSelect,
+                onSelect: onListSelect
+              })]
+            }), _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
+        })]
+      }), _jsx(FieldDescription, {
+        Description,
+        description,
+        ...t33,
+        field
+      })]
+    });
+    $[83] = style;
+    $[84] = width;
+    $[85] = labelProps;
+    $[86] = Label;
+    $[87] = label;
+    $[88] = required;
+    $[89] = field;
+    $[90] = errorProps;
+    $[91] = Error;
+    $[92] = path;
+    $[93] = hasMany;
+    $[94] = value;
+    $[95] = populatedDocs;
+    $[96] = isSortable;
+    $[97] = readOnly;
+    $[98] = onRemove;
+    $[99] = onReorder;
+    $[100] = serverURL;
+    $[101] = showDropzone;
+    $[102] = canCreate;
+    $[103] = onLocalFileSelection;
+    $[104] = openCreateDocDrawer;
+    $[105] = t;
+    $[106] = openListDrawer;
+    $[107] = onDocCreate;
+    $[108] = CreateDocDrawer;
+    $[109] = onListBulkSelect;
+    $[110] = onListSelect;
+    $[111] = ListDrawer;
+    $[112] = maxRows;
+    $[113] = descriptionProps;
+    $[114] = Description;
+    $[115] = description;
+    $[116] = t28;
+    $[117] = t29;
+    $[118] = t30;
+  } else {
+    t30 = $[118];
+  }
+  return t30;
+}
+function _temp(id_1) {
+  return _jsx(ShimmerEffect, {
+    height: "40px"
+  }, id_1);
+}
+//# sourceMappingURL=Input.js.map