x-ui-design 0.8.12 → 0.8.14
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/esm/types/components/Popover/Popover.d.ts +1 -1
- package/dist/esm/types/types/popover.d.ts +1 -0
- package/dist/index.esm.js +15 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +15 -10
- package/dist/index.js.map +1 -1
- package/lib/components/Popover/Popover.tsx +27 -17
- package/lib/types/popover.ts +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { PopoverProps } from "../../types/popover";
|
|
3
3
|
import './style.css';
|
|
4
|
-
declare const Popover: ({ prefixCls, content, children, trigger, placement, open, title, overlayClassName, overlayStyle, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
|
|
4
|
+
declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, overlayClassName, overlayStyle, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
|
|
5
5
|
export default Popover;
|
|
@@ -9,6 +9,7 @@ export interface PopoverProps {
|
|
|
9
9
|
overlayStyle?: CSSProperties;
|
|
10
10
|
overlayClassName?: string;
|
|
11
11
|
title?: string | ReactNode;
|
|
12
|
+
visible?: boolean;
|
|
12
13
|
onVisibleChange?: ((open: boolean) => void) | undefined;
|
|
13
14
|
getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
|
|
14
15
|
}
|
package/dist/index.esm.js
CHANGED
|
@@ -4907,6 +4907,7 @@ const Popover = ({
|
|
|
4907
4907
|
trigger = "click",
|
|
4908
4908
|
placement = "bottom",
|
|
4909
4909
|
open,
|
|
4910
|
+
visible,
|
|
4910
4911
|
title,
|
|
4911
4912
|
overlayClassName = '',
|
|
4912
4913
|
overlayStyle = {},
|
|
@@ -4916,8 +4917,8 @@ const Popover = ({
|
|
|
4916
4917
|
const triggerRef = useRef(null);
|
|
4917
4918
|
const popupRef = useRef(null);
|
|
4918
4919
|
const [innerOpen, setInnerOpen] = useState(false);
|
|
4919
|
-
const
|
|
4920
|
-
const
|
|
4920
|
+
const [hover, setHover] = useState(false);
|
|
4921
|
+
const isOpen = visible !== undefined ? visible : open !== undefined ? open : innerOpen;
|
|
4921
4922
|
const {
|
|
4922
4923
|
dropdownPosition,
|
|
4923
4924
|
shouldShowAbove
|
|
@@ -4930,18 +4931,22 @@ const Popover = ({
|
|
|
4930
4931
|
getPopupContainer: getPopupContainer?.(triggerRef.current)
|
|
4931
4932
|
});
|
|
4932
4933
|
const toggle = () => {
|
|
4933
|
-
|
|
4934
|
+
const newState = !isOpen;
|
|
4935
|
+
onVisibleChange?.(newState);
|
|
4936
|
+
setInnerOpen(newState);
|
|
4934
4937
|
};
|
|
4935
4938
|
const show = () => {
|
|
4936
4939
|
setHover(true);
|
|
4937
4940
|
if (trigger === "hover") {
|
|
4938
|
-
onVisibleChange
|
|
4941
|
+
onVisibleChange?.(true);
|
|
4942
|
+
setInnerOpen(true);
|
|
4939
4943
|
}
|
|
4940
4944
|
};
|
|
4941
4945
|
const hide = () => {
|
|
4942
4946
|
setHover(false);
|
|
4943
4947
|
if (trigger === "hover") {
|
|
4944
|
-
onVisibleChange
|
|
4948
|
+
onVisibleChange?.(false);
|
|
4949
|
+
setInnerOpen(false);
|
|
4945
4950
|
}
|
|
4946
4951
|
};
|
|
4947
4952
|
const childProps = trigger === "click" ? {
|
|
@@ -4957,20 +4962,20 @@ const Popover = ({
|
|
|
4957
4962
|
}, /*#__PURE__*/React.createElement("div", _extends({
|
|
4958
4963
|
className: `${prefixCls}-wrapper-content`
|
|
4959
4964
|
}, childProps), children), isOpen && /*#__PURE__*/React.createElement(ConditionalWrapper, {
|
|
4960
|
-
condition: getPopupContainer
|
|
4965
|
+
condition: !!getPopupContainer,
|
|
4961
4966
|
wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
|
|
4962
4967
|
}, /*#__PURE__*/React.createElement("div", {
|
|
4963
4968
|
ref: popupRef,
|
|
4964
|
-
className: clsx(prefixCls, `${prefixCls}-${placement}`,
|
|
4969
|
+
className: clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName),
|
|
4965
4970
|
style: {
|
|
4966
|
-
zIndex:
|
|
4971
|
+
zIndex: hover ? 1000 : 1,
|
|
4967
4972
|
...overlayStyle,
|
|
4968
4973
|
position: "absolute",
|
|
4969
4974
|
...dropdownPosition
|
|
4970
4975
|
}
|
|
4971
|
-
}, title
|
|
4976
|
+
}, title && /*#__PURE__*/React.createElement("div", {
|
|
4972
4977
|
className: `${prefixCls}-title`
|
|
4973
|
-
}, title)
|
|
4978
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
4974
4979
|
className: `${prefixCls}-inner`
|
|
4975
4980
|
}, content), /*#__PURE__*/React.createElement("div", {
|
|
4976
4981
|
className: `${prefixCls}-arrow ${shouldShowAbove ? 'bottom' : ''}`
|