import { useMemo } from 'react' ; import { Button , useLabels , useFolders } from '@proton/components' ; import { c , msgid } from 'ttag' ; import { MailSettings } from '@proton/shared/lib/interfaces' ; import { Location } from 'history' ; import { LabelCount } from '@proton/shared/lib/interfaces/Label' ; import conversationSvg from '@proton/styles/assets/img/placeholders/selected-emails.svg' ; import { getLabelName , isCustomLabel as testIsCustomLabel } from '../../helpers/labels' ; import { isConversationMode } from '../../helpers/mailSettings' ; interface Props { labelID : string ; mailSettings : MailSettings | undefined ; location : Location ; labelCount : LabelCount | undefined ; checkedIDs ? : string [ ] ; onCheckAll : ( checked : boolean ) => void ; } const SelectionPane = ( { labelID , mailSettings , location , labelCount , checkedIDs = [ ] , onCheckAll } ) => { const conversationMode = isConversationMode ( labelID , mailSettings , location ) ; const [ labels ] = useLabels ( ) ; const [ folders ] = useFolders ( ) ; const isCustomLabel = testIsCustomLabel ( labelID , labels ) ; const total = labelCount ?. Total || 0 ; const checkeds = checkedIDs . length ; const labelName = useMemo ( ( ) => getLabelName ( labelID , labels , folders ) , [ labelID , labels , folders ] ) ; const count = checkeds || total ; const getFolderText = ( ) => { if ( checkeds ) { return conversationMode ? c ( 'Info' ) . ngettext ( msgid `You selected **${ count } conversation** from this folder` , `You selected **${ count } conversations** from this folder` , count ) : c ( 'Info' ) . ngettext ( msgid `You selected **${ count } message** from this folder` , `You selected **${ count } messages** from this folder` , count ) ; } return conversationMode ? c ( 'Info' ) . ngettext ( msgid `You have **${ count } conversation** stored in this folder` , `You have **${ count } conversations** stored in this folder` , count ) : c ( 'Info' ) . ngettext ( msgid `You have **${ count } message** stored in this folder` , `You have **${ count } messages** stored in this folder` , count ) ; } ; const getLabelText = ( ) => { if ( checkeds ) { return conversationMode ? c ( 'Info' ) . ngettext ( msgid `You selected **${ count } conversation** with this label` , `You selected **${ count } conversations** with this label` , count ) : c ( 'Info' ) . ngettext ( msgid `You selected **${ count } message** with this label` , `You selected **${ count } messages** with this label` , count ) ; } return conversationMode ? c ( 'Info' ) . ngettext ( msgid `You have **${ count } conversation** tagged with this label` , `You have **${ count } conversations** tagged with this label` , count ) : c ( 'Info' ) . ngettext ( msgid `You have **${ count } message** tagged with this label` , `You have **${ count } messages** tagged with this label` , count ) ; } ; const getFormattedText = ( text ) => { const splitText = text . split ( '**' ) ; if ( splitText . length > 2 && splitText . length % 2 !== 0 ) { const formattedText = splitText . map ( ( s , index ) => { if ( index % 2 !== 0 ) { return < strong key = { `formattedText-${ s }` } > { s } < /strong>; } return < span key = { `formattedText-${ s }` } > { s } < /span>; } ) ; return < > { formattedText } < />; } return text ; } ; const text = isCustomLabel ? getLabelText ( ) : getFolderText ( ) ; const showText = checkeds || labelCount ; return ( < div className = "mauto text-center p2 max-w100" > { checkeds === 0 && labelName && ( < h3 className = "text-bold lh-rg text-ellipsis" title = { labelName } > { labelName } < /h3>)} < p className = "mb2 text-keep-space" > { showText ? getFormattedText ( text ) : null } < /p> < div className = "mb2" > < img src = { conversationSvg } alt = { c ( 'Alternative text for conversation image' ) . t `Conversation` } className = "hauto" / > < /div> { checkeds > 0 && < Button onClick = { ( ) => onCheckAll ( false ) } > { c ( 'Action' ) . t `Deselect` } < /Button>} < /div>); } ; export default SelectionPane ;