@cashub/ui 0.20.0 → 0.21.1

package/iconbox/subComponent/IconBoxFigure.js

@@ -4,34 +4,39 @@ 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 IconBoxFigure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 120px;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n"])), function (_ref) {
-  var marginRight = _ref.marginRight;
+const IconBoxFigure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 120px;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n"])), _ref => {
+  let {
+    marginRight
+  } = _ref;
   return marginRight && 'margin-right: var(--spacing);';
-}, function (_ref2) {
-  var paddingRight = _ref2.paddingRight;
+}, _ref2 => {
+  let {
+    paddingRight
+  } = _ref2;
   return paddingRight && 'padding-right: var(--spacing);';
-}, function (_ref3) {
-  var paddingRightS = _ref3.paddingRightS;
+}, _ref3 => {
+  let {
+    paddingRightS
+  } = _ref3;
   return paddingRightS && 'padding-right: var(--spacing-s);';
-}, function (_ref4) {
-  var paddingBottomS = _ref4.paddingBottomS;
+}, _ref4 => {
+  let {
+    paddingBottomS
+  } = _ref4;
   return paddingBottomS && 'padding-bottom: var(--spacing-s);';
-}, function (_ref5) {
-  var sizeS = _ref5.sizeS;
+}, _ref5 => {
+  let {
+    sizeS
+  } = _ref5;
   return sizeS && 'flex-basis: 80px;';
-}, function (_ref6) {
-  var sizeXS = _ref6.sizeXS;
+}, _ref6 => {
+  let {
+    sizeXS
+  } = _ref6;
   return sizeXS && 'flex-basis: 40px;';
 });
-
-var _default = IconBoxFigure;
-exports.default = _default;
+var _default = exports.default = IconBoxFigure;

package/iconbox/subComponent/IconBoxImage.js

