fix: 手风琴适配输入框组

KarinJS · Feb 18, 2025 · 1e33a72 · 1e33a72
1 parent 0fe8833
commit 1e33a72
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 29 deletions.
diff --git a/packages/core/src/types/components/all.ts b/packages/core/src/types/components/all.ts
@@ -1,7 +1,13 @@
-import { DividerProps } from './divider'
-import { InputProps } from './input'
-import { SwitchProps } from './switch'
-import { CheckboxProps, CheckboxGroupProps } from './checkbox'
-import { RadioGroupProps } from './radioGroup'
+import type { DividerProps } from './divider'
+import type { InputGroupProps, InputProps } from './input'
+import type { SwitchProps } from './switch'
+import type { CheckboxProps, CheckboxGroupProps } from './checkbox'
+import type { RadioGroupProps } from './radioGroup'
 
-export type Children = InputProps | SwitchProps | DividerProps | CheckboxProps | CheckboxGroupProps | RadioGroupProps
+export type Children = InputProps
+  | SwitchProps
+  | DividerProps
+  | CheckboxProps
+  | CheckboxGroupProps
+  | RadioGroupProps
+  | InputGroupProps
diff --git a/packages/web/src/components/heroui/accordions-pro.tsx b/packages/web/src/components/heroui/accordions-pro.tsx
@@ -3,13 +3,12 @@ import {
   Accordion as HeroAccordion,
   AccordionItem as HeroAccordionItem
 } from '@heroui/accordion'
-import { Input } from './inputs'
+import { Input, InputGroup } from './inputs'
 import { Switch } from './switchs'
 import { Divider } from './dividers'
 import { RadioGroup } from './radioGroups'
 import { CheckboxGroup } from './checkboxs'
 import type { JSX } from 'react'
-import type { Result } from './types'
 import type { AccordionProProps, AccordionKV } from 'node-karin'
 
 /**
@@ -21,7 +20,7 @@ import type { AccordionProProps, AccordionKV } from 'node-karin'
  */
 export const AccordionPro = (
   props: AccordionProProps,
-  result: Result<'accordion'>
+  result: Record<string, any>
 ): JSX.Element => {
   let { componentType: _, key, data, label, className, children, ...options } = props
   const [forceKey, setForceKey] = useState(0)
@@ -53,26 +52,26 @@ export const AccordionPro = (
         const opt = { ...options, key: strKey, defaultValue: data[i][options.key] || options.defaultValue }
         return Input(opt, {}, (value) => {
           data[i][options.key] = value
-          if (!result[key][i]) result[key][i] = {};
-          (result[key][i] as Record<string, AccordionKV>)[options.key] = value
+          if (!result[key][i]) result[key][i] = {}
+          result[key][i][options.key] = value
         })
       }
 
       if (options.componentType === 'switch') {
         const opt = { ...options, key: strKey, defaultSelected: data[i][options.key] ?? options.defaultSelected }
         return Switch(opt, {}, (value) => {
           data[i][options.key] = value
-          if (!result[key][i]) result[key][i] = {};
-          (result[key][i] as Record<string, AccordionKV>)[options.key] = value
+          if (!result[key][i]) result[key][i] = {}
+          result[key][i][options.key] = value
         })
       }
 
       if (options.componentType === 'radio-group') {
         const opt = { ...options, key: strKey, defaultValue: data[i][options.key] ?? options.defaultValue }
         return RadioGroup(opt, {}, (value) => {
           data[i][options.key] = value
-          if (!result[key][i]) result[key][i] = {};
-          (result[key][i] as Record<string, AccordionKV>)[options.key] = value
+          if (!result[key][i]) result[key][i] = {}
+          result[key][i][options.key] = value
         })
       }
 
@@ -81,21 +80,27 @@ export const AccordionPro = (
         if (!result[key][i]) result[key][i] = {}
         return CheckboxGroup(opt, {}, (subKey, value) => {
           data[i][options.key][subKey] = value
-          if (!((result[key][i] as Record<string, AccordionKV>
-          )[options.key] as Record<string, boolean>)) {
-            ((result[key][i] as Record<string, AccordionKV>
-            )[options.key] as Record<string, boolean>) = {}
+          if (!result[key][i][options.key]) {
+            result[key][i][options.key] = {}
           }
 
-          ((result[key][i] as Record<string, AccordionKV>
-          )[options.key] as Record<string, boolean>)[subKey] = value
+          result[key][i][options.key][subKey] = value
         })
       }
 
       if (options.componentType === 'divider') {
         return Divider({ ...options, key: strKey })
       }
 
+      if (options.componentType === 'input-group') {
+        const opt = { ...options, key: strKey }
+        return InputGroup(opt, {}, (index, value) => {
+          data[i][options.key][index] = value
+          if (!result[key][i]) result[key][i] = {}
+          result[key][i][options.key][index] = value
+        })
+      }
+
       return null
     }).filter(Boolean) // 过滤掉所有的null和undefined
 

