@blaze-cms/plugin-media-ui 0.146.0-translations.8 → 0.147.0-rc-eagle.4

package/lib/components/CardMedia/CardMedia.js

@@ -1,304 +1,284 @@
 "use strict";
 
-require("core-js/modules/es.array.iterator.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.to-string.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.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;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-require("core-js/modules/es.function.name.js");
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _more = _interopRequireDefault(require("@blaze-react/more"));
-var _button = _interopRequireDefault(require("@blaze-react/button"));
 var _admin = require("@blaze-cms/admin");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _adminUiUtils = require("@blaze-cms/admin-ui-utils");
 var _client = require("@apollo/client");
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _toaster = require("@blaze-react/toaster");
 var _modal = _interopRequireDefault(require("@blaze-react/modal"));
 var _reactDom = require("react-dom");
 var _reactRouterDom = require("react-router-dom");
+var _pluginPageBuilderUi = require("@blaze-cms/plugin-page-builder-ui");
 var _EditMediaFile = _interopRequireDefault(require("../EditMediaFile"));
-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 && Object.prototype.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; }
-var CardMedia = function CardMedia(_ref) {
-  var onSelected = _ref.onSelected,
-    name = _ref.name,
-    url = _ref.url,
-    mimetype = _ref.mimetype,
-    id = _ref.id,
-    selected = _ref.selected,
-    displayLayout = _ref.displayLayout,
-    data = _ref.data,
-    modalTargetRef = _ref.modalTargetRef,
-    updateFile = _ref.updateFile,
-    removeFile = _ref.removeFile,
-    index = _ref.index,
-    openEditInModal = _ref.openEditInModal;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    displayDeleteModal = _useState2[0],
-    setDisplayDeleteModal = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    displayEditModal = _useState4[0],
-    setDisplayEditModal = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    enableSaveButton = _useState6[0],
-    setEnableSaveButton = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    fileData = _useState8[0],
-    setFileData = _useState8[1];
-  var _useToasts = (0, _toaster.useToasts)(),
-    addToast = _useToasts.addToast;
-  var _useMutation = (0, _client.useMutation)((0, _adminUiUtils.getMutation)('DELETE_FILE_BY_ID')),
-    _useMutation2 = (0, _slicedToArray2["default"])(_useMutation, 1),
-    deleteFile = _useMutation2[0];
-  var _mimetype$split = mimetype.split('/'),
-    _mimetype$split2 = (0, _slicedToArray2["default"])(_mimetype$split, 2),
-    type = _mimetype$split2[0],
-    extension = _mimetype$split2[1];
-  var client = (0, _client.useApolloClient)();
-  var deleteFileById = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setDisplayDeleteModal(false);
-            _context.prev = 1;
-            _context.next = 4;
-            return deleteFile({
-              variables: {
-                input: {
-                  id: id
-                }
-              }
-            });
-          case 4:
-            removeFile({
-              index: index
-            });
-            addToast("File: ".concat(name, " has been deleted"), {
-              appearance: 'success',
-              autoDismiss: true
-            });
-            _context.next = 11;
-            break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](1);
-            addToast(_context.t0.message, {
-              appearance: 'error',
-              autoDismiss: true
-            });
-          case 11:
-          case "end":
-            return _context.stop();
+var _bustUrl = _interopRequireDefault(require("../../utils/bustUrl"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CardMedia = ({
+  onSelected,
+  name,
+  url,
+  mimetype,
+  id,
+  selected,
+  displayLayout,
+  data,
+  updated,
+  modalTargetRef,
+  updateFile,
+  removeFile,
+  index,
+  openEditInModal
+}) => {
+  const [displayDeleteModal, setDisplayDeleteModal] = (0, _react.useState)(false);
+  const [displayEditModal, setDisplayEditModal] = (0, _react.useState)(false);
+  const [enableSaveButton, setEnableSaveButton] = (0, _react.useState)(false);
+  const [fileData, setFileData] = (0, _react.useState)(null);
+  const {
+    addToast
+  } = (0, _toaster.useToasts)();
+  const [deleteFile] = (0, _client.useMutation)((0, _adminUiUtils.getMutation)('DELETE_FILE_BY_ID'));
+  const [type, extension] = mimetype.split('/');
+  const client = (0, _client.useApolloClient)();
+  const {
+    data: {
+      getEntitySchemas: [schemaData] = []
+    } = {},
+    loading: schemaLoading
+  } = (0, _client.useQuery)((0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA'), {
+    variables: {
+      identifier: 'file'
+    }
+  });
+  const deleteFileById = async () => {
+    setDisplayDeleteModal(false);
+    try {
+      await deleteFile({
+        variables: {
+          input: {
+            id
+          }
         }
-      }, _callee, null, [[1, 8]]);
-    }));
-    return function deleteFileById() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var handleClick = function handleClick() {
+      });
+      removeFile({
+        index
+      });
+      addToast(`File: ${name} has been deleted`, {
+        appearance: 'success',
+        autoDismiss: true
+      });
+    } catch (error) {
+      addToast(error.message, {
+        appearance: 'error',
+        autoDismiss: true
+      });
+    }
+  };
+  const handleRowClick = () => onSelected({
+    id,
+    url,
+    name,
+    data
+  });
+  const handleCheckboxToggle = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
     onSelected({
-      id: id,
-      url: url,
-      name: name,
-      data: data
+      id,
+      url,
+      name,
+      data
     });
