feat: implement ChildSegmentList component and integrate it into SegmentCard for displaying child chunks
twwu
1 year ago
parent
52ba180bf4
commit
b18eb58770
@ -0,0 +1,82 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
|
||||
import { FormattedText } from '../../../formatted-text/formatted'
|
||||
import { EditSlice } from '../../../formatted-text/flavours/edit-slice'
|
||||
import { useDocumentContext } from '../index'
|
||||
import type { ChildChunkDetail } from '@/models/datasets'
|
||||
import Input from '@/app/components/base/input'
|
||||
import classNames from '@/utils/classnames'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
type IChildSegmentCardProps = {
|
||||
child_chunks: ChildChunkDetail[]
|
||||
onSave: () => void
|
||||
handleInputChange: (value: string) => void
|
||||
}
|
||||
|
||||
const ChildSegmentList: FC<IChildSegmentCardProps> = ({
|
||||
child_chunks,
|
||||
onSave,
|
||||
handleInputChange,
|
||||
}) => {
|
||||
let parentMode = useDocumentContext(s => s.parentMode)
|
||||
parentMode = 'paragraph'
|
||||
const [collapsed, setCollapsed] = useState(true)
|
||||
|
||||
const toggleCollapse = () => {
|
||||
setCollapsed(!collapsed)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex flex-col p-1 pb-2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className={classNames('h-7 flex items-center pl-1 pr-3 rounded-lg', collapsed ? 'bg-dataset-child-chunk-expand-btn-bg' : '')} onClick={(event) => {
|
||||
event.stopPropagation()
|
||||
toggleCollapse()
|
||||
}}>
|
||||
{
|
||||
parentMode === 'paragraph'
|
||||
? collapsed
|
||||
? (
|
||||
<RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-50 mr-0.5' />
|
||||
)
|
||||
: (<RiArrowDownSLine className='w-4 h-4 text-text-secondary mr-0.5' />)
|
||||
: null
|
||||
}
|
||||
<span className='text-text-secondary system-sm-semibold-uppercase'>{`${child_chunks.length} CHILD CHUNKS`}</span>
|
||||
<span className='hidden group-hover/card:inline-block text-text-quaternary text-xs font-medium pl-1.5'>·</span>
|
||||
<button className='hidden group-hover/card:inline-block px-1.5 py-1 text-components-button-secondary-accent-text system-xs-semibold'>ADD</button>
|
||||
</div>
|
||||
{parentMode === 'full-doc'
|
||||
? <Input
|
||||
showLeftIcon
|
||||
showClearIcon
|
||||
wrapperClassName='!w-52'
|
||||
value={''}
|
||||
onChange={e => handleInputChange(e.target.value)}
|
||||
onClear={() => handleInputChange('')}
|
||||
/>
|
||||
: null}
|
||||
</div>
|
||||
{(parentMode === 'full-doc' || !collapsed)
|
||||
? <div className='flex gap-x-0.5 p-1'>
|
||||
<Divider type='vertical' className='h-auto w-[2px] mx-[7px] bg-text-accent-secondary' />
|
||||
<FormattedText className='w-full !leading-5'>
|
||||
{child_chunks.map((childChunk, index) => {
|
||||
return <EditSlice
|
||||
key={index}
|
||||
label={`C-${childChunk.position}`}
|
||||
text={childChunk.content}
|
||||
onDelete={() => {}}
|
||||
className=''
|
||||
/>
|
||||
})}
|
||||
</FormattedText>
|
||||
</div>
|
||||
|
||||
: null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChildSegmentList
|
||||
Loading…
Reference in New Issue