初始化

wwf

3 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import classNames from '@/utils/classnames'
import type { SegmentDetailModel } from '@/models/datasets'
import TagInput from '@/app/components/base/tag-input'
 
type IKeywordsProps = {
  segInfo?: Partial<SegmentDetailModel> & { id: string }
  className?: string
  keywords: string[]
  onKeywordsChange: (keywords: string[]) => void
  isEditMode?: boolean
  actionType?: 'edit' | 'add' | 'view'
}
 
const Keywords: FC<IKeywordsProps> = ({
  segInfo,
  className,
  keywords,
  onKeywordsChange,
  isEditMode,
  actionType = 'view',
}) => {
  const { t } = useTranslation()
  return (
    <div className={classNames('flex flex-col', className)}>
      <div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
      <div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
        {(!segInfo?.keywords?.length && actionType === 'view')
          ? '-'
          : (
            <TagInput
              items={keywords}
              onChange={newKeywords => onKeywordsChange(newKeywords)}
              disableAdd={!isEditMode}
              disableRemove={!isEditMode || (keywords.length === 1)}
            />
          )
        }
      </div>
    </div>
  )
}
 
Keywords.displayName = 'Keywords'
 
export default React.memo(Keywords)