+  }, [id, url, name, data, onSelected]);
+  const handleKeyDown = e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleRowClick();
+    }
   };
-  var cardMediaClassNames = (0, _classnames2["default"])('card card--media-list', (0, _defineProperty2["default"])({
+  const cardMediaClassNames = (0, _classnames.default)('card card--media-list card--media-list-row', `card--media-${displayLayout}`, {
     'card--media-list--selected': selected
-  }, "card--media-".concat(displayLayout), displayLayout));
-  var handleCloseModal = function handleCloseModal() {
-    setDisplayEditModal(false);
-  };
-  var handleSaveButtonStatus = function handleSaveButtonStatus(state) {
-    setEnableSaveButton(state);
-  };
-  var modalActions = [{
+  });
+  const handleCloseModal = () => setDisplayEditModal(false);
+  const handleSaveButtonStatus = state => setEnableSaveButton(state);
+  const modalActions = [{
     textButton: 'Cancel',
     callback: handleCloseModal,
     modifiers: ['cancel']
   }, {
     textButton: 'Apply',
-    callback: function callback() {
-      return handleFormSave();
-    },
+    callback: () => handleFormSave(),
     modifiers: enableSaveButton ? [] : ['disabled']
   }];
-  var handleFileChange = function handleFileChange(file) {
-    setFileData(file);
-  };
-  var handleFormSave = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var _yield$client$mutate, updatedFile;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.prev = 0;
-            _context2.next = 3;
-            return client.mutate({
-              mutation: (0, _adminUiUtils.getMutation)('UPDATE_FILE'),
-              variables: {
-                input: fileData
-              },
-              update: function update(cache, _ref4) {
-                var fileUpdated = _ref4.data.updateFile;
-                cache.writeQuery({
-                  query: (0, _adminUiUtils.getQuery)('GET_FILE_BY_ID'),
-                  variables: {
-                    id: id
-                  },
-                  data: {
-                    file: fileUpdated.result
-                  }
-                });
-              }
-            });
-          case 3:
-            _yield$client$mutate = _context2.sent;
-            updatedFile = _yield$client$mutate.data.updateFile;
-            updateFile({
-              file: updatedFile.result,
-              index: index
-            });
-            addToast("File: ".concat(fileData.name, " has been updated"), {
-              appearance: 'success',
-              autoDismiss: true
-            });
-            _context2.next = 13;
-            break;
-          case 9:
-            _context2.prev = 9;
-            _context2.t0 = _context2["catch"](0);
-            addToast("File: ".concat(fileData.name, " has not been updated"), {
-              appearance: 'error',
-              autoDismiss: true
-            });
-            console.error(_context2.t0); //eslint-disable-line
-          case 13:
-            handleCloseModal();
-            setEnableSaveButton(false);
-          case 15:
-          case "end":
-            return _context2.stop();
+  const handleFileChange = file => setFileData(file);
+  const handleStopPropagation = e => e.stopPropagation();
+  const handleFormSave = async () => {
+    try {
+      const {
+        data: {
+          updateFile: updatedFile
+        }
+      } = await client.mutate({
+        mutation: (0, _adminUiUtils.getMutation)('UPDATE_FILE'),
+        variables: {
+          input: fileData.formData
+        },
+        update(cache, {
+          data: {
+            updateFile: fileUpdated
+          }
+        }) {
+          cache.writeQuery({
+            query: (0, _adminUiUtils.getQuery)('GET_FILE_BY_ID'),
+            variables: {
+              id
+            },
+            data: {
+              file: fileUpdated.result
+            }
+          });
         }
-      }, _callee2, null, [[0, 9]]);
-    }));
-    return function handleFormSave() {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, displayEditModal && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(_modal["default"], {
+      });
+      updateFile({
+        file: updatedFile.result,
+        index
+      });
+      addToast(`File: ${fileData.name} has been updated`, {
+        appearance: 'success',
+        autoDismiss: true
+      });
+    } catch (e) {
+      addToast(`File: ${fileData.name} has not been updated`, {
+        appearance: 'error',
+        autoDismiss: true
+      });
+      console.error(e); //eslint-disable-line
+    }
+    handleCloseModal();
+    setEnableSaveButton(false);
+  };
+  if (schemaLoading) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayEditModal && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_modal.default, {
     title: "Edit",
     actions: modalActions,
     onClose: handleCloseModal
-  }, /*#__PURE__*/_react["default"].createElement(_EditMediaFile["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_EditMediaFile.default, {
     onChange: handleFileChange,
     fileId: id,
     handleSaveButtonStatus: handleSaveButtonStatus,
     handleFormSave: handleFormSave,
-    enableSaveButton: enableSaveButton
-  })), modalTargetRef.current), /*#__PURE__*/_react["default"].createElement("div", {
-    className: cardMediaClassNames,
-    role: "button",
-    onClick: handleClick
-  }, displayDeleteModal && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(_admin.DeleteAction, {
-    onClose: function onClose() {
-      return setDisplayDeleteModal(false);
-    },
-    deleteAction: function deleteAction() {
-      return deleteFileById();
-    },
+    enableSaveButton: enableSaveButton,
+    schemaData: schemaData
+  })), modalTargetRef.current), displayDeleteModal && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_admin.DeleteAction, {
+    onClose: () => setDisplayDeleteModal(false),
+    deleteAction: () => deleteFileById(),
     itemName: name
-  }), modalTargetRef.current), type === 'image' ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card__image card__image--media-".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: url,
+  }), modalTargetRef.current), /*#__PURE__*/_react.default.createElement("div", {
+    className: cardMediaClassNames,
+    role: "option",
+    "aria-selected": selected,
+    tabIndex: 0,
+    onClick: handleRowClick,
+    onKeyDown: handleKeyDown
+  }, openEditInModal && /*#__PURE__*/_react.default.createElement("div", {
+    className: "card__select"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    "aria-label": `Select ${name}`,
+    checked: !!selected,
+    onChange: handleCheckboxToggle,
+    onClick: handleStopPropagation
+  })), type === 'image' ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `card__image card__image--media-${displayLayout}`
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: (0, _bustUrl.default)(url, updated),
     alt: name
