@blaze-cms/plugin-media-ui 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/lib/components/FileUploadAdapter/FileUploadAdapter.js

@@ -1,206 +1,122 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.define-properties.js");
-require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.find.js");
-require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.function.name.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.string.includes.js");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _fileUpload = _interopRequireDefault(require("@blaze-react/file-upload"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _client = require("@apollo/client");
 var _adminUiUtils = require("@blaze-cms/admin-ui-utils");
-var _reactFormBuilder = require("@blaze-cms/react-form-builder");
 var _toaster = require("@blaze-react/toaster");
+var _tooltip = _interopRequireDefault(require("@blaze-react/tooltip"));
 var _constants = require("../../constants");
 var _ListingContainer = _interopRequireDefault(require("../ListingContainer"));
 var _mediaContext = require("../../utils/media-context");
 var _FileList = _interopRequireDefault(require("./FileList"));
-var _useLimit3 = _interopRequireDefault(require("./useLimit"));
+var _useLimit = _interopRequireDefault(require("./useLimit"));
 var _mappers = require("./mappers");
 var _FilePreview = _interopRequireDefault(require("../FilePreview"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var _FileUploadAdapter = function FileUploadAdapter(_ref) {
-  var onChange = _ref.onChange,
-    label = _ref.label,
-    id = _ref.id,
-    type = _ref.type,
-    value = _ref.value,
-    maxItems = _ref.maxItems,
-    shouldRenderInPreview = _ref.shouldRenderInPreview,
-    canDragAndDrop = _ref.canDragAndDrop,
-    simpleLayout = _ref.simpleLayout,
-    previewAllFiles = _ref.previewAllFiles;
-  var _useContext = (0, _react.useContext)(_FileUploadAdapter.FormContext),
-    InjectPreview = _useContext.InjectPreview;
-  var _useLimit = (0, _useLimit3["default"])(maxItems),
-    _useLimit2 = (0, _slicedToArray2["default"])(_useLimit, 1),
-    currentLimit = _useLimit2[0];
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    displayModal = _useState2[0],
-    setDisplayModal = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    displayFileUploadModal = _useState4[0],
-    setDisplayFileUploadModal = _useState4[1];
-  var initialValue = (0, _mappers.formatInitialValue)({
-    value: value,
-    type: type
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const FileUploadAdapter = ({
+  onChange,
+  label,
+  id,
+  type,
+  value,
+  maxItems,
+  shouldRenderInPreview,
+  canDragAndDrop,
+  simpleLayout,
+  tooltip,
+  previewAllFiles,
+  disableFilePreview,
+  fileType,
+  storeKey
+}) => {
+  const {
+    InjectPreview
+  } = (0, _react.useContext)(FileUploadAdapter.FormContext);
+  const [currentLimit] = (0, _useLimit.default)(maxItems);
+  const [displayModal, setDisplayModal] = (0, _react.useState)(false);
+  const [displayFileUploadModal, setDisplayFileUploadModal] = (0, _react.useState)(false);
+  const initialValue = (0, _mappers.formatInitialValue)({
+    value,
+    type
   });
-  var _useState5 = (0, _react.useState)(initialValue),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    currentValue = _useState6[0],
-    setCurrentValue = _useState6[1];
-  var _useState7 = (0, _react.useState)(0),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    currentOffset = _useState8[0],
-    setCurrentOffset = _useState8[1];
-  var _useState9 = (0, _react.useState)([]),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    selectedFiles = _useState10[0],
-    setSelectedFiles = _useState10[1];
-  var _useState11 = (0, _react.useState)(null),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    editFile = _useState12[0],
-    setEditFile = _useState12[1];
-  var client = (0, _client.useApolloClient)();
-  var _useToasts = (0, _toaster.useToasts)(),
-    addToast = _useToasts.addToast;
-  var getFiles = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(offset, ids) {
-      var fetchAll,
-        _yield$client$query,
-        newFiles,
-        _args = arguments;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            fetchAll = _args.length > 2 && _args[2] !== undefined ? _args[2] : previewAllFiles;
-            _context.next = 3;
-            return client.query({
-              query: (0, _adminUiUtils.getQuery)('GET_FILES'),
-              variables: {
-                limit: fetchAll ? 0 : 4,
-                offset: offset,
-                where: {
-                  id: {
-                    _in: ids
-                  }
-                }
-              },
-              skip: !currentValue.length,
-              fetchPolicy: 'network-only'
-            });
-          case 3:
-            _yield$client$query = _context.sent;
-            newFiles = _yield$client$query.data.files;
-            return _context.abrupt("return", newFiles);
-          case 6:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function getFiles(_x, _x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  (0, _react.useEffect)(function () {
-    (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var initialFiles, files, orderedFiles;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            initialFiles = !selectedFiles.length && !previewAllFiles ? currentValue.filter(function (_, i) {
-              return i <= 3;
-            }) : currentValue;
-            _context2.next = 3;
-            return getFiles(0, initialFiles);
-          case 3:
-            files = _context2.sent;
-            orderedFiles = orderFiles(files, currentValue);
-            setCurrentOffset(0);
-            setSelectedFiles(orderedFiles);
-          case 7:
-          case "end":
-            return _context2.stop();
+  const [currentValue, setCurrentValue] = (0, _react.useState)(initialValue);
+  const [selectedFiles, setSelectedFiles] = (0, _react.useState)([]);
+  const [editFile, setEditFile] = (0, _react.useState)(null);
+  const [allFilesLoaded, setAllFilesLoaded] = (0, _react.useState)(false);
+  const client = (0, _client.useApolloClient)();
+  const {
+    addToast
+  } = (0, _toaster.useToasts)();
+  const {
+    data: {
+      getEntitySchemas: [schemaData] = []
+    } = {}
+  } = (0, _client.useQuery)((0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA'), {
+    variables: {
+      identifier: 'file'
+    }
+  });
+  const getFiles = async (offset, ids, fetchAll = previewAllFiles) => {
+    const {
+      data: {
+        files: newFiles
+      }
+    } = await client.query({
+      query: (0, _adminUiUtils.getQuery)('GET_FILES'),
+      variables: {
+        limit: fetchAll ? 0 : 4,
+        offset,
+        where: {
+          id: {
+            _in: ids
+          }
         }
-      }, _callee2);
-    }))();
+      },
+      skip: !currentValue.length,
+      fetchPolicy: 'network-only'
+    });
+    return newFiles;
+  };
+  (0, _react.useEffect)(() => {
+    (async () => {
+      if (allFilesLoaded) {
+        const loadedFiles = await getFiles(0, currentValue, true);
+        const loadedOrderedFiles = orderFiles(loadedFiles, currentValue);
+        setSelectedFiles(loadedOrderedFiles);
+        return;
+      }
+      const initialFiles = !selectedFiles.length && !previewAllFiles ? currentValue.filter((_, i) => i <= 3) : currentValue;
+      const files = await getFiles(0, initialFiles);
+      const orderedFiles = orderFiles(files, currentValue);
+      setSelectedFiles(orderedFiles);
+      setAllFilesLoaded(false);
+    })();
   }, [currentValue] //eslint-disable-line
   );
-  var fetchMore = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(shouldFetchAll) {
-      var newOffset, updatedOffset, offsetToUse, files, newFiles, orderedFiles;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            if (!(selectedFiles.length === currentValue.length)) {
-              _context3.next = 2;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 2:
-            newOffset = currentOffset + 4;
-            updatedOffset = newOffset > currentValue.length ? currentValue.length : newOffset;
-            offsetToUse = shouldFetchAll ? 0 : updatedOffset;
-            _context3.next = 7;
-            return getFiles(offsetToUse, currentValue, shouldFetchAll);
-          case 7:
-            files = _context3.sent;
-            newFiles = [].concat((0, _toConsumableArray2["default"])(selectedFiles), (0, _toConsumableArray2["default"])(files));
-            orderedFiles = orderFiles(newFiles, currentValue);
-            setSelectedFiles(orderedFiles);
-            setCurrentOffset(newOffset);
-          case 12:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return function fetchMore(_x3) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  var handleSelectedFiles = function handleSelectedFiles(files) {
-    var checkIsUnselecting = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var isUnselectingFile = (0, _mappers.isUnselecting)(value, checkIsUnselecting, files);
+  const fetchMore = async shouldFetchAll => {
+    if (selectedFiles.length === currentValue.length) return;
+    const newFiles = await getFiles(0, currentValue, true);
+    const newOrderedFiles = orderFiles(newFiles, currentValue);
+    setSelectedFiles(newOrderedFiles);
+    setAllFilesLoaded(true);
+  };
+  const handleSelectedFiles = (files, checkIsUnselecting = true) => {
+    const isUnselectingFile = (0, _mappers.isUnselecting)(value, checkIsUnselecting, files);
     if (isUnselectingFile) {
-      var valueArray = (0, _mappers.transformToArray)(value);
-      var selectedFilesIds = valueArray.filter(function (valueId) {
-        return !files.includes(valueId);
-      });
-      var parsedValue = (0, _mappers.getFormat)(type, {
+      const valueArray = (0, _mappers.transformToArray)(value);
+      const selectedFilesIds = valueArray.filter(valueId => !files.includes(valueId));
+      const parsedValue = (0, _mappers.getFormat)(type, {
         filesIds: selectedFilesIds
       });
       setCurrentValue(selectedFilesIds);
@@ -209,7 +125,7 @@ var _FileUploadAdapter = function FileUploadAdapter(_ref) {
           target: {
             value: parsedValue,
             name: id,
-            type: type,
+            type,
             fileData: selectedFilesIds.length ? selectedFilesIds : null
           }
         },
@@ -218,13 +134,12 @@ var _FileUploadAdapter = function FileUploadAdapter(_ref) {
     }
     setCurrentValue(files);
   };
-  var handleReorderFiles = function handleReorderFiles(files) {
-    var filesIds = files.map(function (_ref5) {
-      var fileId = _ref5.id;
-      return fileId;
-    });
-    var parsedValue = (0, _mappers.getFormat)(type, {
-      filesIds: filesIds
+  const handleReorderFiles = files => {
+    const filesIds = files.map(({
+      id: fileId
+    }) => fileId);
+    const parsedValue = (0, _mappers.getFormat)(type, {
+      filesIds
     });
     setSelectedFiles(files);
     return onChange({
@@ -232,14 +147,14 @@ var _FileUploadAdapter = function FileUploadAdapter(_ref) {
         target: {
           value: parsedValue,
           name: id,
-          type: type,
+          type,
           fileData: filesIds
         }
       },
       value: parsedValue
     });
   };
-  var closeModalAndSetValue = function closeModalAndSetValue(isSaving, values, toastMessage) {
+  const closeModalAndSetValue = (isSaving, values, toastMessage) => {
     if (toastMessage) {
       addToast(toastMessage, {
         appearance: 'success',
@@ -247,7 +162,7 @@ var _FileUploadAdapter = function FileUploadAdapter(_ref) {
       });
     }
     if (isSaving) {
-      var parsedValue = (0, _mappers.getFormat)(type, {
+      const parsedValue = (0, _mappers.getFormat)(type, {
         filesIds: simpleLayout ? values : currentValue
       });
       setDisplayModal(false);
@@ -256,8 +171,8 @@ var _FileUploadAdapter = function FileUploadAdapter(_ref) {
           target: {
             value: parsedValue,
             name: id,
-            type: type,
-            currentValue: currentValue
+            type,
+            currentValue
           }
         },
         value: parsedValue
@@ -266,168 +181,155 @@ var _FileUploadAdapter = function FileUploadAdapter(_ref) {
     setCurrentValue(initialValue);
     setDisplayModal(false);
   };
-  var fileUploadButtonText = (0, _mappers.getButtonText)({
-    maxItems: maxItems,
-    value: initialValue
+  const fileUploadButtonText = (0, _mappers.getButtonText)({
+    maxItems,
+    value: initialValue,
+    fileType
   });
-  var filesPending = previewAllFiles ? 0 : (0, _mappers.getNumberFilesPendingToFetch)(currentOffset, currentValue);
-  var onOpenLibrary = function onOpenLibrary() {
-    return setDisplayModal(true);
-  };
-  var handleEditModal = function handleEditModal(file) {
-    var selectedEditFile = selectedFiles.find(function (_ref6) {
-      var _id = _ref6.id;
-      return _id === file.id;
-    });
+  const filesPending = previewAllFiles ? 0 : (0, _mappers.getNumberFilesPendingToFetch)(selectedFiles.length, currentValue);
+  const onOpenLibrary = () => setDisplayModal(true);
+  const handleEditModal = file => {
+    const selectedEditFile = selectedFiles.find(({
+      id: _id
+    }) => _id === file.id);
     setEditFile(selectedEditFile);
   };
-  var handleEditFileForm = function handleEditFileForm(editedFile) {
-    var values = (0, _reactFormBuilder.parseFormValues)(editedFile.valuesChecked);
-    var altText = values.altText,
-      caption = values.caption,
-      credits = values.credits,
-      hrefUrl = values.hrefUrl,
-      name = values.name;
-    setEditFile(_objectSpread(_objectSpread({}, editFile), {}, {
-      name: name,
-      data: {
-        altText: altText,
-        caption: caption,
-        credits: credits,
-        hrefUrl: hrefUrl
+  const handleEditFileForm = editedFile => {
+    const dataValues = editedFile.valuesChecked.reduce((acc, {
+      id: formValueId,
+      value: formValue,
+      isDataPropery
+    }) => {
+      if (isDataPropery) {
+        acc.data[formValueId] = formValue;
+      } else {
+        acc[formValueId] = formValue;
       }
+      return acc;
+    }, {
+      id: editFile.id,
+      data: _objectSpread({}, editFile.data)
+    });
+    delete dataValues.data.__typename; // Remove __typename if it exists in data to avoid issues with Apollo cache.
+
+    setEditFile(_objectSpread(_objectSpread({}, editFile), {}, {
+      formData: dataValues
     }));
   };
-  var orderFiles = function orderFiles(files, ids) {
-    return ids.map(function (currentId) {
-      return files.find(function (_ref7) {
-        var fileId = _ref7.id;
-        return fileId === currentId;
-      });
-    }).filter(Boolean);
-  };
-  var modalActions = [{
+  const orderFiles = (files, ids) => ids.map(currentId => files.find(({
+    id: fileId
+  }) => fileId === currentId)).filter(Boolean);
+  const modalActions = [{
     textButton: 'Cancel',
-    callback: function callback() {
+    callback: () => {
       closeModalAndSetValue();
     },
     modifiers: ['cancel']
   }, {
-    textButton: 'Save',
-    callback: function callback() {
+    textButton: 'Apply',
+    callback: () => {
       closeModalAndSetValue(true);
     },
     modifiers: []
   }];
-  var editModalActions = [{
+  const editModalActions = [{
     textButton: 'Cancel',
-    callback: function callback() {
+    callback: () => {
       setEditFile(null);
     },
     modifiers: ['cancel']
   }, {
-    textButton: 'Save',
-    callback: function () {
-      var _callback = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-        var name, editedFileId, data, updatedSelectedFiles;
-        return _regenerator["default"].wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
-            case 0:
-              name = editFile.name, editedFileId = editFile.id, data = editFile.data;
-              updatedSelectedFiles = selectedFiles.map(function (selectedFile) {
-                if (selectedFile.id === editedFileId) {
-                  return _objectSpread(_objectSpread({}, selectedFile), {}, {
-                    name: name,
-                    data: data
-                  });
-                }
-                return selectedFile;
-              });
-              setSelectedFiles(updatedSelectedFiles);
-              _context4.prev = 3;
-              _context4.next = 6;
-              return client.mutate({
-                mutation: (0, _adminUiUtils.getMutation)('UPDATE_FILE'),
-                variables: {
-                  input: {
-                    name: name,
-                    data: data,
-                    id: editedFileId
-                  }
-                },
-                update: function update(cache, _ref8) {
-                  var fileUpdated = _ref8.data.updateFile;
-                  cache.writeQuery({
-                    query: (0, _adminUiUtils.getQuery)('GET_FILE_BY_ID'),
-                    variables: {
-                      id: id
-                    },
-                    data: {
-                      file: fileUpdated.result
-                    }
-                  });
-                }
-              });
-            case 6:
-              addToast("File: ".concat(editFile.name, " has been updated"), {
-                appearance: 'success',
-                autoDismiss: true
-              });
-              closeModalAndSetValue(true);
-              setEditFile(null);
-              _context4.next = 15;
-              break;
-            case 11:
-              _context4.prev = 11;
-              _context4.t0 = _context4["catch"](3);
-              addToast("File: ".concat(editFile.name, " has not been updated"), {
-                appearance: 'error',
-                autoDismiss: true
-              });
-              console.error(_context4.t0); //eslint-disable-line
-            case 15:
-            case "end":
-              return _context4.stop();
+    textButton: 'Apply',
+    callback: async () => {
+      const {
+        name,
+        id: editedFileId,
+        data,
+        formData
+      } = editFile;
+      const updatedSelectedFiles = selectedFiles.map(selectedFile => {
+        if (selectedFile.id === editedFileId) {
+          return _objectSpread(_objectSpread({}, selectedFile), {}, {
+            name,
+            data
+          });
+        }
+        return selectedFile;
+      });
+      setSelectedFiles(updatedSelectedFiles);
+      try {
+        await client.mutate({
+          mutation: (0, _adminUiUtils.getMutation)('UPDATE_FILE'),
+          variables: {
+            input: _objectSpread(_objectSpread({}, formData), {}, {
+              id: editedFileId
+            })
+          },
+          update(cache, {
+            data: {
+              updateFile: fileUpdated
+            }
+          }) {
+            cache.writeQuery({
+              query: (0, _adminUiUtils.getQuery)('GET_FILE_BY_ID'),
+              variables: {
+                id
+              },
+              data: {
+                file: fileUpdated.result
+              }
+            });
           }
-        }, _callee4, null, [[3, 11]]);
-      }));
-      function callback() {
-        return _callback.apply(this, arguments);
+        });
+        addToast(`File: ${editFile.name} has been updated`, {
+          appearance: 'success',
+          autoDismiss: true
+        });
+        closeModalAndSetValue(true);
+        setEditFile(null);
+      } catch (e) {
+        addToast(`File: ${editFile.name} has not been updated`, {
+          appearance: 'error',
+          autoDismiss: true
+        });
+        console.error(e); //eslint-disable-line
       }
-      return callback;
-    }(),
+    },
     modifiers: []
   }];
-  var filesPendingString = "".concat(filesPending, " ").concat(_constants.MORE);
-  var fileListSpan = filesPending ?
+  const filesPendingString = `${filesPending} ${_constants.MORE}`;
+  const fileListSpan = filesPending ?
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  _react["default"].createElement("span", {
+  _react.default.createElement("span", {
     className: "FileUploadAdapter__preview-link button button--link",
     onClick: fetchMore
   }, "+ ", filesPendingString) : null;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "form-field form-field--button"
-  }, /*#__PURE__*/_react["default"].createElement("label", null, label), selectedFiles && /*#__PURE__*/_react["default"].createElement(_mediaContext.MediaContextProvider, {
+  }, /*#__PURE__*/_react.default.createElement("label", null, label, " ", /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    tooltipContent: tooltip
+  })), selectedFiles && /*#__PURE__*/_react.default.createElement(_mediaContext.MediaContextProvider, {
     value: {
-      handleEditModal: handleEditModal,
+      handleEditModal,
       onUnselectFile: handleSelectedFiles
     }
-  }, shouldRenderInPreview ? /*#__PURE__*/_react["default"].createElement(InjectPreview, {
-    selector: _FileUploadAdapter.previewerId
-  }, /*#__PURE__*/_react["default"].createElement(_FileList["default"], {
+  }, shouldRenderInPreview ? /*#__PURE__*/_react.default.createElement(InjectPreview, {
+    selector: FileUploadAdapter.previewerId
+  }, /*#__PURE__*/_react.default.createElement(_FileList.default, {
     selectedFiles: selectedFiles,
     allFiles: currentValue,
     handleReorderFiles: handleReorderFiles,
     canDragAndDrop: canDragAndDrop,
     fetchMore: fetchMore
-  }, fileListSpan)) : /*#__PURE__*/_react["default"].createElement(_FileList["default"], {
+  }, fileListSpan)) : /*#__PURE__*/_react.default.createElement(_FileList.default, {
     selectedFiles: selectedFiles,
     handleReorderFiles: handleReorderFiles,
     fetchMore: fetchMore
-  })), /*#__PURE__*/_react["default"].createElement(_fileUpload["default"], {
+  })), /*#__PURE__*/_react.default.createElement(_fileUpload.default, {
     actionText: fileUploadButtonText,
-    handleLibraryClick: function handleLibraryClick() {
+    storeKey: storeKey,
+    handleLibraryClick: () => {
       if (simpleLayout) {
         setDisplayFileUploadModal(true);
       } else {
@@ -435,65 +337,75 @@ var _FileUploadAdapter = function FileUploadAdapter(_ref) {
       }
     },
     enableDragAndDrop: false
-  })), editFile && /*#__PURE__*/_react["default"].createElement(_adminUiUtils.ModalAdapter, {
+  })), editFile && /*#__PURE__*/_react.default.createElement(_adminUiUtils.ModalAdapter, {
     actions: editModalActions,
     title: "Edit File",
-    onClose: function onClose() {
-      return setEditFile(null);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_FilePreview["default"], {
+    onClose: () => setEditFile(null)
+  }, /*#__PURE__*/_react.default.createElement(_FilePreview.default, {
     file: editFile,
     fileName: editFile.fileName,
     handleFormChange: handleEditFileForm,
     displayForm: true,
-    previewType: "card"
-  })), displayFileUploadModal && simpleLayout && /*#__PURE__*/_react["default"].createElement("div", {
+    previewType: "card",
+    disableFilePreview: disableFilePreview,
+    schemaData: schemaData
+  })), displayFileUploadModal && simpleLayout && /*#__PURE__*/_react.default.createElement("div", {
     className: "file-upload-modal-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement(_ListingContainer["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_ListingContainer.default, {
     displayFileUploadModal: displayFileUploadModal,
     closeModalAndSetValue: closeModalAndSetValue,
     setDisplayFileUploadModal: setDisplayFileUploadModal,
     handleSelectedFiles: handleSelectedFiles,
     maxItems: currentLimit,
     simpleLayout: simpleLayout,
-    filesSelected: currentValue.length > 1 ? currentValue : []
-  })), displayModal && !simpleLayout && /*#__PURE__*/_react["default"].createElement("div", {
+    filesSelected: currentValue.length > 1 ? currentValue : [],
+    openEditInModal: true,
+    storeKey: storeKey
+  })), displayModal && !simpleLayout && /*#__PURE__*/_react.default.createElement("div", {
     className: "file-upload-modal-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement(_adminUiUtils.ModalAdapter, {
+  }, /*#__PURE__*/_react.default.createElement(_adminUiUtils.ModalAdapter, {
     actions: modalActions,
     className: "file-upload-modal",
     title: "Media library",
-    onClose: function onClose() {
-      return closeModalAndSetValue();
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_ListingContainer["default"], {
+    onClose: () => closeModalAndSetValue()
+  }, /*#__PURE__*/_react.default.createElement(_ListingContainer.default, {
     closeModalAndSetValue: closeModalAndSetValue,
     displayFileUploadModal: displayFileUploadModal,
     setDisplayFileUploadModal: setDisplayFileUploadModal,
     handleSelectedFiles: handleSelectedFiles,
     maxItems: currentLimit,
-    filesSelected: currentValue.length > 1 ? currentValue : []
+    filesSelected: currentValue.length > 1 ? currentValue : [],
+    openEditInModal: true,
+    storeKey: storeKey
   }))));
 };
-_FileUploadAdapter.propTypes = {
-  onChange: _propTypes["default"].func.isRequired,
-  label: _propTypes["default"].string.isRequired,
-  id: _propTypes["default"].string.isRequired,
-  type: _propTypes["default"].string.isRequired,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),
-  maxItems: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].bool]),
-  shouldRenderInPreview: _propTypes["default"].bool,
-  canDragAndDrop: _propTypes["default"].bool,
-  simpleLayout: _propTypes["default"].bool,
-  previewAllFiles: _propTypes["default"].bool
+FileUploadAdapter.propTypes = {
+  onChange: _propTypes.default.func.isRequired,
+  label: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  maxItems: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.bool]),
+  shouldRenderInPreview: _propTypes.default.bool,
+  canDragAndDrop: _propTypes.default.bool,
+  simpleLayout: _propTypes.default.bool,
+  previewAllFiles: _propTypes.default.bool,
+  tooltip: _propTypes.default.string,
+  fileType: _propTypes.default.string,
+  disableFilePreview: _propTypes.default.bool,
+  storeKey: _propTypes.default.string
 };
-_FileUploadAdapter.defaultProps = {
+FileUploadAdapter.defaultProps = {
   value: '',
   maxItems: false,
   shouldRenderInPreview: false,
   canDragAndDrop: false,
   simpleLayout: false,
-  previewAllFiles: false
+  previewAllFiles: false,
+  tooltip: '',
+  fileType: 'file',
+  disableFilePreview: true,
+  storeKey: null
 };
-var _default = exports["default"] = _FileUploadAdapter;
+var _default = exports.default = FileUploadAdapter;
 //# sourceMappingURL=FileUploadAdapter.js.map