@cashub/ui 0.3.3 → 0.4.0

package/dropzone/ImageDropzone.js

@@ -0,0 +1,275 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _fi = require("react-icons/fi");
+
+var _md = require("react-icons/md");
+
+var _dataURLtoFile = _interopRequireDefault(require("../utils/dataURLtoFile"));
+
+var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
+
+var _Message = _interopRequireDefault(require("./Message"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ImageDropzone = function ImageDropzone(_ref) {
+  var maxFiles = _ref.maxFiles,
+      message = _ref.message,
+      accept = _ref.accept,
+      onAddedFile = _ref.onAddedFile,
+      onRemovedFile = _ref.onRemovedFile,
+      setDropzoneFunc = _ref.setDropzoneFunc,
+      cropper = _ref.cropper;
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      files = _useState2[0],
+      setFiles = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      dragging = _useState4[0],
+      setDragging = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      addedFiles = _useState6[0],
+      setAddedFiles = _useState6[1];
+
+  var handleClick = function handleClick() {
+    if (files.length >= maxFiles) return;
+    inputRef.current.click();
+  };
+
+  var handleDragEnter = function handleDragEnter(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (files.length < maxFiles) setDragging(true);
+  };
+
+  var handleDragOver = function handleDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (files.length < maxFiles) setDragging(true);
+  };
+
+  var handleDragLeave = function handleDragLeave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (files.length < maxFiles) setDragging(false);
+  };
+
+  var handleDrop = function handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (files.length < maxFiles) {
+      setDragging(false);
+      var dataTransfer = e.dataTransfer;
+
+      var _dataTransfer$files = _toArray(dataTransfer.files),
+          newFiles = _dataTransfer$files.slice(0);
+
+      if (files.length + newFiles.length > maxFiles) {
+        newFiles.splice(maxFiles - files.length);
+      }
+
+      for (var i = 0; i < newFiles.length; i++) {
+        newFiles[i].url = URL.createObjectURL(newFiles[i]);
+      }
+
+      setFiles([].concat(_toConsumableArray(files), _toConsumableArray(newFiles)));
+      setAddedFiles(newFiles);
+    }
+  };
+
+  var handleAddFiles = (0, _react.useCallback)(function (newFiles) {
+    if (files.length + newFiles.length > maxFiles) {
+      newFiles.splice(maxFiles - files.length);
+    }
+
+    for (var i = 0; i < newFiles.length; i++) {
+      newFiles[i].url = URL.createObjectURL(newFiles[i]);
+    }
+
+    setFiles([].concat(_toConsumableArray(files), _toConsumableArray(newFiles)));
+    setAddedFiles(newFiles);
+  }, [files, maxFiles]);
+  var handleRemoveFile = (0, _react.useCallback)(function (e, index) {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    var newFiles = _toConsumableArray(files);
+
+    newFiles.splice(index, 1);
+    setFiles(newFiles);
+    if (onRemovedFile) onRemovedFile(index);
+  }, [files, onRemovedFile]);
+  var handleChangeFile = (0, _react.useCallback)(function (e) {
+    var files = e.target.files;
+    var newFiles = [];
+
+    for (var i = 0; i < files.length; i++) {
+      newFiles.push(files[i]);
+    }
+
+    handleAddFiles(newFiles);
+    inputRef.current.value = '';
+  }, [handleAddFiles]);
+  var handleCrop = (0, _react.useCallback)(function (e, index, file) {
+    e.stopPropagation();
+    cropper.handler({
+      src: file.url,
+      file: file,
+      width: 180,
+      height: 320,
+      onCrop: function onCrop(croppedSrc) {
+        var croppedImageFile = (0, _dataURLtoFile.default)(croppedSrc, file.name);
+        croppedImageFile.url = croppedSrc;
+        cropper.onCrop(index, croppedImageFile);
+        setFiles(function (previousFiles) {
+          var newFiles = _toConsumableArray(previousFiles);
+
+          newFiles[index] = croppedImageFile;
+          return newFiles;
+        });
+      }
+    });
+  }, [cropper]);
+
+  var previewItem = function previewItem() {
+    return files.map(function (file, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Image, {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonGroup, {
+          children: [cropper && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+            title: "Crop",
+            onClick: function onClick(e) {
+              return handleCrop(e, index, file);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdCrop, {})
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+            danger: true,
+            title: "Remove",
+            onClick: function onClick(e) {
+              return handleRemoveFile(e, index);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fi.FiX, {})
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          crossOrigin: "anonymous",
+          src: file.url,
+          alt: file.name
+        })]
+      }, index);
+    });
+  };
+
+  var addFiles = (0, _react.useCallback)(function (files) {
+    handleAddFiles(files);
+  }, [handleAddFiles]);
+  var remove = (0, _react.useCallback)(function (index) {
+    handleRemoveFile(null, index);
+  }, [handleRemoveFile]);
+  (0, _react.useEffect)(function () {
+    if (addedFiles.length > 0 && onAddedFile) {
+      var startIndex = files.length - addedFiles.length;
+      addedFiles.forEach(function (file, index) {
+        onAddedFile(file, startIndex + index);
+      });
+      setAddedFiles([]);
+    }
+  }, [addedFiles, onAddedFile, files]);
+  (0, _react.useEffect)(function () {
+    setDropzoneFunc({
+      addFiles: addFiles,
+      remove: remove
+    });
+  }, [setDropzoneFunc, addFiles, remove]);
+  var messageItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Message.default, {
+    dragging: dragging,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fi.FiUpload, {
+      role: "img",
+      "aria-hidden": "true",
+      "data-icon": "upload"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: message
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    onClick: handleClick,
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    reachedLimit: files.length >= maxFiles,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
+      multiple: true,
+      ref: inputRef,
+      accept: accept,
+      onChange: handleChangeFile
+    }), files.length === 0 ? messageItem : previewItem()]
+  });
+};
+
+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"])), function (_ref2) {
+  var reachedLimit = _ref2.reachedLimit;
+  return reachedLimit ? 'default' : 'pointer';
+});
+
+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 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"])));
+
+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 (_ref3) {
+  var danger = _ref3.danger;
+  return danger && 'background: var(--color-danger);';
+});
+
+var _default = ImageDropzone;
+exports.default = _default;

