refactor(question-classifier): remove unused willDeleteCaseId state variable
Mminamiyama
11 months ago
parent
3e1d5e23df
commit
18793b14a2
@ -1,117 +1,115 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import type { FC } from 'react'
|
import type { FC } from 'react'
|
||||||
import React, { useCallback, useState } 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 [willDeleteCaseId, setWillDeleteCaseId] = useState('')
|
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`,
|
||||||
willDeleteCaseId === item.id && 'bg-state-destructive-hover',
|
)}>
|
||||||
`-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
|
<RiDraggable className={cn(
|
||||||
)}>
|
'handle absolute left-0 top-3 hidden h-3 w-3 cursor-pointer text-text-quaternary',
|
||||||
<RiDraggable className={cn(
|
topicCount > 1 && 'group-hover:block',
|
||||||
'handle absolute left-0 top-3 hidden h-3 w-3 cursor-pointer text-text-quaternary',
|
)} />
|
||||||
topicCount > 1 && 'group-hover:block',
|
<div className={`ml-${handleSideWidth}`}>
|
||||||
)} />
|
<Item
|
||||||
<div className={`ml-${handleSideWidth}`}>
|
nodeId={nodeId}
|
||||||
<Item
|
key={list[index].id}
|
||||||
nodeId={nodeId}
|
payload={item}
|
||||||
key={list[index].id}
|
onChange={handleClassChange(index)}
|
||||||
payload={item}
|
onRemove={handleRemoveClass(index)}
|
||||||
onChange={handleClassChange(index)}
|
index={index + 1}
|
||||||
onRemove={handleRemoveClass(index)}
|
readonly={readonly}
|
||||||
index={index + 1}
|
filterVar={filterVar}
|
||||||
readonly={readonly}
|
/>
|
||||||
filterVar={filterVar}
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
)
|
||||||
</div>
|
})
|
||||||
)
|
}
|
||||||
})
|
{!readonly && (
|
||||||
}
|
<AddButton
|
||||||
{!readonly && (
|
onClick={handleAddClass}
|
||||||
<AddButton
|
text={t(`${i18nPrefix}.addClass`)}
|
||||||
onClick={handleAddClass}
|
/>
|
||||||
text={t(`${i18nPrefix}.addClass`)}
|
)}
|
||||||
/>
|
|
||||||
)}
|
</ReactSortable>
|
||||||
|
)
|
||||||
</ReactSortable>
|
}
|
||||||
)
|
export default React.memo(ClassList)
|
||||||
}
|
|
||||||
export default React.memo(ClassList)
|
|
||||||
|
|||||||
Loading…
Reference in New Issue