iglooform 3.7.9 → 3.8.0

package/lib/media/preview.js

@@ -213,10 +213,30 @@ var PdfViewer = function PdfViewer(_ref) {
     })]
   });
 };
+var getImageLayoutSize = function getImageLayoutSize(imageSize, containerSize, rotation) {
+  var imageWidth = imageSize.width,
+    imageHeight = imageSize.height;
+  var containerWidth = containerSize.width,
+    containerHeight = containerSize.height;
+  if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) {
+    return undefined;
+  }
+  var isQuarterTurn = Math.abs(rotation % 180) === 90;
+  var ratio = isQuarterTurn ? Math.min(containerWidth / imageHeight, containerHeight / imageWidth) : Math.min(containerWidth / imageWidth, containerHeight / imageHeight);
+  if (!isFinite(ratio) || ratio <= 0) {
+    return undefined;
+  }
+  return {
+    width: imageWidth * ratio,
+    height: imageHeight * ratio
+  };
+};
 var MediaItem = function MediaItem(_ref3) {
   var type = _ref3.type,
     src = _ref3.src,
     scale = _ref3.scale,
+    rotation = _ref3.rotation,
+    containerSize = _ref3.containerSize,
     offset = _ref3.offset,
     isCurrent = _ref3.isCurrent,
     showAllPages = _ref3.showAllPages;
@@ -224,6 +244,14 @@ var MediaItem = function MediaItem(_ref3) {
     left = offset.left;
   var _useContext2 = (0, _react.useContext)(_locale.LocaleContext),
     formatMessage = _useContext2.formatMessage;
+  var _useState7 = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    imageSize = _useState8[0],
+    setImageSize = _useState8[1];
+  var imageLayoutSize = getImageLayoutSize(imageSize, containerSize, rotation);
   switch (type) {
     case 'video':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
@@ -244,14 +272,32 @@ var MediaItem = function MediaItem(_ref3) {
         showAllPages: showAllPages
       });
     case 'image':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: src,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
-          maxWidth: '100%',
-          maxHeight: '100%',
-          transform: "scale(".concat(scale, ") translate(").concat(left, "px, ").concat(top, "px)"),
-          position: 'absolute'
-        }
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          transform: "translate(".concat(left, "px, ").concat(top, "px)")
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: src,
+          onLoad: function onLoad(_ref4) {
+            var currentTarget = _ref4.currentTarget;
+            return setImageSize({
+              width: currentTarget.naturalWidth,
+              height: currentTarget.naturalHeight
+            });
+          },
+          style: _objectSpread(_objectSpread({}, imageLayoutSize ? imageLayoutSize : {
+            maxWidth: '100%',
+            maxHeight: '100%'
+          }), {}, {
+            display: 'block',
+            transform: "scale(".concat(scale, ") rotate(").concat(rotation, "deg)")
+          })
+        })
       });
     default:
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -268,42 +314,76 @@ var MediaItem = function MediaItem(_ref3) {
       });
   }
 };
