@raketa-cms/raketa-image-picker - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

dist/index.js

@@ -153,2 +153,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var MediaManagerContext = React.createContext({});
+
 var removeByIndex = function removeByIndex(items, idx) {
@@ -214,3 +216,3 @@ return [].concat(items.slice(0, idx), items.slice(idx + 1));
 function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  position: absolute;\n  bottom: 8px;\n  right: 12px;\n  background-color: ", ";\n  font-size: 1em;\n  color: #fff;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  line-height: 19px;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding-left: 1rem;\n  border-left: 1px solid ", ";\n"]);
 
@@ -225,3 +227,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  position: absolute;\n  bottom: 8px;\n  left: 12px;\n  background-color: ", ";\n  font-size: 0.85em;\n  color: #fff;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  margin-bottom: 1rem;\n  text-align: center;\n\n  & > img {\n    object-fit: contain;\n    width: 100%;\n    max-height: 200px;\n    margin-bottom: 0.5rem;\n  }\n"]);
 
@@ -246,3 +248,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject2$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  position: relative;\n  cursor: pointer;\n  width: 116px;\n  height: 116px;\n  border: 8px solid\n    ", ";\n\n  button {\n    display: none;\n  }\n\n  &:hover {\n    button {\n      display: inline-block;\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  position: relative;\n  cursor: pointer;\n  width: 116px;\n  height: 116px;\n  border: 8px solid\n    ", ";\n"]);
 
@@ -257,3 +259,3 @@ _templateObject2$1 = function _templateObject2() {
 function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  margin-top: 1em;\n  min-height: 500px;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  flex: 3;\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  margin-top: 1em;\n  min-height: 500px;\n"]);
 
@@ -266,13 +268,2 @@ _templateObject$1 = function _templateObject() {
 }
-
-var IconEdit = function IconEdit() {
-  return /*#__PURE__*/React.createElement("img", {
-    style: {
-      width: '12px',
-      margin: '0 auto'
-    },
-    src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMnB4IiBoZWlnaHQ9IjIycHgiIHZpZXdCb3g9IjAgMCAyMiAyMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5lZGl0LTI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iZWRpdC0yIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgaWQ9IlNoYXBlIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIxMyAwIDE4IDUgNSAxOCAwIDE4IDAgMTMiPjwvcG9seWdvbj4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg=="
-  });
-};
-
 var ImageList = styled__default.div(_templateObject$1(), raketaMir.reset);
@@ -285,8 +276,2 @@ var Thumb = styled__default.div(_templateObject2$1(), raketaMir.reset, function (props) {
 });
-var EditButton = styled__default.button(_templateObject4(), raketaMir.reset, raketaMir.buttonReset, function (props) {
-  return props.theme.colors.success;
-});
-var DeleteButton = styled__default.button(_templateObject5(), raketaMir.reset, raketaMir.buttonReset, function (props) {
-  return props.theme.colors.danger;
-});
 
@@ -307,5 +292,3 @@ var getPreviewImage = function getPreviewImage(image) {
       onSelect = _ref.onSelect,
-      onFastSelect = _ref.onFastSelect,
-      onDelete = _ref.onDelete,
-      onEdit = _ref.onEdit;
+      onFastSelect = _ref.onFastSelect;
   return /*#__PURE__*/React.createElement(Thumb, {
@@ -325,11 +308,73 @@ selected: selected ? 'selected' : '',
     title: image && image.name
-  })), /*#__PURE__*/React.createElement(EditButton, {
-    type: "button",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      onEdit(image);
+  })));
+};
+
+var ImagePreviewWrapper = styled__default.div(_templateObject4());
+var ImageInspector = styled__default.div(_templateObject5(), function (props) {
+  return props.theme.colors.gray;
+});
+
+var ImagePreview = function ImagePreview(_ref2) {
+  var image = _ref2.image,
+      onSave = _ref2.onSave,
+      onDelete = _ref2.onDelete;
+
+  var _React$useState = React.useState({
+    alt: ''
+  }),
+      state = _React$useState[0],
+      setState = _React$useState[1];
+
+  React.useEffect(function () {
+    var _image$settings$find;
+
+    setState(_extends(_extends({}, state), {}, {
+      alt: ((_image$settings$find = image.settings.find(function (s) {
+        return s.key === 'alt';
+      })) === null || _image$settings$find === void 0 ? void 0 : _image$settings$find.value) || ''
+    }));
+  }, [image]);
+
+  var handleUpdate = function handleUpdate() {
+    var altIdx = image.settings.findIndex(function (s) {
+      return s.key === 'alt';
+    });
+    onSave(image, {
+      settings: [].concat(image.settings.slice(0, altIdx), [{
+        key: "alt",
+        value: state.alt
+      }], image.settings.slice(altIdx + 1))
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(ImageInspector, null, /*#__PURE__*/React.createElement(ImagePreviewWrapper, null, /*#__PURE__*/React.createElement(Img, {
+    src: image,
+    variant: "original"
+  }), /*#__PURE__*/React.createElement(raketaMir.H, {
+    size: "regular",
+    style: {
+      maxWidth: '200px',
+      fontWeight: 500,
+      margin: '0 auto',
+      wordWrap: 'break-word'
     }
-  }, /*#__PURE__*/React.createElement(IconEdit, null)), /*#__PURE__*/React.createElement(DeleteButton, {
+  }, image.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: 0.5
+    }
+  }, (image.size / 1024).toFixed(2), " KB / ", image.width, "\xD7", image.height)), /*#__PURE__*/React.createElement(TextInput, {
+    label: "Image alt text",
+    value: state.alt,
+    onChange: function onChange(alt) {
+      return setState(_extends(_extends({}, state), {}, {
+        alt: alt
+      }));
+    }
+  }), /*#__PURE__*/React.createElement(raketaMir.Button, {
     type: "button",
+    variant: "primary",
+    onClick: handleUpdate
+  }, "Update"), /*#__PURE__*/React.createElement(raketaMir.Button, {
+    type: "button",
+    variant: "danger",
     onClick: function onClick(e) {
@@ -340,20 +385,20 @@ e.preventDefault();
     }
-  }, "\xD7"));
+  }, "Remove image"));
 };
 
