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.
@@ -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 isOpen = open !== undefined ? open : innerOpen;
4920
- const [_hover, setHover] = useState(isOpen);
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
- onVisibleChange ? onVisibleChange(!isOpen) : setInnerOpen(!isOpen);
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 ? onVisibleChange(true) : setInnerOpen(true);
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 ? onVisibleChange(false) : setInnerOpen(false);
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 !== undefined,
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}`, `${overlayClassName}`),
4969
+ className: clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName),
4965
4970
  style: {
4966
- zIndex: _hover ? 1000 : 1,
4971
+ zIndex: hover ? 1000 : 1,
4967
4972
  ...overlayStyle,
4968
4973
  position: "absolute",
4969
4974
  ...dropdownPosition
4970
4975
  }
4971
- }, title ? /*#__PURE__*/React.createElement("div", {
4976
+ }, title && /*#__PURE__*/React.createElement("div", {
4972
4977
  className: `${prefixCls}-title`
4973
- }, title) : null, /*#__PURE__*/React.createElement("div", {
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' : ''}`