@sheinx/hooks 3.6.4 → 3.6.5-beta.2

package/cjs/components/use-image/use-image.d.ts

@@ -14,6 +14,8 @@ declare const useImage: (props?: BaseImageProps) => {
         onClick: (event: React.MouseEvent<HTMLImageElement | HTMLDivElement>) => void;
     };
     getImageProps: <TOther_1 extends ObjectType = ObjectType>(externalProps?: TOther_1) => {
+        style: React.CSSProperties;
+    } & {
         [x: string]: (event: any) => void;
     } & TOther_1 & {
         alt: string | undefined;

package/cjs/components/use-image/use-image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-image.d.ts","sourceRoot":"","sources":["use-image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,QAAA,MAAM,QAAQ,WAAW,cAAc;;;;;;;;;;yBA6D3B,gBAAgB,CAAC,gBAAgB,GAAG,cAAc,CAAC;;;;;;;;;;;CAmF9D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"use-image.d.ts","sourceRoot":"","sources":["use-image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,QAAA,MAAM,QAAQ,WAAW,cAAc;;;;;;;;;;yBAiG3B,gBAAgB,CAAC,gBAAgB,GAAG,cAAc,CAAC;;;;;;;;;;;;;CAoF9D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/cjs/components/use-image/use-image.js

@@ -43,6 +43,10 @@ var useImage = function useImage() {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     status = _React$useState2[0],
     setStatus = _React$useState2[1];
+  var _React$useState3 = _react.default.useState({}),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    imgCoverStyle = _React$useState4[0],
+    setImgCoverStyle = _React$useState4[1];
   var elementRef = _react.default.useRef(null);
   var getUrl = function getUrl(url) {
     var auto = 'autoSSL' in props ? autoSSL : config.autoSSL;
@@ -77,6 +81,35 @@ var useImage = function useImage() {
     };
     img.src = getUrl(alt);
   };
+  var handleCoverStyle = function handleCoverStyle(img) {
+    var container = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    if (!container) return;
+
+    // 根据容器的宽高获取宽高比
+    var containerWidth = container.clientWidth;
+    var containerHeight = container.clientHeight;
+    var containerRatio = containerWidth / containerHeight;
+
+    // 根据图片的自然尺寸获取宽高比
+    var imageWidth = img.naturalWidth;
+    var imageHeight = img.naturalHeight;
+    var imageRatio = imageWidth / imageHeight;
+
+    // 判断宽高比，决定图片填充策略
+    if (imageRatio > containerRatio) {
+      // 图片更宽，宽度占满容器，高度自适应
+      setImgCoverStyle({
+        height: '100%',
+        width: 'auto'
+      });
+    } else {
+      // 图片更高，填满容器高度
+      setImgCoverStyle({
+        width: '100%',
+        height: 'auto'
+      });
+    }
+  };
   var markToRender = function markToRender() {
     if (!src) {
       handleAlt();
@@ -84,7 +117,10 @@ var useImage = function useImage() {
     }
     var img = new window.Image();
     img.onload = function () {
-      return setStatus(SRC);
+      setStatus(SRC);
+      if (props.fit === 'fill') {
+        handleCoverStyle(img);
+      }
     };
     img.onerror = function (e) {
       return handleError(SRC, e);
@@ -113,7 +149,9 @@ var useImage = function useImage() {
       alt: alt,
       draggable: !noImgDrag
     });
-    return _objectSpread({}, mergedEventHandlers);
+    return _objectSpread({
+      style: imgCoverStyle
+    }, mergedEventHandlers);
   };
   var getImageDivProps = function getImageDivProps() {
     var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/esm/components/use-image/use-image.d.ts

@@ -14,6 +14,8 @@ declare const useImage: (props?: BaseImageProps) => {
         onClick: (event: React.MouseEvent<HTMLImageElement | HTMLDivElement>) => void;
     };
     getImageProps: <TOther_1 extends ObjectType = ObjectType>(externalProps?: TOther_1) => {
+        style: React.CSSProperties;
+    } & {
         [x: string]: (event: any) => void;
     } & TOther_1 & {
         alt: string | undefined;

package/esm/components/use-image/use-image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-image.d.ts","sourceRoot":"","sources":["use-image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,QAAA,MAAM,QAAQ,WAAW,cAAc;;;;;;;;;;yBA6D3B,gBAAgB,CAAC,gBAAgB,GAAG,cAAc,CAAC;;;;;;;;;;;CAmF9D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"use-image.d.ts","sourceRoot":"","sources":["use-image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,QAAA,MAAM,QAAQ,WAAW,cAAc;;;;;;;;;;yBAiG3B,gBAAgB,CAAC,gBAAgB,GAAG,cAAc,CAAC;;;;;;;;;;;;;CAoF9D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/components/use-image/use-image.js

@@ -36,6 +36,10 @@ var useImage = function useImage() {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     status = _React$useState2[0],
     setStatus = _React$useState2[1];
+  var _React$useState3 = React.useState({}),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    imgCoverStyle = _React$useState4[0],
+    setImgCoverStyle = _React$useState4[1];
   var elementRef = React.useRef(null);
   var getUrl = function getUrl(url) {
     var auto = 'autoSSL' in props ? autoSSL : config.autoSSL;
@@ -70,6 +74,35 @@ var useImage = function useImage() {
     };
     img.src = getUrl(alt);
   };
+  var handleCoverStyle = function handleCoverStyle(img) {
+    var container = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    if (!container) return;
+
+    // 根据容器的宽高获取宽高比
+    var containerWidth = container.clientWidth;
+    var containerHeight = container.clientHeight;
+    var containerRatio = containerWidth / containerHeight;
+
+    // 根据图片的自然尺寸获取宽高比
+    var imageWidth = img.naturalWidth;
+    var imageHeight = img.naturalHeight;
+    var imageRatio = imageWidth / imageHeight;
+
+    // 判断宽高比，决定图片填充策略
+    if (imageRatio > containerRatio) {
+      // 图片更宽，宽度占满容器，高度自适应
+      setImgCoverStyle({
+        height: '100%',
+        width: 'auto'
+      });
+    } else {
+      // 图片更高，填满容器高度
+      setImgCoverStyle({
+        width: '100%',
+        height: 'auto'
+      });
+    }
+  };
   var markToRender = function markToRender() {
     if (!src) {
       handleAlt();
@@ -77,7 +110,10 @@ var useImage = function useImage() {
     }
     var img = new window.Image();
     img.onload = function () {
-      return setStatus(SRC);
+      setStatus(SRC);
+      if (props.fit === 'fill') {
+        handleCoverStyle(img);
+      }
     };
     img.onerror = function (e) {
       return handleError(SRC, e);
@@ -106,7 +142,9 @@ var useImage = function useImage() {
       alt: alt,
       draggable: !noImgDrag
     });
-    return _objectSpread({}, mergedEventHandlers);
+    return _objectSpread({
+      style: imgCoverStyle
+    }, mergedEventHandlers);
   };
   var getImageDivProps = function getImageDivProps() {
     var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/hooks",
-  "version": "3.6.4",
+  "version": "3.6.5-beta.2",
   "description": "",
   "keywords": [],
   "license": "MIT",