@cashub/ui 0.11.3 → 0.12.1

package/cropper/Cropper.js

@@ -21,6 +21,8 @@ var CropperWrapper = function CropperWrapper(_ref) {
       alt = _ref$alt === void 0 ? 'picture' : _ref$alt,
       width = _ref.width,
       height = _ref.height,
+      _ref$cropBoxResizable = _ref.cropBoxResizable,
+      cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
       onInitialized = _ref.onInitialized,
       _ref$dragMode = _ref.dragMode,
       dragMode = _ref$dragMode === void 0 ? 'move' : _ref$dragMode;
@@ -34,7 +36,7 @@ var CropperWrapper = function CropperWrapper(_ref) {
         viewMode: 1,
         initialAspectRatio: 9 / 16,
         background: true,
-        cropBoxResizable: false,
+        cropBoxResizable: cropBoxResizable,
         data: {
           width: width,
           height: height

package/cropper/CropperModalHandler.js

@@ -18,6 +18,8 @@ var CropperModalHandler = function CropperModalHandler(_ref) {
       file = _ref.file,
       width = _ref.width,
       height = _ref.height,
+      _ref$cropBoxResizable = _ref.cropBoxResizable,
+      cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
       onCrop = _ref.onCrop,
       _onClose = _ref.onClose;
   (0, _TitleModal.default)({
@@ -29,6 +31,7 @@ var CropperModalHandler = function CropperModalHandler(_ref) {
       file: file,
       width: width,
       height: height,
+      cropBoxResizable: cropBoxResizable,
       onCrop: onCrop,
       onClose: _onClose
     }),

package/cropper/subComponent/CropImageModal.js

@@ -41,6 +41,8 @@ var CropImageModal = function CropImageModal(_ref) {
       alt = _ref.alt,
       width = _ref.width,
       height = _ref.height,
+      _ref$cropBoxResizable = _ref.cropBoxResizable,
+      cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
       onCrop = _ref.onCrop,
       onClose = _ref.onClose,
       close = _ref.close;
@@ -89,6 +91,7 @@ var CropImageModal = function CropImageModal(_ref) {
         alt: alt,
         width: width,
         height: height,
+        cropBoxResizable: cropBoxResizable,
         onInitialized: handleInitialized
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Footer, {

package/dropzone/ImageDropzone.js

@@ -50,9 +50,16 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var ImageDropzone = function ImageDropzone(_ref) {
-  var maxFiles = _ref.maxFiles,
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 180 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 320 : _ref$height,
+      _ref$fixedSize = _ref.fixedSize,
+      fixedSize = _ref$fixedSize === void 0 ? true : _ref$fixedSize,
+      maxFiles = _ref.maxFiles,
       message = _ref.message,
       accept = _ref.accept,
+      disabled = _ref.disabled,
       onAddedFile = _ref.onAddedFile,
       onRemovedFile = _ref.onRemovedFile,
       setDropzoneFunc = _ref.setDropzoneFunc,
@@ -81,7 +88,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
       setFocus = _useState8[1];
 
   var handleClick = function handleClick() {
-    if (files.length >= maxFiles) return;
+    if (disabled || files.length >= maxFiles) return;
     setFocus(false);
     inputRef.current.click();
   };
@@ -89,13 +96,13 @@ var ImageDropzone = function ImageDropzone(_ref) {
   var handleDragEnter = function handleDragEnter(event) {
     event.preventDefault();
     event.stopPropagation();
-    if (files.length < maxFiles) setDragging(true);
+    if (!disabled && files.length < maxFiles) setDragging(true);
   };
 
   var handleDragOver = function handleDragOver(event) {
     event.preventDefault();
     event.stopPropagation();
-    if (files.length < maxFiles) setDragging(true);
+    if (!disabled && files.length < maxFiles) setDragging(true);
   };
 
   var handleDragLeave = function handleDragLeave(event) {
@@ -108,7 +115,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
     event.preventDefault();
     event.stopPropagation();
 
-    if (files.length < maxFiles) {
+    if (!disabled && files.length < maxFiles) {
       setDragging(false);
       var dataTransfer = event.dataTransfer;
 
@@ -129,28 +136,33 @@ var ImageDropzone = function ImageDropzone(_ref) {
   };
 
   var handleAddFiles = (0, _react.useCallback)(function (newFiles) {
-    if (files.length + newFiles.length > maxFiles) {
-      newFiles.splice(maxFiles - files.length);
-    }
+    setFiles(function (previous) {
+      if (previous.length + newFiles.length > maxFiles) {
+        newFiles.splice(maxFiles - previous.length);
+      }
+
+      return [].concat(_toConsumableArray(previous), _toConsumableArray(newFiles));
+    });
 
     for (var index = 0; index < newFiles.length; index += 1) {
       newFiles[index].url = URL.createObjectURL(newFiles[index]);
     }
 
-    setFiles([].concat(_toConsumableArray(files), _toConsumableArray(newFiles)));
     setAddedFiles(newFiles);
-  }, [files, maxFiles]);
+  }, [maxFiles]);
   var handleRemoveFile = (0, _react.useCallback)(function (event, index) {
     if (event) {
       event.stopPropagation();
     }
 
-    var newFiles = _toConsumableArray(files);
+    setFiles(function (previous) {
+      var newFiles = _toConsumableArray(previous);
 
-    newFiles.splice(index, 1);
-    setFiles(newFiles);
+      newFiles.splice(index, 1);
+      return newFiles;
+    });
     if (onRemovedFile) onRemovedFile(index);
-  }, [files, onRemovedFile]);
+  }, [onRemovedFile]);
   var handleChangeFile = (0, _react.useCallback)(function (event) {
     var files = event.target.files;
     var newFiles = [];
@@ -168,8 +180,9 @@ var ImageDropzone = function ImageDropzone(_ref) {
     cropper.handler({
       file: file,
       src: file.url,
-      width: 180,
-      height: 320,
+      width: width,
+      height: height,
+      cropBoxResizable: cropper.cropBoxResizable ? cropper.cropBoxResizable : false,
       onCrop: function onCrop(croppedSrc) {
         var croppedImageFile = (0, _utils.dataURLtoFile)(croppedSrc, file.name);
         croppedImageFile.url = croppedSrc;
@@ -182,15 +195,18 @@ var ImageDropzone = function ImageDropzone(_ref) {
         });
       }
     });
-  }, [cropper]);
+  }, [width, height, cropper]);
 
   var previewItem = function previewItem() {
     return files.map(function (file, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Image, {
+        width: width,
+        height: height,
+        fixedSize: fixedSize,
         onClick: function onClick(event) {
           event.stopPropagation();
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonGroup, {
+        children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonGroup, {
           children: [cropper && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
             title: "Crop",
             onClick: function onClick(event) {
@@ -258,6 +274,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     tabIndex: "-1",
+    disabled: disabled,
     dragging: dragging,
     onClick: handleClick,
     onDragEnter: handleDragEnter,
@@ -270,6 +287,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
       setFocus(true);
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
+      disabled: disabled,
       multiple: true,
       ref: inputRef,
       accept: accept,
@@ -278,15 +296,34 @@ var ImageDropzone = function ImageDropzone(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius-l);\n  color: var(--font-on-primary);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-xs);\n  cursor: ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius-l);\n  color: var(--font-on-primary);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-xs);\n  cursor: pointer;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), function (_ref2) {
   var reachedLimit = _ref2.reachedLimit;
-  return reachedLimit ? 'default' : 'pointer';
+  return reachedLimit && 'cursor:default;';
 }, function (_ref3) {
-  var dragging = _ref3.dragging;
+  var disabled = _ref3.disabled;
+  return disabled && 'cursor:not-allowed; opacity: 0.5;';
+}, function (_ref4) {
+  var dragging = _ref4.dragging;
   return dragging && 'border-color: var(--color-primary);';
 });
 
-var Image = _styledComponents.default.figure(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 180px;\n  height: 320px;\n  position: relative;\n  margin: var(--spacing-xs);\n\n  > img {\n    width: 100%;\n    height: 100%;\n    border-radius: var(--border-radius);\n  }\n"])));
+var Image = _styledComponents.default.figure(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: var(--spacing-xs);\n\n  ", "\n\n  > img {\n    width: 100%;\n    height: 100%;\n    border-radius: var(--border-radius);\n  }\n"])), function (_ref5) {
+  var width = _ref5.width,
+      height = _ref5.height,
+      fixedSize = _ref5.fixedSize;
+
+  if (fixedSize) {
+    return "\n        width: ".concat(width, "px;\n        height: ").concat(height, "px;\n      ");
+  }
+
+  if (width < height) {
+    return "\n        width: ".concat(width, "px;\n        max-width: ").concat(width, "px;\n        max-height: ").concat(height, "px;\n      ");
+  }
+
+  if (height < width) {
+    return "\n        height: ".concat(height, "px;\n        max-width: ").concat(width, "px;\n        max-height: ").concat(height, "px;\n      ");
+  }
+});
 
 var ButtonGroup = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: calc(var(--spacing-xs) * -1);\n  top: calc(var(--spacing-xs) * -1);\n"])));
 
@@ -294,8 +331,8 @@ var Button = _styledComponents.default.div.attrs(function () {
   return {
     role: 'button'
   };
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  color: var(--color-white);\n  background: var(--color-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n\n  > svg {\n    color: var(--color-white);\n    margin: 0 auto;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    margin: 0 auto;\n    display: block;\n  }\n\n  &:not(:first-child) {\n    margin-left: var(--spacing-xs);\n  }\n\n  ", "\n"])), function (_ref4) {
-  var danger = _ref4.danger;
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  color: var(--color-white);\n  background: var(--color-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n\n  > svg {\n    color: var(--color-white);\n    margin: 0 auto;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    margin: 0 auto;\n    display: block;\n  }\n\n  &:not(:first-child) {\n    margin-left: var(--spacing-xs);\n  }\n\n  ", "\n"])), function (_ref6) {
+  var danger = _ref6.danger;
   return danger && 'background: var(--color-danger);';
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.11.3",
+  "version": "0.12.1",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",