@kdcloudjs/kdesign 1.8.68 → 1.8.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/kdesign.css +1 -1
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +13 -4
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +1 -1
- package/dist/kdesign.min.js +2 -2
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.d.ts +1 -0
- package/es/_utils/usePopper.js +11 -3
- package/es/select/select.js +1 -0
- package/lib/_utils/usePopper.d.ts +1 -0
- package/lib/_utils/usePopper.js +11 -3
- package/lib/select/select.js +1 -0
- package/package.json +1 -1
package/es/_utils/usePopper.d.ts
CHANGED
|
@@ -22,6 +22,7 @@ export interface PopperProps {
|
|
|
22
22
|
trigger?: TriggerType | Array<TriggerType>;
|
|
23
23
|
clickToClose?: boolean;
|
|
24
24
|
isMobile?: boolean;
|
|
25
|
+
triggerScroll?: boolean;
|
|
25
26
|
onTrigger?: (trigger: TriggerType) => void;
|
|
26
27
|
onVisibleChange?: (visible: boolean) => void;
|
|
27
28
|
getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
|
package/es/_utils/usePopper.js
CHANGED
|
@@ -149,6 +149,8 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
149
149
|
_props$clickToClose = props.clickToClose,
|
|
150
150
|
clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
|
|
151
151
|
isMobile = props.isMobile,
|
|
152
|
+
_props$triggerScroll = props.triggerScroll,
|
|
153
|
+
triggerScroll = _props$triggerScroll === void 0 ? false : _props$triggerScroll,
|
|
152
154
|
_props$getTriggerElem = props.getTriggerElement,
|
|
153
155
|
getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
|
|
154
156
|
return locatorNode;
|
|
@@ -650,10 +652,16 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
650
652
|
useEffect(function () {
|
|
651
653
|
if (visible) {
|
|
652
654
|
var scrollAlign = debounce(function (e) {
|
|
653
|
-
var
|
|
654
|
-
|
|
655
|
+
var target = e.target;
|
|
656
|
+
var popperNode = popperRef.current;
|
|
657
|
+
var realDom = getRealDom(locatorRef, locatorElement);
|
|
658
|
+
var triggerNode = realDom ? getTriggerElement(realDom) : null;
|
|
659
|
+
var isPopperScroll = popperNode && target && (target === popperNode || popperNode.contains(target));
|
|
660
|
+
var isTriggerScroll = triggerNode && target && (target === triggerNode || triggerNode.contains(target)) && triggerScroll;
|
|
661
|
+
if (scrollHidden && !isPopperScroll && !isTriggerScroll) {
|
|
655
662
|
props.visible === undefined && setVisible(false);
|
|
656
663
|
onVisibleChange && onVisibleChange(false);
|
|
664
|
+
return;
|
|
657
665
|
}
|
|
658
666
|
alignPopper();
|
|
659
667
|
}, 10);
|
|
@@ -664,7 +672,7 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
664
672
|
document.removeEventListener('scroll', scrollAlign, true);
|
|
665
673
|
};
|
|
666
674
|
}
|
|
667
|
-
}, [alignPopper,
|
|
675
|
+
}, [visible, alignPopper, scrollHidden, onVisibleChange, props.visible, popperRef, locatorRef, locatorElement, getTriggerElement]);
|
|
668
676
|
useEffect(function () {
|
|
669
677
|
var realDom = getRealDom(locatorRef, locatorElement);
|
|
670
678
|
var triggerNode = getTriggerElement(realDom);
|
package/es/select/select.js
CHANGED
|
@@ -914,6 +914,7 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
914
914
|
popperStyle: catchStyle(),
|
|
915
915
|
defaultVisible: optionShow,
|
|
916
916
|
visible: optionShow,
|
|
917
|
+
triggerScroll: true,
|
|
917
918
|
onVisibleChange: handleVisibleChange,
|
|
918
919
|
clickToClose: !(isShowSearch && searchValue)
|
|
919
920
|
});
|
|
@@ -22,6 +22,7 @@ export interface PopperProps {
|
|
|
22
22
|
trigger?: TriggerType | Array<TriggerType>;
|
|
23
23
|
clickToClose?: boolean;
|
|
24
24
|
isMobile?: boolean;
|
|
25
|
+
triggerScroll?: boolean;
|
|
25
26
|
onTrigger?: (trigger: TriggerType) => void;
|
|
26
27
|
onVisibleChange?: (visible: boolean) => void;
|
|
27
28
|
getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
|
package/lib/_utils/usePopper.js
CHANGED
|
@@ -163,6 +163,8 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
163
163
|
_props$clickToClose = props.clickToClose,
|
|
164
164
|
clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
|
|
165
165
|
isMobile = props.isMobile,
|
|
166
|
+
_props$triggerScroll = props.triggerScroll,
|
|
167
|
+
triggerScroll = _props$triggerScroll === void 0 ? false : _props$triggerScroll,
|
|
166
168
|
_props$getTriggerElem = props.getTriggerElement,
|
|
167
169
|
getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
|
|
168
170
|
return locatorNode;
|
|
@@ -664,10 +666,16 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
664
666
|
(0, _react.useEffect)(function () {
|
|
665
667
|
if (visible) {
|
|
666
668
|
var scrollAlign = (0, _debounce.default)(function (e) {
|
|
667
|
-
var
|
|
668
|
-
|
|
669
|
+
var target = e.target;
|
|
670
|
+
var popperNode = popperRef.current;
|
|
671
|
+
var realDom = getRealDom(locatorRef, locatorElement);
|
|
672
|
+
var triggerNode = realDom ? getTriggerElement(realDom) : null;
|
|
673
|
+
var isPopperScroll = popperNode && target && (target === popperNode || popperNode.contains(target));
|
|
674
|
+
var isTriggerScroll = triggerNode && target && (target === triggerNode || triggerNode.contains(target)) && triggerScroll;
|
|
675
|
+
if (scrollHidden && !isPopperScroll && !isTriggerScroll) {
|
|
669
676
|
props.visible === undefined && setVisible(false);
|
|
670
677
|
onVisibleChange && onVisibleChange(false);
|
|
678
|
+
return;
|
|
671
679
|
}
|
|
672
680
|
alignPopper();
|
|
673
681
|
}, 10);
|
|
@@ -678,7 +686,7 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
678
686
|
document.removeEventListener('scroll', scrollAlign, true);
|
|
679
687
|
};
|
|
680
688
|
}
|
|
681
|
-
}, [alignPopper,
|
|
689
|
+
}, [visible, alignPopper, scrollHidden, onVisibleChange, props.visible, popperRef, locatorRef, locatorElement, getTriggerElement]);
|
|
682
690
|
(0, _react.useEffect)(function () {
|
|
683
691
|
var realDom = getRealDom(locatorRef, locatorElement);
|
|
684
692
|
var triggerNode = getTriggerElement(realDom);
|
package/lib/select/select.js
CHANGED
|
@@ -926,6 +926,7 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
926
926
|
popperStyle: catchStyle(),
|
|
927
927
|
defaultVisible: optionShow,
|
|
928
928
|
visible: optionShow,
|
|
929
|
+
triggerScroll: true,
|
|
929
930
|
onVisibleChange: handleVisibleChange,
|
|
930
931
|
clickToClose: !(isShowSearch && searchValue)
|
|
931
932
|
});
|