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

Comparing version 1.2.9 to 1.3.0

dist/index.js

@@ -306,3 +306,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
     src: image,
-    variant: "thumb"
+    variant: "thumb",
+    title: image && image.name
   })), /*#__PURE__*/React.createElement(EditButton, {
@@ -325,59 +326,60 @@ type: "button",
 
-var BrowseTab = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(BrowseTab, _React$Component);
+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;
 
-  function BrowseTab(props) {
-    var _this;
+  var _React$useState = React.useState(initialImage),
+      selectedImage = _React$useState[0],
+      setSelectedImage = _React$useState[1];
 
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
-      selectedImage: _this.props.selectedImage || ''
-    };
-    return _this;
-  }
+  var handleSelectImage = function handleSelectImage(newSelected) {
+    setSelectedImage(newSelected);
+    onSelect(newSelected);
+  };
 
-  var _proto = BrowseTab.prototype;
-
-  _proto.handleSelectImage = function handleSelectImage(selectedImage) {
-    this.setState({
-      selectedImage: selectedImage
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(raketaMir.Stack, {
+    v: "center",
+    h: "flex-start",
+    g: "1em"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    label: "Search images",
+    value: q,
+    onChange: function onChange(term) {
+      return onSearchTermChange(term);
+    }
+  }), /*#__PURE__*/React.createElement(raketaMir.Button, {
+    type: "submit",
+    variant: "primary",
+    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) {
+    return /*#__PURE__*/React.createElement(ImageItem, {
+      key: image.id,
+      image: image,
+      selected: selectedImage.id === image.id,
+      onSelect: function onSelect(onSelectedImage) {
+        return handleSelectImage(onSelectedImage);
+      },
+      onFastSelect: onFastSelect,
+      onDelete: onDelete,
+      onEdit: onEdit
     });
-    this.props.onSelect(selectedImage);
-  };
+  })));
+};
 
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        images = _this$props.images,
-        q = _this$props.q,
-        onFastSelect = _this$props.onFastSelect,
-        onDelete = _this$props.onDelete,
-        onSearch = _this$props.onSearch,
-        onEdit = _this$props.onEdit;
-    var selectedImage = this.state.selectedImage;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, {
-      label: "Search images",
-      value: q,
-      onChange: function onChange(term) {
-        return onSearch(term);
-      }
-    }), /*#__PURE__*/React.createElement(ImageList, null, images.map(function (image) {
-      return /*#__PURE__*/React.createElement(ImageItem, {
-        key: image.id,
-        image: image,
-        selected: selectedImage.id === image.id,
-        onSelect: function onSelect(onSelectedImage) {
-          return _this2.handleSelectImage(onSelectedImage);
-        },
-        onFastSelect: onFastSelect,
-        onDelete: onDelete,
-        onEdit: onEdit
-      });
-    })));
-  };
-
-  return BrowseTab;
-}(React.Component);
-
 function _templateObject2$2() {
@@ -596,3 +598,3 @@ var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: 16px;\n"]);
 
-    var params = q !== '' && q.length > 2 ? {
+    var params = q !== '' ? {
       f: {
@@ -693,8 +695,18 @@ name: q
   _proto.handleSearch = function handleSearch(q) {
+    this.fetchData(q, function () {});
+  };
+
+  _proto.handleSearchTermUpdate = function handleSearchTermUpdate(q) {
+    this.setState({
+      q: q
+    });
+  };
+
+  _proto.handleSearchClear = function handleSearchClear() {
     var _this9 = this;
 
     this.setState({
-      q: q
+      q: ''
     }, function () {
-      return _this9.fetchData(q, function () {});
+      return _this9.fetchData('', function () {});
     });
@@ -798,5 +810,11 @@ };
       q: q,
-      onSearch: function onSearch(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) {
@@ -803,0 +821,0 @@ return _this11.setState({

dist/index.modern.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { ThemeProvider } from 'styled-components';
-import { Modal, Button, FormGroup, Label, P, Textarea, Input, reset, buttonReset, H, Tabs, theme } from '@raketa-cms/raketa-mir';
+import { Modal, Button, FormGroup, Label, P, Textarea, Input, reset, buttonReset, Stack, H, Tabs, theme } from '@raketa-cms/raketa-mir';
 import Dropzone from 'react-dropzone';
@@ -303,3 +303,4 @@
     src: image,
-    variant: "thumb"
+    variant: "thumb",
+    title: image && image.name
   })), /*#__PURE__*/React.createElement(EditButton, {
@@ -322,59 +323,60 @@ type: "button",
 
-var BrowseTab = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(BrowseTab, _React$Component);
+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;
 
-  function BrowseTab(props) {
-    var _this;
+  var _React$useState = React.useState(initialImage),
+      selectedImage = _React$useState[0],
+      setSelectedImage = _React$useState[1];
 
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
-      selectedImage: _this.props.selectedImage || ''
-    };
-    return _this;
-  }
+  var handleSelectImage = function handleSelectImage(newSelected) {
+    setSelectedImage(newSelected);
+    onSelect(newSelected);
+  };
 
-  var _proto = BrowseTab.prototype;
-
-  _proto.handleSelectImage = function handleSelectImage(selectedImage) {
-    this.setState({
-      selectedImage: selectedImage
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
+    v: "center",
+    h: "flex-start",
+    g: "1em"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    label: "Search images",
+    value: q,
+    onChange: function onChange(term) {
+      return onSearchTermChange(term);
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    variant: "primary",
+    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) {
+    return /*#__PURE__*/React.createElement(ImageItem, {
+      key: image.id,
+      image: image,
+      selected: selectedImage.id === image.id,
+      onSelect: function onSelect(onSelectedImage) {
+        return handleSelectImage(onSelectedImage);
+      },
+      onFastSelect: onFastSelect,
+      onDelete: onDelete,
+      onEdit: onEdit
     });
-    this.props.onSelect(selectedImage);
-  };
+  })));
+};
 
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        images = _this$props.images,
-        q = _this$props.q,
-        onFastSelect = _this$props.onFastSelect,
-        onDelete = _this$props.onDelete,
-        onSearch = _this$props.onSearch,
-        onEdit = _this$props.onEdit;
-    var selectedImage = this.state.selectedImage;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, {
-      label: "Search images",
-      value: q,
-      onChange: function onChange(term) {
-        return onSearch(term);
-      }
-    }), /*#__PURE__*/React.createElement(ImageList, null, images.map(function (image) {
-      return /*#__PURE__*/React.createElement(ImageItem, {
-        key: image.id,
-        image: image,
-        selected: selectedImage.id === image.id,
-        onSelect: function onSelect(onSelectedImage) {
-          return _this2.handleSelectImage(onSelectedImage);
-        },
-        onFastSelect: onFastSelect,
-        onDelete: onDelete,
-        onEdit: onEdit
-      });
-    })));
-  };
-
-  return BrowseTab;
-}(React.Component);
-
 function _templateObject2$2() {
@@ -593,3 +595,3 @@ var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: 16px;\n"]);
 
-    var params = q !== '' && q.length > 2 ? {
+    var params = q !== '' ? {
       f: {
@@ -690,8 +692,18 @@ name: q
   _proto.handleSearch = function handleSearch(q) {
+    this.fetchData(q, function () {});
+  };
+
+  _proto.handleSearchTermUpdate = function handleSearchTermUpdate(q) {
+    this.setState({
+      q: q
+    });
+  };
+
+  _proto.handleSearchClear = function handleSearchClear() {
     var _this9 = this;
 
     this.setState({
-      q: q
+      q: ''
     }, function () {
-      return _this9.fetchData(q, function () {});
+      return _this9.fetchData('', function () {});
     });
@@ -795,5 +807,11 @@ };
       q: q,
-      onSearch: function onSearch(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) {
@@ -800,0 +818,0 @@ return _this11.setState({

package.json

 {
   "name": "@raketa-cms/raketa-image-picker",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "Image browser and upload client for APIs compatible with the Raketa Image JSON format.",
@@ -56,3 +56,3 @@ "author": "studioraketa",
   "dependencies": {
-    "@raketa-cms/raketa-mir": "^1.1.2",
+    "@raketa-cms/raketa-mir": "^1.1.5",
     "prop-types": "^15.7.2",
@@ -59,0 +59,0 @@ "react-dropzone": "^11.0.1"

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

Total package byte prevSize

162459

increased by2.84%

Lines of code

1776

increased by2.3%

Dependency changes

• Updated@raketa-cms/raketa-mir@^1.1.5