mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-58517] Migrate tooltips of "components/rhs_card_header/rhs_card_header.tsx" to WithTooltip (#27849)

Просмотр исходного кода
Этот коммит содержится в:
Rita Anene
2024-08-08 12:14:24 +01:00
коммит произвёл GitHub
родитель 538748f90f
Коммит 3d8d0f5e3e
1 изменённых файлов: 41 добавлений и 52 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

93
webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
Просмотреть файл

@@ -7,10 +7,9 @@ import {FormattedMessage, injectIntl, type IntlShape} from 'react-intl';
import KeyboardShortcutSequence, {
KEYBOARD_SHORTCUTS,
} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import WithTooltip from 'components/with_tooltip';
import Constants, {RHSStates} from 'utils/constants';
import {RHSStates} from 'utils/constants';
import type {RhsState} from 'types/store/rhs';
@@ -55,53 +54,38 @@ class RhsCardHeader extends React.PureComponent<Props> {
render(): React.ReactNode {
let back;
let backToResultsTooltip;
let title;
switch (this.props.previousRhsState) {
case RHSStates.SEARCH:
case RHSStates.MENTION:
backToResultsTooltip = (
<Tooltip id='backToResultsTooltip'>
<FormattedMessage
id='rhs_header.backToResultsTooltip'
defaultMessage='Back to search results'
/>
</Tooltip>
title = (
<FormattedMessage
id='rhs_header.backToResultsTooltip'
defaultMessage='Back to search results'
/>
);
break;
case RHSStates.FLAG:
backToResultsTooltip = (
<Tooltip id='backToResultsTooltip'>
<FormattedMessage
id='rhs_header.backToFlaggedTooltip'
defaultMessage='Back to saved messages'
/>
</Tooltip>
title = (
<FormattedMessage
id='rhs_header.backToFlaggedTooltip'
defaultMessage='Back to saved messages'
/>
);
break;
case RHSStates.PIN:
backToResultsTooltip = (
<Tooltip id='backToResultsTooltip'>
<FormattedMessage
id='rhs_header.backToPinnedTooltip'
defaultMessage='Back to pinned messages'
/>
</Tooltip>
title = (
<FormattedMessage
id='rhs_header.backToPinnedTooltip'
defaultMessage='Back to pinned messages'
/>
);
break;
}
const closeSidebarTooltip = (
<Tooltip id='closeSidebarTooltip'>
<FormattedMessage
id='rhs_header.closeSidebarTooltip'
defaultMessage='Close'
/>
</Tooltip>
);
const expandSidebarTooltip = (
<Tooltip id='expandSidebarTooltip'>
<>
<FormattedMessage
id='rhs_header.expandSidebarTooltip'
defaultMessage='Expand the right sidebar'
@@ -111,11 +95,11 @@ class RhsCardHeader extends React.PureComponent<Props> {
hideDescription={true}
isInsideTooltip={true}
/>
</Tooltip>
</>
);
const shrinkSidebarTooltip = (
<Tooltip id='shrinkSidebarTooltip'>
<>
<FormattedMessage
id='rhs_header.collapseSidebarTooltip'
defaultMessage='Collapse the right sidebar'
@@ -125,15 +109,15 @@ class RhsCardHeader extends React.PureComponent<Props> {
hideDescription={true}
isInsideTooltip={true}
/>
</Tooltip>
</>
);
if (backToResultsTooltip) {
if (title) {
back = (
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
id='backToResultsTooltip'
title={title}
placement='top'
overlay={backToResultsTooltip}
>
<button
className='sidebar--right__back btn btn-icon btn-sm'
@@ -144,7 +128,7 @@ class RhsCardHeader extends React.PureComponent<Props> {
className='icon icon-arrow-back-ios'
/>
</button>
</OverlayTrigger>
</WithTooltip>
);
}
@@ -158,10 +142,10 @@ class RhsCardHeader extends React.PureComponent<Props> {
/>
</span>
<div className='pull-right'>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
id={this.props.isExpanded ? 'shrinkSidebarTooltip' : 'expandSidebarTooltip'}
title={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
placement='bottom'
overlay={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
>
<button
type='button'
@@ -178,11 +162,16 @@ class RhsCardHeader extends React.PureComponent<Props> {
aria-label={this.props.intl.formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
/>
</button>
</OverlayTrigger>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={closeSidebarTooltip}
</WithTooltip>
<WithTooltip
id='closeSidebarTooltip'
title={
<FormattedMessage
id='rhs_header.closeSidebarTooltip'
defaultMessage='Close'
/>
}
placement={'top'}
>
<button
type='button'
@@ -195,7 +184,7 @@ class RhsCardHeader extends React.PureComponent<Props> {
aria-label={this.props.intl.formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
/>
</button>
</OverlayTrigger>
</WithTooltip>
</div>
</div>
);