package/dropzone/Message.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Message = _styledComponents.default.div.attrs(function () {
+  return {
+    'data-testid': 'message-container'
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n\n  > svg {\n    margin-bottom: var(--spacing-s);\n    font-size: var(--font-h2);\n  }\n\n  ", ";\n"])), function (_ref) {
+  var dragging = _ref.dragging;
+  return dragging ? 'opacity: 0.5' : '';
+});
+
+var _default = Message;
+exports.default = _default;

package/heading/Heading3.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Heading3 = _styledComponents.default.h3(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-h3);\n  word-break: break-word;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var center = _ref.center;
+  return center && 'text-align: center;';
+}, function (_ref2) {
+  var fontWeightNormal = _ref2.fontWeightNormal;
+  return fontWeightNormal && 'font-weight: normal;';
+}, function (_ref3) {
+  var marginBottomXS = _ref3.marginBottomXS;
+  return marginBottomXS && 'margin-bottom: var(--spacing-xs);';
+}, function (_ref4) {
+  var paddingBottomXS = _ref4.paddingBottomXS;
+  return paddingBottomXS && 'padding-bottom: var(--spacing-xs);';
+});
+
+var _default = Heading3;
+exports.default = _default;

package/image/ImageFigure.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rounded = _interopRequireDefault(require("../styles/mixin/rounded"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ImageFigure = _styledComponents.default.figure.attrs(function () {
+  return {
+    rounded: true
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 160px;\n  height: 160px;\n  border: 4px dashed var(--border-color);\n  padding: var(--spacing-xs);\n  margin-left: var(--spacing);\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var small = _ref.small;
+  return small && "\n      width: 40px;\n      height: 40px;\n    ";
+}, _rounded.default, function (_ref2) {
+  var noBorder = _ref2.noBorder;
+  return noBorder && 'border: none;';
+});
+
+var _default = ImageFigure;
+exports.default = _default;

package/image/ImageFluid.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rounded = _interopRequireDefault(require("../styles/mixin/rounded"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ImageFluid = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n\n  ", "\n"])), _rounded.default);
+
+var _default = ImageFluid;
+exports.default = _default;

package/image/UploadImage.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactI18next = require("react-i18next");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _fa = require("react-icons/fa");
+
+var _md = require("react-icons/md");
+
+var _reactToastify = require("react-toastify");
+
+var _dataURLtoFile = _interopRequireDefault(require("../utils/dataURLtoFile"));
+
+var _getBase = _interopRequireDefault(require("../utils/getBase64"));
+
+var _MessageContainer = _interopRequireDefault(require("../toast/MessageContainer"));
+
+var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
+
+var _ImageFigure = _interopRequireDefault(require("../image/ImageFigure"));
+
+var _ImageFluid = _interopRequireDefault(require("../image/ImageFluid"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var id = _ref.id,
+      src = _ref.src,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? 'user avatar' : _ref$alt,
+      _ref$roundedCircle = _ref.roundedCircle,
+      roundedCircle = _ref$roundedCircle === void 0 ? false : _ref$roundedCircle,
+      cropperHandler = _ref.cropperHandler;
+
+  var _useState = (0, _react.useState)(src),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentSrc = _useState2[0],
+      setCurrentSrc = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentFile = _useState4[0],
+      setCurrentFile = _useState4[1];
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var handleAvatarRemove = function handleAvatarRemove(e) {
+    setCurrentSrc(src);
+    ref.current.value = '';
+    setCurrentFile(null);
+  };
+
+  var restoreFile = (0, _react.useCallback)(function () {
+    if (!currentFile) return;
+    var dataTransfer = new DataTransfer();
+    dataTransfer.items.add(currentFile);
+    ref.current.files = dataTransfer.files;
+  }, [ref, currentFile]);
+  var handleImageFile = (0, _react.useCallback)(function (file, src) {
+    var dataTransfer = new DataTransfer();
+    var changedImageFile = (0, _dataURLtoFile.default)(src, file.name);
+    dataTransfer.items.add(changedImageFile);
+    setCurrentSrc(src);
+    setCurrentFile(changedImageFile);
+    ref.current.files = dataTransfer.files;
+  }, [ref]);
+
+  var handleOnChange = function handleOnChange(files) {
+    if (files.length === 0) {
+      //沒有傳檔案(叉叉或取消)
+      restoreFile();
+    } else {
+      var fileType = files[0].name.slice(files[0].name.lastIndexOf('.')).toLowerCase();
+
+      if (['.jpeg', '.bmp', '.jpg', '.png'].includes(fileType)) {
+        if (files[0].size < 2097152) {
+          var srcUrl = URL.createObjectURL(files[0]);
+          handleCrop(srcUrl, files[0]);
+        } else {
+          ref.current.value = '';
+          restoreFile();
+
+          _reactToastify.toast.error( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageContainer.default, {
+            title: t('error:Upload'),
+            message: t('error:UploadSize', {
+              size: '2MB'
+            })
+          }));
+        }
+      } else {
+        ref.current.value = '';
+        restoreFile();
+
+        _reactToastify.toast.error( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageContainer.default, {
+          title: t('error:Upload'),
+          message: t('error:LogoMerchantFileType')
+        }));
+      }
+    }
+  };
+
+  var handleCrop = (0, _react.useCallback)(function (src, file) {
+    cropperHandler({
+      src: src,
+      file: file,
+      width: 160,
+      height: 160,
+      onCrop: function onCrop(croppedSrc) {
+        handleImageFile(file, croppedSrc);
+      },
+      onClose: function onClose() {
+        (0, _getBase.default)(file, function (dataUrl) {
+          handleImageFile(file, dataUrl);
+        });
+      }
+    });
+  }, [cropperHandler, handleImageFile]);
+  (0, _react.useEffect)(function () {
+    setCurrentSrc(src);
+  }, [src, ref]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    roundedCircle: roundedCircle,
+    children: [currentSrc && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFluid.default, {
+      crossOrigin: "anonymous",
+      src: currentSrc,
+      alt: alt,
+      rounded: true,
+      roundedCircle: roundedCircle
+    }), ref && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonGroup, {
+      roundedCircle: roundedCircle,
+      children: [ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(CropButton, {
+        roundedCircle: roundedCircle,
+        onClick: function onClick() {
+          handleCrop(currentSrc, ref.current.files[0]);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdCrop, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModifyButton, {
+        roundedCircle: roundedCircle,
+        onClick: function onClick() {
+          ref.current.click();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPen, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
+      ref: ref && ref,
+      id: id,
+      accept: ".jpeg, .bmp, .jpg, .png",
+      onChange: function onChange(e) {
+        return handleOnChange(e.target.files);
+      }
+    }), ref && ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
+      onClick: handleAvatarRemove,
+      roundedCircle: roundedCircle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
+    })]
+  });
+});
+var Wrapper = (0, _styledComponents.default)(_ImageFigure.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding: var(--spacing-xs);\n"])));
+
+var ButtonGroup = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: -16px;\n  right: -12px;\n\n  ", "\n"])), function (_ref2) {
+  var rounded = _ref2.rounded;
+  return rounded && "\n      top: 0;\n      right: 0;\n    ";
+});
+
+var ActionButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border: none;\n"])));
+
+var CropButton = (0, _styledComponents.default)(ActionButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: var(--font-on-primary);\n  background: var(--color-primary);\n  border-radius: var(--border-radius);\n\n  ", "\n"])), function (_ref3) {
+  var roundedCircle = _ref3.roundedCircle;
+  return roundedCircle && "\n      position: relative;\n      top: -16px;\n    ";
+});
+var ModifyButton = (0, _styledComponents.default)(ActionButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: var(--font-on-primary);\n  background: var(--color-primary);\n  border-radius: var(--border-radius);\n  margin-left: var(--spacing-xs);\n\n  ", "\n"])), function (_ref4) {
+  var roundedCircle = _ref4.roundedCircle;
+  return roundedCircle && "\n      position: relative;\n      top: 4px;\n    ";
+});
+var RemoveIcon = (0, _styledComponents.default)(ActionButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  color: var(--font-on-danger);\n  background: var(--color-danger);\n  border-radius: var(--border-radius);\n  bottom: -12px;\n  right: -12px;\n\n  ", "\n"])), function (_ref5) {
+  var roundedCircle = _ref5.roundedCircle;
+  return roundedCircle && "\n      bottom: 0;\n      right: 4px;\n    ";
+});
+var _default = UploadImage;
+exports.default = _default;

package/package.json

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