-var Media = function Media(_ref4) {
-  var src = _ref4.src,
-    className = _ref4.className,
-    style = _ref4.style,
-    _ref4$scale = _ref4.scale,
-    scale = _ref4$scale === void 0 ? 1 : _ref4$scale,
-    type = _ref4.type,
-    _ref4$isCurrent = _ref4.isCurrent,
-    isCurrent = _ref4$isCurrent === void 0 ? false : _ref4$isCurrent,
-    _ref4$showAllPages = _ref4.showAllPages,
-    showAllPages = _ref4$showAllPages === void 0 ? true : _ref4$showAllPages;
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isDrag = _useState8[0],
-    setIsDrag = _useState8[1];
-  var _useState9 = (0, _react.useState)({
-      startX: 0,
-      startY: 0
-    }),
+var Media = function Media(_ref5) {
+  var src = _ref5.src,
+    className = _ref5.className,
+    style = _ref5.style,
+    _ref5$scale = _ref5.scale,
+    scale = _ref5$scale === void 0 ? 1 : _ref5$scale,
+    _ref5$rotation = _ref5.rotation,
+    rotation = _ref5$rotation === void 0 ? 0 : _ref5$rotation,
+    type = _ref5.type,
+    _ref5$isCurrent = _ref5.isCurrent,
+    isCurrent = _ref5$isCurrent === void 0 ? false : _ref5$isCurrent,
+    _ref5$showAllPages = _ref5.showAllPages,
+    showAllPages = _ref5$showAllPages === void 0 ? true : _ref5$showAllPages;
+  var _useState9 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    startPos = _useState10[0],
-    setStartPos = _useState10[1];
+    isDrag = _useState10[0],
+    setIsDrag = _useState10[1];
   var _useState11 = (0, _react.useState)({
-      top: 0,
-      left: 0
+      startX: 0,
+      startY: 0
     }),
     _useState12 = _slicedToArray(_useState11, 2),
-    offset = _useState12[0],
-    setOffset = _useState12[1];
+    startPos = _useState12[0],
+    setStartPos = _useState12[1];
   var _useState13 = (0, _react.useState)({
       top: 0,
       left: 0
     }),
     _useState14 = _slicedToArray(_useState13, 2),
-    lastOffset = _useState14[0],
-    setLastOffset = _useState14[1];
+    offset = _useState14[0],
+    setOffset = _useState14[1];
+  var _useState15 = (0, _react.useState)({
+      top: 0,
+      left: 0
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    lastOffset = _useState16[0],
+    setLastOffset = _useState16[1];
+  var containerRef = (0, _react.useRef)(null);
+  var _useState17 = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState18 = _slicedToArray(_useState17, 2),
+    containerSize = _useState18[0],
+    setContainerSize = _useState18[1];
+  (0, _react.useEffect)(function () {
+    var current = containerRef.current;
+    if (!current) {
+      return;
+    }
+    var updateContainerSize = function updateContainerSize() {
+      setContainerSize({
+        width: current.clientWidth,
+        height: current.clientHeight
+      });
+    };
+    updateContainerSize();
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updateContainerSize);
+      return function () {
+        return window.removeEventListener('resize', updateContainerSize);
+      };
+    }
+    var observer = new ResizeObserver(updateContainerSize);
+    observer.observe(current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
   var handleMouseUp = function handleMouseUp(e) {
     e.preventDefault();
     var button = e.button;
@@ -346,6 +426,7 @@ var Media = function Media(_ref4) {
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: containerRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -362,6 +443,8 @@ var Media = function Media(_ref4) {
       type: type,
       src: src,
       scale: scale,
+      rotation: rotation,
+      containerSize: containerSize,
       offset: offset,
       isCurrent: isCurrent,
       showAllPages: showAllPages

package/lib/media/style/index.less

@@ -108,21 +108,16 @@
     margin-top: 16px;
   }
 
-  .igloo-preview-zoom-in {
+  .igloo-preview-actions {
+    position: fixed;
     right: 24px;
-  }
-
-  .igloo-preview-zoom-out {
-    right: 80px;
-  }
-
-  .igloo-preview-download-btn {
-    right: 136px;
+    bottom: 24px;
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 16px;
   }
 
   .igloo-preview-action-btn {
-    position: fixed;
-    bottom: 24px;
     display: flex;
     justify-content: center;
     align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iglooform",
-  "version": "3.7.9",
+  "version": "3.8.0",
   "scripts": {
     "start": "dumi dev",
     "build-dev": "dumi build",

package/.idea/codeStyles/Project.xml

@@ -1,80 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <JetCodeStyleSettings>
-      <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
-    </JetCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JAVA">
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SPACE_BEFORE_METHOD_PARENTHESES" value="true" />
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="XML">
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="kotlin">
-      <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/iglooformv3.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/iglooformv3.iml" filepath="$PROJECT_DIR$/.idea/iglooformv3.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/prettier.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

package/es/currency-context/index.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface CurrencyMethod {
-    exchange: (value: any) => any;
-    exchangeBack: (value: any) => any;
-    currentCurrency: string;
-}
-declare const _default: import("react").Context<CurrencyMethod>;
-export default _default;

package/es/media/index.d.ts

@@ -1,30 +0,0 @@
-import { FC, CSSProperties } from 'react';
-import './style';
-type Download = false | {
-    actionType?: 'downloadBlob' | 'openUrl';
-};
-type GetNonCORSUrl = (originUrl: string) => Promise<string> | string;
-interface Props {
-    src: string | {
-        origin: string;
-        nonCORS: string;
-    };
-    name?: string;
-    type?: string;
-    index?: number;
-    list?: Array<{
-        type: string;
-        src: string;
-        nonCORSSrc?: string;
-    }>;
-    docNames?: string[];
-    className?: any;
-    style?: CSSProperties;
-    showAllPages?: boolean;
-    destroyOnClose?: boolean;
-    download?: Download;
-    getNonCORSUrl?: GetNonCORSUrl;
-    loading?: boolean;
-}
-declare const MediaWithPreview: FC<Props>;
-export default MediaWithPreview;

package/es/media/media.d.ts

@@ -1,14 +0,0 @@
-import { FC, CSSProperties } from 'react';
-declare const Loading: () => import("react/jsx-runtime").JSX.Element;
-interface MediaProps {
-    src: string;
-    type: string;
-    onClick: any;
-    className?: any;
-    style?: CSSProperties;
-    name?: string;
-}
-declare const Media: FC<MediaProps> & {
-    Loading: typeof Loading;
-};
-export default Media;

package/lib/currency-context/index.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface CurrencyMethod {
-    exchange: (value: any) => any;
-    exchangeBack: (value: any) => any;
-    currentCurrency: string;
-}
-declare const _default: import("react").Context<CurrencyMethod>;
-export default _default;

package/lib/media/index.d.ts

@@ -1,30 +0,0 @@
-import { FC, CSSProperties } from 'react';
-import './style';
-type Download = false | {
-    actionType?: 'downloadBlob' | 'openUrl';
-};
-type GetNonCORSUrl = (originUrl: string) => Promise<string> | string;
-interface Props {
-    src: string | {
-        origin: string;
-        nonCORS: string;
-    };
-    name?: string;
-    type?: string;
-    index?: number;
-    list?: Array<{
-        type: string;
-        src: string;
-        nonCORSSrc?: string;
-    }>;
-    docNames?: string[];
-    className?: any;
-    style?: CSSProperties;
-    showAllPages?: boolean;
-    destroyOnClose?: boolean;
-    download?: Download;
-    getNonCORSUrl?: GetNonCORSUrl;
-    loading?: boolean;
-}
-declare const MediaWithPreview: FC<Props>;
-export default MediaWithPreview;

package/lib/media/media.d.ts

@@ -1,14 +0,0 @@
-import { FC, CSSProperties } from 'react';
-declare const Loading: () => import("react/jsx-runtime").JSX.Element;
-interface MediaProps {
-    src: string;
-    type: string;
-    onClick: any;
-    className?: any;
-    style?: CSSProperties;
-    name?: string;
-}
-declare const Media: FC<MediaProps> & {
-    Loading: typeof Loading;
-};
-export default Media;