@cashub/ui 0.13.9 → 0.13.10

package/cropper/Cropper.js

@@ -25,7 +25,11 @@ var CropperWrapper = function CropperWrapper(_ref) {
       cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
       onInitialized = _ref.onInitialized,
       _ref$dragMode = _ref.dragMode,
-      dragMode = _ref$dragMode === void 0 ? 'move' : _ref$dragMode;
+      dragMode = _ref$dragMode === void 0 ? 'move' : _ref$dragMode,
+      minCroppedWidth = _ref.minCroppedWidth,
+      minCroppedHeight = _ref.minCroppedHeight,
+      maxCroppedWidth = _ref.maxCroppedWidth,
+      maxCroppedHeight = _ref.maxCroppedHeight;
   var imageRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     var node = imageRef.current;
@@ -37,9 +41,25 @@ var CropperWrapper = function CropperWrapper(_ref) {
         initialAspectRatio: 9 / 16,
         background: true,
         cropBoxResizable: cropBoxResizable,
+        minCroppedWidth: minCroppedWidth,
+        minCroppedHeight: minCroppedHeight,
+        maxCroppedWidth: maxCroppedWidth,
+        maxCroppedHeight: maxCroppedHeight,
         data: {
           width: width,
           height: height
+        },
+        crop: function crop(event) {
+          var width = Math.round(event.detail.width);
+          var height = Math.round(event.detail.height);
+
+          if (width < minCroppedWidth || height < minCroppedHeight || width > maxCroppedWidth || height > maxCroppedHeight) {
+            cropper.setData({
+              width: Math.max(minCroppedWidth, Math.min(maxCroppedWidth, width)),
+              height: Math.max(minCroppedHeight, Math.min(maxCroppedHeight, height))
+            });
+            node.textContent = JSON.stringify(cropper.getData(true));
+          }
         }
       });
 
@@ -53,7 +73,7 @@ var CropperWrapper = function CropperWrapper(_ref) {
 
       node === null || node === void 0 ? void 0 : (_node$cropper = node.cropper) === null || _node$cropper === void 0 ? void 0 : _node$cropper.destroy();
     };
-  }, [onInitialized, dragMode, width, height]);
+  }, [onInitialized, dragMode, width, height, cropBoxResizable, minCroppedWidth, minCroppedHeight, maxCroppedWidth, maxCroppedHeight]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: src,

package/cropper/CropperModalHandler.js

@@ -21,7 +21,11 @@ var CropperModalHandler = function CropperModalHandler(_ref) {
       _ref$cropBoxResizable = _ref.cropBoxResizable,
       cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
       onCrop = _ref.onCrop,
-      _onClose = _ref.onClose;
+      _onClose = _ref.onClose,
+      minCroppedWidth = _ref.minCroppedWidth,
+      minCroppedHeight = _ref.minCroppedHeight,
+      maxCroppedWidth = _ref.maxCroppedWidth,
+      maxCroppedHeight = _ref.maxCroppedHeight;
   (0, _TitleModal.default)({
     size: 'normal',
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CropImageModal.default, {
@@ -33,7 +37,11 @@ var CropperModalHandler = function CropperModalHandler(_ref) {
       height: height,
       cropBoxResizable: cropBoxResizable,
       onCrop: onCrop,
-      onClose: _onClose
+      onClose: _onClose,
+      minCroppedWidth: minCroppedWidth,
+      minCroppedHeight: minCroppedHeight,
+      maxCroppedWidth: maxCroppedWidth,
+      maxCroppedHeight: maxCroppedHeight
     }),
     onClose: function onClose(dismiss) {
       if (dismiss === true && _onClose) {

package/cropper/subComponent/CropImageModal.js

@@ -45,7 +45,11 @@ var CropImageModal = function CropImageModal(_ref) {
       cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
       onCrop = _ref.onCrop,
       onClose = _ref.onClose,
-      close = _ref.close;
+      close = _ref.close,
+      minCroppedWidth = _ref.minCroppedWidth,
+      minCroppedHeight = _ref.minCroppedHeight,
+      maxCroppedWidth = _ref.maxCroppedWidth,
+      maxCroppedHeight = _ref.maxCroppedHeight;
 
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
@@ -92,7 +96,11 @@ var CropImageModal = function CropImageModal(_ref) {
         width: width,
         height: height,
         cropBoxResizable: cropBoxResizable,
-        onInitialized: handleInitialized
+        onInitialized: handleInitialized,
+        minCroppedWidth: minCroppedWidth,
+        minCroppedHeight: minCroppedHeight,
+        maxCroppedWidth: maxCroppedWidth,
+        maxCroppedHeight: maxCroppedHeight
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Footer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {

package/dropzone/ImageDropzone.js

@@ -54,6 +54,10 @@ var ImageDropzone = function ImageDropzone(_ref) {
       width = _ref$width === void 0 ? 180 : _ref$width,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? 320 : _ref$height,
+      minCroppedWidth = _ref.minCroppedWidth,
+      minCroppedHeight = _ref.minCroppedHeight,
+      maxCroppedWidth = _ref.maxCroppedWidth,
+      maxCroppedHeight = _ref.maxCroppedHeight,
       _ref$fixedSize = _ref.fixedSize,
       fixedSize = _ref$fixedSize === void 0 ? true : _ref$fixedSize,
       maxFiles = _ref.maxFiles,
@@ -182,6 +186,10 @@ var ImageDropzone = function ImageDropzone(_ref) {
       src: file.url,
       width: width,
       height: height,
+      minCroppedWidth: minCroppedWidth,
+      minCroppedHeight: minCroppedHeight,
+      maxCroppedWidth: maxCroppedWidth,
+      maxCroppedHeight: maxCroppedHeight,
       cropBoxResizable: cropper.cropBoxResizable ? cropper.cropBoxResizable : false,
       onCrop: function onCrop(croppedSrc) {
         var croppedImageFile = (0, _utils.dataURLtoFile)(croppedSrc, file.name);
@@ -195,7 +203,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
         });
       }
     });
-  }, [width, height, cropper]);
+  }, [width, height, cropper, minCroppedWidth, minCroppedHeight, maxCroppedWidth, maxCroppedHeight]);
 
   var previewItem = function previewItem() {
     return files.map(function (file, index) {

package/package.json

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

package/styles/theme/index.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _dark = _interopRequireDefault(require("./dark.theme"));
+var _white = _interopRequireDefault(require("./white.theme"));
 
 var _light = _interopRequireDefault(require("./light.theme"));
 
+var _dark = _interopRequireDefault(require("./dark.theme"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var themes = {
-  dark: _dark.default,
-  light: _light.default
+  White: _white.default,
+  Light: _light.default,
+  Dark: _dark.default
 };
 var _default = themes;
 exports.default = _default;

package/styles/theme/light.theme.js

@@ -16,10 +16,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var colorStyle = {
   colorWhite: '#ffffff',
   colorDark: '#353351',
-  colorGrey: '#5b5f6f',
+  colorGrey: '#989cad',
   colorPrimary: '#3661ec',
-  colorSuccess: '#93E7E2',
-  colorWarning: '#FFDFAF',
+  colorSuccess: '#48d5cc',
+  colorWarning: '#feb444',
   colorDanger: '#F495A1',
   colorHover: 'rgba(54, 97, 236, 0.2)',
   colorActive: 'rgba(54, 97, 236, 0.2)',

package/styles/theme/white.theme.js

@@ -16,10 +16,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var colorStyle = {
   colorWhite: '#ffffff',
   colorDark: '#353351',
-  colorGrey: '#5b5f6f',
+  colorGrey: '#b7bbcd',
   colorPrimary: '#345FEB',
   colorSuccess: '#11D8CD',
-  colorWarning: '#FFCA7A',
+  colorWarning: '#feb444',
   colorDanger: '#F495A1',
   colorHover: 'rgba(52, 95, 235, 0.2)',
   colorActive: 'rgba(52, 95, 235, 0.2)',