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

Comparing version 1.3.8 to 1.3.9

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var React = _interopDefault(require('react'));
-var PropTypes = _interopDefault(require('prop-types'));
 var styled = require('styled-components');
@@ -373,5 +372,3 @@ var styled__default = _interopDefault(styled);
       selected: selectedImage.id === image.id,
-      onSelect: function onSelect(onSelectedImage) {
-        return handleSelectImage(onSelectedImage);
-      },
+      onSelect: handleSelectImage,
       onFastSelect: onFastSelect,
@@ -562,37 +559,26 @@ onDelete: onDelete,
 
-var withMediaManager = function withMediaManager(Component) {
-  return function (props) {
-    return /*#__PURE__*/React.createElement(MediaManagerContext.Consumer, null, function (mediaManager) {
-      return /*#__PURE__*/React.createElement(Component, _extends({
-        mediaManager: mediaManager
-      }, props));
-    });
-  };
-};
+var ImagePicker = function ImagePicker(_ref) {
+  var mediaManagerProps = _ref.mediaManager,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Image' : _ref$label,
+      value = _ref.value,
+      onChange = _ref.onChange;
+  var mediaManager = mediaManagerProps || React.useContext(MediaManagerContext);
 
-var ImagePicker = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ImagePicker, _React$Component);
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
 
