fix(list): list option support JSX preview (#1515)

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

src/cascader/demos/Cascader.stories.tsx

@@ -58,7 +58,7 @@ const defaultOptions = [
 ];
 const options = [...new Array(12)].map((_, index) => ({
   label: `第${index}条咸鱼`,
-  value: index,
+  value: index.toString(),
   childrens: [
     { label: '要', value: 'yes' },
     { label: '不要', value: 'no' },

src/cascader/style/index.less

@@ -18,9 +18,4 @@
     box-shadow: 0 8px 24px rgba(36, 46, 89, 0.1);
     .scrollbar(@x: hidden, @y: overlay);
   }
-  &--item--trigger {
-    & > .@{list-item-prefix-cls} {
-      margin-bottom: 0;
-    }
-  }
 }

src/list/demos/List.stories.tsx

@@ -10,6 +10,7 @@ import './style.less';
 import DragList from '../Drag';
 import Selection from '../Selection';
 import CascaderItem from '../inner/CascaderItem';
+import Popover from '../../popover';
 
 export default {
   title: 'Upgraded/List',
@@ -34,6 +35,19 @@ const options = [
 const Template: Story<ListProps> = (props) => {
   const [value, setValue] = useState([]);
   const [cascaderValue, setCascadervalue] = useState('1.1-1');
+  const wrapper = (e: React.ReactNode) => (
+    <Popover
+      placement="rightTop"
+      triggerStyle={{ display: 'initial' }}
+      content={
+        <div style={{ width: '200px', height: '200px', background: 'white', border: '1px solid black' }}>
+          <h3>preview</h3>
+        </div>
+      }
+    >
+      {e}
+    </Popover>
+  );
   return (
     <>
       <div className="demo-box">
@@ -69,6 +83,16 @@ const Template: Story<ListProps> = (props) => {
           </CascaderItem>
         </List>
       </div>
+      <div className="demo-box">
+        <h3>JSX render preview</h3>
+        <List>
+          <Item value="1" wrapper={wrapper}>
+            1
+          </Item>
+        </List>
+        <h3>option render preview</h3>
+        <List options={[{ label: '1', value: '1', wrapper }]} />
+      </div>
       <div className="demo-box">
         <List {...props}>
           <Item value="1" prefix={<PlusOutlined size="14px" />} suffix={<FilterOutlined size="14px" />}>

src/list/hooks/useCacheOptions.ts

@@ -37,7 +37,6 @@ const useCacheOptions = () => {
     if (val === '' || typeof val === 'undefined') {
       return undefined;
     }
-
     if (val?.includes('.')) {
       return (val as any)
         ?.split('.')

src/list/inner/CascaderItem.tsx

@@ -75,7 +75,7 @@ const CascaderItem: React.ForwardRefRenderFunction<
     return <></>;
   };
 
-  const PopoverRender = (trigger: React.ReactNode): React.ReactElement => {
+  const PopoverRender = (element: React.ReactNode): React.ReactElement => {
     if (!isEmpty(childrens) || React.isValidElement(children)) {
       return (
         <div className={prefixClsItem}>
@@ -85,13 +85,13 @@ const CascaderItem: React.ForwardRefRenderFunction<
             content={content()}
             getContainer={(node) => node || document.body}
           >
-            <div className={`${prefixClsItem}--trigger`}>{trigger as React.ReactElement}</div>
+            {element}
           </Popover>
         </div>
       );
     }
 
-    return trigger as React.ReactElement;
+    return <>{element}</>;
   };
   const renderItem = (
     <BaseItem
@@ -104,9 +104,10 @@ const CascaderItem: React.ForwardRefRenderFunction<
       onChange={noop}
       onClick={React.isValidElement(children) || !isEmpty(childrens) ? noop : onClick}
       selected={isSelected}
+      wrapper={PopoverRender}
     />
   );
-  return PopoverRender(renderItem);
+  return renderItem;
 };
 
 export default WithRef(CascaderItem);

src/list/inner/baseItem.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
-import React, { DOMAttributes } from 'react';
+import React, { DOMAttributes, ReactElement } from 'react';
 import { isEmpty, isString, noop } from 'lodash';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import { PREFIX } from '../constants';
 import { BaseItemProps } from '../interfance';
 import Tooltip from '../../tooltip';
 import WithRef from '../../utils/withRef';
 
-const defaultContentRender = (element: React.ReactNode | Element) => element;
+const defaultContentRender = (element: React.ReactNode | Element): React.ReactElement => element as React.ReactElement;
 const renderIcon = (className: string, prefix: React.ReactNode) => <span className={className}>{prefix}</span>;
 const BaseItem: React.ForwardRefRenderFunction<
   HTMLLIElement,
@@ -26,6 +26,7 @@ const BaseItem: React.ForwardRefRenderFunction<
     disabledTooltip,
     onClick,
     contentRender = defaultContentRender,
+    wrapper = defaultContentRender,
   } = props;
 
   const prefixCls = `${usePrefixCls(PREFIX)}--item`;
@@ -45,7 +46,7 @@ const BaseItem: React.ForwardRefRenderFunction<
   ) : (
     <>{content}</>
   );
-  return (
+  const renderElement = (
     <Tooltip
       disabled={!disabled || isEmpty(disabledTooltip)}
       strategy="fixed"
@@ -72,6 +73,8 @@ const BaseItem: React.ForwardRefRenderFunction<
       </li>
     </Tooltip>
   );
+
+  return wrapper(renderElement) as ReactElement;
 };
 
 export default WithRef(BaseItem);

src/list/interfance.ts

@@ -85,6 +85,8 @@ export interface OptionProps {
   disabledTooltip?: string;
   prefix?: string | React.ReactNode;
   suffix?: string | React.ReactNode;
+  wrapper?: (element: React.ReactNode) => React.ReactElement;
+
   [key: string]: unknown;
 }
 
@@ -116,15 +118,16 @@ export interface ItemProps
     | 'disabled'
     | 'selected'
     | 'disabledTooltip'
+    | 'wrapper'
   > {
   selectValue?: string | string[];
 }
 
-export interface BaseItemProps extends Pick<OptionProps, 'value' | 'disabled' | 'prefix' | 'suffix'> {
+export interface BaseItemProps extends Pick<OptionProps, 'value' | 'disabled' | 'prefix' | 'suffix' | 'wrapper'> {
   className?: string;
   style?: React.CSSProperties;
   label?: string | React.ReactNode;
-  contentRender?: (element: React.ReactNode) => React.ReactNode | Element;
+  contentRender?: (element: React.ReactNode) => React.ReactElement;
   children?: React.ReactNode;
   disabledTooltip?: string;
   selected?: boolean;

src/list/style/index.less

@@ -3,6 +3,7 @@
 @list-prefix-cls: ~'@{component-prefix}-list-new';
 @cascader-prefix-cls: ~'@{component-prefix}-cascader--new';
 @cascader-content-prefix-cls: ~'@{cascader-prefix-cls}--cascader--content';
+@popover-new__popcorn-prefix-cls: ~'@{component-prefix}-popover-new__popcorn';
 
 .@{cascader-content-prefix-cls} {
   &[data-popper-placement^='top'] {
@@ -46,6 +47,18 @@
     box-shadow: 0 8px 24px rgba(36, 46, 89, 0.1);
     .scrollbar(@x: hidden, @y: overlay);
     &--item {
+      margin-bottom: 4px;
+      .@{list-prefix-cls}--item {
+        margin-bottom: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .@{popover-new__popcorn-prefix-cls} {
+        display: inherit;
+      }
+    }
+    & > .@{list-prefix-cls}--item {
       margin-bottom: 4px;
       &:last-child {
         margin-bottom: 0;

src/popover/Popover.tsx

@@ -25,6 +25,8 @@ const Popover = (props: PopoverProps) => {
     overlayStyle,
     children,
     strategy = 'absolute',
+    triggerClassName,
+    triggerStyle,
     getContainer,
   } = props;
 
@@ -206,7 +208,12 @@ const Popover = (props: PopoverProps) => {
 
   // =============== refs =====================
   let triggerNode = (
-    <div className={`${prefixCls}__popcorn`} ref={(instance) => setReferenceELement(instance)} {...divRoles}>
+    <div
+      className={classNames(`${prefixCls}__popcorn`, triggerClassName)}
+      style={triggerStyle}
+      ref={(instance) => setReferenceELement(instance)}
+      {...divRoles}
+    >
       {children}
     </div>
   );

src/popover/interface.ts

@@ -107,4 +107,9 @@ export interface PopoverProps {
    * 显示隐藏的回掉
    */
   onVisibleChange?: (visible: boolean) => void;
+  /**
+   *
+   */
+  triggerStyle?: React.CSSProperties;
+  triggerClassName?: string;
 }