Commit f95eb2df authored by Joel's avatar Joel

feat: filed fold

parent cbb298cc
...@@ -2,11 +2,14 @@ ...@@ -2,11 +2,14 @@
import type { FC } from 'react' import type { FC } from 'react'
import React from 'react' import React from 'react'
import cn from 'classnames' import cn from 'classnames'
import { useBoolean } from 'ahooks'
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general' import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
import TooltipPlus from '@/app/components/base/tooltip-plus' import TooltipPlus from '@/app/components/base/tooltip-plus'
import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
type Props = { type Props = {
title: string title: string
tooltip?: string tooltip?: string
supportFold?: boolean
children?: JSX.Element | string | null children?: JSX.Element | string | null
operations?: JSX.Element operations?: JSX.Element
inline?: boolean inline?: boolean
...@@ -18,7 +21,12 @@ const Filed: FC<Props> = ({ ...@@ -18,7 +21,12 @@ const Filed: FC<Props> = ({
children, children,
operations, operations,
inline, inline,
supportFold,
}) => { }) => {
const [fold, {
toggle: toggleFold,
}] = useBoolean(true)
const FoldHandler = fold ? ChevronRight : ChevronDown
return ( return (
<div className={cn(inline && 'flex justify-between items-center')}> <div className={cn(inline && 'flex justify-between items-center')}>
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
...@@ -31,9 +39,14 @@ const Filed: FC<Props> = ({ ...@@ -31,9 +39,14 @@ const Filed: FC<Props> = ({
)} )}
</div> </div>
{operations && <div>{operations}</div>} <div className='flex'>
{operations && <div>{operations}</div>}
{supportFold && (
<FoldHandler className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={toggleFold} />
)}
</div>
</div> </div>
{children && <div className={cn(!inline && 'mt-1')}>{children}</div>} {children && (!supportFold || (supportFold && !fold)) && <div className={cn(!inline && 'mt-1')}>{children}</div>}
</div> </div>
) )
} }
......
...@@ -61,6 +61,7 @@ const Panel: FC = () => { ...@@ -61,6 +61,7 @@ const Panel: FC = () => {
</Field> </Field>
<Field <Field
title={t(`${i18nPrefix}.advancedSetting`)} title={t(`${i18nPrefix}.advancedSetting`)}
supportFold
> >
<AdvancedSetting <AdvancedSetting
instruction={inputs.instruction} instruction={inputs.instruction}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment