style(question-classifier): normalize line endings in class-list component
Mminamiyama
11 months ago
parent
18793b14a2
commit
fdc6f39aa7
@ -1,115 +1,115 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import type { FC } from 'react'
|
import type { FC } from 'react'
|
||||||
import React, { useCallback } from 'react'
|
import React, { useCallback } from 'react'
|
||||||
import produce from 'immer'
|
import produce from 'immer'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { useEdgesInteractions } from '../../../hooks'
|
import { useEdgesInteractions } from '../../../hooks'
|
||||||
import AddButton from '../../_base/components/add-button'
|
import AddButton from '../../_base/components/add-button'
|
||||||
import Item from './class-item'
|
import Item from './class-item'
|
||||||
import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
|
import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
|
||||||
import type { ValueSelector, Var } from '@/app/components/workflow/types'
|
import type { ValueSelector, Var } from '@/app/components/workflow/types'
|
||||||
import { ReactSortable } from 'react-sortablejs'
|
import { ReactSortable } from 'react-sortablejs'
|
||||||
import { noop } from 'lodash-es'
|
import { noop } from 'lodash-es'
|
||||||
import { RiDraggable } from '@remixicon/react'
|
import { RiDraggable } from '@remixicon/react'
|
||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
|
|
||||||
const i18nPrefix = 'workflow.nodes.questionClassifiers'
|
const i18nPrefix = 'workflow.nodes.questionClassifiers'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
nodeId: string
|
nodeId: string
|
||||||
list: Topic[]
|
list: Topic[]
|
||||||
onChange: (list: Topic[]) => void
|
onChange: (list: Topic[]) => void
|
||||||
readonly?: boolean
|
readonly?: boolean
|
||||||
filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
|
filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
|
||||||
handleSortTopic?: (newTopics: (Topic & { id: string })[]) => void
|
handleSortTopic?: (newTopics: (Topic & { id: string })[]) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const ClassList: FC<Props> = ({
|
const ClassList: FC<Props> = ({
|
||||||
nodeId,
|
nodeId,
|
||||||
list,
|
list,
|
||||||
onChange,
|
onChange,
|
||||||
readonly,
|
readonly,
|
||||||
filterVar,
|
filterVar,
|
||||||
handleSortTopic = noop,
|
handleSortTopic = noop,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
|
const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
|
||||||
|
|
||||||
const handleClassChange = useCallback((index: number) => {
|
const handleClassChange = useCallback((index: number) => {
|
||||||
return (value: Topic) => {
|
return (value: Topic) => {
|
||||||
const newList = produce(list, (draft) => {
|
const newList = produce(list, (draft) => {
|
||||||
draft[index] = value
|
draft[index] = value
|
||||||
})
|
})
|
||||||
onChange(newList)
|
onChange(newList)
|
||||||
}
|
}
|
||||||
}, [list, onChange])
|
}, [list, onChange])
|
||||||
|
|
||||||
const handleAddClass = useCallback(() => {
|
const handleAddClass = useCallback(() => {
|
||||||
const newList = produce(list, (draft) => {
|
const newList = produce(list, (draft) => {
|
||||||
draft.push({ id: `${Date.now()}`, name: '' })
|
draft.push({ id: `${Date.now()}`, name: '' })
|
||||||
})
|
})
|
||||||
onChange(newList)
|
onChange(newList)
|
||||||
}, [list, onChange])
|
}, [list, onChange])
|
||||||
|
|
||||||
const handleRemoveClass = useCallback((index: number) => {
|
const handleRemoveClass = useCallback((index: number) => {
|
||||||
return () => {
|
return () => {
|
||||||
handleEdgeDeleteByDeleteBranch(nodeId, list[index].id)
|
handleEdgeDeleteByDeleteBranch(nodeId, list[index].id)
|
||||||
const newList = produce(list, (draft) => {
|
const newList = produce(list, (draft) => {
|
||||||
draft.splice(index, 1)
|
draft.splice(index, 1)
|
||||||
})
|
})
|
||||||
onChange(newList)
|
onChange(newList)
|
||||||
}
|
}
|
||||||
}, [list, onChange, handleEdgeDeleteByDeleteBranch, nodeId])
|
}, [list, onChange, handleEdgeDeleteByDeleteBranch, nodeId])
|
||||||
|
|
||||||
const topicCount = list.length
|
const topicCount = list.length
|
||||||
const handleSideWidth = 3
|
const handleSideWidth = 3
|
||||||
// Todo Remove; edit topic name
|
// Todo Remove; edit topic name
|
||||||
return (
|
return (
|
||||||
<ReactSortable
|
<ReactSortable
|
||||||
list={list.map(item => ({ ...item }))}
|
list={list.map(item => ({ ...item }))}
|
||||||
setList={handleSortTopic}
|
setList={handleSortTopic}
|
||||||
handle='.handle'
|
handle='.handle'
|
||||||
ghostClass='bg-components-panel-bg'
|
ghostClass='bg-components-panel-bg'
|
||||||
animation={150}
|
animation={150}
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
className='space-y-2'
|
className='space-y-2'
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
list.map((item, index) => {
|
list.map((item, index) => {
|
||||||
return (
|
return (
|
||||||
<div key={item.id}
|
<div key={item.id}
|
||||||
className={cn(
|
className={cn(
|
||||||
'group relative rounded-[10px] bg-components-panel-bg',
|
'group relative rounded-[10px] bg-components-panel-bg',
|
||||||
`-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
|
`-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
|
||||||
)}>
|
)}>
|
||||||
<RiDraggable className={cn(
|
<RiDraggable className={cn(
|
||||||
'handle absolute left-0 top-3 hidden h-3 w-3 cursor-pointer text-text-quaternary',
|
'handle absolute left-0 top-3 hidden h-3 w-3 cursor-pointer text-text-quaternary',
|
||||||
topicCount > 1 && 'group-hover:block',
|
topicCount > 1 && 'group-hover:block',
|
||||||
)} />
|
)} />
|
||||||
<div className={`ml-${handleSideWidth}`}>
|
<div className={`ml-${handleSideWidth}`}>
|
||||||
<Item
|
<Item
|
||||||
nodeId={nodeId}
|
nodeId={nodeId}
|
||||||
key={list[index].id}
|
key={list[index].id}
|
||||||
payload={item}
|
payload={item}
|
||||||
onChange={handleClassChange(index)}
|
onChange={handleClassChange(index)}
|
||||||
onRemove={handleRemoveClass(index)}
|
onRemove={handleRemoveClass(index)}
|
||||||
index={index + 1}
|
index={index + 1}
|
||||||
readonly={readonly}
|
readonly={readonly}
|
||||||
filterVar={filterVar}
|
filterVar={filterVar}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
{!readonly && (
|
{!readonly && (
|
||||||
<AddButton
|
<AddButton
|
||||||
onClick={handleAddClass}
|
onClick={handleAddClass}
|
||||||
text={t(`${i18nPrefix}.addClass`)}
|
text={t(`${i18nPrefix}.addClass`)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</ReactSortable>
|
</ReactSortable>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
export default React.memo(ClassList)
|
export default React.memo(ClassList)
|
||||||
|
|||||||
Loading…
Reference in New Issue