@kdcloudjs/kdesign 1.8.55 → 1.8.56

package/es/_utils/usePopper.js

@@ -222,6 +222,10 @@ function usePopper(locatorElement, popperElement, props) {
     _useState16 = _slicedToArray(_useState15, 2),
     maxWidth = _useState16[0],
     setMaxWidth = _useState16[1];
+  var _useState17 = useState({}),
+    _useState18 = _slicedToArray(_useState17, 2),
+    forceStyle = _useState18[0],
+    setForceStyle = _useState18[1];
   useEffect(function () {
     if (props.visible) {
       !exist && setExist(true);
@@ -231,18 +235,18 @@ function usePopper(locatorElement, popperElement, props) {
       setVisible(false);
     }
   }, [exist, props.visible]);
-  var _useState17 = useState(''),
-    _useState18 = _slicedToArray(_useState17, 2),
-    evType = _useState18[0],
-    setEvType = _useState18[1];
-  var _useState19 = useState(),
+  var _useState19 = useState(''),
     _useState20 = _slicedToArray(_useState19, 2),
-    align = _useState20[0],
-    setAlign = _useState20[1];
-  var _useState21 = useState(_includesInstanceProperty(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
+    evType = _useState20[0],
+    setEvType = _useState20[1];
+  var _useState21 = useState(),
     _useState22 = _slicedToArray(_useState21, 2),
-    nextPlacement = _useState22[0],
-    setNextPlacement = _useState22[1];
+    align = _useState22[0],
+    setAlign = _useState22[1];
+  var _useState23 = useState(_includesInstanceProperty(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
+    _useState24 = _slicedToArray(_useState23, 2),
+    nextPlacement = _useState24[0],
+    setNextPlacement = _useState24[1];
   useEffect(function () {
     if (isMobile) return;
     if (nextPlacement !== placement && _includesInstanceProperty(Placements).call(Placements, placement)) {
@@ -502,6 +506,7 @@ function usePopper(locatorElement, popperElement, props) {
         }
         var newMaxHeight = 0;
         var newMaxWidth;
+        var newForceStyle = {};
         if (/top/.test(placementForCalc)) {
           newMaxHeight = rect.top - gap;
         } else if (/bottom/.test(placementForCalc)) {
@@ -515,9 +520,19 @@ function usePopper(locatorElement, popperElement, props) {
           } else if (/right/.test(placementForCalc)) {
             newMaxWidth = viewportWidth - rect.right - gap;
           }
+          var triggerWidth = rect.width;
+          if (triggerWidth >= viewportWidth * 0.8) {
+            newForceStyle = {
+              left: 0,
+              right: 'auto',
+              transform: 'none',
+              maxWidth: '100vw'
+            };
+          }
         }
         setMaxHeight(Math.max(newMaxHeight, 0));
         setMaxWidth(newMaxWidth && newMaxWidth > 0 ? newMaxWidth : undefined);
+        setForceStyle(newForceStyle);
       }
       setCanAlign(false);
       props.visible === undefined && setVisible(true);
@@ -531,13 +546,13 @@ function usePopper(locatorElement, popperElement, props) {
   var arrowStyle = (_arrowStyle = {}, _defineProperty(_arrowStyle, "--arrowSize", arrowSize + 'px'), _defineProperty(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
   if (arrowPos.top) arrowStyle["--arrowTop"] = arrowPos.top + 'px';
   if (arrowPos.left) arrowStyle["--arrowLeft"] = arrowPos.left + 'px';
-  var popperContainerStyle = _extends(_extends(_extends(_extends(_extends({
+  var popperContainerStyle = _extends(_extends(_extends(_extends(_extends(_extends({
     position: 'absolute'
   }, align), arrow ? arrowStyle : {}), maxHeight ? {
     maxHeight: maxHeight + 'px'
   } : {}), maxWidth ? {
     maxWidth: maxWidth + 'px'
-  } : {}), popperStyle);
+  } : {}), forceStyle), popperStyle);
   var popperProps = {
     ref: popperRef,
     style: popperContainerStyle,

package/es/popconfirm/popconfirm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonType, IButtonProps } from '../button';
-import { PopperProps } from '../_utils/usePopper';
+import { PopperProps } from '../popper';
 export declare type RenderFunction = () => React.ReactNode;
 export interface PopconfirmProps extends PopperProps {
     okText?: string;

package/es/popconfirm/popconfirm.js

@@ -6,7 +6,7 @@ import Icon from '../icon';
 import Button from '../button';
 import { getCompProps } from '../_utils';
 import { ConfigContext } from '../config-provider';
-import usePopper from '../_utils/usePopper';
+import Popper from '../popper';
 var Popconfirm = function Popconfirm(props) {
   var _context;
   var _React$useContext = React.useContext(ConfigContext),
@@ -78,7 +78,9 @@ var Popconfirm = function Popconfirm(props) {
     arrow: true,
     onVisibleChange: handleVisibleChange
   });
-  return usePopper(confirmLocator, confirmPopper, popperProps);
+  return React.createElement(Popper, _extends({
+    tip: confirmPopper
+  }, popperProps), confirmLocator);
 };
 Popconfirm.displayName = 'Popconfirm';
 export default Popconfirm;

package/es/popconfirm/style/index.css

@@ -235,6 +235,9 @@
 .kd-popconfirm-interaction button:not(:last-child) {
   margin-right: var(--kd-c-popconfirm-button-spacing, 12px);
 }
+.kd-popconfirm .arrow::before {
+  border-color: #fff;
+}
 .kd-popconfirm-rtl {
   direction: rtl;
 }

package/es/popconfirm/style/index.less

@@ -78,6 +78,10 @@
       margin-right: @popconfirm-button-spacing;
     }
   }
+  
+  .arrow::before {
+    border-color: @tooltip-background-color;
+  }
 }
 .@{popconfirm-prefix-cls}-rtl {
   direction: rtl;
@@ -97,4 +101,4 @@
     }
   }
 }
-/*! rtl:end:ignore */
+/*! rtl:end:ignore */

package/lib/_utils/usePopper.js

@@ -236,6 +236,10 @@ function usePopper(locatorElement, popperElement, props) {
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
     maxWidth = _useState16[0],
     setMaxWidth = _useState16[1];
+  var _useState17 = (0, _react.useState)({}),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    forceStyle = _useState18[0],
+    setForceStyle = _useState18[1];
   (0, _react.useEffect)(function () {
     if (props.visible) {
       !exist && setExist(true);
@@ -245,18 +249,18 @@ function usePopper(locatorElement, popperElement, props) {
       setVisible(false);
     }
   }, [exist, props.visible]);
-  var _useState17 = (0, _react.useState)(''),
-    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    evType = _useState18[0],
-    setEvType = _useState18[1];
-  var _useState19 = (0, _react.useState)(),
+  var _useState19 = (0, _react.useState)(''),
     _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-    align = _useState20[0],
-    setAlign = _useState20[1];
-  var _useState21 = (0, _react.useState)((0, _includes.default)(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
+    evType = _useState20[0],
+    setEvType = _useState20[1];
+  var _useState21 = (0, _react.useState)(),
     _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-    nextPlacement = _useState22[0],
-    setNextPlacement = _useState22[1];
+    align = _useState22[0],
+    setAlign = _useState22[1];
+  var _useState23 = (0, _react.useState)((0, _includes.default)(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
+    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+    nextPlacement = _useState24[0],
+    setNextPlacement = _useState24[1];
   (0, _react.useEffect)(function () {
     if (isMobile) return;
     if (nextPlacement !== placement && (0, _includes.default)(Placements).call(Placements, placement)) {
@@ -516,6 +520,7 @@ function usePopper(locatorElement, popperElement, props) {
         }
         var newMaxHeight = 0;
         var newMaxWidth;
+        var newForceStyle = {};
         if (/top/.test(placementForCalc)) {
           newMaxHeight = rect.top - gap;
         } else if (/bottom/.test(placementForCalc)) {
@@ -529,9 +534,19 @@ function usePopper(locatorElement, popperElement, props) {
           } else if (/right/.test(placementForCalc)) {
             newMaxWidth = viewportWidth - rect.right - gap;
           }
+          var triggerWidth = rect.width;
+          if (triggerWidth >= viewportWidth * 0.8) {
+            newForceStyle = {
+              left: 0,
+              right: 'auto',
+              transform: 'none',
+              maxWidth: '100vw'
+            };
+          }
         }
         setMaxHeight(Math.max(newMaxHeight, 0));
         setMaxWidth(newMaxWidth && newMaxWidth > 0 ? newMaxWidth : undefined);
+        setForceStyle(newForceStyle);
       }
       setCanAlign(false);
       props.visible === undefined && setVisible(true);
@@ -545,13 +560,13 @@ function usePopper(locatorElement, popperElement, props) {
   var arrowStyle = (_arrowStyle = {}, (0, _defineProperty2.default)(_arrowStyle, "--arrowSize", arrowSize + 'px'), (0, _defineProperty2.default)(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
   if (arrowPos.top) arrowStyle["--arrowTop"] = arrowPos.top + 'px';
   if (arrowPos.left) arrowStyle["--arrowLeft"] = arrowPos.left + 'px';
-  var popperContainerStyle = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
+  var popperContainerStyle = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
     position: 'absolute'
   }, align), arrow ? arrowStyle : {}), maxHeight ? {
     maxHeight: maxHeight + 'px'
   } : {}), maxWidth ? {
     maxWidth: maxWidth + 'px'
-  } : {}), popperStyle);
+  } : {}), forceStyle), popperStyle);
   var popperProps = {
     ref: popperRef,
     style: popperContainerStyle,

package/lib/popconfirm/popconfirm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonType, IButtonProps } from '../button';
-import { PopperProps } from '../_utils/usePopper';
+import { PopperProps } from '../popper';
 export declare type RenderFunction = () => React.ReactNode;
 export interface PopconfirmProps extends PopperProps {
     okText?: string;

package/lib/popconfirm/popconfirm.js

@@ -16,7 +16,7 @@ var _icon = _interopRequireDefault(require("../icon"));
 var _button = _interopRequireDefault(require("../button"));
 var _utils = require("../_utils");
 var _configProvider = require("../config-provider");
-var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _popper = _interopRequireDefault(require("../popper"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Popconfirm = function Popconfirm(props) {
@@ -90,7 +90,9 @@ var Popconfirm = function Popconfirm(props) {
     arrow: true,
     onVisibleChange: handleVisibleChange
   });
-  return (0, _usePopper.default)(confirmLocator, confirmPopper, popperProps);
+  return React.createElement(_popper.default, (0, _extends2.default)({
+    tip: confirmPopper
+  }, popperProps), confirmLocator);
 };
 Popconfirm.displayName = 'Popconfirm';
 var _default = Popconfirm;

package/lib/popconfirm/style/index.css

@@ -235,6 +235,9 @@
 .kd-popconfirm-interaction button:not(:last-child) {
   margin-right: var(--kd-c-popconfirm-button-spacing, 12px);
 }
+.kd-popconfirm .arrow::before {
+  border-color: #fff;
+}
 .kd-popconfirm-rtl {
   direction: rtl;
 }

package/lib/popconfirm/style/index.less

@@ -78,6 +78,10 @@
       margin-right: @popconfirm-button-spacing;
     }
   }
+  
+  .arrow::before {
+    border-color: @tooltip-background-color;
+  }
 }
 .@{popconfirm-prefix-cls}-rtl {
   direction: rtl;
@@ -97,4 +101,4 @@
     }
   }
 }
-/*! rtl:end:ignore */
+/*! rtl:end:ignore */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.8.55",
+  "version": "1.8.56",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [