@cashub/ui 0.3.3 → 0.4.0

package/partial/modal/CropImageModal.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactI18next = require("react-i18next");
+
+var _resize = _interopRequireDefault(require("../../utils/image/resize"));
+
+var _Button = _interopRequireDefault(require("../../button/Button"));
+
+var _ButtonGroup = _interopRequireDefault(require("../../button/ButtonGroup"));
+
+var _TitleModal = _interopRequireDefault(require("../../modal/TitleModal"));
+
+var _Cropper = _interopRequireDefault(require("../../cropper/Cropper"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 CropImageModal = function CropImageModal(_ref) {
+  var src = _ref.src,
+      mime = _ref.mime,
+      alt = _ref.alt,
+      width = _ref.width,
+      height = _ref.height,
+      onCrop = _ref.onCrop,
+      onClose = _ref.onClose,
+      close = _ref.close;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      instance = _useState2[0],
+      setIntance = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      resizedImage = _useState4[0],
+      setResizedImage = _useState4[1];
+
+  var handleCrop = (0, _react.useCallback)(function () {
+    onCrop(instance.getCroppedCanvas().toDataURL());
+    close();
+  }, [onCrop, instance, close]);
+  var handleInitialized = (0, _react.useCallback)(function (instance) {
+    setIntance(instance);
+  }, []);
+
+  var handleClose = function handleClose() {
+    if (onClose) {
+      onClose();
+    }
+
+    close();
+  };
+
+  (0, _react.useEffect)(function () {
+    (0, _resize.default)(src, mime, width > height ? width : height, 'cover', function (resizedImageUrl) {
+      setResizedImage(resizedImageUrl);
+    });
+  }, [src, mime, height, width]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Header, {
+      handleClose: handleClose,
+      children: t('CropImage')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Body, {
+      children: resizedImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cropper.default, {
+        src: resizedImage,
+        alt: alt,
+        width: width,
+        height: height,
+        onInitialized: handleInitialized
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Footer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          danger: true,
+          onClick: handleClose,
+          children: t('button:Cancel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          success: true,
+          onClick: handleCrop,
+          children: t('button:Confirm')
+        })]
+      })
+    })]
+  });
+};
+
+var _default = CropImageModal;
+exports.default = _default;

package/styles/mixin/rounded.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var rounded = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var rounded = _ref.rounded;
+  return rounded && 'border-radius: var(--border-radius);';
+}, function (_ref2) {
+  var roundedCircle = _ref2.roundedCircle;
+  return roundedCircle && 'border-radius: var(--border-radius-round);';
+});
+var _default = rounded;
+exports.default = _default;

package/toast/MessageContainer.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+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 MessageContainer = function MessageContainer(_ref) {
+  var title = _ref.title,
+      message = _ref.message,
+      _ref$containHTML = _ref.containHTML,
+      containHTML = _ref$containHTML === void 0 ? false : _ref$containHTML;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": "messageContainer",
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+      children: title
+    }), containHTML ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+      dangerouslySetInnerHTML: {
+        __html: message
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+      children: message
+    })]
+  });
+};
+
+var Title = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n  margin-bottom: 0.25rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 500;\n"])));
+
+var Message = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n\n  ul {\n    margin-left: 1rem;\n\n    li {\n      list-style: disc;\n    }\n  }\n"])));
+
+var _default = MessageContainer;
+exports.default = _default;

package/utils/aria/keycode.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var KEY_CODE = {
+  ENTER: 13,
+  ESCAPE: 27,
+  UP: 38,
+  DOWN: 40,
+  END: 35,
+  HOME: 36
+};
+var _default = KEY_CODE;
+exports.default = _default;

package/utils/dataURLtoFile.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var dataURLtoFile = function dataURLtoFile(dataurl, filename) {
+  var arr = dataurl.split(",");
+  var mime = arr[0].match(/:(.*?);/)[1];
+  var bstr = atob(arr[1]);
+  var n = bstr.length;
+  var u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  return new File([u8arr], filename, {
+    type: mime
+  });
+};
+
+var _default = dataURLtoFile;
+exports.default = _default;

package/utils/format/formatSize.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Convert the amount of data in byte to the largest unit
+ *
+ * @param {String|Integer} bytes Amount of data in byte
+ *
+ * @return {String}
+ */
+var formatSize = function formatSize(bytes) {
+  var str;
+
+  if (bytes >= 1073741824) {
+    str = "".concat((bytes / 1073741824).toFixed(2), " GB");
+  } else if (bytes >= 1048576) {
+    str = "".concat((bytes / 1048576).toFixed(2), " MB");
+  } else if (bytes >= 1024) {
+    str = "".concat((bytes / 1024).toFixed(2), " KB");
+  } else if (bytes > 1) {
+    str = "".concat((bytes / 1).toFixed(2), " bytes");
+  } else if (bytes === 1) {
+    str = "".concat(bytes, " byte");
+  } else {
+    str = "0 bytes";
+  }
+
+  return str;
+};
+
+var _default = formatSize;
+exports.default = _default;

package/utils/getBase64.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var getBase64 = function getBase64(file, callback) {
+  // 建立FileReader物件
+  var reader = new FileReader(); //讀取'成功'時執行
+
+  reader.onload = function () {
+    //result返回文件的內容
+    callback(reader.result);
+  }; //讀取文件內容，結果用data:url形式表示
+
+
+  reader.readAsDataURL(file);
+};
+
+var _default = getBase64;
+exports.default = _default;

package/utils/image/resize.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var resizeImage = function resizeImage(url, mime, size, mode, callback) {
+  var canvas = document.createElement("canvas");
+  var ctx = canvas.getContext("2d");
+  var img = new Image();
+  img.crossOrigin = "Anonymous";
+
+  img.onload = function () {
+    var height = img.height;
+    var width = img.width;
+
+    if (mode === "contain") {
+      if (height > width) {
+        width = width * (size / height);
+        height = size;
+      } else {
+        height = height * (size / width);
+        width = size;
+      }
+    }
+
+    if (mode === "cover") {
+      if (height > width) {
+        height = height * (size / width);
+        width = size;
+      } else {
+        width = width * (size / height);
+        height = size;
+      }
+    }
+
+    canvas.height = height;
+    canvas.width = width;
+    ctx.drawImage(img, 0, 0, width, height);
+    callback(canvas.toDataURL(mime));
+    canvas = null;
+  };
+
+  img.src = url;
+};
+
+var _default = resizeImage;
+exports.default = _default;