[MM-58413] Migrate various components to use WithTooltip (#27163)
Этот коммит содержится в:
Ashish Dhama
коммит произвёл
GitHub
GitHub
родитель
6593773959
Коммит
b7cc4cb412
@@ -3,18 +3,15 @@
|
||||
|
||||
import React, {memo} from 'react';
|
||||
import type {CSSProperties} from 'react';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import {FormattedMessage, useIntl} from 'react-intl';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import {CheckCircleOutlineIcon, BellRingOutlineIcon} from '@mattermost/compass-icons/components';
|
||||
import type {PostPriorityMetadata} from '@mattermost/types/posts';
|
||||
|
||||
import OverlayTrigger from 'components/overlay_trigger';
|
||||
import {HasNoMentions, HasSpecialMentions} from 'components/post_priority/error_messages';
|
||||
import PriorityLabel from 'components/post_priority/post_priority_label';
|
||||
import Tooltip from 'components/tooltip';
|
||||
|
||||
import Constants from 'utils/constants';
|
||||
import WithTooltip from 'components/with_tooltip';
|
||||
|
||||
type Props = {
|
||||
canRemove: boolean;
|
||||
@@ -97,6 +94,7 @@ function PriorityLabels({
|
||||
priority,
|
||||
requestedAck,
|
||||
}: Props) {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<Priority padding={padding}>
|
||||
{priority && (
|
||||
@@ -106,41 +104,31 @@ function PriorityLabels({
|
||||
/>
|
||||
)}
|
||||
{persistentNotifications && (
|
||||
<OverlayTrigger
|
||||
<WithTooltip
|
||||
id='post-priority-picker-persistent-notifications-tooltip'
|
||||
placement='top'
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
|
||||
overlay={(
|
||||
<Tooltip id='post-priority-picker-persistent-notifications-tooltip'>
|
||||
<FormattedMessage
|
||||
id={'post_priority.persistent_notifications.tooltip'}
|
||||
defaultMessage={'Persistent notifications will be sent'}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
title={intl.formatMessage({
|
||||
id: 'post_priority.persistent_notifications.tooltip',
|
||||
defaultMessage: 'Persistent notifications will be sent',
|
||||
})}
|
||||
>
|
||||
<Notifications>
|
||||
<BellRingOutlineIcon size={14}/>
|
||||
</Notifications>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
)}
|
||||
{requestedAck && (
|
||||
<Acknowledgements hasError={hasError}>
|
||||
<OverlayTrigger
|
||||
<WithTooltip
|
||||
id='post-priority-picker-ack-tooltip'
|
||||
placement='top'
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
|
||||
overlay={(
|
||||
<Tooltip id='post-priority-picker-ack-tooltip'>
|
||||
<FormattedMessage
|
||||
id={'post_priority.request_acknowledgement.tooltip'}
|
||||
defaultMessage={'Acknowledgement will be requested'}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
title={intl.formatMessage({
|
||||
id: 'post_priority.request_acknowledgement.tooltip',
|
||||
defaultMessage: 'Acknowledgement will be requested',
|
||||
})}
|
||||
>
|
||||
<CheckCircleOutlineIcon size={14}/>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
{!(priority) && (
|
||||
<FormattedMessage
|
||||
id={'post_priority.request_acknowledgement'}
|
||||
@@ -155,19 +143,13 @@ function PriorityLabels({
|
||||
</Error>
|
||||
)}
|
||||
{canRemove && (
|
||||
<OverlayTrigger
|
||||
<WithTooltip
|
||||
id='post-priority-picker-tooltip'
|
||||
placement='top'
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
|
||||
overlay={(
|
||||
<Tooltip id='post-priority-picker-tooltip'>
|
||||
<FormattedMessage
|
||||
id={'post_priority.remove'}
|
||||
defaultMessage={'Remove {priority}'}
|
||||
values={{priority}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
title={intl.formatMessage({
|
||||
id: 'post_priority.remove',
|
||||
defaultMessage: 'Remove {priority}',
|
||||
}, {priority})}
|
||||
>
|
||||
<Close
|
||||
type='button'
|
||||
@@ -183,7 +165,7 @@ function PriorityLabels({
|
||||
/>
|
||||
</span>
|
||||
</Close>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
)}
|
||||
</Priority>
|
||||
);
|
||||
|
||||
@@ -2,11 +2,10 @@
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {FormattedMessage, useIntl} from 'react-intl';
|
||||
import {useIntl} from 'react-intl';
|
||||
|
||||
import OverlayTrigger from 'components/overlay_trigger';
|
||||
import Tooltip from 'components/tooltip';
|
||||
import ReplyIcon from 'components/widgets/icons/reply_icon';
|
||||
import WithTooltip from 'components/with_tooltip';
|
||||
|
||||
import type {Locations} from 'utils/constants';
|
||||
|
||||
@@ -42,23 +41,14 @@ const CommentIcon = ({
|
||||
iconStyle = `${iconStyle} ${searchStyle}`;
|
||||
}
|
||||
|
||||
const tooltip = (
|
||||
<Tooltip
|
||||
id='comment-icon-tooltip'
|
||||
className='hidden-xs'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='post_info.comment_icon.tooltip.reply'
|
||||
defaultMessage='Reply'
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
return (
|
||||
<OverlayTrigger
|
||||
delayShow={500}
|
||||
<WithTooltip
|
||||
id='comment-icon-tooltip'
|
||||
placement='top'
|
||||
overlay={tooltip}
|
||||
title={intl.formatMessage({
|
||||
id: 'post_info.comment_icon.tooltip.reply',
|
||||
defaultMessage: 'Reply',
|
||||
})}
|
||||
>
|
||||
<button
|
||||
id={`${location}_commentIcon_${postId}`}
|
||||
@@ -71,7 +61,7 @@ const CommentIcon = ({
|
||||
{commentCountSpan}
|
||||
</span>
|
||||
</button>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -813,79 +813,15 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
|
||||
<div
|
||||
className="Acknowledgements-kPkVCv dNydui"
|
||||
>
|
||||
<OverlayTrigger
|
||||
defaultOverlayShown={false}
|
||||
delayShow={400}
|
||||
overlay={
|
||||
<Tooltip
|
||||
id="post-priority-picker-ack-tooltip"
|
||||
>
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Acknowledgement will be requested"
|
||||
id="post_priority.request_acknowledgement.tooltip"
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
<WithTooltip
|
||||
id="post-priority-picker-ack-tooltip"
|
||||
placement="top"
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
}
|
||||
title="Acknowledgement will be requested"
|
||||
>
|
||||
<OverlayTrigger
|
||||
defaultOverlayShown={false}
|
||||
delayShow={400}
|
||||
overlay={
|
||||
<OverlayWrapper
|
||||
id="post-priority-picker-ack-tooltip"
|
||||
intl={
|
||||
Object {
|
||||
"$t": [Function],
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"defaultRichTextElements": undefined,
|
||||
"fallbackOnEmptyString": true,
|
||||
"formatDate": [Function],
|
||||
"formatDateTimeRange": [Function],
|
||||
"formatDateToParts": [Function],
|
||||
"formatDisplayName": [Function],
|
||||
"formatList": [Function],
|
||||
"formatListToParts": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatNumberToParts": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelativeTime": [Function],
|
||||
"formatTime": [Function],
|
||||
"formatTimeToParts": [Function],
|
||||
"formats": Object {},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getDisplayNames": [Function],
|
||||
"getListFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralRules": [Function],
|
||||
"getRelativeTimeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"onError": [Function],
|
||||
"onWarn": [Function],
|
||||
"textComponent": "span",
|
||||
"timeZone": "Etc/UTC",
|
||||
"wrapRichTextChunksInFragment": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Acknowledgement will be requested"
|
||||
id="post_priority.request_acknowledgement.tooltip"
|
||||
/>
|
||||
</OverlayWrapper>
|
||||
}
|
||||
delay={400}
|
||||
overlay={<Unknown />}
|
||||
placement="top"
|
||||
trigger={
|
||||
Array [
|
||||
@@ -894,34 +830,89 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
|
||||
]
|
||||
}
|
||||
>
|
||||
<CheckCircleOutlineIcon
|
||||
onBlur={[Function]}
|
||||
onClick={null}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
size={14}
|
||||
<OverlayTrigger
|
||||
defaultOverlayShown={false}
|
||||
delay={400}
|
||||
overlay={
|
||||
<OverlayWrapper
|
||||
intl={
|
||||
Object {
|
||||
"$t": [Function],
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"defaultRichTextElements": undefined,
|
||||
"fallbackOnEmptyString": true,
|
||||
"formatDate": [Function],
|
||||
"formatDateTimeRange": [Function],
|
||||
"formatDateToParts": [Function],
|
||||
"formatDisplayName": [Function],
|
||||
"formatList": [Function],
|
||||
"formatListToParts": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatNumberToParts": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelativeTime": [Function],
|
||||
"formatTime": [Function],
|
||||
"formatTimeToParts": [Function],
|
||||
"formats": Object {},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getDisplayNames": [Function],
|
||||
"getListFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralRules": [Function],
|
||||
"getRelativeTimeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"onError": [Function],
|
||||
"onWarn": [Function],
|
||||
"textComponent": "span",
|
||||
"timeZone": "Etc/UTC",
|
||||
"wrapRichTextChunksInFragment": undefined,
|
||||
}
|
||||
}
|
||||
/>
|
||||
}
|
||||
placement="top"
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height={14}
|
||||
<CheckCircleOutlineIcon
|
||||
onBlur={[Function]}
|
||||
onClick={null}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width={14}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
size={14}
|
||||
>
|
||||
<path
|
||||
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
|
||||
/>
|
||||
</svg>
|
||||
</CheckCircleOutlineIcon>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height={14}
|
||||
onBlur={[Function]}
|
||||
onClick={null}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width={14}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
|
||||
/>
|
||||
</svg>
|
||||
</CheckCircleOutlineIcon>
|
||||
</OverlayTrigger>
|
||||
</OverlayTrigger>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
<FormattedMessage
|
||||
defaultMessage="Request acknowledgement"
|
||||
id="post_priority.request_acknowledgement"
|
||||
|
||||
@@ -2,15 +2,14 @@
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {FormattedMessage, useIntl} from 'react-intl';
|
||||
import {useIntl} from 'react-intl';
|
||||
|
||||
import {trackEvent} from 'actions/telemetry_actions';
|
||||
|
||||
import OverlayTrigger from 'components/overlay_trigger';
|
||||
import Tooltip from 'components/tooltip';
|
||||
import {CreateAndJoinChannelsTour, InvitePeopleTour} from 'components/tours/onboarding_tour';
|
||||
import Menu from 'components/widgets/menu/menu';
|
||||
import MenuWrapper from 'components/widgets/menu/menu_wrapper';
|
||||
import WithTooltip from 'components/with_tooltip';
|
||||
|
||||
type Props = {
|
||||
canCreateChannel: boolean;
|
||||
@@ -146,28 +145,19 @@ const AddChannelDropdown = ({
|
||||
return null;
|
||||
}
|
||||
|
||||
const tooltip = (
|
||||
<Tooltip
|
||||
id='new-group-tooltip'
|
||||
className='hidden-xs'
|
||||
>
|
||||
<FormattedMessage
|
||||
id={'sidebar_left.add_channel_dropdown.browseOrCreateChannels'}
|
||||
defaultMessage='Browse or create channels'
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
return (
|
||||
<MenuWrapper
|
||||
className='AddChannelDropdown'
|
||||
onToggle={trackOpen}
|
||||
open={isAddChannelOpen}
|
||||
>
|
||||
<OverlayTrigger
|
||||
delayShow={500}
|
||||
<WithTooltip
|
||||
id='new-group-tooltip'
|
||||
placement='top'
|
||||
overlay={tooltip}
|
||||
title={intl.formatMessage({
|
||||
id: 'sidebar_left.add_channel_dropdown.browseOrCreateChannels',
|
||||
defaultMessage: 'Browse or create channels',
|
||||
})}
|
||||
>
|
||||
<button
|
||||
className={'AddChannelDropdown_dropdownButton'}
|
||||
@@ -175,7 +165,7 @@ const AddChannelDropdown = ({
|
||||
>
|
||||
<i className='icon-plus'/>
|
||||
</button>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
<Menu
|
||||
id='AddChannelDropdown'
|
||||
ariaLabel={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channel Dropdown'})}
|
||||
|
||||
Ссылка в новой задаче
Block a user