@payloadcms/ui 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/fields/Upload/HasMany/index.js

@@ -2,467 +2,172 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as qs from 'qs-esm';
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { AddNewRelation } from '../../../elements/AddNewRelation/index.js';
-import { Button } from '../../../elements/Button/index.js';
+import React from 'react';
+import { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
 import { DraggableSortable } from '../../../elements/DraggableSortable/index.js';
-import { FileDetails } from '../../../elements/FileDetails/index.js';
-import { useListDrawer } from '../../../elements/ListDrawer/index.js';
-import { useConfig } from '../../../providers/Config/index.js';
-import { useLocale } from '../../../providers/Locale/index.js';
-import { useTranslation } from '../../../providers/Translation/index.js';
-import { FieldLabel } from '../../FieldLabel/index.js';
+import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
+import { RelationshipContent } from '../RelationshipContent/index.js';
+import { UploadCard } from '../UploadCard/index.js';
 const baseClass = 'upload upload--has-many';
 import './index.scss';
-export const UploadComponentHasMany = props => {
-  const $ = _c(85);
+export function UploadComponentHasMany(props) {
+  const $ = _c(25);
   const {
-    canCreate,
-    field,
-    field: t0,
-    fieldHookResult: t1,
-    readOnly
-  } = props;
-  const {
-    _path,
-    admin: t2,
-    hasMany,
-    label,
-    relationTo
-  } = t0;
-  const {
-    components: t3,
-    isSortable
-  } = t2;
-  const {
-    Label
-  } = t3;
-  const {
-    filterOptions: filterOptionsFromProps,
-    setValue,
-    value
-  } = t1;
-  const {
-    i18n,
-    t
-  } = useTranslation();
-  const {
-    config: t4
-  } = useConfig();
-  const {
-    collections,
-    routes: t5,
+    className,
+    fileDocs,
+    isSortable,
+    onRemove,
+    onReorder,
+    readonly,
+    reloadDoc,
     serverURL
-  } = t4;
-  const {
-    api
-  } = t5;
-  let t6;
-  bb0: {
-    if (typeof relationTo === "string") {
-      let t7;
-      if ($[0] !== filterOptionsFromProps || $[1] !== relationTo) {
-        t7 = filterOptionsFromProps?.[relationTo] || {};
-        $[0] = filterOptionsFromProps;
-        $[1] = relationTo;
-        $[2] = t7;
-      } else {
-        t7 = $[2];
-      }
-      let t8;
-      if ($[3] !== filterOptionsFromProps || $[4] !== relationTo) {
-        t8 = filterOptionsFromProps?.[relationTo]?.id || {};
-        $[3] = filterOptionsFromProps;
-        $[4] = relationTo;
-        $[5] = t8;
-      } else {
-        t8 = $[5];
-      }
-      const t9 = filterOptionsFromProps?.[relationTo]?.id?.not_in || value;
-      let t10;
-      if ($[6] !== t8 || $[7] !== t9) {
-        t10 = {
-          ...t8,
-          not_in: t9
-        };
-        $[6] = t8;
-        $[7] = t9;
-        $[8] = t10;
-      } else {
-        t10 = $[8];
-      }
-      let t11;
-      if ($[9] !== t7 || $[10] !== t10) {
-        t11 = {
-          ...t7,
-          id: t10
-        };
-        $[9] = t7;
-        $[10] = t10;
-        $[11] = t11;
-      } else {
-        t11 = $[11];
-      }
-      let t12;
-      if ($[12] !== filterOptionsFromProps || $[13] !== relationTo || $[14] !== t11) {
-        t12 = {
-          ...filterOptionsFromProps,
-          [relationTo]: t11
-        };
-        $[12] = filterOptionsFromProps;
-        $[13] = relationTo;
-        $[14] = t11;
-        $[15] = t12;
-      } else {
-        t12 = $[15];
-      }
-      t6 = t12;
-      break bb0;
-    }
-    t6 = undefined;
-  }
-  const filterOptions = t6;
-  let t7;
-  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = [];
-    $[16] = t7;
-  } else {
-    t7 = $[16];
-  }
-  const [fileDocs, setFileDocs] = useState(t7);
-  const [missingFiles, setMissingFiles] = useState(false);
-  const {
-    code
-  } = useLocale();
-  let t8;
-  if ($[17] !== value || $[18] !== code || $[19] !== serverURL || $[20] !== api || $[21] !== relationTo || $[22] !== i18n.language) {
-    t8 = () => {
-      if (value !== null && typeof value !== "undefined" && value.length !== 0) {
-        const query = {
-          depth: 0,
-          draft: true,
-          locale: code,
-          where: {
-            and: [{
-              id: {
-                in: value
-              }
-            }]
-          }
-        };
-        const fetchFile = async () => {
-          const response = await fetch(`${serverURL}${api}/${relationTo}`, {
-            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();
-            setFileDocs(json.docs);
-          } else {
-            setMissingFiles(true);
-            setFileDocs([]);
-          }
-        };
-        fetchFile();
+  } = props;
+  let t0;
+  if ($[0] !== fileDocs || $[1] !== onReorder) {
+    t0 = (moveFromIndex, moveToIndex) => {
+      if (moveFromIndex === moveToIndex) {
+        return;
       }
+      const updatedArray = [...fileDocs];
+      const [item] = updatedArray.splice(moveFromIndex, 1);
+      updatedArray.splice(moveToIndex, 0, item);
+      onReorder(updatedArray);
     };
-    $[17] = value;
-    $[18] = code;
-    $[19] = serverURL;
-    $[20] = api;
-    $[21] = relationTo;
-    $[22] = i18n.language;
-    $[23] = t8;
-  } else {
-    t8 = $[23];
-  }
-  let t9;
-  if ($[24] !== value || $[25] !== relationTo || $[26] !== api || $[27] !== serverURL || $[28] !== i18n || $[29] !== code) {
-    t9 = [value, relationTo, api, serverURL, i18n, code];
-    $[24] = value;
-    $[25] = relationTo;
-    $[26] = api;
-    $[27] = serverURL;
-    $[28] = i18n;
-    $[29] = code;
-    $[30] = t9;
-  } else {
-    t9 = $[30];
-  }
-  useEffect(t8, t9);
-  let t10;
-  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = function moveItemInArray(array, moveFromIndex, moveToIndex) {
-      const newArray = [...array];
-      const [item] = newArray.splice(moveFromIndex, 1);
-      newArray.splice(moveToIndex, 0, item);
-      return newArray;
-    };
-    $[31] = t10;
-  } else {
-    t10 = $[31];
-  }
-  const moveItemInArray = t10;
-  let t11;
-  if ($[32] !== value || $[33] !== setValue) {
-    t11 = (moveFromIndex_0, moveToIndex_0) => {
-      const updatedArray = moveItemInArray(value, moveFromIndex_0, moveToIndex_0);
-      setValue(updatedArray);
-    };
-    $[32] = value;
-    $[33] = setValue;
-    $[34] = t11;
+    $[0] = fileDocs;
+    $[1] = onReorder;
+    $[2] = t0;
   } else {
-    t11 = $[34];
+    t0 = $[2];
   }
-  const moveRow = t11;
-  let t12;
-  if ($[35] !== value || $[36] !== setValue) {
-    t12 = index => {
-      const updatedArray_0 = [...value];
+  const moveRow = t0;
+  let t1;
+  if ($[3] !== fileDocs || $[4] !== onRemove) {
+    t1 = index => {
+      const updatedArray_0 = [...(fileDocs || [])];
       updatedArray_0.splice(index, 1);
-      setValue(updatedArray_0);
+      onRemove(updatedArray_0.length === 0 ? [] : updatedArray_0);
     };
-    $[35] = value;
-    $[36] = setValue;
-    $[37] = t12;
-  } else {
-    t12 = $[37];
-  }
-  const removeItem = t12;
-  let t13;
-  if ($[38] !== relationTo || $[39] !== collections) {
-    t13 = typeof relationTo === "string" ? [relationTo] : collections.map(_temp);
-    $[38] = relationTo;
-    $[39] = collections;
-    $[40] = t13;
+    $[3] = fileDocs;
+    $[4] = onRemove;
+    $[5] = t1;
   } else {
-    t13 = $[40];
+    t1 = $[5];
   }
-  let t14;
-  if ($[41] !== t13 || $[42] !== filterOptions) {
-    t14 = {
-      collectionSlugs: t13,
-      filterOptions
-    };
-    $[41] = t13;
-    $[42] = filterOptions;
-    $[43] = t14;
+  const removeItem = t1;
+  let t2;
+  if ($[6] !== className) {
+    t2 = [baseClass, className].filter(Boolean);
+    $[6] = className;
+    $[7] = t2;
   } else {
-    t14 = $[43];
+    t2 = $[7];
   }
-  const [ListDrawer, ListDrawerToggler] = useListDrawer(t14);
-  let t15;
-  if ($[44] !== relationTo || $[45] !== collections || $[46] !== setValue || $[47] !== value || $[48] !== Label || $[49] !== field || $[50] !== label || $[51] !== missingFiles || $[52] !== t || $[53] !== moveRow || $[54] !== fileDocs || $[55] !== isSortable || $[56] !== removeItem || $[57] !== canCreate || $[58] !== hasMany || $[59] !== _path || $[60] !== readOnly || $[61] !== ListDrawerToggler || $[62] !== ListDrawer) {
-    let t16;
-    if ($[64] !== relationTo) {
-      t16 = coll => coll.slug === relationTo;
-      $[64] = relationTo;
-      $[65] = t16;
-    } else {
-      t16 = $[65];
-    }
-    const collection_0 = collections.find(t16);
-    let t17;
-    if ($[66] !== value || $[67] !== setValue) {
-      t17 = selections => {
-        const selectedIDs = Object.entries(selections).reduce((acc, t18) => {
-          const [key, value_0] = t18;
-          return value_0 ? [...acc, key] : acc;
-        }, []);
-        if (value?.length) {
-          setValue([...value, ...selectedIDs]);
-        } else {
-          setValue(selectedIDs);
-        }
+  const t3 = t2.join(" ");
+  let t4;
+  if ($[8] !== fileDocs || $[9] !== moveRow || $[10] !== serverURL || $[11] !== isSortable || $[12] !== readonly || $[13] !== removeItem || $[14] !== reloadDoc || $[15] !== t3) {
+    let t5;
+    if ($[17] !== moveRow) {
+      t5 = t6 => {
+        const {
+          moveFromIndex: moveFromIndex_0,
+          moveToIndex: moveToIndex_0
+        } = t6;
+        return moveRow(moveFromIndex_0, moveToIndex_0);
       };
-      $[66] = value;
-      $[67] = setValue;
-      $[68] = t17;
+      $[17] = moveRow;
+      $[18] = t5;
     } else {
-      t17 = $[68];
+      t5 = $[18];
     }
-    const onBulkSelect = t17;
-    let t18;
-    if ($[69] === Symbol.for("react.memo_cache_sentinel")) {
-      t18 = [baseClass];
-      $[69] = t18;
-    } else {
-      t18 = $[69];
-    }
-    let t20;
-    if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
-      t20 = [`${baseClass}__controls`];
-      $[70] = t20;
-    } else {
-      t20 = $[70];
-    }
-    let t21;
-    if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
-      t21 = [`${baseClass}__buttons`];
-      $[71] = t21;
-    } else {
-      t21 = $[71];
-    }
-    let t22;
-    if ($[72] !== canCreate || $[73] !== t || $[74] !== hasMany || $[75] !== _path || $[76] !== relationTo || $[77] !== setValue || $[78] !== value) {
-      t22 = canCreate && _jsx("div", {
-        className: [`${baseClass}__add-new`].join(" "),
-        children: _jsx(AddNewRelation, {
-          Button: _jsx(Button, {
-            buttonStyle: "icon-label",
-            el: "span",
-            icon: "plus",
-            iconPosition: "left",
-            iconStyle: "with-border",
-            children: t("fields:addNew")
-          }),
-          hasMany,
-          path: _path,
+    let t6;
+    if ($[19] !== serverURL || $[20] !== isSortable || $[21] !== readonly || $[22] !== removeItem || $[23] !== reloadDoc) {
+      t6 = (t7, index_0) => {
+        const {
           relationTo,
-          setValue,
-          unstyled: true,
-          value
-        })
-      });
-      $[72] = canCreate;
-      $[73] = t;
-      $[74] = hasMany;
-      $[75] = _path;
-      $[76] = relationTo;
-      $[77] = setValue;
-      $[78] = value;
-      $[79] = t22;
-    } else {
-      t22 = $[79];
-    }
-    let t23;
-    if ($[80] !== setValue) {
-      t23 = () => setValue([]);
-      $[80] = setValue;
-      $[81] = t23;
-    } else {
-      t23 = $[81];
-    }
-    let t24;
-    if ($[82] !== value || $[83] !== setValue) {
-      t24 = selection => {
-        if (value?.length) {
-          setValue([...value, selection.docID]);
-        } else {
-          setValue([selection.docID]);
+          value: value_0
+        } = t7;
+        const id = String(value_0.id);
+        const url = value_0.thumbnailURL || value_0.url;
+        let src;
+        try {
+          src = new URL(url, serverURL).toString();
+        } catch {
+          src = `${serverURL}${url}`;
         }
-      };
-      $[82] = value;
-      $[83] = setValue;
-      $[84] = t24;
-    } else {
-      t24 = $[84];
-    }
-    t15 = _jsxs(Fragment, {
-      children: [_jsxs("div", {
-        className: t18.join(" "),
-        children: [_jsx(FieldLabel, {
-          Label,
-          field,
-          label
-        }), _jsx("div", {
-          children: missingFiles || !value?.length ? _jsx("div", {
-            className: [`${baseClass}__no-data`].join(" "),
-            children: t("version:noRowsFound", {
-              label: relationTo
-            })
-          }) : _jsx(DraggableSortable, {
-            className: `${baseClass}__draggable-rows`,
-            ids: value,
-            onDragEnd: t19 => {
-              const {
-                moveFromIndex: moveFromIndex_1,
-                moveToIndex: moveToIndex_1
-              } = t19;
-              return moveRow(moveFromIndex_1, moveToIndex_1);
+        return _jsx(DraggableSortableItem, {
+          disabled: !isSortable,
+          id,
+          children: draggableSortableItemProps => _jsx("div", {
+            className: [`${baseClass}__dragItem`, draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`].filter(Boolean).join(" "),
+            ref: draggableSortableItemProps.setNodeRef,
+            style: {
+              transform: draggableSortableItemProps.transform,
+              transition: draggableSortableItemProps.transition,
+              zIndex: draggableSortableItemProps.isDragging ? 1 : undefined
             },
-            children: Boolean(value.length) && value.map((id, index_0) => {
-              const doc_0 = fileDocs.find(doc => doc.id === id);
-              const uploadConfig = collection_0?.upload;
-              if (!doc_0) {
-                return null;
-              }
-              return _jsx(FileDetails, {
+            children: _jsxs(UploadCard, {
+              size: "small",
+              children: [isSortable && draggableSortableItemProps && _jsx("div", {
+                className: `${baseClass}__drag`,
+                ...draggableSortableItemProps.attributes,
+                ...draggableSortableItemProps.listeners,
+                children: _jsx(DragHandleIcon, {})
+              }), _jsx(RelationshipContent, {
+                allowEdit: !readonly,
+                allowRemove: !readonly,
+                alt: value_0?.alt || value_0?.filename,
+                byteSize: value_0.filesize,
                 collectionSlug: relationTo,
-                doc: doc_0,
-                hasMany: true,
-                isSortable,
-                removeItem,
-                rowIndex: index_0,
-                uploadConfig
-              }, id);
+                filename: value_0.filename,
+                id,
+                mimeType: value_0?.mimeType,
+                onRemove: () => removeItem(index_0),
+                reloadDoc,
+                src,
+                withMeta: false,
+                x: value_0?.width,
+                y: value_0?.height
+              })]
             })
           })
-        }), _jsxs("div", {
-          className: t20.join(" "),
-          children: [_jsxs("div", {
-            className: t21.join(" "),
-            children: [t22, _jsx(ListDrawerToggler, {
-              className: `${baseClass}__toggler`,
-              disabled: readOnly,
-              children: _jsx("div", {
-                children: _jsx(Button, {
-                  buttonStyle: "icon-label",
-                  el: "span",
-                  icon: "plus",
-                  iconPosition: "left",
-                  iconStyle: "with-border",
-                  children: t("fields:chooseFromExisting")
-                })
-              })
-            })]
-          }), _jsx("button", {
-            className: `${baseClass}__clear-all`,
-            onClick: t23,
-            type: "button",
-            children: "Clear all"
-          })]
-        })]
-      }), _jsx(ListDrawer, {
-        enableRowSelections: true,
-        onBulkSelect,
-        onSelect: t24
-      })]
+        }, id);
+      };
+      $[19] = serverURL;
+      $[20] = isSortable;
+      $[21] = readonly;
+      $[22] = removeItem;
+      $[23] = reloadDoc;
+      $[24] = t6;
+    } else {
+      t6 = $[24];
+    }
+    t4 = _jsx("div", {
+      className: t3,
+      children: _jsx(DraggableSortable, {
+        className: `${baseClass}__draggable-rows`,
+        ids: fileDocs?.map(_temp),
+        onDragEnd: t5,
+        children: fileDocs.map(t6)
+      })
     });
-    $[44] = relationTo;
-    $[45] = collections;
-    $[46] = setValue;
-    $[47] = value;
-    $[48] = Label;
-    $[49] = field;
-    $[50] = label;
-    $[51] = missingFiles;
-    $[52] = t;
-    $[53] = moveRow;
-    $[54] = fileDocs;
-    $[55] = isSortable;
-    $[56] = removeItem;
-    $[57] = canCreate;
-    $[58] = hasMany;
-    $[59] = _path;
-    $[60] = readOnly;
-    $[61] = ListDrawerToggler;
-    $[62] = ListDrawer;
-    $[63] = t15;
+    $[8] = fileDocs;
+    $[9] = moveRow;
+    $[10] = serverURL;
+    $[11] = isSortable;
+    $[12] = readonly;
+    $[13] = removeItem;
+    $[14] = reloadDoc;
+    $[15] = t3;
+    $[16] = t4;
   } else {
-    t15 = $[63];
+    t4 = $[16];
   }
-  return t15;
-};
-function _temp(collection) {
-  return collection.slug;
+  return t4;
+}
+function _temp(t0) {
+  const {
+    value
+  } = t0;
+  return String(value.id);
 }
 //# sourceMappingURL=index.js.map