mirror of https://github.com/langgenius/dify.git
feat/TanStack-Form (#18346)
This commit is contained in:
Wu Tianwei
GitHub
parent
efe5db38ee
commit
1e7418095f
|
|
@ -0,0 +1,82 @@
|
|||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import ConfigSelect from './index'
|
||||
|
||||
jest.mock('react-sortablejs', () => ({
|
||||
ReactSortable: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
}))
|
||||
|
||||
jest.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}))
|
||||
|
||||
describe('ConfigSelect Component', () => {
|
||||
const defaultProps = {
|
||||
options: ['Option 1', 'Option 2'],
|
||||
onChange: jest.fn(),
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it('renders all options', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
|
||||
defaultProps.options.forEach((option) => {
|
||||
expect(screen.getByDisplayValue(option)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('renders add button', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
|
||||
expect(screen.getByText('appDebug.variableConfig.addOption')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles option deletion', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
const optionContainer = screen.getByDisplayValue('Option 1').closest('div')
|
||||
const deleteButton = optionContainer?.querySelector('div[role="button"]')
|
||||
|
||||
if (!deleteButton) return
|
||||
fireEvent.click(deleteButton)
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(['Option 2'])
|
||||
})
|
||||
|
||||
it('handles adding new option', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
const addButton = screen.getByText('appDebug.variableConfig.addOption')
|
||||
|
||||
fireEvent.click(addButton)
|
||||
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith([...defaultProps.options, ''])
|
||||
})
|
||||
|
||||
it('applies focus styles on input focus', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
const firstInput = screen.getByDisplayValue('Option 1')
|
||||
|
||||
fireEvent.focus(firstInput)
|
||||
|
||||
expect(firstInput.closest('div')).toHaveClass('border-components-input-border-active')
|
||||
})
|
||||
|
||||
it('applies delete hover styles', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
const optionContainer = screen.getByDisplayValue('Option 1').closest('div')
|
||||
const deleteButton = optionContainer?.querySelector('div[role="button"]')
|
||||
|
||||
if (!deleteButton) return
|
||||
fireEvent.mouseEnter(deleteButton)
|
||||
expect(optionContainer).toHaveClass('border-components-input-border-destructive')
|
||||
})
|
||||
|
||||
it('renders empty state correctly', () => {
|
||||
render(<ConfigSelect options={[]} onChange={defaultProps.onChange} />)
|
||||
|
||||
expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
|
||||
expect(screen.getByText('appDebug.variableConfig.addOption')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
|
@ -51,7 +51,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
|
|||
<RiDraggable className='handle h-4 w-4 cursor-grab text-text-quaternary' />
|
||||
<input
|
||||
key={index}
|
||||
type="input"
|
||||
type='input'
|
||||
value={o || ''}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value
|
||||
|
|
@ -67,6 +67,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
|
|||
onBlur={() => setFocusID(null)}
|
||||
/>
|
||||
<div
|
||||
role='button'
|
||||
className='absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
|
||||
onClick={() => {
|
||||
onChange(options.filter((_, i) => index !== i))
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
const IndeterminateIcon = () => {
|
||||
return (
|
||||
<div data-testid='indeterminate-icon'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2.5 6H9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default IndeterminateIcon
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="check">
|
||||
<path id="Vector 1" d="M2.5 6H9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 217 B |
|
|
@ -1,10 +0,0 @@
|
|||
.mixed {
|
||||
background: var(--color-components-checkbox-bg) url(./assets/mixed.svg) center center no-repeat;
|
||||
background-size: 12px 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.checked.disabled {
|
||||
background-color: #d0d5dd;
|
||||
border-color: #d0d5dd;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import Checkbox from './index'
|
||||
|
||||
describe('Checkbox Component', () => {
|
||||
const mockProps = {
|
||||
id: 'test',
|
||||
}
|
||||
|
||||
it('renders unchecked checkbox by default', () => {
|
||||
render(<Checkbox {...mockProps} />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toBeInTheDocument()
|
||||
expect(checkbox).not.toHaveClass('bg-components-checkbox-bg')
|
||||
})
|
||||
|
||||
it('renders checked checkbox when checked prop is true', () => {
|
||||
render(<Checkbox {...mockProps} checked />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toHaveClass('bg-components-checkbox-bg')
|
||||
expect(screen.getByTestId('check-icon-test')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders indeterminate state correctly', () => {
|
||||
render(<Checkbox {...mockProps} indeterminate />)
|
||||
expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles click events when not disabled', () => {
|
||||
const onCheck = jest.fn()
|
||||
render(<Checkbox {...mockProps} onCheck={onCheck} />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
|
||||
fireEvent.click(checkbox)
|
||||
expect(onCheck).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('does not handle click events when disabled', () => {
|
||||
const onCheck = jest.fn()
|
||||
render(<Checkbox {...mockProps} disabled onCheck={onCheck} />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
|
||||
fireEvent.click(checkbox)
|
||||
expect(onCheck).not.toHaveBeenCalled()
|
||||
expect(checkbox).toHaveClass('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('applies custom className when provided', () => {
|
||||
const customClass = 'custom-class'
|
||||
render(<Checkbox {...mockProps} className={customClass} />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toHaveClass(customClass)
|
||||
})
|
||||
|
||||
it('applies correct styles for disabled checked state', () => {
|
||||
render(<Checkbox {...mockProps} checked disabled />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled-checked')
|
||||
expect(checkbox).toHaveClass('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('applies correct styles for disabled unchecked state', () => {
|
||||
render(<Checkbox {...mockProps} disabled />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled')
|
||||
expect(checkbox).toHaveClass('cursor-not-allowed')
|
||||
})
|
||||
})
|
||||
|
|
@ -1,23 +1,38 @@
|
|||
import { RiCheckLine } from '@remixicon/react'
|
||||
import s from './index.module.css'
|
||||
import cn from '@/utils/classnames'
|
||||
import IndeterminateIcon from './assets/indeterminate-icon'
|
||||
|
||||
type CheckboxProps = {
|
||||
id?: string
|
||||
checked?: boolean
|
||||
onCheck?: () => void
|
||||
className?: string
|
||||
disabled?: boolean
|
||||
mixed?: boolean
|
||||
indeterminate?: boolean
|
||||
}
|
||||
|
||||
const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProps) => {
|
||||
if (!checked) {
|
||||
const Checkbox = ({
|
||||
id,
|
||||
checked,
|
||||
onCheck,
|
||||
className,
|
||||
disabled,
|
||||
indeterminate,
|
||||
}: CheckboxProps) => {
|
||||
const checkClassName = (checked || indeterminate)
|
||||
? 'bg-components-checkbox-bg text-components-checkbox-icon hover:bg-components-checkbox-bg-hover'
|
||||
: 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover'
|
||||
const disabledClassName = (checked || indeterminate)
|
||||
? 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked'
|
||||
: 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled'
|
||||
|
||||
return (
|
||||
<div
|
||||
id={id}
|
||||
className={cn(
|
||||
'h-4 w-4 cursor-pointer rounded-[4px] border border-components-checkbox-border bg-components-checkbox-bg-unchecked shadow-xs hover:border-components-checkbox-border-hover',
|
||||
mixed ? s.mixed : 'hover:bg-components-checkbox-bg-unchecked-hover',
|
||||
disabled && 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled',
|
||||
'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] shadow-xs shadow-shadow-shadow-3',
|
||||
checkClassName,
|
||||
disabled && disabledClassName,
|
||||
className,
|
||||
)}
|
||||
onClick={() => {
|
||||
|
|
@ -25,24 +40,10 @@ const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProp
|
|||
return
|
||||
onCheck?.()
|
||||
}}
|
||||
></div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] bg-components-checkbox-bg text-components-checkbox-icon shadow-xs hover:bg-components-checkbox-bg-hover',
|
||||
disabled && 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked',
|
||||
className,
|
||||
)}
|
||||
onClick={() => {
|
||||
if (disabled)
|
||||
return
|
||||
|
||||
onCheck?.()
|
||||
}}
|
||||
data-testid={`checkbox-${id}`}
|
||||
>
|
||||
<RiCheckLine className={cn('h-3 w-3')} />
|
||||
{!checked && indeterminate && <IndeterminateIcon />}
|
||||
{checked && <RiCheckLine className='h-3 w-3' data-testid={`check-icon-${id}`} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import cn from '@/utils/classnames'
|
||||
import { useFieldContext } from '../..'
|
||||
import Checkbox from '../../../checkbox'
|
||||
|
||||
type CheckboxFieldProps = {
|
||||
label: string;
|
||||
labelClassName?: string;
|
||||
}
|
||||
|
||||
const CheckboxField = ({
|
||||
label,
|
||||
labelClassName,
|
||||
}: CheckboxFieldProps) => {
|
||||
const field = useFieldContext<boolean>()
|
||||
|
||||
return (
|
||||
<div className='flex gap-2'>
|
||||
<div className='flex h-6 shrink-0 items-center'>
|
||||
<Checkbox
|
||||
id={field.name}
|
||||
checked={field.state.value}
|
||||
onCheck={() => {
|
||||
field.handleChange(!field.state.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
htmlFor={field.name}
|
||||
className={cn(
|
||||
'system-sm-medium grow cursor-pointer pt-1 text-text-secondary',
|
||||
labelClassName,
|
||||
)}
|
||||
onClick={() => {
|
||||
field.handleChange(!field.state.value)
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CheckboxField
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react'
|
||||
import { useFieldContext } from '../..'
|
||||
import Label from '../label'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { InputNumberProps } from '../../../input-number'
|
||||
import { InputNumber } from '../../../input-number'
|
||||
|
||||
type TextFieldProps = {
|
||||
label: string
|
||||
isRequired?: boolean
|
||||
showOptional?: boolean
|
||||
tooltip?: string
|
||||
className?: string
|
||||
labelClassName?: string
|
||||
} & Omit<InputNumberProps, 'id' | 'value' | 'onChange' | 'onBlur'>
|
||||
|
||||
const NumberInputField = ({
|
||||
label,
|
||||
isRequired,
|
||||
showOptional,
|
||||
tooltip,
|
||||
className,
|
||||
labelClassName,
|
||||
...inputProps
|
||||
}: TextFieldProps) => {
|
||||
const field = useFieldContext<number | undefined>()
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-y-0.5', className)}>
|
||||
<Label
|
||||
htmlFor={field.name}
|
||||
label={label}
|
||||
isRequired={isRequired}
|
||||
showOptional={showOptional}
|
||||
tooltip={tooltip}
|
||||
className={labelClassName}
|
||||
/>
|
||||
<InputNumber
|
||||
id={field.name}
|
||||
value={field.state.value}
|
||||
onChange={value => field.handleChange(value)}
|
||||
onBlur={field.handleBlur}
|
||||
{...inputProps}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NumberInputField
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import cn from '@/utils/classnames'
|
||||
import { useFieldContext } from '../..'
|
||||
import Label from '../label'
|
||||
import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
|
||||
|
||||
type OptionsFieldProps = {
|
||||
label: string;
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
}
|
||||
|
||||
const OptionsField = ({
|
||||
label,
|
||||
className,
|
||||
labelClassName,
|
||||
}: OptionsFieldProps) => {
|
||||
const field = useFieldContext<string[]>()
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-y-0.5', className)}>
|
||||
<Label
|
||||
htmlFor={field.name}
|
||||
label={label}
|
||||
className={labelClassName}
|
||||
/>
|
||||
<ConfigSelect
|
||||
options={field.state.value}
|
||||
onChange={value => field.handleChange(value)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OptionsField
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import cn from '@/utils/classnames'
|
||||
import { useFieldContext } from '../..'
|
||||
import PureSelect from '../../../select/pure'
|
||||
import Label from '../label'
|
||||
|
||||
type SelectOption = {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
type SelectFieldProps = {
|
||||
label: string
|
||||
options: SelectOption[]
|
||||
isRequired?: boolean
|
||||
showOptional?: boolean
|
||||
tooltip?: string
|
||||
className?: string
|
||||
labelClassName?: string
|
||||
}
|
||||
|
||||
const SelectField = ({
|
||||
label,
|
||||
options,
|
||||
isRequired,
|
||||
showOptional,
|
||||
tooltip,
|
||||
className,
|
||||
labelClassName,
|
||||
}: SelectFieldProps) => {
|
||||
const field = useFieldContext<string>()
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-y-0.5', className)}>
|
||||
<Label
|
||||
htmlFor={field.name}
|
||||
label={label}
|
||||
isRequired={isRequired}
|
||||
showOptional={showOptional}
|
||||
tooltip={tooltip}
|
||||
className={labelClassName}
|
||||
/>
|
||||
<PureSelect
|
||||
value={field.state.value}
|
||||
options={options}
|
||||
onChange={value => field.handleChange(value)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SelectField
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import { useFieldContext } from '../..'
|
||||
import Input, { type InputProps } from '../../../input'
|
||||
import Label from '../label'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type TextFieldProps = {
|
||||
label: string
|
||||
isRequired?: boolean
|
||||
showOptional?: boolean
|
||||
tooltip?: string
|
||||
className?: string
|
||||
labelClassName?: string
|
||||
} & Omit<InputProps, 'className' | 'onChange' | 'onBlur' | 'value' | 'id'>
|
||||
|
||||
const TextField = ({
|
||||
label,
|
||||
isRequired,
|
||||
showOptional,
|
||||
tooltip,
|
||||
className,
|
||||
labelClassName,
|
||||
...inputProps
|
||||
}: TextFieldProps) => {
|
||||
const field = useFieldContext<string>()
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-y-0.5', className)}>
|
||||
<Label
|
||||
htmlFor={field.name}
|
||||
label={label}
|
||||
isRequired={isRequired}
|
||||
showOptional={showOptional}
|
||||
tooltip={tooltip}
|
||||
className={labelClassName}
|
||||
/>
|
||||
<Input
|
||||
id={field.name}
|
||||
value={field.state.value}
|
||||
onChange={e => field.handleChange(e.target.value)}
|
||||
onBlur={field.handleBlur}
|
||||
{...inputProps}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TextField
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { useStore } from '@tanstack/react-form'
|
||||
import { useFormContext } from '../..'
|
||||
import Button, { type ButtonProps } from '../../../button'
|
||||
|
||||
type SubmitButtonProps = Omit<ButtonProps, 'disabled' | 'loading' | 'onClick'>
|
||||
|
||||
const SubmitButton = ({ ...buttonProps }: SubmitButtonProps) => {
|
||||
const form = useFormContext()
|
||||
|
||||
const [isSubmitting, canSubmit] = useStore(form.store, state => [
|
||||
state.isSubmitting,
|
||||
state.canSubmit,
|
||||
])
|
||||
|
||||
return (
|
||||
<Button
|
||||
disabled={isSubmitting || !canSubmit}
|
||||
loading={isSubmitting}
|
||||
onClick={() => form.handleSubmit()}
|
||||
{...buttonProps}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default SubmitButton
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import Label from './label'
|
||||
|
||||
jest.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}))
|
||||
|
||||
describe('Label Component', () => {
|
||||
const defaultProps = {
|
||||
htmlFor: 'test-input',
|
||||
label: 'Test Label',
|
||||
}
|
||||
|
||||
it('renders basic label correctly', () => {
|
||||
render(<Label {...defaultProps} />)
|
||||
const label = screen.getByTestId('label')
|
||||
expect(label).toBeInTheDocument()
|
||||
expect(label).toHaveAttribute('for', 'test-input')
|
||||
})
|
||||
|
||||
it('shows optional text when showOptional is true', () => {
|
||||
render(<Label {...defaultProps} showOptional />)
|
||||
expect(screen.getByText('common.label.optional')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows required asterisk when isRequired is true', () => {
|
||||
render(<Label {...defaultProps} isRequired />)
|
||||
expect(screen.getByText('*')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders tooltip when tooltip prop is provided', () => {
|
||||
const tooltipText = 'Test Tooltip'
|
||||
render(<Label {...defaultProps} tooltip={tooltipText} />)
|
||||
const trigger = screen.getByTestId('test-input-tooltip')
|
||||
fireEvent.mouseEnter(trigger)
|
||||
expect(screen.getByText(tooltipText)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('applies custom className when provided', () => {
|
||||
const customClass = 'custom-label'
|
||||
render(<Label {...defaultProps} className={customClass} />)
|
||||
const label = screen.getByTestId('label')
|
||||
expect(label).toHaveClass(customClass)
|
||||
})
|
||||
|
||||
it('does not show optional text and required asterisk simultaneously', () => {
|
||||
render(<Label {...defaultProps} isRequired showOptional />)
|
||||
expect(screen.queryByText('common.label.optional')).not.toBeInTheDocument()
|
||||
expect(screen.getByText('*')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import cn from '@/utils/classnames'
|
||||
import Tooltip from '../../tooltip'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export type LabelProps = {
|
||||
htmlFor: string
|
||||
label: string
|
||||
isRequired?: boolean
|
||||
showOptional?: boolean
|
||||
tooltip?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Label = ({
|
||||
htmlFor,
|
||||
label,
|
||||
isRequired,
|
||||
showOptional,
|
||||
tooltip,
|
||||
className,
|
||||
}: LabelProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex h-6 items-center'>
|
||||
<label
|
||||
data-testid='label'
|
||||
htmlFor={htmlFor}
|
||||
className={cn('system-sm-medium text-text-secondary', className)}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
{!isRequired && showOptional && <div className='system-xs-regular ml-1 text-text-tertiary'>{t('common.label.optional')}</div>}
|
||||
{isRequired && <div className='system-xs-regular ml-1 text-text-destructive-secondary'>*</div>}
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[200px]'>{tooltip}</div>
|
||||
}
|
||||
triggerClassName='ml-0.5 w-4 h-4'
|
||||
triggerTestId={`${htmlFor}-tooltip`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Label
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { withForm } from '../..'
|
||||
import { demoFormOpts } from './shared-options'
|
||||
import { ContactMethods } from './types'
|
||||
|
||||
const ContactFields = withForm({
|
||||
...demoFormOpts,
|
||||
render: ({ form }) => {
|
||||
return (
|
||||
<div className='my-2'>
|
||||
<h3 className='title-lg-bold text-text-primary'>Contacts</h3>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<form.AppField
|
||||
name='contact.email'
|
||||
children={field => <field.TextField label='Email' />}
|
||||
/>
|
||||
<form.AppField
|
||||
name='contact.phone'
|
||||
children={field => <field.TextField label='Phone' />}
|
||||
/>
|
||||
<form.AppField
|
||||
name='contact.preferredContactMethod'
|
||||
children={field => (
|
||||
<field.SelectField
|
||||
label='Preferred Contact Method'
|
||||
options={ContactMethods}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default ContactFields
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { useStore } from '@tanstack/react-form'
|
||||
import { useAppForm } from '../..'
|
||||
import ContactFields from './contact-fields'
|
||||
import { demoFormOpts } from './shared-options'
|
||||
import { UserSchema } from './types'
|
||||
|
||||
const DemoForm = () => {
|
||||
const form = useAppForm({
|
||||
...demoFormOpts,
|
||||
validators: {
|
||||
onSubmit: ({ value }) => {
|
||||
// Validate the entire form
|
||||
const result = UserSchema.safeParse(value)
|
||||
if (!result.success) {
|
||||
const issues = result.error.issues
|
||||
console.log('Validation errors:', issues)
|
||||
return issues[0].message
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
console.log('Form submitted:', value)
|
||||
},
|
||||
})
|
||||
|
||||
const name = useStore(form.store, state => state.values.name)
|
||||
|
||||
return (
|
||||
<form
|
||||
className='flex w-[400px] flex-col gap-4'
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
form.handleSubmit()
|
||||
}}
|
||||
>
|
||||
<form.AppField
|
||||
name='name'
|
||||
children={field => (
|
||||
<field.TextField label='Name' />
|
||||
)}
|
||||
/>
|
||||
<form.AppField
|
||||
name='surname'
|
||||
children={field => (
|
||||
<field.TextField label='Surname' />
|
||||
)}
|
||||
/>
|
||||
<form.AppField
|
||||
name='isAcceptingTerms'
|
||||
children={field => (
|
||||
<field.CheckboxField label='I accept the terms and conditions.' />
|
||||
)}
|
||||
/>
|
||||
{
|
||||
!!name && (
|
||||
<ContactFields form={form} />
|
||||
)
|
||||
}
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>Submit</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default DemoForm
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { formOptions } from '@tanstack/react-form'
|
||||
|
||||
export const demoFormOpts = formOptions({
|
||||
defaultValues: {
|
||||
name: '',
|
||||
surname: '',
|
||||
isAcceptingTerms: false,
|
||||
contact: {
|
||||
email: '',
|
||||
phone: '',
|
||||
preferredContactMethod: 'email',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { z } from 'zod'
|
||||
|
||||
const ContactMethod = z.union([
|
||||
z.literal('email'),
|
||||
z.literal('phone'),
|
||||
z.literal('whatsapp'),
|
||||
z.literal('sms'),
|
||||
])
|
||||
|
||||
export const ContactMethods = ContactMethod.options.map(({ value }) => ({
|
||||
value,
|
||||
label: value.charAt(0).toUpperCase() + value.slice(1),
|
||||
}))
|
||||
|
||||
export const UserSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.regex(/^[A-Z]/, 'Name must start with a capital letter')
|
||||
.min(3, 'Name must be at least 3 characters long'),
|
||||
surname: z
|
||||
.string()
|
||||
.min(3, 'Surname must be at least 3 characters long')
|
||||
.regex(/^[A-Z]/, 'Surname must start with a capital letter'),
|
||||
isAcceptingTerms: z.boolean().refine(val => val, {
|
||||
message: 'You must accept the terms and conditions',
|
||||
}),
|
||||
contact: z.object({
|
||||
email: z.string().email('Invalid email address'),
|
||||
phone: z.string().optional(),
|
||||
preferredContactMethod: ContactMethod,
|
||||
}),
|
||||
})
|
||||
|
||||
export type User = z.infer<typeof UserSchema>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
|
||||
import TextField from './components/field/text'
|
||||
import NumberInputField from './components/field/number-input'
|
||||
import CheckboxField from './components/field/checkbox'
|
||||
import SelectField from './components/field/select'
|
||||
import OptionsField from './components/field/options'
|
||||
import SubmitButton from './components/form/submit-button'
|
||||
|
||||
export const { fieldContext, useFieldContext, formContext, useFormContext }
|
||||
= createFormHookContexts()
|
||||
|
||||
export const { useAppForm, withForm } = createFormHook({
|
||||
fieldComponents: {
|
||||
TextField,
|
||||
NumberInputField,
|
||||
CheckboxField,
|
||||
SelectField,
|
||||
OptionsField,
|
||||
},
|
||||
formComponents: {
|
||||
SubmitButton,
|
||||
},
|
||||
fieldContext,
|
||||
formContext,
|
||||
})
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import { InputNumber } from './index'
|
||||
|
||||
jest.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}))
|
||||
|
||||
describe('InputNumber Component', () => {
|
||||
const defaultProps = {
|
||||
onChange: jest.fn(),
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it('renders input with default values', () => {
|
||||
render(<InputNumber {...defaultProps} />)
|
||||
const input = screen.getByRole('textbox')
|
||||
expect(input).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles increment button click', () => {
|
||||
render(<InputNumber {...defaultProps} value={5} />)
|
||||
const incrementBtn = screen.getByRole('button', { name: /increment/i })
|
||||
|
||||
fireEvent.click(incrementBtn)
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(6)
|
||||
})
|
||||
|
||||
it('handles decrement button click', () => {
|
||||
render(<InputNumber {...defaultProps} value={5} />)
|
||||
const decrementBtn = screen.getByRole('button', { name: /decrement/i })
|
||||
|
||||
fireEvent.click(decrementBtn)
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(4)
|
||||
})
|
||||
|
||||
it('respects max value constraint', () => {
|
||||
render(<InputNumber {...defaultProps} value={10} max={10} />)
|
||||
const incrementBtn = screen.getByRole('button', { name: /increment/i })
|
||||
|
||||
fireEvent.click(incrementBtn)
|
||||
expect(defaultProps.onChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('respects min value constraint', () => {
|
||||
render(<InputNumber {...defaultProps} value={0} min={0} />)
|
||||
const decrementBtn = screen.getByRole('button', { name: /decrement/i })
|
||||
|
||||
fireEvent.click(decrementBtn)
|
||||
expect(defaultProps.onChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('handles direct input changes', () => {
|
||||
render(<InputNumber {...defaultProps} />)
|
||||
const input = screen.getByRole('textbox')
|
||||
|
||||
fireEvent.change(input, { target: { value: '42' } })
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(42)
|
||||
})
|
||||
|
||||
it('handles empty input', () => {
|
||||
render(<InputNumber {...defaultProps} value={0} />)
|
||||
const input = screen.getByRole('textbox')
|
||||
|
||||
fireEvent.change(input, { target: { value: '' } })
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(undefined)
|
||||
})
|
||||
|
||||
it('handles invalid input', () => {
|
||||
render(<InputNumber {...defaultProps} />)
|
||||
const input = screen.getByRole('textbox')
|
||||
|
||||
fireEvent.change(input, { target: { value: 'abc' } })
|
||||
expect(defaultProps.onChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('displays unit when provided', () => {
|
||||
const unit = 'px'
|
||||
render(<InputNumber {...defaultProps} unit={unit} />)
|
||||
expect(screen.getByText(unit)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('disables controls when disabled prop is true', () => {
|
||||
render(<InputNumber {...defaultProps} disabled />)
|
||||
const input = screen.getByRole('textbox')
|
||||
const incrementBtn = screen.getByRole('button', { name: /increment/i })
|
||||
const decrementBtn = screen.getByRole('button', { name: /decrement/i })
|
||||
|
||||
expect(input).toBeDisabled()
|
||||
expect(incrementBtn).toBeDisabled()
|
||||
expect(decrementBtn).toBeDisabled()
|
||||
})
|
||||
})
|
||||
|
|
@ -8,7 +8,7 @@ export type InputNumberProps = {
|
|||
value?: number
|
||||
onChange: (value?: number) => void
|
||||
amount?: number
|
||||
size?: 'sm' | 'md'
|
||||
size?: 'regular' | 'large'
|
||||
max?: number
|
||||
min?: number
|
||||
defaultValue?: number
|
||||
|
|
@ -19,14 +19,12 @@ export type InputNumberProps = {
|
|||
} & Omit<InputProps, 'value' | 'onChange' | 'size' | 'min' | 'max' | 'defaultValue'>
|
||||
|
||||
export const InputNumber: FC<InputNumberProps> = (props) => {
|
||||
const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, wrapClassName, controlWrapClassName, controlClassName, disabled, ...rest } = props
|
||||
const { unit, className, onChange, amount = 1, value, size = 'regular', max, min, defaultValue, wrapClassName, controlWrapClassName, controlClassName, disabled, ...rest } = props
|
||||
|
||||
const isValidValue = (v: number) => {
|
||||
if (max && v > max)
|
||||
if (typeof max === 'number' && v > max)
|
||||
return false
|
||||
if (min && v < min)
|
||||
return false
|
||||
return true
|
||||
return !(typeof min === 'number' && v < min)
|
||||
}
|
||||
|
||||
const inc = () => {
|
||||
|
|
@ -76,29 +74,39 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
|
|||
onChange(parsed)
|
||||
}}
|
||||
unit={unit}
|
||||
size={size}
|
||||
/>
|
||||
<div className={classNames(
|
||||
'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
|
||||
disabled && 'opacity-50 cursor-not-allowed',
|
||||
controlWrapClassName)}
|
||||
>
|
||||
<button onClick={inc} disabled={disabled} className={classNames(
|
||||
size === 'sm' ? 'pt-1' : 'pt-1.5',
|
||||
<button
|
||||
type='button'
|
||||
onClick={inc}
|
||||
disabled={disabled}
|
||||
aria-label='increment'
|
||||
className={classNames(
|
||||
size === 'regular' ? 'pt-1' : 'pt-1.5',
|
||||
'px-1.5 hover:bg-components-input-bg-hover',
|
||||
disabled && 'cursor-not-allowed hover:bg-transparent',
|
||||
controlClassName,
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
<RiArrowUpSLine className='size-3' />
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
onClick={dec}
|
||||
disabled={disabled}
|
||||
aria-label='decrement'
|
||||
className={classNames(
|
||||
size === 'sm' ? 'pb-1' : 'pb-1.5',
|
||||
size === 'regular' ? 'pb-1' : 'pb-1.5',
|
||||
'px-1.5 hover:bg-components-input-bg-hover',
|
||||
disabled && 'cursor-not-allowed hover:bg-transparent',
|
||||
controlClassName,
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
<RiArrowDownSLine className='size-3' />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export type InputProps = {
|
|||
wrapperClassName?: string
|
||||
styleCss?: CSSProperties
|
||||
unit?: string
|
||||
} & React.InputHTMLAttributes<HTMLInputElement> & VariantProps<typeof inputVariants>
|
||||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>
|
||||
|
||||
const Input = ({
|
||||
size,
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
|
|||
max={max}
|
||||
step={step}
|
||||
amount={step}
|
||||
size='sm'
|
||||
size='regular'
|
||||
value={value}
|
||||
onChange={(value) => {
|
||||
onChange(id, value)
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export type TooltipProps = {
|
|||
position?: Placement
|
||||
triggerMethod?: 'hover' | 'click'
|
||||
triggerClassName?: string
|
||||
triggerTestId?: string
|
||||
disabled?: boolean
|
||||
popupContent?: React.ReactNode
|
||||
children?: React.ReactNode
|
||||
|
|
@ -24,6 +25,7 @@ const Tooltip: FC<TooltipProps> = ({
|
|||
position = 'top',
|
||||
triggerMethod = 'hover',
|
||||
triggerClassName,
|
||||
triggerTestId,
|
||||
disabled = false,
|
||||
popupContent,
|
||||
children,
|
||||
|
|
@ -91,7 +93,7 @@ const Tooltip: FC<TooltipProps> = ({
|
|||
onMouseLeave={() => triggerMethod === 'hover' && handleLeave(true)}
|
||||
asChild={asChild}
|
||||
>
|
||||
{children || <div className={triggerClassName || 'h-3.5 w-3.5 shrink-0 p-[1px]'}><RiQuestionLine className='h-full w-full text-text-quaternary hover:text-text-tertiary' /></div>}
|
||||
{children || <div data-testid={triggerTestId} className={triggerClassName || 'h-3.5 w-3.5 shrink-0 p-[1px]'}><RiQuestionLine className='h-full w-full text-text-quaternary hover:text-text-tertiary' /></div>}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent
|
||||
className="z-[9999]"
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export const MaxLengthInput: FC<InputNumberProps> = (props) => {
|
|||
</div>}>
|
||||
<InputNumber
|
||||
type="number"
|
||||
className='h-9'
|
||||
size='large'
|
||||
placeholder={`≤ ${maxValue}`}
|
||||
max={maxValue}
|
||||
min={1}
|
||||
|
|
@ -70,7 +70,7 @@ export const OverlapInput: FC<InputNumberProps> = (props) => {
|
|||
</div>}>
|
||||
<InputNumber
|
||||
type="number"
|
||||
className='h-9'
|
||||
size='large'
|
||||
placeholder={t('datasetCreation.stepTwo.overlap') || ''}
|
||||
min={1}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -220,13 +220,11 @@ const Completed: FC<ICompletedProps> = ({
|
|||
const resetList = useCallback(() => {
|
||||
setSelectedSegmentIds([])
|
||||
invalidSegmentList()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
}, [invalidSegmentList])
|
||||
|
||||
const resetChildList = useCallback(() => {
|
||||
invalidChildSegmentList()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
}, [invalidChildSegmentList])
|
||||
|
||||
const onClickCard = (detail: SegmentDetailModel, isEditMode = false) => {
|
||||
setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
|
||||
|
|
@ -253,7 +251,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
const invalidChunkListEnabled = useInvalid(useChunkListEnabledKey)
|
||||
const invalidChunkListDisabled = useInvalid(useChunkListDisabledKey)
|
||||
|
||||
const refreshChunkListWithStatusChanged = () => {
|
||||
const refreshChunkListWithStatusChanged = useCallback(() => {
|
||||
switch (selectedStatus) {
|
||||
case 'all':
|
||||
invalidChunkListDisabled()
|
||||
|
|
@ -262,7 +260,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
default:
|
||||
invalidSegmentList()
|
||||
}
|
||||
}
|
||||
}, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidSegmentList])
|
||||
|
||||
const onChangeSwitch = useCallback(async (enable: boolean, segId?: string) => {
|
||||
const operationApi = enable ? enableSegment : disableSegment
|
||||
|
|
@ -280,8 +278,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
|
||||
},
|
||||
})
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [datasetId, documentId, selectedSegmentIds, segments])
|
||||
}, [datasetId, documentId, selectedSegmentIds, segments, disableSegment, enableSegment, t, notify, refreshChunkListWithStatusChanged])
|
||||
|
||||
const { mutateAsync: deleteSegment } = useDeleteSegment()
|
||||
|
||||
|
|
@ -296,12 +293,11 @@ const Completed: FC<ICompletedProps> = ({
|
|||
notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
|
||||
},
|
||||
})
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [datasetId, documentId, selectedSegmentIds])
|
||||
}, [datasetId, documentId, selectedSegmentIds, deleteSegment, resetList, t, notify])
|
||||
|
||||
const { mutateAsync: updateSegment } = useUpdateSegment()
|
||||
|
||||
const refreshChunkListDataWithDetailChanged = () => {
|
||||
const refreshChunkListDataWithDetailChanged = useCallback(() => {
|
||||
switch (selectedStatus) {
|
||||
case 'all':
|
||||
invalidChunkListDisabled()
|
||||
|
|
@ -316,7 +312,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
invalidChunkListEnabled()
|
||||
break
|
||||
}
|
||||
}
|
||||
}, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidChunkListAll])
|
||||
|
||||
const handleUpdateSegment = useCallback(async (
|
||||
segmentId: string,
|
||||
|
|
@ -375,17 +371,18 @@ const Completed: FC<ICompletedProps> = ({
|
|||
eventEmitter?.emit('update-segment-done')
|
||||
},
|
||||
})
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [segments, datasetId, documentId])
|
||||
}, [segments, datasetId, documentId, updateSegment, docForm, notify, eventEmitter, onCloseSegmentDetail, refreshChunkListDataWithDetailChanged, t])
|
||||
|
||||
useEffect(() => {
|
||||
resetList()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pathname])
|
||||
|
||||
useEffect(() => {
|
||||
if (importStatus === ProcessStatus.COMPLETED)
|
||||
resetList()
|
||||
}, [importStatus, resetList])
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [importStatus])
|
||||
|
||||
const onCancelBatchOperation = useCallback(() => {
|
||||
setSelectedSegmentIds([])
|
||||
|
|
@ -430,8 +427,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
const count = segmentListData?.total || 0
|
||||
return `${total} ${t('datasetDocuments.segment.searchResults', { count })}`
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [segmentListData?.total, mode, parentMode, searchValue, selectedStatus])
|
||||
}, [segmentListData, mode, parentMode, searchValue, selectedStatus, t])
|
||||
|
||||
const toggleFullScreen = useCallback(() => {
|
||||
setFullScreen(!fullScreen)
|
||||
|
|
@ -449,8 +445,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
resetList()
|
||||
currentPage !== totalPages && setCurrentPage(totalPages)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [segmentListData, limit, currentPage])
|
||||
}, [segmentListData, limit, currentPage, resetList])
|
||||
|
||||
const { mutateAsync: deleteChildSegment } = useDeleteChildSegment()
|
||||
|
||||
|
|
@ -470,8 +465,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
},
|
||||
},
|
||||
)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [datasetId, documentId, parentMode])
|
||||
}, [datasetId, documentId, parentMode, deleteChildSegment, resetList, resetChildList, t, notify])
|
||||
|
||||
const handleAddNewChildChunk = useCallback((parentChunkId: string) => {
|
||||
setShowNewChildSegmentModal(true)
|
||||
|
|
@ -490,8 +484,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
else {
|
||||
resetChildList()
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [parentMode, currChunkId, segments])
|
||||
}, [parentMode, currChunkId, segments, refreshChunkListDataWithDetailChanged, resetChildList])
|
||||
|
||||
const viewNewlyAddedChildChunk = useCallback(() => {
|
||||
const totalPages = childChunkListData?.total_pages || 0
|
||||
|
|
@ -505,8 +498,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
resetChildList()
|
||||
currentPage !== totalPages && setCurrentPage(totalPages)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [childChunkListData, limit, currentPage])
|
||||
}, [childChunkListData, limit, currentPage, resetChildList])
|
||||
|
||||
const onClickSlice = useCallback((detail: ChildChunkDetail) => {
|
||||
setCurrChildChunk({ childChunkInfo: detail, showModal: true })
|
||||
|
|
@ -560,8 +552,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
eventEmitter?.emit('update-child-segment-done')
|
||||
},
|
||||
})
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [segments, childSegments, datasetId, documentId, parentMode])
|
||||
}, [segments, datasetId, documentId, parentMode, updateChildSegment, notify, eventEmitter, onCloseChildSegmentDetail, refreshChunkListDataWithDetailChanged, resetChildList, t])
|
||||
|
||||
const onClearFilter = useCallback(() => {
|
||||
setInputValue('')
|
||||
|
|
@ -570,6 +561,12 @@ const Completed: FC<ICompletedProps> = ({
|
|||
setCurrentPage(1)
|
||||
}, [])
|
||||
|
||||
const selectDefaultValue = useMemo(() => {
|
||||
if (selectedStatus === 'all')
|
||||
return 'all'
|
||||
return selectedStatus ? 1 : 0
|
||||
}, [selectedStatus])
|
||||
|
||||
return (
|
||||
<SegmentListContext.Provider value={{
|
||||
isCollapsed,
|
||||
|
|
@ -583,7 +580,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
<Checkbox
|
||||
className='shrink-0'
|
||||
checked={isAllSelected}
|
||||
mixed={!isAllSelected && isSomeSelected}
|
||||
indeterminate={!isAllSelected && isSomeSelected}
|
||||
onCheck={onSelectedAll}
|
||||
disabled={isLoadingSegmentList}
|
||||
/>
|
||||
|
|
@ -591,7 +588,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
<SimpleSelect
|
||||
onSelect={onChangeStatus}
|
||||
items={statusList.current}
|
||||
defaultValue={selectedStatus === 'all' ? 'all' : selectedStatus ? 1 : 0}
|
||||
defaultValue={selectDefaultValue}
|
||||
className={s.select}
|
||||
wrapperClassName='h-fit mr-2'
|
||||
optionWrapClassName='w-[160px]'
|
||||
|
|
|
|||
|
|
@ -106,13 +106,11 @@ const SegmentCard: FC<ISegmentCardProps> = ({
|
|||
const wordCountText = useMemo(() => {
|
||||
const total = formatNumber(word_count)
|
||||
return `${total} ${t('datasetDocuments.segment.characters', { count: word_count })}`
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [word_count])
|
||||
}, [word_count, t])
|
||||
|
||||
const labelPrefix = useMemo(() => {
|
||||
return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk')
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isParentChildMode])
|
||||
}, [isParentChildMode, t])
|
||||
|
||||
if (loading)
|
||||
return <ParentChunkCardSkeleton />
|
||||
|
|
|
|||
|
|
@ -86,8 +86,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
|
|||
|
||||
const titleText = useMemo(() => {
|
||||
return isEditMode ? t('datasetDocuments.segment.editChunk') : t('datasetDocuments.segment.chunkDetail')
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEditMode])
|
||||
}, [isEditMode, t])
|
||||
|
||||
const isQAModel = useMemo(() => {
|
||||
return docForm === ChunkingMode.qa
|
||||
|
|
@ -98,13 +97,11 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
|
|||
const total = formatNumber(isEditMode ? contentLength : segInfo!.word_count as number)
|
||||
const count = isEditMode ? contentLength : segInfo!.word_count as number
|
||||
return `${total} ${t('datasetDocuments.segment.characters', { count })}`
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEditMode, question.length, answer.length, segInfo?.word_count, isQAModel])
|
||||
}, [isEditMode, question.length, answer.length, isQAModel, segInfo, t])
|
||||
|
||||
const labelPrefix = useMemo(() => {
|
||||
return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk')
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isParentChildMode])
|
||||
}, [isParentChildMode, t])
|
||||
|
||||
return (
|
||||
<div className={'flex h-full flex-col'}>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const SegmentList = (
|
|||
embeddingAvailable,
|
||||
onClearFilter,
|
||||
}: ISegmentListProps & {
|
||||
ref: React.RefObject<unknown>;
|
||||
ref: React.LegacyRef<HTMLDivElement>
|
||||
},
|
||||
) => {
|
||||
const mode = useDocumentContext(s => s.mode)
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ export const OperationAction: FC<{
|
|||
const isListScene = scene === 'list'
|
||||
|
||||
const onOperate = async (operationName: OperationName) => {
|
||||
let opApi = deleteDocument
|
||||
let opApi
|
||||
switch (operationName) {
|
||||
case 'archive':
|
||||
opApi = archiveDocument
|
||||
|
|
@ -490,7 +490,7 @@ const DocumentList: FC<IDocumentListProps> = ({
|
|||
|
||||
const handleAction = (actionName: DocumentActionType) => {
|
||||
return async () => {
|
||||
let opApi = deleteDocument
|
||||
let opApi
|
||||
switch (actionName) {
|
||||
case DocumentActionType.archive:
|
||||
opApi = archiveDocument
|
||||
|
|
@ -527,7 +527,7 @@ const DocumentList: FC<IDocumentListProps> = ({
|
|||
<Checkbox
|
||||
className='mr-2 shrink-0'
|
||||
checked={isAllSelected}
|
||||
mixed={!isAllSelected && isSomeSelected}
|
||||
indeterminate={!isAllSelected && isSomeSelected}
|
||||
onCheck={onSelectedAll}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const InputCombined: FC<Props> = ({
|
|||
className={cn(className, 'rounded-l-md')}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
size='sm'
|
||||
size='regular'
|
||||
controlWrapClassName='overflow-hidden'
|
||||
controlClassName='pt-0 pb-0'
|
||||
readOnly={readOnly}
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
|
|||
// TODO: maybe empty, handle this
|
||||
onChange={onChange as any}
|
||||
defaultValue={defaultValue}
|
||||
size='sm'
|
||||
size='regular'
|
||||
min={def.min}
|
||||
max={def.max}
|
||||
className='w-12'
|
||||
|
|
|
|||
|
|
@ -1,19 +1,11 @@
|
|||
'use client'
|
||||
|
||||
import { ToolTipContent } from '../components/base/tooltip/content'
|
||||
import { SwitchPluginVersion } from '../components/workflow/nodes/_base/components/switch-plugin-version'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DemoForm from '../components/base/form/form-scenarios/demo'
|
||||
|
||||
export default function Page() {
|
||||
const { t } = useTranslation()
|
||||
return <div className="p-20">
|
||||
<SwitchPluginVersion
|
||||
uniqueIdentifier={'langgenius/openai:12'}
|
||||
tooltip={<ToolTipContent
|
||||
title={t('workflow.nodes.agent.unsupportedStrategy')}
|
||||
>
|
||||
{t('workflow.nodes.agent.strategyNotFoundDescAndSwitchVersion')}
|
||||
</ToolTipContent>}
|
||||
/>
|
||||
return (
|
||||
<div className='flex h-screen w-full items-center justify-center p-20'>
|
||||
<DemoForm />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,12 +43,13 @@ const config: Config = {
|
|||
coverageProvider: 'v8',
|
||||
|
||||
// A list of reporter names that Jest uses when writing coverage reports
|
||||
// coverageReporters: [
|
||||
// "json",
|
||||
// "text",
|
||||
// "lcov",
|
||||
// "clover"
|
||||
// ],
|
||||
coverageReporters: [
|
||||
'json',
|
||||
'text',
|
||||
'text-summary',
|
||||
'lcov',
|
||||
'clover',
|
||||
],
|
||||
|
||||
// An object that configures minimum threshold enforcement for coverage results
|
||||
// coverageThreshold: undefined,
|
||||
|
|
|
|||
|
|
@ -1 +1,6 @@
|
|||
import '@testing-library/jest-dom'
|
||||
import { cleanup } from '@testing-library/react'
|
||||
|
||||
afterEach(() => {
|
||||
cleanup()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
"@sentry/utils": "^8.54.0",
|
||||
"@svgdotjs/svg.js": "^3.2.4",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@tanstack/react-form": "^1.3.3",
|
||||
"@tanstack/react-query": "^5.60.5",
|
||||
"@tanstack/react-query-devtools": "^5.60.5",
|
||||
"ahooks": "^3.8.4",
|
||||
|
|
|
|||
|
|
@ -94,6 +94,9 @@ importers:
|
|||
'@tailwindcss/typography':
|
||||
specifier: ^0.5.15
|
||||
version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5)))
|
||||
'@tanstack/react-form':
|
||||
specifier: ^1.3.3
|
||||
version: 1.3.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
|
||||
'@tanstack/react-query':
|
||||
specifier: ^5.60.5
|
||||
version: 5.72.2(react@19.0.0)
|
||||
|
|
@ -2781,12 +2784,27 @@ packages:
|
|||
peerDependencies:
|
||||
tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
|
||||
|
||||
'@tanstack/form-core@1.3.2':
|
||||
resolution: {integrity: sha512-hqRLw9EJ8bLJ5zvorGgTI4INcKh1hAtjPRTslwdB529soP8LpguzqWhn7yVV5/c2GcMSlqmpy5NZarkF5Mf54A==}
|
||||
|
||||
'@tanstack/query-core@5.72.2':
|
||||
resolution: {integrity: sha512-fxl9/0yk3mD/FwTmVEf1/H6N5B975H0luT+icKyX566w6uJG0x6o+Yl+I38wJRCaogiMkstByt+seXfDbWDAcA==}
|
||||
|
||||
'@tanstack/query-devtools@5.72.2':
|
||||
resolution: {integrity: sha512-mMKnGb+iOhVBcj6jaerCFRpg8pACStdG8hmUBHPtToeZzs4ctjBUL1FajqpVn2WaMxnq8Wya+P3Q5tPFNM9jQw==}
|
||||
|
||||
'@tanstack/react-form@1.3.3':
|
||||
resolution: {integrity: sha512-rjZU6ufaQYbZU9I0uIXUJ1CPQ9M/LFyfpbsgA4oqpX/lLoiCFYsV7tZYVlWMMHkpSr1hhmAywp/8rmCFt14lnw==}
|
||||
peerDependencies:
|
||||
'@tanstack/react-start': ^1.112.0
|
||||
react: ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
vinxi: ^0.5.0
|
||||
peerDependenciesMeta:
|
||||
'@tanstack/react-start':
|
||||
optional: true
|
||||
vinxi:
|
||||
optional: true
|
||||
|
||||
'@tanstack/react-query-devtools@5.72.2':
|
||||
resolution: {integrity: sha512-n53qr9JdHCJTCUba6OvMhwiV2CcsckngOswKEE7nM5pQBa/fW9c43qw8omw1RPT2s+aC7MuwS8fHsWT8g+j6IQ==}
|
||||
peerDependencies:
|
||||
|
|
@ -2798,12 +2816,21 @@ packages:
|
|||
peerDependencies:
|
||||
react: ^18 || ^19
|
||||
|
||||
'@tanstack/react-store@0.7.0':
|
||||
resolution: {integrity: sha512-S/Rq17HaGOk+tQHV/yrePMnG1xbsKZIl/VsNWnNXt4XW+tTY8dTlvpJH2ZQ3GRALsusG5K6Q3unAGJ2pd9W/Ng==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
'@tanstack/react-virtual@3.13.6':
|
||||
resolution: {integrity: sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
'@tanstack/store@0.7.0':
|
||||
resolution: {integrity: sha512-CNIhdoUsmD2NolYuaIs8VfWM467RK6oIBAW4nPEKZhg1smZ+/CwtCdpURgp7nxSqOaV9oKkzdWD80+bC66F/Jg==}
|
||||
|
||||
'@tanstack/virtual-core@3.13.6':
|
||||
resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==}
|
||||
|
||||
|
|
@ -4348,6 +4375,9 @@ packages:
|
|||
decimal.js@10.5.0:
|
||||
resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
|
||||
|
||||
decode-formdata@0.9.0:
|
||||
resolution: {integrity: sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw==}
|
||||
|
||||
decode-named-character-reference@1.1.0:
|
||||
resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==}
|
||||
|
||||
|
|
@ -4423,6 +4453,9 @@ packages:
|
|||
resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
devalue@5.1.1:
|
||||
resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
|
||||
|
||||
devlop@1.1.0:
|
||||
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
|
||||
|
||||
|
|
@ -11352,10 +11385,24 @@ snapshots:
|
|||
postcss-selector-parser: 6.0.10
|
||||
tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5))
|
||||
|
||||
'@tanstack/form-core@1.3.2':
|
||||
dependencies:
|
||||
'@tanstack/store': 0.7.0
|
||||
|
||||
'@tanstack/query-core@5.72.2': {}
|
||||
|
||||
'@tanstack/query-devtools@5.72.2': {}
|
||||
|
||||
'@tanstack/react-form@1.3.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
|
||||
dependencies:
|
||||
'@tanstack/form-core': 1.3.2
|
||||
'@tanstack/react-store': 0.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
|
||||
decode-formdata: 0.9.0
|
||||
devalue: 5.1.1
|
||||
react: 19.0.0
|
||||
transitivePeerDependencies:
|
||||
- react-dom
|
||||
|
||||
'@tanstack/react-query-devtools@5.72.2(@tanstack/react-query@5.72.2(react@19.0.0))(react@19.0.0)':
|
||||
dependencies:
|
||||
'@tanstack/query-devtools': 5.72.2
|
||||
|
|
@ -11367,12 +11414,21 @@ snapshots:
|
|||
'@tanstack/query-core': 5.72.2
|
||||
react: 19.0.0
|
||||
|
||||
'@tanstack/react-store@0.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
|
||||
dependencies:
|
||||
'@tanstack/store': 0.7.0
|
||||
react: 19.0.0
|
||||
react-dom: 19.0.0(react@19.0.0)
|
||||
use-sync-external-store: 1.5.0(react@19.0.0)
|
||||
|
||||
'@tanstack/react-virtual@3.13.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
|
||||
dependencies:
|
||||
'@tanstack/virtual-core': 3.13.6
|
||||
react: 19.0.0
|
||||
react-dom: 19.0.0(react@19.0.0)
|
||||
|
||||
'@tanstack/store@0.7.0': {}
|
||||
|
||||
'@tanstack/virtual-core@3.13.6': {}
|
||||
|
||||
'@testing-library/dom@10.4.0':
|
||||
|
|
@ -13139,6 +13195,8 @@ snapshots:
|
|||
|
||||
decimal.js@10.5.0: {}
|
||||
|
||||
decode-formdata@0.9.0: {}
|
||||
|
||||
decode-named-character-reference@1.1.0:
|
||||
dependencies:
|
||||
character-entities: 2.0.2
|
||||
|
|
@ -13199,6 +13257,8 @@ snapshots:
|
|||
|
||||
detect-newline@3.1.0: {}
|
||||
|
||||
devalue@5.1.1: {}
|
||||
|
||||
devlop@1.1.0:
|
||||
dependencies:
|
||||
dequal: 2.0.3
|
||||
|
|
|
|||
Loading…
Reference in New Issue