-  })) : /*#__PURE__*/_react["default"].createElement("div", {
+  })) : /*#__PURE__*/_react.default.createElement("div", {
     className: "card__image card__image--media-list-document"
-  }, /*#__PURE__*/_react["default"].createElement("svg", {
+  }, /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "100",
     height: "100",
-    viewBox: "0 0 8 8"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
+    viewBox: "0 0 8 8",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z"
-  }))), /*#__PURE__*/_react["default"].createElement("footer", {
-    className: "card__footer card__footer--media-".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card__details card__details--media-".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card__title card__title--media-".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("h2", null, name)), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", null, "format: ", extension))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card__menu card__menu--".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "more-menu__wrapper more-menu__wrapper--card"
-  }, /*#__PURE__*/_react["default"].createElement(_more["default"], {
-    displayBg: true
-  }, /*#__PURE__*/_react["default"].createElement(_more["default"].Avatar, {
-    isMoreMenu: true
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "material-icons"
-  }, "more_vert")), /*#__PURE__*/_react["default"].createElement(_more["default"].Content, {
-    isMoreMenu: true
-  }, openEditInModal ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    onClick: function onClick(event) {
-      event.preventDefault();
-      event.stopPropagation();
+  }))), /*#__PURE__*/_react.default.createElement("footer", {
+    className: `card__footer card__footer--media-${displayLayout}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `card__details card__details--media-${displayLayout}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `card__title card__title--media-${displayLayout}`
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "card__file-name"
+  }, name)), /*#__PURE__*/_react.default.createElement("p", {
+    className: "card__meta"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Format: ", extension))), /*#__PURE__*/_react.default.createElement("div", {
+    className: `card__menu card__menu--icons card__menu--${displayLayout}`
+  }, openEditInModal ? /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "card__icon-btn",
+    title: "Edit",
+    "aria-label": "Edit",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
       setDisplayEditModal(true);
-    },
-    className: "more-menu__link"
-  }, "Edit") : /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
-    to: "/media/edit/".concat(id),
-    className: "more-menu__link"
-  }, "Edit"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    onClick: function onClick(event) {
-      event.preventDefault();
-      event.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_pluginPageBuilderUi.EditIcon, {
+    width: "20px",
+    height: "20px"
+  })) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: `/media/edit/${id}`,
+    className: "card__icon-btn",
+    title: "Edit",
+    "aria-label": "Edit",
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/_react.default.createElement(_pluginPageBuilderUi.EditIcon, {
+    width: "20px",
+    height: "20px"
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "card__icon-btn",
+    title: "Delete",
+    "aria-label": "Delete",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
       setDisplayDeleteModal(true);
-    },
-    className: "more-menu__link"
-  }, "Delete"))))))));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_pluginPageBuilderUi.DeleteIcon, {
+    width: "18px",
+    height: "18px"
+  }))))));
 };
 CardMedia.propTypes = {
-  name: _propTypes["default"].string.isRequired,
-  url: _propTypes["default"].string.isRequired,
-  id: _propTypes["default"].string.isRequired,
-  mimetype: _propTypes["default"].string.isRequired,
-  displayLayout: _propTypes["default"].string.isRequired,
-  data: _propTypes["default"].object,
-  onSelected: _propTypes["default"].func,
-  updateFile: _propTypes["default"].func.isRequired,
-  removeFile: _propTypes["default"].func.isRequired,
-  selected: _propTypes["default"].bool,
-  modalTargetRef: _propTypes["default"].object.isRequired,
-  index: _propTypes["default"].number.isRequired,
-  openEditInModal: _propTypes["default"].bool
+  name: _propTypes.default.string.isRequired,
+  url: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  mimetype: _propTypes.default.string.isRequired,
+  displayLayout: _propTypes.default.string.isRequired,
+  data: _propTypes.default.object,
+  updated: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onSelected: _propTypes.default.func,
+  updateFile: _propTypes.default.func.isRequired,
+  removeFile: _propTypes.default.func.isRequired,
+  selected: _propTypes.default.bool,
+  modalTargetRef: _propTypes.default.object.isRequired,
+  index: _propTypes.default.number.isRequired,
+  openEditInModal: _propTypes.default.bool
 };
 CardMedia.defaultProps = {
-  onSelected: function onSelected() {},
+  onSelected: () => {},
   selected: false,
   data: {},
+  updated: null,
   openEditInModal: false
 };
-var _default = exports["default"] = CardMedia;
+var _default = exports.default = CardMedia;
 //# sourceMappingURL=CardMedia.js.map