-  function ImagePicker(props, context) {
-    var _this;
+  var _React$useState2 = React.useState({
+    selectedImage: value || false,
+    filesToUpload: 0,
+    filesUploaded: 0,
+    images: [],
+    files: [],
+    q: ''
+  }),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
 
-    _this = _React$Component.call(this, props, context) || this;
-    _this.state = {
-      pickerOpen: false,
-      selectedImage: props.value || false,
-      filesToUpload: 0,
-      filesUploaded: 0,
-      images: [],
-      files: [],
-      q: ''
-    };
-    _this.mediaManager = props.mediaManager || context.mediaManager;
-    return _this;
-  }
-
-  var _proto = ImagePicker.prototype;
-
-  _proto.fetchData = function fetchData(q, callback) {
-    var _this2 = this;
-
+  var fetchData = function fetchData(q, callback) {
     var params = q !== '' ? {
@@ -603,250 +589,152 @@ f: {
     } : {};
-    this.mediaManager.findAll(function (images) {
-      _this2.setState({
+    mediaManager.findAll(function (images) {
+      setState(_extends(_extends({}, state), {}, {
         images: images
-      }, function () {
-        return callback();
-      });
+      }));
+      if (callback) callback();
     }, params);
   };
 
-  _proto.handleUpload = function handleUpload(files) {
-    var _this3 = this;
-
-    this.setState({
-      filesToUpload: files.length,
-      filesUploaded: 0,
-      files: []
-    }, function () {
-      files.forEach(function (file) {
-        _this3.mediaManager.uploadFile(file, function (response) {
-          var _this3$state = _this3.state,
-              files = _this3$state.files,
-              q = _this3$state.q;
-
-          _this3.setState({
-            filesUploaded: _this3.state.filesUploaded + 1,
-            files: [].concat(files, [response])
-          }, function () {
-            if (_this3.state.filesToUpload === _this3.state.filesUploaded) {
-              _this3.fetchData(q, function () {});
-            }
-          });
-        });
-      });
+  var handleOpenPicker = function handleOpenPicker() {
+    var q = state.q;
+    fetchData(q, function () {
+      setOpen(true);
     });
   };
 
-  _proto.handleOpenPicker = function handleOpenPicker() {
-    var _this4 = this;
-
-    var q = this.state.q;
-    this.fetchData(q, function () {
-      _this4.setState({
-        pickerOpen: true
-      });
-    });
+  var notifyChange = function notifyChange() {
+    if (onChange) onChange(state.selectedImage);
   };
 
-  _proto.handleSelectImage = function handleSelectImage() {
-    var _this5 = this;
-
-    this.setState({
-      pickerOpen: false
-    }, function () {
-      if (_this5.props.onChange) _this5.props.onChange(_this5.state.selectedImage);
-    });
+  var handleClearImage = function handleClearImage() {
+    setState(_extends(_extends({}, state), {}, {
+      selectedImage: false
+    }));
+    notifyChange();
   };
 
-  _proto.handleClearImage = function handleClearImage() {
-    var _this6 = this;
-
-    this.setState({
-      selectedImage: false
-    }, function () {
-      if (_this6.props.onChange) _this6.props.onChange(_this6.state.selectedImage);
-    });
+  var handleSelectImage = function handleSelectImage() {
+    setOpen(false);
+    notifyChange();
   };
 
-  _proto.handleFastSelect = function handleFastSelect(image) {
-    var _this7 = this;
-
-    this.setState({
-      selectedImage: image,
-      pickerOpen: false
-    }, function () {
-      if (_this7.props.onChange) _this7.props.onChange(_this7.state.selectedImage);
-    });
+  var handleSearch = function handleSearch(q) {
+    fetchData(q);
   };
 
-  _proto.handleDeleteImage = function handleDeleteImage(image) {
-    var _this8 = this;
-
-    if (!confirm('Are you sure? ')) return;
-    var images = this.state.images;
-    this.mediaManager.destroy(image, function (deletedImage) {
-      _this8.setState({
-        images: removeById(images, deletedImage.id)
-      });
-    });
+  var handleSearchTermUpdate = function handleSearchTermUpdate(q) {
+    setState(_extends(_extends({}, state), {}, {
+      q: q
+    }));
   };
 
-  _proto.handleSearch = function handleSearch(q) {
-    this.fetchData(q, function () {});
+  var handleSearchClear = function handleSearchClear() {
+    setState(_extends(_extends({}, state), {}, {
+      q: ''
+    }));
+    fetchData('');
   };
 
-  _proto.handleSearchTermUpdate = function handleSearchTermUpdate(q) {
-    this.setState({
-      q: q
-    });
+  var handleFastSelect = function handleFastSelect(selectedImage) {
+    setState(_extends(_extends({}, state), {}, {
+      selectedImage: selectedImage
+    }));
+    setOpen(false);
+    notifyChange();
   };
 
-  _proto.handleSearchClear = function handleSearchClear() {
-    var _this9 = this;
-
-    this.setState({
-      q: ''
-    }, function () {
-      return _this9.fetchData('', function () {});
+  var handleDeleteImage = function handleDeleteImage(image) {
+    if (!confirm('Are you sure? ')) return;
+    var images = state.images;
+    mediaManager.destroy(image, function (deletedImage) {
+      setState(_extends(_extends({}, state), {}, {
+        images: removeById(images, deletedImage.id)
+      }));
     });
   };
 
-  _proto.handleEditImage = function handleEditImage(image) {
-    this.setState({
+  var handleEditImage = function handleEditImage(image) {
+    setState(_extends(_extends({}, state), {}, {
       imageDialogOpen: true,
       editImage: image,
       alt: image.alt || ''
-    });
+    }));
   };
 
-  _proto.handleUpdateImage = function handleUpdateImage(editImage) {
-    var _this10 = this;
+  var handleUpload = function handleUpload(files) {
+    setState(_extends(_extends({}, state), {}, {
+      filesToUpload: files.length,
+      filesUploaded: 0,
+      files: []
+    }));
+    files.forEach(function (file) {
+      mediaManager.uploadFile(file, function (response) {
+        var files = state.files,
+            q = state.q;
+        setState(_extends(_extends({}, state), {}, {
+          filesUploaded: state.filesUploaded + 1,
+          files: [].concat(files, [response])
+        }));
 
-    var _this$state = this.state,
-        alt = _this$state.alt,
-        images = _this$state.images,
-        selectedImage = _this$state.selectedImage;
-
-    if (images.length > 0) {
-      var imageIdx = images.findIndex(function (currentImage) {
-        return currentImage.id === editImage.id;
+        if (state.filesToUpload === state.filesUploaded) {
+          fetchData(q);
+        }
       });
-      var newImages = [].concat(images.slice(0, imageIdx), [Object.assign({}, images[imageIdx], {
-        alt: alt
-      })], images.slice(imageIdx + 1));
-      this.setState({
-        images: newImages
-      });
-    }
-
-    if (parseInt(selectedImage.id, 10) === parseInt(editImage.id, 10)) {
-      this.setState({
-        selectedImage: Object.assign({}, selectedImage, {
-          alt: alt
-        })
-      }, function () {
-        if (_this10.props.onChange) _this10.props.onChange(_this10.state.selectedImage);
-      });
-    }
-
-    var self = this;
-    this.mediaManager.update(editImage, {
-      alt: alt
-    }, function () {
-      self.setState({
-        imageDialogOpen: false
-      });
     });
   };
 
-  _proto.render = function render() {
-    var _this11 = this;
-
-    var _this$props$label = this.props.label,
-        label = _this$props$label === void 0 ? 'Image' : _this$props$label;
-    var _this$state2 = this.state,
-        pickerOpen = _this$state2.pickerOpen,
-        filesToUpload = _this$state2.filesToUpload,
-        filesUploaded = _this$state2.filesUploaded,
-        images = _this$state2.images,
-        selectedImage = _this$state2.selectedImage,
-        files = _this$state2.files,
-        q = _this$state2.q;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageControl, null, selectedImage && /*#__PURE__*/React.createElement(ImageWrapper$1, null, /*#__PURE__*/React.createElement(Img, {
-      src: selectedImage,
-      variant: "thumb",
-      title: selectedImage.name
-    })), /*#__PURE__*/React.createElement(raketaMir.FormGroup, null, /*#__PURE__*/React.createElement(raketaMir.Label, null, label + " " + (selectedImage.alt ? "(" + selectedImage.alt + ")" : '')), /*#__PURE__*/React.createElement(raketaMir.Button, {
-      type: "button",
-      variant: "secondary",
-      onClick: function onClick() {
-        return _this11.handleOpenPicker();
-      }
-    }, "Browse..."), /*#__PURE__*/React.createElement(raketaMir.Button, {
-      type: "button",
-      variant: "secondary",
-      onClick: function onClick() {
-        return _this11.handleClearImage();
-      }
-    }, "Clear"))), pickerOpen && /*#__PURE__*/React.createElement(Dialog, {
-      open: pickerOpen,
-      onClose: function onClose() {
-        return _this11.setState({
-          pickerOpen: false
-        });
-      },
-      title: "Image Browser",
-      primaryLabel: "Select",
-      onPrimary: function onPrimary() {
-        return _this11.handleSelectImage();
-      }
-    }, /*#__PURE__*/React.createElement(raketaMir.Tabs, null, /*#__PURE__*/React.createElement("div", {
-      title: "Browse"
-    }, /*#__PURE__*/React.createElement(BrowseTab, {
-      images: images,
-      selectedImage: selectedImage,
-      q: q,
-      onSearch: function onSearch() {
-        return _this11.handleSearch(q);
-      },
-      onSearchTermChange: function onSearchTermChange(term) {
-        return _this11.handleSearchTermUpdate(term);
-      },
-      onSearchClear: function onSearchClear() {
-        return _this11.handleSearchClear();
-      },
-      onSelect: function onSelect(image) {
-        return _this11.setState({
-          selectedImage: image
-        });
-      },
-      onFastSelect: function onFastSelect(image) {
-        return _this11.handleFastSelect(image);
-      },
-      onDelete: function onDelete(image) {
-        return _this11.handleDeleteImage(image);
-      },
-      onEdit: function onEdit(image) {
-        return _this11.handleEditImage(image);
-      }
-    })), /*#__PURE__*/React.createElement("div", {
-      title: "Upload"
-    }, /*#__PURE__*/React.createElement(UploadTab, {
-      filesToUpload: filesToUpload,
-      filesUploaded: filesUploaded,
-      files: files,
-      onUpload: function onUpload(filesOnUpload) {
-        return _this11.handleUpload(filesOnUpload);
-      }
-    })))));
-  };
-
-  return ImagePicker;
-}(React.Component);
-
-ImagePicker.contextTypes = {
-  host: PropTypes.string,
-  mediaManager: PropTypes.object
+  var filesToUpload = state.filesToUpload,
+      filesUploaded = state.filesUploaded,
+      images = state.images,
+      selectedImage = state.selectedImage,
+      files = state.files,
+      q = state.q;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageControl, null, value && /*#__PURE__*/React.createElement(ImageWrapper$1, null, /*#__PURE__*/React.createElement(Img, {
+    src: value,
+    variant: "thumb",
+    title: value.name
+  })), /*#__PURE__*/React.createElement(raketaMir.FormGroup, null, /*#__PURE__*/React.createElement(raketaMir.Label, null, label + " " + (selectedImage.alt ? "(" + selectedImage.alt + ")" : '')), /*#__PURE__*/React.createElement(raketaMir.Button, {
+    type: "button",
+    variant: "secondary",
+    onClick: handleOpenPicker
+  }, "Browse..."), /*#__PURE__*/React.createElement(raketaMir.Button, {
+    type: "button",
+    variant: "secondary",
+    onClick: handleClearImage
+  }, "Clear"))), open && /*#__PURE__*/React.createElement(Dialog, {
+    open: true,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    title: "Image Browser",
+    primaryLabel: "Select",
+    onPrimary: handleSelectImage
+  }, /*#__PURE__*/React.createElement(raketaMir.Tabs, null, /*#__PURE__*/React.createElement("div", {
+    title: "Browse"
+  }, /*#__PURE__*/React.createElement(BrowseTab, {
+    images: images,
+    selectedImage: selectedImage,
+    q: q,
+    onSearch: function onSearch() {
+      return handleSearch(q);
+    },
+    onSearchTermChange: handleSearchTermUpdate,
+    onSearchClear: handleSearchClear,
+    onSelect: function onSelect(selectedImage) {
+      return setState(_extends(_extends({}, state), {}, {
+        selectedImage: selectedImage
+      }));
+    },
+    onFastSelect: handleFastSelect,
+    onDelete: handleDeleteImage,
+    onEdit: handleEditImage
+  })), /*#__PURE__*/React.createElement("div", {
+    title: "Upload"
+  }, /*#__PURE__*/React.createElement(UploadTab, {
+    filesToUpload: filesToUpload,
+    filesUploaded: filesUploaded,
+    files: files,
+    onUpload: handleUpload
+  })))));
 };
-var ImagePicker$1 = withMediaManager(ImagePicker);
 
@@ -887,3 +775,3 @@ var ImageInput = /*#__PURE__*/function (_React$Component) {
       theme: raketaMir.theme
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImagePicker$1, {
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImagePicker, {
       mediaManager: mediaManager,
@@ -1045,3 +933,3 @@ value: selectedImage,
 exports.ImageInput = ImageInput;
-exports.ImagePicker = ImagePicker$1;
+exports.ImagePicker = ImagePicker;
 exports.Img = Img;
@@ -1048,0 +936,0 @@ exports.MediaManager = MediaManager;

dist/index.modern.js

 import React from 'react';
-import PropTypes from 'prop-types';
 import styled, { ThemeProvider } from 'styled-components';
@@ -370,5 +369,3 @@ import { Modal, Button, FormGroup, Label, P, Textarea, Input, reset, buttonReset, Stack, H, Tabs, theme } from '@raketa-cms/raketa-mir';
       selected: selectedImage.id === image.id,
-      onSelect: function onSelect(onSelectedImage) {
-        return handleSelectImage(onSelectedImage);
-      },
+      onSelect: handleSelectImage,
       onFastSelect: onFastSelect,
@@ -559,37 +556,26 @@ onDelete: onDelete,
 
-var withMediaManager = function withMediaManager(Component) {
-  return function (props) {
-    return /*#__PURE__*/React.createElement(MediaManagerContext.Consumer, null, function (mediaManager) {
-      return /*#__PURE__*/React.createElement(Component, _extends({
-        mediaManager: mediaManager
-      }, props));
-    });
-  };
-};
+var ImagePicker = function ImagePicker(_ref) {
+  var mediaManagerProps = _ref.mediaManager,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Image' : _ref$label,
+      value = _ref.value,
+      onChange = _ref.onChange;
+  var mediaManager = mediaManagerProps || React.useContext(MediaManagerContext);
 
-var ImagePicker = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ImagePicker, _React$Component);
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
 
-  function ImagePicker(props, context) {
-    var _this;
+  var _React$useState2 = React.useState({
+    selectedImage: value || false,
+    filesToUpload: 0,
+    filesUploaded: 0,
+    images: [],
+    files: [],
+    q: ''
+  }),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
 
-    _this = _React$Component.call(this, props, context) || this;
-    _this.state = {
-      pickerOpen: false,
-      selectedImage: props.value || false,
-      filesToUpload: 0,
-      filesUploaded: 0,
-      images: [],
-      files: [],
-      q: ''
-    };
-    _this.mediaManager = props.mediaManager || context.mediaManager;
-    return _this;
-  }
-
-  var _proto = ImagePicker.prototype;
-
-  _proto.fetchData = function fetchData(q, callback) {
-    var _this2 = this;
-
+  var fetchData = function fetchData(q, callback) {
     var params = q !== '' ? {
@@ -600,250 +586,152 @@ f: {
     } : {};
-    this.mediaManager.findAll(function (images) {
-      _this2.setState({
+    mediaManager.findAll(function (images) {
+      setState(_extends(_extends({}, state), {}, {
         images: images
-      }, function () {
-        return callback();
-      });
+      }));
+      if (callback) callback();
     }, params);
   };
 
-  _proto.handleUpload = function handleUpload(files) {
-    var _this3 = this;
-
-    this.setState({
-      filesToUpload: files.length,
-      filesUploaded: 0,
-      files: []
-    }, function () {
-      files.forEach(function (file) {
-        _this3.mediaManager.uploadFile(file, function (response) {
-          var _this3$state = _this3.state,
-              files = _this3$state.files,
-              q = _this3$state.q;
-
-          _this3.setState({
-            filesUploaded: _this3.state.filesUploaded + 1,
-            files: [].concat(files, [response])
-          }, function () {
-            if (_this3.state.filesToUpload === _this3.state.filesUploaded) {
-              _this3.fetchData(q, function () {});
-            }
-          });
-        });
-      });
+  var handleOpenPicker = function handleOpenPicker() {
+    var q = state.q;
+    fetchData(q, function () {
+      setOpen(true);
     });
   };
 
-  _proto.handleOpenPicker = function handleOpenPicker() {
-    var _this4 = this;
-
-    var q = this.state.q;
-    this.fetchData(q, function () {
-      _this4.setState({
-        pickerOpen: true
-      });
-    });
+  var notifyChange = function notifyChange() {
+    if (onChange) onChange(state.selectedImage);
   };
 
-  _proto.handleSelectImage = function handleSelectImage() {
-    var _this5 = this;
-
-    this.setState({
-      pickerOpen: false
-    }, function () {
-      if (_this5.props.onChange) _this5.props.onChange(_this5.state.selectedImage);
-    });
+  var handleClearImage = function handleClearImage() {
+    setState(_extends(_extends({}, state), {}, {
+      selectedImage: false
+    }));
+    notifyChange();
   };
 
-  _proto.handleClearImage = function handleClearImage() {
-    var _this6 = this;
-
-    this.setState({
-      selectedImage: false
-    }, function () {
-      if (_this6.props.onChange) _this6.props.onChange(_this6.state.selectedImage);
-    });
+  var handleSelectImage = function handleSelectImage() {
+    setOpen(false);
+    notifyChange();
   };
 
-  _proto.handleFastSelect = function handleFastSelect(image) {
-    var _this7 = this;
-
-    this.setState({
-      selectedImage: image,
-      pickerOpen: false
-    }, function () {
-      if (_this7.props.onChange) _this7.props.onChange(_this7.state.selectedImage);
-    });
+  var handleSearch = function handleSearch(q) {
+    fetchData(q);
   };
 
-  _proto.handleDeleteImage = function handleDeleteImage(image) {
-    var _this8 = this;
-
-    if (!confirm('Are you sure? ')) return;
-    var images = this.state.images;
-    this.mediaManager.destroy(image, function (deletedImage) {
-      _this8.setState({
-        images: removeById(images, deletedImage.id)
-      });
-    });
+  var handleSearchTermUpdate = function handleSearchTermUpdate(q) {
+    setState(_extends(_extends({}, state), {}, {
+      q: q
+    }));
   };
 
-  _proto.handleSearch = function handleSearch(q) {
-    this.fetchData(q, function () {});
+  var handleSearchClear = function handleSearchClear() {
+    setState(_extends(_extends({}, state), {}, {
+      q: ''
+    }));
+    fetchData('');
   };
 
-  _proto.handleSearchTermUpdate = function handleSearchTermUpdate(q) {
-    this.setState({
-      q: q
-    });
+  var handleFastSelect = function handleFastSelect(selectedImage) {
+    setState(_extends(_extends({}, state), {}, {
+      selectedImage: selectedImage
+    }));
+    setOpen(false);
+    notifyChange();
   };
 
-  _proto.handleSearchClear = function handleSearchClear() {
-    var _this9 = this;
-
-    this.setState({
-      q: ''
-    }, function () {
-      return _this9.fetchData('', function () {});
+  var handleDeleteImage = function handleDeleteImage(image) {
+    if (!confirm('Are you sure? ')) return;
+    var images = state.images;
+    mediaManager.destroy(image, function (deletedImage) {
+      setState(_extends(_extends({}, state), {}, {
+        images: removeById(images, deletedImage.id)
+      }));
     });
   };
 
-  _proto.handleEditImage = function handleEditImage(image) {
-    this.setState({
+  var handleEditImage = function handleEditImage(image) {
+    setState(_extends(_extends({}, state), {}, {
       imageDialogOpen: true,
       editImage: image,
       alt: image.alt || ''
-    });
+    }));
   };
 
-  _proto.handleUpdateImage = function handleUpdateImage(editImage) {
-    var _this10 = this;
+  var handleUpload = function handleUpload(files) {
+    setState(_extends(_extends({}, state), {}, {
+      filesToUpload: files.length,
+      filesUploaded: 0,
+      files: []
+    }));
+    files.forEach(function (file) {
+      mediaManager.uploadFile(file, function (response) {
+        var files = state.files,
+            q = state.q;
+        setState(_extends(_extends({}, state), {}, {
+          filesUploaded: state.filesUploaded + 1,
+          files: [].concat(files, [response])
+        }));
 
-    var _this$state = this.state,
-        alt = _this$state.alt,
-        images = _this$state.images,
-        selectedImage = _this$state.selectedImage;
-
-    if (images.length > 0) {
-      var imageIdx = images.findIndex(function (currentImage) {
-        return currentImage.id === editImage.id;
+        if (state.filesToUpload === state.filesUploaded) {
+          fetchData(q);
+        }
       });
-      var newImages = [].concat(images.slice(0, imageIdx), [Object.assign({}, images[imageIdx], {
-        alt: alt
-      })], images.slice(imageIdx + 1));
-      this.setState({
-        images: newImages
-      });
-    }
-
-    if (parseInt(selectedImage.id, 10) === parseInt(editImage.id, 10)) {
-      this.setState({
-        selectedImage: Object.assign({}, selectedImage, {
-          alt: alt
-        })
-      }, function () {
-        if (_this10.props.onChange) _this10.props.onChange(_this10.state.selectedImage);
-      });
-    }
-
-    var self = this;
-    this.mediaManager.update(editImage, {
-      alt: alt
-    }, function () {
-      self.setState({
-        imageDialogOpen: false
-      });
     });
   };
 
-  _proto.render = function render() {
-    var _this11 = this;
-
-    var _this$props$label = this.props.label,
-        label = _this$props$label === void 0 ? 'Image' : _this$props$label;
-    var _this$state2 = this.state,
-        pickerOpen = _this$state2.pickerOpen,
-        filesToUpload = _this$state2.filesToUpload,
-        filesUploaded = _this$state2.filesUploaded,
-        images = _this$state2.images,
-        selectedImage = _this$state2.selectedImage,
-        files = _this$state2.files,
-        q = _this$state2.q;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageControl, null, selectedImage && /*#__PURE__*/React.createElement(ImageWrapper$1, null, /*#__PURE__*/React.createElement(Img, {
-      src: selectedImage,
-      variant: "thumb",
-      title: selectedImage.name
-    })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, label + " " + (selectedImage.alt ? "(" + selectedImage.alt + ")" : '')), /*#__PURE__*/React.createElement(Button, {
-      type: "button",
-      variant: "secondary",
-      onClick: function onClick() {
-        return _this11.handleOpenPicker();
-      }
-    }, "Browse..."), /*#__PURE__*/React.createElement(Button, {
-      type: "button",
-      variant: "secondary",
-      onClick: function onClick() {
-        return _this11.handleClearImage();
-      }
-    }, "Clear"))), pickerOpen && /*#__PURE__*/React.createElement(Dialog, {
-      open: pickerOpen,
-      onClose: function onClose() {
-        return _this11.setState({
-          pickerOpen: false
-        });
-      },
-      title: "Image Browser",
-      primaryLabel: "Select",
-      onPrimary: function onPrimary() {
-        return _this11.handleSelectImage();
-      }
-    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("div", {
-      title: "Browse"
-    }, /*#__PURE__*/React.createElement(BrowseTab, {
-      images: images,
-      selectedImage: selectedImage,
-      q: q,
-      onSearch: function onSearch() {
-        return _this11.handleSearch(q);
-      },
-      onSearchTermChange: function onSearchTermChange(term) {
-        return _this11.handleSearchTermUpdate(term);
-      },
-      onSearchClear: function onSearchClear() {
-        return _this11.handleSearchClear();
-      },
-      onSelect: function onSelect(image) {
-        return _this11.setState({
-          selectedImage: image
-        });
-      },
-      onFastSelect: function onFastSelect(image) {
-        return _this11.handleFastSelect(image);
-      },
-      onDelete: function onDelete(image) {
-        return _this11.handleDeleteImage(image);
-      },
-      onEdit: function onEdit(image) {
-        return _this11.handleEditImage(image);
-      }
-    })), /*#__PURE__*/React.createElement("div", {
-      title: "Upload"
-    }, /*#__PURE__*/React.createElement(UploadTab, {
-      filesToUpload: filesToUpload,
-      filesUploaded: filesUploaded,
-      files: files,
-      onUpload: function onUpload(filesOnUpload) {
-        return _this11.handleUpload(filesOnUpload);
-      }
-    })))));
-  };
-
-  return ImagePicker;
-}(React.Component);
-
-ImagePicker.contextTypes = {
-  host: PropTypes.string,
-  mediaManager: PropTypes.object
+  var filesToUpload = state.filesToUpload,
+      filesUploaded = state.filesUploaded,
+      images = state.images,
+      selectedImage = state.selectedImage,
+      files = state.files,
+      q = state.q;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageControl, null, value && /*#__PURE__*/React.createElement(ImageWrapper$1, null, /*#__PURE__*/React.createElement(Img, {
+    src: value,
+    variant: "thumb",
+    title: value.name
+  })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, label + " " + (selectedImage.alt ? "(" + selectedImage.alt + ")" : '')), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    variant: "secondary",
+    onClick: handleOpenPicker
+  }, "Browse..."), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    variant: "secondary",
+    onClick: handleClearImage
+  }, "Clear"))), open && /*#__PURE__*/React.createElement(Dialog, {
+    open: true,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    title: "Image Browser",
+    primaryLabel: "Select",
+    onPrimary: handleSelectImage
+  }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("div", {
+    title: "Browse"
+  }, /*#__PURE__*/React.createElement(BrowseTab, {
+    images: images,
+    selectedImage: selectedImage,
+    q: q,
+    onSearch: function onSearch() {
+      return handleSearch(q);
+    },
+    onSearchTermChange: handleSearchTermUpdate,
+    onSearchClear: handleSearchClear,
+    onSelect: function onSelect(selectedImage) {
+      return setState(_extends(_extends({}, state), {}, {
+        selectedImage: selectedImage
+      }));
+    },
+    onFastSelect: handleFastSelect,
+    onDelete: handleDeleteImage,
+    onEdit: handleEditImage
+  })), /*#__PURE__*/React.createElement("div", {
+    title: "Upload"
+  }, /*#__PURE__*/React.createElement(UploadTab, {
+    filesToUpload: filesToUpload,
+    filesUploaded: filesUploaded,
+    files: files,
+    onUpload: handleUpload
+  })))));
 };
-var ImagePicker$1 = withMediaManager(ImagePicker);
 
@@ -884,3 +772,3 @@ var ImageInput = /*#__PURE__*/function (_React$Component) {
       theme: theme
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImagePicker$1, {
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImagePicker, {
       mediaManager: mediaManager,
@@ -1041,3 +929,3 @@ value: selectedImage,
 
-export { ImageInput, ImagePicker$1 as ImagePicker, Img, MediaManager, MediaManagerContext, imgPlaceholder as imagePlaceholder, imgageSrc as imageSrc };
+export { ImageInput, ImagePicker, Img, MediaManager, MediaManagerContext, imgPlaceholder as imagePlaceholder, imgageSrc as imageSrc };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "@raketa-cms/raketa-image-picker",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "Image browser and upload client for APIs compatible with the Raketa Image JSON format.",
@@ -20,3 +20,2 @@ "author": "studioraketa",
     "test:build": "run-s build",
-    "test:lint": "eslint .",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
@@ -28,18 +27,7 @@ "test:watch": "react-scripts test --env=jsdom",
   "peerDependencies": {
-    "react": ">= 16.0.0",
+    "react": ">= 18.0.0",
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
     "gh-pages": "^2.2.0",
@@ -46,0 +34,0 @@ "microbundle-crl": "^0.13.10",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

9

decreased by-55%

Worsened metrics

Total package byte prevSize

147359

decreased by-9.43%

Lines of code

1590

decreased by-10.67%

No dependency changes