feat(popover): add distoryOnHide attribute (#1516)

Co-authored-by: berber1016 <c1094282069@gmail.com>

src/cascader/Cascader.tsx

@@ -103,6 +103,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
       <Popover
         content={renderOverlay()}
         trigger="click"
+        distoryOnHide={false}
         visible={visible}
         onVisibleChange={handVisibleChange}
         getContainer={getContainer}

src/list-picker/interfance.ts

@@ -39,6 +39,7 @@ export interface ListPickerProps extends Pick<ListProps, 'model' | 'disabled' |
   onConfim?: (value: string | string[] | undefined, options?: OptionProps | OptionProps[]) => void;
   placement?: Placement;
   overlayStyle?: React.CSSProperties;
+  overlayClassName?: string;
 }
 
 // export interface StaticListPickerProps extends Omit<ListProps, 'options'> {

src/list-picker/listPicker.tsx

@@ -8,7 +8,6 @@ import useControlledState from '../utils/hooks/useControlledState';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
 import { OptionProps } from '../list/interfance';
 import Button from '../button';
-// import Page from '../page';
 import { ListContext } from '../list/context';
 import useCacheOptions from '../list/hooks/useCacheOptions';
 
@@ -31,6 +30,7 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
     getContainer,
     placement = 'bottomLeft',
     overlayStyle,
+    overlayClassName,
     children,
     onConfim,
     confimText = '确定',
@@ -121,12 +121,13 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
   return (
     <ListContext.Provider value={{ value, model, onChange: handleChange, options, setOptions }}>
       <Popover
+        distoryOnHide={false}
         content={renderOverlay()}
         trigger={trigger}
         visible={visible}
         onVisibleChange={handVisibleChange}
         getContainer={getContainer}
-        overlayClassName={`${defaultPrefix}--content`}
+        overlayClassName={classNames(`${defaultPrefix}--content`, overlayClassName)}
         placement={placement}
         overlayStyle={overlayStyle}
       >

src/list/List.tsx

@@ -8,7 +8,6 @@ import Item from './Item';
 import { convertChildrenToData, isCascader, isMultipe } from './util';
 import WithRef from '../utils/withRef';
 import './style';
-import Popover from '../popover';
 import { ListContext } from './context';
 import useValue from './hooks/useValue';
 import useCacheOptions from './hooks/useCacheOptions';
@@ -37,10 +36,7 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
     prefix,
     suffix,
     onChange: controlledOnChange,
-    showPreview,
     renderItem,
-    previewRender,
-    previewRenderContainer,
   } = props;
 
   const prefixCls = usePrefixCls(PREFIX);
@@ -97,24 +93,6 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
     }
   };
 
-  const renderPreview = (option: OptionProps, content: React.ReactElement) => {
-    if (showPreview) {
-      return (
-        <div className={`${prefixCls}--preview`}>
-          <Popover
-            placement="rightTop"
-            strategy="fixed"
-            getContainer={previewRenderContainer}
-            content={previewRender?.(option)}
-            overlayClassName={`${prefixCls}--preview--overlay`}
-          >
-            {content}
-          </Popover>
-        </div>
-      );
-    }
-    return content;
-  };
   const renderChildren = (option: OptionProps) => {
     const renderedItem = renderItem?.(option);
     return (
@@ -138,7 +116,7 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
   const renderChildrens = (child: React.ReactNode[] | OptionProps[]) => {
     // options render
     if (!isEmpty(initOptions)) {
-      return (child as OptionProps[])?.map((option: OptionProps) => renderPreview(option, renderChildren(option)));
+      return (child as OptionProps[])?.map((option: OptionProps) => renderChildren(option));
     }
     // childrens render
     return (child as React.ReactNode[])?.map(

src/list/inner/CascaderItem.tsx

@@ -84,6 +84,7 @@ const CascaderItem: React.ForwardRefRenderFunction<
             overlayClassName={popoverClassName}
             content={content()}
             getContainer={(node) => node || document.body}
+            distoryOnHide={false}
           >
             {element}
           </Popover>

src/list/interfance.ts

@@ -61,12 +61,6 @@ export interface ListProps {
    * 仅支持options 形式。自定义 item render 自定义render时会劫持onClick方法提供给List来使用
    */
   renderItem?: (option: OptionProps) => React.ReactElement;
-  /**
-   * 是否显示preview 弹出面板 目前仅支持了options参数形式
-   */
-  showPreview?: boolean;
-  previewRender?: (option: OptionProps) => React.ReactNode;
-  previewRenderContainer?: (node: HTMLElement) => HTMLElement;
   /**
    * empty
    */

src/popover/Popover.tsx

@@ -28,6 +28,7 @@ const Popover = (props: PopoverProps) => {
     triggerClassName,
     triggerStyle,
     getContainer,
+    distoryOnHide = true,
   } = props;
 
   const prefixCls = usePrefixCls('popover-new', customPrefixCls);
@@ -230,14 +231,19 @@ const Popover = (props: PopoverProps) => {
     triggerNode = React.cloneElement(child as React.ReactElement, cloneProps);
   }
 
-  return (
+  const renderContent = (
     <>
-      {triggerNode}
       {typeof getContainer === 'function'
         ? ReactDOM.createPortal(contentRender, getContainer(referenceElement as HTMLDivElement))
         : contentRender}
     </>
   );
+  return (
+    <>
+      {triggerNode}
+      {distoryOnHide ? visible && renderContent : renderContent}
+    </>
+  );
 };
 
 export default Popover;

src/popover/interface.ts

@@ -112,4 +112,5 @@ export interface PopoverProps {
    */
   triggerStyle?: React.CSSProperties;
   triggerClassName?: string;
+  distoryOnHide?: boolean;
 }

src/select/Select.tsx

@@ -112,6 +112,7 @@ const Select: React.FC<SelectProps> = (props) => {
   return (
     <ListContext.Provider value={{ value, onChange: handleChange }}>
       <Popover
+        distoryOnHide={false}
         content={renderOverlay()}
         trigger="click"
         visible={visible}