-var BrowseTab = function BrowseTab(_ref2) {
-  var images = _ref2.images,
-      q = _ref2.q,
-      initialImage = _ref2.selectedImage,
-      onFastSelect = _ref2.onFastSelect,
-      onSelect = _ref2.onSelect,
-      onDelete = _ref2.onDelete,
-      onSearch = _ref2.onSearch,
-      onSearchTermChange = _ref2.onSearchTermChange,
-      onSearchClear = _ref2.onSearchClear,
-      onEdit = _ref2.onEdit;
+var BrowseTab = function BrowseTab(_ref3) {
+  var images = _ref3.images,
+      q = _ref3.q,
+      initialImage = _ref3.selectedImage,
+      onSelect = _ref3.onSelect,
+      onFastSelect = _ref3.onFastSelect,
+      _onDelete = _ref3.onDelete,
+      onSearch = _ref3.onSearch,
+      onSearchTermChange = _ref3.onSearchTermChange,
+      onUpdateImage = _ref3.onUpdateImage;
+  var mediaManager = React.useContext(MediaManagerContext);
 
-  var _React$useState = React.useState(initialImage),
-      selectedImage = _React$useState[0],
-      setSelectedImage = _React$useState[1];
+  var _React$useState2 = React.useState(initialImage),
+      selectedImage = _React$useState2[0],
+      setSelectedImage = _React$useState2[1];
 
@@ -365,6 +410,14 @@ var handleSelectImage = function handleSelectImage(newSelected) {
 
+  var handleUpdateImage = function handleUpdateImage(image, updates) {
+    mediaManager.update(image, updates, function (updatedImage) {
+      setSelectedImage(updatedImage);
+      onUpdateImage(updatedImage);
+      onSelect(updatedImage);
+    });
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(raketaMir.Stack, {
     v: "center",
     h: "flex-start",
-    g: "1em"
+    g: "0.5rem"
   }, /*#__PURE__*/React.createElement(TextInput, {
@@ -378,22 +431,24 @@ label: "Search images",
     type: "button",
-    variant: "primary",
+    variant: "secondary",
     onClick: function onClick() {
       return onSearch();
     }
-  }, "Search"), /*#__PURE__*/React.createElement(raketaMir.Button, {
-    type: "button",
-    variant: "secondary",
-    onClick: function onClick() {
-      return onSearchClear();
-    }
-  }, "Clear")), /*#__PURE__*/React.createElement(ImageList, null, images.map(function (image) {
+  }, "Search")), /*#__PURE__*/React.createElement(raketaMir.Stack, {
+    g: "1rem"
+  }, /*#__PURE__*/React.createElement(ImageList, null, images.map(function (image) {
     return /*#__PURE__*/React.createElement(ImageItem, {
       key: image.id,
       image: image,
-      selected: selectedImage.id === image.id,
+      selected: selectedImage && selectedImage.id === image.id,
       onSelect: handleSelectImage,
-      onFastSelect: onFastSelect,
-      onDelete: onDelete,
-      onEdit: onEdit
+      onFastSelect: onFastSelect
     });
+  })), selectedImage && /*#__PURE__*/React.createElement(ImagePreview, {
+    image: selectedImage,
+    onSave: handleUpdateImage,
+    onDelete: function onDelete(image) {
+      setSelectedImage(null);
+
+      _onDelete(image);
+    }
   })));
@@ -558,4 +613,2 @@ };
 
-var MediaManagerContext = React.createContext({});
-
 function _templateObject2$4() {
@@ -653,9 +706,2 @@ var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 16px;\n"]);
 
-  var handleSearchClear = function handleSearchClear() {
-    setState(_extends(_extends({}, state), {}, {
-      q: ''
-    }));
-    fetchData('');
-  };
-
   var handleFastSelect = function handleFastSelect(selectedImage) {
@@ -674,3 +720,4 @@ setState(_extends(_extends({}, state), {}, {
       setState(_extends(_extends({}, state), {}, {
-        images: removeById(images, deletedImage.id)
+        images: removeById(images, deletedImage.id),
+        selectedImage: false
       }));
@@ -680,10 +727,2 @@ });
 
-  var handleEditImage = function handleEditImage(image) {
-    setState(_extends(_extends({}, state), {}, {
-      imageDialogOpen: true,
-      editImage: image,
-      alt: image.alt || ''
-    }));
-  };
-
   var handleUpload = function handleUpload(files) {
@@ -711,2 +750,11 @@ setState(_extends(_extends({}, state), {}, {
 
+  var handleUpdateImage = function handleUpdateImage(updatedImage) {
+    var updatedIdx = images.findIndex(function (i) {
+      return i.id === updatedImage.id;
+    });
+    setState(_extends(_extends({}, state), {}, {
+      images: [].concat(images.slice(0, updatedIdx), [updatedImage], images.slice(updatedIdx + 1))
+    }));
+  };
+
   var filesToUpload = state.filesToUpload,
@@ -748,3 +796,2 @@ filesUploaded = state.filesUploaded,
     onSearchTermChange: handleSearchTermUpdate,
-    onSearchClear: handleSearchClear,
     onSelect: function onSelect(selectedImage) {
@@ -757,3 +804,3 @@ return setState(_extends(_extends({}, state), {}, {
     onDelete: handleDeleteImage,
-    onEdit: handleEditImage
+    onUpdateImage: handleUpdateImage
   })), /*#__PURE__*/React.createElement("div", {
@@ -760,0 +807,0 @@ title: "Upload"

dist/index.modern.js

 import React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
-import { Modal, Button, FormGroup, Label, P, Textarea, Input, reset, buttonReset, Stack, H, Tabs, theme } from '@raketa-cms/raketa-mir';
+import { Modal, Button, FormGroup, Label, P, Textarea, Input, reset, Stack, H, Tabs, theme } from '@raketa-cms/raketa-mir';
 import Dropzone from 'react-dropzone';
@@ -150,2 +150,4 @@
 
+var MediaManagerContext = React.createContext({});
+
 var removeByIndex = function removeByIndex(items, idx) {
@@ -211,3 +213,3 @@ return [].concat(items.slice(0, idx), items.slice(idx + 1));
 function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  position: absolute;\n  bottom: 8px;\n  right: 12px;\n  background-color: ", ";\n  font-size: 1em;\n  color: #fff;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  line-height: 19px;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding-left: 1rem;\n  border-left: 1px solid ", ";\n"]);
 
@@ -222,3 +224,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  position: absolute;\n  bottom: 8px;\n  left: 12px;\n  background-color: ", ";\n  font-size: 0.85em;\n  color: #fff;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  margin-bottom: 1rem;\n  text-align: center;\n\n  & > img {\n    object-fit: contain;\n    width: 100%;\n    max-height: 200px;\n    margin-bottom: 0.5rem;\n  }\n"]);
 
@@ -243,3 +245,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject2$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  position: relative;\n  cursor: pointer;\n  width: 116px;\n  height: 116px;\n  border: 8px solid\n    ", ";\n\n  button {\n    display: none;\n  }\n\n  &:hover {\n    button {\n      display: inline-block;\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  position: relative;\n  cursor: pointer;\n  width: 116px;\n  height: 116px;\n  border: 8px solid\n    ", ";\n"]);
 
@@ -254,3 +256,3 @@ _templateObject2$1 = function _templateObject2() {
 function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  margin-top: 1em;\n  min-height: 500px;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  flex: 3;\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  margin-top: 1em;\n  min-height: 500px;\n"]);
 
@@ -263,13 +265,2 @@ _templateObject$1 = function _templateObject() {
 }
-
-var IconEdit = function IconEdit() {
-  return /*#__PURE__*/React.createElement("img", {
-    style: {
-      width: '12px',
-      margin: '0 auto'
-    },
-    src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMnB4IiBoZWlnaHQ9IjIycHgiIHZpZXdCb3g9IjAgMCAyMiAyMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5lZGl0LTI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iZWRpdC0yIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgaWQ9IlNoYXBlIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIxMyAwIDE4IDUgNSAxOCAwIDE4IDAgMTMiPjwvcG9seWdvbj4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg=="
-  });
-};
-
 var ImageList = styled.div(_templateObject$1(), reset);
@@ -282,8 +273,2 @@ var Thumb = styled.div(_templateObject2$1(), reset, function (props) {
 });
-var EditButton = styled.button(_templateObject4(), reset, buttonReset, function (props) {
-  return props.theme.colors.success;
-});
-var DeleteButton = styled.button(_templateObject5(), reset, buttonReset, function (props) {
-  return props.theme.colors.danger;
-});
 
@@ -304,5 +289,3 @@ var getPreviewImage = function getPreviewImage(image) {
       onSelect = _ref.onSelect,
-      onFastSelect = _ref.onFastSelect,
-      onDelete = _ref.onDelete,
-      onEdit = _ref.onEdit;
+      onFastSelect = _ref.onFastSelect;
   return /*#__PURE__*/React.createElement(Thumb, {
@@ -322,11 +305,73 @@ selected: selected ? 'selected' : '',
     title: image && image.name
-  })), /*#__PURE__*/React.createElement(EditButton, {
-    type: "button",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      onEdit(image);
+  })));
+};
+
+var ImagePreviewWrapper = styled.div(_templateObject4());
+var ImageInspector = styled.div(_templateObject5(), function (props) {
+  return props.theme.colors.gray;
+});
+
+var ImagePreview = function ImagePreview(_ref2) {
+  var image = _ref2.image,
+      onSave = _ref2.onSave,
+      onDelete = _ref2.onDelete;
+
+  var _React$useState = React.useState({
+    alt: ''
+  }),
+      state = _React$useState[0],
+      setState = _React$useState[1];
+
+  React.useEffect(function () {
+    var _image$settings$find;
+
+    setState(_extends(_extends({}, state), {}, {
+      alt: ((_image$settings$find = image.settings.find(function (s) {
+        return s.key === 'alt';
+      })) === null || _image$settings$find === void 0 ? void 0 : _image$settings$find.value) || ''
+    }));
+  }, [image]);
+
+  var handleUpdate = function handleUpdate() {
+    var altIdx = image.settings.findIndex(function (s) {
+      return s.key === 'alt';
+    });
+    onSave(image, {
+      settings: [].concat(image.settings.slice(0, altIdx), [{
+        key: "alt",
+        value: state.alt
+      }], image.settings.slice(altIdx + 1))
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(ImageInspector, null, /*#__PURE__*/React.createElement(ImagePreviewWrapper, null, /*#__PURE__*/React.createElement(Img, {
+    src: image,
+    variant: "original"
+  }), /*#__PURE__*/React.createElement(H, {
+    size: "regular",
+    style: {
+      maxWidth: '200px',
+      fontWeight: 500,
+      margin: '0 auto',
+      wordWrap: 'break-word'
     }
-  }, /*#__PURE__*/React.createElement(IconEdit, null)), /*#__PURE__*/React.createElement(DeleteButton, {
+  }, image.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: 0.5
+    }
+  }, (image.size / 1024).toFixed(2), " KB / ", image.width, "\xD7", image.height)), /*#__PURE__*/React.createElement(TextInput, {
+    label: "Image alt text",
+    value: state.alt,
+    onChange: function onChange(alt) {
+      return setState(_extends(_extends({}, state), {}, {
+        alt: alt
+      }));
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
     type: "button",
+    variant: "primary",
+    onClick: handleUpdate
+  }, "Update"), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    variant: "danger",
     onClick: function onClick(e) {
@@ -337,20 +382,20 @@ e.preventDefault();
     }
-  }, "\xD7"));
+  }, "Remove image"));
 };
 
-var BrowseTab = function BrowseTab(_ref2) {
-  var images = _ref2.images,
-      q = _ref2.q,
-      initialImage = _ref2.selectedImage,
-      onFastSelect = _ref2.onFastSelect,
-      onSelect = _ref2.onSelect,
-      onDelete = _ref2.onDelete,
-      onSearch = _ref2.onSearch,
-      onSearchTermChange = _ref2.onSearchTermChange,
-      onSearchClear = _ref2.onSearchClear,
-      onEdit = _ref2.onEdit;
+var BrowseTab = function BrowseTab(_ref3) {
+  var images = _ref3.images,
+      q = _ref3.q,
+      initialImage = _ref3.selectedImage,
+      onSelect = _ref3.onSelect,
+      onFastSelect = _ref3.onFastSelect,
+      _onDelete = _ref3.onDelete,
+      onSearch = _ref3.onSearch,
+      onSearchTermChange = _ref3.onSearchTermChange,
+      onUpdateImage = _ref3.onUpdateImage;
+  var mediaManager = React.useContext(MediaManagerContext);
 
-  var _React$useState = React.useState(initialImage),
-      selectedImage = _React$useState[0],
-      setSelectedImage = _React$useState[1];
+  var _React$useState2 = React.useState(initialImage),
+      selectedImage = _React$useState2[0],
+      setSelectedImage = _React$useState2[1];
 
@@ -362,6 +407,14 @@ var handleSelectImage = function handleSelectImage(newSelected) {
 
+  var handleUpdateImage = function handleUpdateImage(image, updates) {
+    mediaManager.update(image, updates, function (updatedImage) {
+      setSelectedImage(updatedImage);
+      onUpdateImage(updatedImage);
+      onSelect(updatedImage);
+    });
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
     v: "center",
     h: "flex-start",
-    g: "1em"
+    g: "0.5rem"
   }, /*#__PURE__*/React.createElement(TextInput, {
@@ -375,22 +428,24 @@ label: "Search images",
     type: "button",
-    variant: "primary",
+    variant: "secondary",
     onClick: function onClick() {
       return onSearch();
     }
-  }, "Search"), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    variant: "secondary",
-    onClick: function onClick() {
-      return onSearchClear();
-    }
-  }, "Clear")), /*#__PURE__*/React.createElement(ImageList, null, images.map(function (image) {
+  }, "Search")), /*#__PURE__*/React.createElement(Stack, {
+    g: "1rem"
+  }, /*#__PURE__*/React.createElement(ImageList, null, images.map(function (image) {
     return /*#__PURE__*/React.createElement(ImageItem, {
       key: image.id,
       image: image,
-      selected: selectedImage.id === image.id,
+      selected: selectedImage && selectedImage.id === image.id,
       onSelect: handleSelectImage,
-      onFastSelect: onFastSelect,
-      onDelete: onDelete,
-      onEdit: onEdit
+      onFastSelect: onFastSelect
     });
+  })), selectedImage && /*#__PURE__*/React.createElement(ImagePreview, {
+    image: selectedImage,
+    onSave: handleUpdateImage,
+    onDelete: function onDelete(image) {
+      setSelectedImage(null);
+
+      _onDelete(image);
+    }
   })));
@@ -555,4 +610,2 @@ };
 
-var MediaManagerContext = React.createContext({});
-
 function _templateObject2$4() {
@@ -650,9 +703,2 @@ var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 16px;\n"]);
 
-  var handleSearchClear = function handleSearchClear() {
-    setState(_extends(_extends({}, state), {}, {
-      q: ''
-    }));
-    fetchData('');
-  };
-
   var handleFastSelect = function handleFastSelect(selectedImage) {
@@ -671,3 +717,4 @@ setState(_extends(_extends({}, state), {}, {
       setState(_extends(_extends({}, state), {}, {
-        images: removeById(images, deletedImage.id)
+        images: removeById(images, deletedImage.id),
+        selectedImage: false
       }));
@@ -677,10 +724,2 @@ });
 
-  var handleEditImage = function handleEditImage(image) {
-    setState(_extends(_extends({}, state), {}, {
-      imageDialogOpen: true,
-      editImage: image,
-      alt: image.alt || ''
-    }));
-  };
-
   var handleUpload = function handleUpload(files) {
@@ -708,2 +747,11 @@ setState(_extends(_extends({}, state), {}, {
 
+  var handleUpdateImage = function handleUpdateImage(updatedImage) {
+    var updatedIdx = images.findIndex(function (i) {
+      return i.id === updatedImage.id;
+    });
+    setState(_extends(_extends({}, state), {}, {
+      images: [].concat(images.slice(0, updatedIdx), [updatedImage], images.slice(updatedIdx + 1))
+    }));
+  };
+
   var filesToUpload = state.filesToUpload,
@@ -745,3 +793,2 @@ filesUploaded = state.filesUploaded,
     onSearchTermChange: handleSearchTermUpdate,
-    onSearchClear: handleSearchClear,
     onSelect: function onSelect(selectedImage) {
@@ -754,3 +801,3 @@ return setState(_extends(_extends({}, state), {}, {
     onDelete: handleDeleteImage,
-    onEdit: handleEditImage
+    onUpdateImage: handleUpdateImage
   })), /*#__PURE__*/React.createElement("div", {
@@ -757,0 +804,0 @@ title: "Upload"

package.json

 {
   "name": "@raketa-cms/raketa-image-picker",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Image browser and upload client for APIs compatible with the Raketa Image JSON format.",
@@ -5,0 +5,0 @@ "author": "studioraketa",

No alert changes

Improved metrics

Total package byte prevSize

233719

increased by2.44%

Lines of code

1836

increased by4.32%

No dependency changes