@@ -4,29 +4,26 @@ 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 IconBoxImage = _styledComponents.default.img.attrs(function () {
-  return {
-    crossOrigin: 'anonymous'
-  };
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 120px;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
-  var rounded = _ref.rounded;
+const IconBoxImage = _styledComponents.default.img.attrs(() => ({
+  crossOrigin: 'anonymous'
+}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 120px;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+  let {
+    rounded
+  } = _ref;
   return rounded && 'border-radius: var(--border-radius);';
-}, function (_ref2) {
-  var sizeS = _ref2.sizeS;
+}, _ref2 => {
+  let {
+    sizeS
+  } = _ref2;
   return sizeS && "\n      width: 80px;\n      height: 80px;\n    ";
-}, function (_ref3) {
-  var sizeXS = _ref3.sizeXS;
+}, _ref3 => {
+  let {
+    sizeXS
+  } = _ref3;
   return sizeXS && "\n      width: 40px;\n      height: 40px;\n    ";
 });
-
-var _default = IconBoxImage;
-exports.default = _default;
+var _default = exports.default = IconBoxImage;

package/image/ImageFluid.js

@@ -4,18 +4,10 @@ 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;
+const ImageFluid = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n\n  ", "\n"])), _rounded.default);
+var _default = exports.default = ImageFluid;

package/image/UploadImage.js

@@ -4,113 +4,67 @@ 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 _utils = require("@cashub/utils");
-
 var _toast = require("../toast");
-
 var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
-
 var _ImageFigure = _interopRequireDefault(require("../figure/ImageFigure"));
-
 var _ImageFluid = _interopRequireDefault(require("./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 _ref$current, _ref$current$files;
-
-  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,
-      onBlur = _ref.onBlur,
-      onClear = _ref.onClear,
-      _ref$allowClear = _ref.allowClear,
-      allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear;
-
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-      t = _useTranslation.t;
-
-  var refWrapper = (0, _react.useRef)();
-
-  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 _useState5 = (0, _react.useState)(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      focusCount = _useState6[0],
-      setFocusCount = _useState6[1];
-
-  var handleAvatarRemove = function handleAvatarRemove() {
+const UploadImage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  var _ref$current;
+  let {
+    id,
+    src,
+    alt = 'user avatar',
+    roundedCircle = false,
+    cropperHandler,
+    onBlur,
+    onClear,
+    allowClear = false
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const refWrapper = (0, _react.useRef)();
+  const [currentSrc, setCurrentSrc] = (0, _react.useState)(src);
+  const [currentFile, setCurrentFile] = (0, _react.useState)(null);
+  const [focusCount, setFocusCount] = (0, _react.useState)(0);
+  const handleAvatarRemove = () => {
     setCurrentSrc(src);
     ref.current.value = '';
     setCurrentFile(null);
   };
-
-  var restoreFile = (0, _react.useCallback)(function () {
+  const restoreFile = (0, _react.useCallback)(() => {
     if (!currentFile) return;
-    var dataTransfer = new DataTransfer();
+    const 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, _utils.dataURLtoFile)(src, file.name);
+  const handleImageFile = (0, _react.useCallback)((file, src) => {
+    const dataTransfer = new DataTransfer();
+    const changedImageFile = (0, _utils.dataURLtoFile)(src, file.name);
     dataTransfer.items.add(changedImageFile);
     setCurrentSrc(src);
     setCurrentFile(changedImageFile);
     ref.current.files = dataTransfer.files;
   }, [ref]);
-
-  var handleOnChange = function handleOnChange(files) {
+  const handleOnChange = files => {
     if (files.length === 0) {
       // close file selector or cancel upload file need to restore to last uploaded file
       restoreFile();
     } else {
-      var fileType = files[0].name.slice(files[0].name.lastIndexOf('.')).toLowerCase();
-
+      const 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]);
+          const srcUrl = URL.createObjectURL(files[0]);
           handleCrop(srcUrl, files[0]);
         } else {
           ref.current.value = '';
@@ -132,49 +86,45 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }
     }
   };
-
-  var handleCrop = (0, _react.useCallback)(function (src, file) {
+  const handleCrop = (0, _react.useCallback)((src, file) => {
     cropperHandler({
-      src: src,
-      file: file,
+      src,
+      file,
       width: 160,
       height: 160,
-      onCrop: function onCrop(croppedSrc) {
+      onCrop: croppedSrc => {
         handleImageFile(file, croppedSrc);
       },
-      onClose: function onClose() {
-        (0, _utils.getBase64DataUrlFromFile)(file, function (dataUrl) {
+      onClose: () => {
+        (0, _utils.getBase64DataUrlFromFile)(file, dataUrl => {
           handleImageFile(file, dataUrl);
         });
       }
     });
   }, [cropperHandler, handleImageFile]);
-
-  var handleFocus = function handleFocus(event) {
+  const handleFocus = event => {
     event.preventDefault();
     event.stopPropagation();
-
     if (event.target.tagName === 'BUTTON') {
       setFocusCount(focusCount + 1);
     }
   };
-
-  var handleBlur = function handleBlur(event) {
+  const handleBlur = event => {
     event.preventDefault();
-    event.stopPropagation(); // if click figure,after click button
+    event.stopPropagation();
 
+    // if click figure,after click button
     if (refWrapper.current.contains(event.relatedTarget)) return;
-
     if (event.target === refWrapper.current && onBlur) {
       onBlur();
     }
   };
-
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setCurrentSrc(src);
-  }, [src, ref]); // if click button icon,can focus figure element
+  }, [src, ref]);
 
-  (0, _react.useEffect)(function () {
+  // if click button icon,can focus figure element
+  (0, _react.useEffect)(() => {
     if (focusCount === 2) {
       refWrapper.current.focus();
       setFocusCount(0);
@@ -196,13 +146,13 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       roundedCircle: roundedCircle,
       children: [ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(CropButton, {
         roundedCircle: roundedCircle,
-        onClick: function onClick() {
+        onClick: () => {
           handleCrop(currentSrc, ref.current.files[0]);
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdCrop, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModifyButton, {
         roundedCircle: roundedCircle,
-        onClick: function onClick() {
+        onClick: () => {
           ref.current.click();
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPen, {})
@@ -211,40 +161,42 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       ref: ref && ref,
       id: id,
       accept: ".jpeg, .bmp, .jpg, .png",
-      onChange: function onChange(event) {
-        return handleOnChange(event.target.files);
-      }
+      onChange: event => handleOnChange(event.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, {})
-    }), allowClear && src && ref && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current$files = _ref$current.files) !== null && _ref$current$files !== void 0 && _ref$current$files.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
+    }), allowClear && src && ref && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current = _ref$current.files) !== null && _ref$current !== void 0 && _ref$current.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
       onClick: onClear,
       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;
+const Wrapper = (0, _styledComponents.default)(_ImageFigure.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding: var(--spacing-xs);\n"])));
+const ButtonGroup = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: -16px;\n  right: -12px;\n\n  ", "\n"])), _ref2 => {
+  let {
+    rounded
+  } = _ref2;
   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;
+const 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"])));
+const 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"])), _ref3 => {
+  let {
+    roundedCircle
+  } = _ref3;
   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;
+const 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"])), _ref4 => {
+  let {
+    roundedCircle
+  } = _ref4;
   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;
+const 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"])), _ref5 => {
+  let {
+    roundedCircle
+  } = _ref5;
   return roundedCircle && "\n      bottom: 0;\n      right: 4px;\n    ";
 });
-var _default = UploadImage;
-exports.default = _default;
+var _default = exports.default = UploadImage;

package/image/index.js

@@ -5,19 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ImageFluid", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _ImageFluid.default;
   }
 });
 Object.defineProperty(exports, "UploadImage", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _UploadImage.default;
   }
 });
-
 var _ImageFluid = _interopRequireDefault(require("./ImageFluid"));
-
 var _UploadImage = _interopRequireDefault(require("./UploadImage"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }