feat: ✨新增 LTrigger 的 children 为函数

llq0802 · May 16, 2024 · eac3761 · eac3761
1 parent e07102d
commit eac3761
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 28 deletions.
diff --git a/src/Trigger/demos/Demo8.tsx b/src/Trigger/demos/Demo8.tsx
@@ -1,13 +1,23 @@
-import ScrollTableSelect from './components/ScrollTableSelect';
+import { LTrigger } from 'lighting-design';
 
 export default function Demo8() {
   return (
     <div>
       <h5>无线滚动</h5>
-      {/* <LTrigger width="50%" overlayArrow>
-          <MyTable2></MyTable2>
-        </LTrigger> */}
-      <ScrollTableSelect></ScrollTableSelect>
+      <LTrigger>
+        {(props) => {
+          console.log('==props====>', props);
+          return (
+            <div
+              style={{
+                height: '100px',
+              }}
+            >
+              这里也可以配合虚拟列表实现大量数据{' '}
+            </div>
+          );
+        }}
+      </LTrigger>
     </div>
   );
 }
diff --git a/src/Trigger/index.md b/src/Trigger/index.md
@@ -39,7 +39,7 @@ demo:
 
 <code src='./demos/Demo2.tsx' ></code>
 
-### 无线滚动
+### children 为函数
 
 <code src='./demos/Demo8.tsx' ></code>
 
@@ -95,7 +95,7 @@ import { LTrigger } from 'lighting-design';
 | tagRender         | 自定义渲染 tag `mode=tag`模式下生效                                                             | `(props) => ReactElement \| JSXElementConstructor`                                    | `-`                                 |
 | onChange          | 受控, value 变化时，调用此函数 , **会透传给子组件**                                             | `function(value)`                                                                     | `-`                                 |
 | getPopupContainer | 控制渲染到的节点。默认渲染到 body 上                                                            | `(triggerNode: HTMLElement) => HTMLElement`                                           | `() => document.body`               |
-| children          | children 组件会接受到 `open`，`setOpen`，`value`，`onChange` 等参数                             | `ReactElement`                                                                        | `-`                                 |
+| children          | children 组件或函数会接受到 `open`，`setOpen`，`value`，`onChange` 等参数                       | `ReactNode \| (props) => ReactNode`                                                   | `-`                                 |
 
 ### mode 在子组件中使用时, 子组件 onChange 的调用方式：
 

diff --git a/src/Trigger/index.tsx b/src/Trigger/index.tsx
@@ -18,7 +18,7 @@ const LTrigger: FC<LTriggerProps> = (props) => {
     disabled = false,
     overlayArrow = false,
     destroyOnHide = false,
-    mode: outMode = 'default',
+    mode: outMode = 'radio',
     width = 250,
     variant,
     suffixIcon,
@@ -56,14 +56,8 @@ const LTrigger: FC<LTriggerProps> = (props) => {
   const stateLabel: any = state?.[labelKey];
   const stateValue = state?.[valueKey];
 
-  const childMode = useMemo(() => {
-    if (outMode === 'default') return 'radio';
-    if (outMode === 'tag') return 'radioTag';
-    return outMode;
-  }, []);
-
   const selectMode = useMemo(() => {
-    if (outMode === 'default' || outMode === 'radio' || outMode === 'checkbox') {
+    if (outMode === 'radio' || outMode === 'checkbox') {
       return void 0;
     }
     return 'multiple';
@@ -92,17 +86,21 @@ const LTrigger: FC<LTriggerProps> = (props) => {
     />
   );
 
+  const contentProps = {
+    // @ts-ignore
+    value: labelInValue ? state : stateValue,
+    onChange: setState,
+    open: isOpen,
+    setOpen: setIsOpen,
+    labelInValue,
+    fieldNames,
+    mode: outMode,
+  };
+
   const content = isValidElement(children)
-    ? cloneElement(children, {
-        // @ts-ignore
-        value: labelInValue ? state : stateValue,
-        onChange: setState,
-        open: isOpen,
-        setOpen: setIsOpen,
-        labelInValue,
-        fieldNames,
-        mode: childMode,
-      })
+    ? cloneElement(children, contentProps)
+    : typeof children === 'function'
+    ? children?.(contentProps)
     : children;
 
   return (

diff --git a/src/Trigger/interface.ts b/src/Trigger/interface.ts
@@ -1,7 +1,7 @@
 import type { PopoverProps, SelectProps } from 'antd';
 import type { ReactNode } from 'react';
 
-export type LTriggerMode = 'checkboxTag' | 'radioTag' | 'checkbox' | 'radio' | 'tag' | 'default';
+export type LTriggerMode = 'checkboxTag' | 'radioTag' | 'checkbox' | 'radio';
 
 export type LTriggerProps = {
   maxTagCount?: number | 'responsive';
@@ -92,13 +92,24 @@ export type LTriggerProps = {
     props: Record<string, any>,
   ) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
   /**
-   * children 组件
+   * children 组件 或 函数返回一个组件
    * - 会接受到 open，setOpen，value，onChange
    * - 必须在 children 组件中绑定 value，onChange 才会收集到数据
    * @see 官网 https://llq0802.github.io/lighting-design/latest LTriggerProps
    */
   // children: ReactElement<any, string | JSXElementConstructor<any>>;
-  children: ReactNode;
+  children:
+    | ReactNode
+    | ((props: {
+        // @ts-ignore
+        value: any;
+        onChange: any;
+        open: boolean;
+        setOpen: any;
+        labelInValue: boolean;
+        fieldNames: Record<string, any>;
+        mode: LTriggerMode;
+      }) => ReactNode);
   selectProps?: SelectProps;
   popoverProps?: PopoverProps;
 } & Pick<