diff --git a/packages/web/src/components/heroui/accordions.tsx b/packages/web/src/components/heroui/accordions.tsx
@@ -2,13 +2,12 @@ import {
   Accordion as HeroAccordion,
   AccordionItem as HeroAccordionItem
 } from '@heroui/accordion'
-import { Input } from './inputs'
+import { Input, InputGroup } from './inputs'
 import { Switch } from './switchs'
 import { Divider } from './dividers'
 import { RadioGroup } from './radioGroups'
 import { CheckboxGroup } from './checkboxs'
 import type { JSX } from 'react'
-import type { Result } from './types'
 import type { AccordionProps, AccordionKV } from 'node-karin'
 /**
  * 渲染手风琴组件
@@ -18,7 +17,7 @@ import type { AccordionProps, AccordionKV } from 'node-karin'
  */
 export const Accordion = (
   props: AccordionProps,
-  result: Result<'accordion'>
+  result: Record<string, any>
 ): JSX.Element => {
   let { componentType: _, key, className, children, label, ...options } = props
   if (!Array.isArray(children)) children = []
@@ -47,6 +46,10 @@ export const Accordion = (
         })
         return
       }
+      if (child.componentType === 'input-group') {
+        kv[child.key] = child.data
+        return
+      }
     })
     result[key].push(kv as AccordionKV)
   })
@@ -76,33 +79,38 @@ export const Accordion = (
                 {itemChildren.map((options) => {
                   if (options.componentType === 'input') {
                     return Input(options, {}, (value) => {
-                      (result[key][index] as Record<string, AccordionKV>)[options.key] = value
+                      result[key][index][options.key] = value
                     })
                   }
 
                   if (options.componentType === 'switch') {
                     return Switch(options, {}, (value) => {
-                      (result[key][index] as Record<string, AccordionKV>)[options.key] = value
+                      result[key][index][options.key] = value
                     })
                   }
 
                   if (options.componentType === 'radio-group') {
                     return RadioGroup(options, {}, (value) => {
-                      (result[key][index] as Record<string, AccordionKV>)[options.key] = value
+                      result[key][index][options.key] = value
                     })
                   }
 
                   if (options.componentType === 'checkbox-group') {
                     (result[key][index] as Record<string, AccordionKV>)[options.key] = {}
                     return CheckboxGroup(options, {}, (subKey, value) => {
-                      ((result[key][index] as Record<string, AccordionKV>
-                      )[options.key] as Record<string, boolean>)[subKey] = value
+                      result[key][index][options.key][subKey] = value
                     })
                   }
 
                   if (options.componentType === 'divider') {
                     return Divider(options)
                   }
+
+                  if (options.componentType === 'input-group') {
+                    return InputGroup(options, {}, (i, value) => {
+                      result[key][index][options.key][i] = value
+                    })
+                  }
                 })}
               </div>
             </HeroAccordionItem>