shineout 3.6.4 → 3.6.5-beta.2

package/cjs/index.js

@@ -514,5 +514,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.6.4'
+  version: '3.6.5-beta.2'
 };

package/dist/shineout.js

@@ -12217,7 +12217,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.6.4');
+/* harmony default export */ var version = ('3.6.5-beta.2');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -17622,8 +17622,7 @@ var cascaderStyle = objectSpread2_default()(objectSpread2_default()({
     visibility: 'hidden'
   },
   moreWrapper: {
-    // width: 248,
-    // height: 72,
+    width: 'max-content',
     maxWidth: 400,
     maxHeight: 160,
     overflow: 'auto',
@@ -19758,9 +19757,14 @@ var ImageStyle = objectSpread2_default()(objectSpread2_default()({
   },
   fill: {
     '& $inner': {
-      backgroundSize: 'cover',
-      backgroundPosition: '50% 50%',
-      backgroundRepeat: 'no-repeat'
+      '& > img': {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        maxWidth: 'none',
+        maxHeight: 'none'
+      }
     }
   },
   previewMask: {
@@ -23430,6 +23434,7 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
     visibility: 'hidden'
   },
   moreWrapper: {
+    width: 'max-content',
     maxWidth: 400,
     maxHeight: 160,
     overflow: 'auto',
@@ -28659,6 +28664,7 @@ var treeSelectStyle = objectSpread2_default()(objectSpread2_default()({
     visibility: 'hidden'
   },
   moreWrapper: {
+    width: 'max-content',
     maxWidth: 400,
     maxHeight: 160,
     overflow: 'auto',
@@ -40441,6 +40447,10 @@ var More = function More(props) {
         className: compressedClassName,
         visible: visible,
         onVisibleChange: setVisible,
+        getPopupContainer: function getPopupContainer() {
+          var _props$morePopoverCon;
+          return (_props$morePopoverCon = props.morePopoverContainer) === null || _props$morePopoverCon === void 0 ? void 0 : _props$morePopoverCon.current;
+        },
         children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
           className: styles.moreWrapper,
           onClick: function onClick(e) {
@@ -40735,7 +40745,8 @@ var result_Result = function Result(props) {
     compressed: compressed,
     renderCompressed: renderCompressed,
     compressedClassName: compressedClassName,
-    showNum: moreNumber
+    showNum: moreNumber,
+    morePopoverContainer: props.morePopoverContainer
   }, 'more');
   var renderResult = function renderResult() {
     if (empty) {
@@ -41289,7 +41300,8 @@ var Cascader = function Cascader(props0) {
         onResultItemClick: handleResultItemClick,
         checkUnMatched: checkUnMatched,
         getDataByValues: getDataByValues,
-        setInputText: setInputText
+        setInputText: setInputText,
+        morePopoverContainer: targetRef
       })
     });
     return /*#__PURE__*/(0,jsx_runtime.jsx)(PopupProvider, {
@@ -51213,6 +51225,10 @@ var useImage = function useImage() {
     _React$useState2 = slicedToArray_default()(_React$useState, 2),
     status = _React$useState2[0],
     setStatus = _React$useState2[1];
+  var _React$useState3 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState({}),
+    _React$useState4 = slicedToArray_default()(_React$useState3, 2),
+    imgCoverStyle = _React$useState4[0],
+    setImgCoverStyle = _React$useState4[1];
   var elementRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef(null);
   var getUrl = function getUrl(url) {
     var auto = 'autoSSL' in props ? autoSSL : use_image_config.autoSSL;
@@ -51247,6 +51263,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();
@@ -51254,7 +51299,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);
@@ -51283,7 +51331,9 @@ var useImage = function useImage() {
       alt: alt,
       draggable: !noImgDrag
     });
-    return objectSpread2_default()({}, mergedEventHandlers);
+    return objectSpread2_default()({
+      style: imgCoverStyle
+    }, mergedEventHandlers);
   };
   var getImageDivProps = function getImageDivProps() {
     var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -52051,7 +52101,8 @@ var Image = function Image(props) {
       href: href,
       lazy: lazy,
       autoSSL: autoSSL,
-      noImgDrag: noImgDrag
+      noImgDrag: noImgDrag,
+      fit: fit
     }, rest)),
     status = _useImage.status,
     getRootProps = _useImage.getRootProps,
@@ -52130,7 +52181,7 @@ var Image = function Image(props) {
 
   // 渲染 img / div 类型的内部标签
   var renderInner = function renderInner(src) {
-    return fit === 'fill' || fit === 'fit' ? renderDivInnerEl(src) : renderImgeInnerEl(src);
+    return fit === 'fit' ? renderDivInnerEl(src) : renderImgeInnerEl(src);
   };
 
   // 默认占位图
@@ -55667,7 +55718,8 @@ function Select(props0) {
         checkUnMatched: checkUnMatched,
         onRemove: handleRemove,
         classes: styles,
-        setInputText: setInputText
+        setInputText: setInputText,
+        morePopoverContainer: targetRef
       })
     });
     return /*#__PURE__*/(0,jsx_runtime.jsx)(PopupProvider, {
@@ -66160,7 +66212,8 @@ var TreeSelect = function TreeSelect(props0) {
         getDataByValues: getResultByValue,
         onRemove: handleRemove,
         classes: styles,
-        setInputText: setInputText
+        setInputText: setInputText,
+        morePopoverContainer: targetRef
       })
     });
     return /*#__PURE__*/(0,jsx_runtime.jsx)(PopupProvider, {
@@ -69975,7 +70028,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.6.4'
+  version: '3.6.5-beta.2'
 });
 }();
 /******/ 	return __webpack_exports__;