chore: handle icon toggle fold

pull/12372/head
Joel 2 years ago
parent 074e660a67
commit 7dd7f06f7d

@ -32,14 +32,11 @@ const Tool: FC<Props> = ({
const language = useGetLanguage() const language = useGetLanguage()
const isTreeView = viewType === ViewType.tree const isTreeView = viewType === ViewType.tree
const actions = payload.tools const actions = payload.tools
const isToolPlugin = payload.type === CollectionType.builtIn const hasAction = payload.type === CollectionType.builtIn
const [isFold, { const [isFold, {
toggle: toggleFold, toggle: toggleFold,
}] = useBoolean(false) }] = useBoolean(false)
const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine
const {
label,
} = payload
return ( return (
<div <div
@ -48,21 +45,21 @@ const Tool: FC<Props> = ({
> >
<div className={cn(className)}> <div className={cn(className)}>
<div <div
className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer' className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer select-none'
// onClick={() => { onClick={() => {
// if (isToolPlugin) { if (hasAction) {
// toggleFold() toggleFold()
// return return
// } }
// onSelect(BlockEnum.Tool, { onSelect(BlockEnum.Tool, {
// provider_id: provider.id, provider_id: payload.id,
// provider_type: provider.type, provider_type: payload.type,
// provider_name: provider.name, provider_name: payload.name,
// tool_name: payload.name, tool_name: payload.name,
// tool_label: payload.label[language], tool_label: payload.label[language],
// title: payload.label[language], title: payload.label[language],
// }) })
// }} }}
> >
<div className='flex grow items-center h-8'> <div className='flex grow items-center h-8'>
<BlockIcon <BlockIcon
@ -72,12 +69,12 @@ const Tool: FC<Props> = ({
/> />
<div className='ml-2 text-sm text-gray-900 flex-1 w-0 grow truncate'>{payload.label[language]}</div> <div className='ml-2 text-sm text-gray-900 flex-1 w-0 grow truncate'>{payload.label[language]}</div>
</div> </div>
{isToolPlugin && ( {hasAction && (
<FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} /> <FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
)} )}
</div> </div>
{isToolPlugin && ( {hasAction && isFold && (
actions.map(action => ( actions.map(action => (
<ActonItem <ActonItem
key={action.name} key={action.name}

Loading…
Cancel
Save