diff --git a/web/chat/message-reply-button.react.js b/web/chat/message-reply-button.react.js
deleted file mode 100644
--- a/web/chat/message-reply-button.react.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// @flow
-
-import invariant from 'invariant';
-import * as React from 'react';
-
-import { createMessageReply } from 'lib/shared/message-utils';
-
-import CommIcon from '../CommIcon.react.js';
-import type { InputState } from '../input/input-state';
-import css from './chat-message-list.css';
-import type { OnMessagePositionWithContainerInfo } from './position-types';
-
-type Props = {
- +messagePositionInfo: OnMessagePositionWithContainerInfo,
- +onReplyClick: () => void,
- +inputState: InputState,
-};
-function MessageReplyButton(props: Props): React.Node {
- const { inputState, onReplyClick, messagePositionInfo } = props;
- const { addReply } = inputState;
-
- const { item } = messagePositionInfo;
- const replyClicked = React.useCallback(() => {
- invariant(item.messageInfo.text, 'text should be set in message clicked');
- addReply(createMessageReply(item.messageInfo.text));
- onReplyClick();
- }, [addReply, item, onReplyClick]);
-
- return (
-
-
-
- );
-}
-
-export default MessageReplyButton;
diff --git a/web/chat/message-timestamp-tooltip.css b/web/chat/message-timestamp-tooltip.css
deleted file mode 100644
--- a/web/chat/message-timestamp-tooltip.css
+++ /dev/null
@@ -1,53 +0,0 @@
-div.messageLeftTooltip:after {
- top: 7px;
- right: -14px;
- border-color: transparent transparent transparent var(--tool-tip-bg);
-}
-div.messageRightTooltip:after {
- top: 7px;
- left: -14px;
- border-color: transparent var(--tool-tip-bg) transparent transparent;
-}
-div.messageTopLeftTooltip:after {
- bottom: -14px;
- left: 4px;
- border-color: var(--tool-tip-bg) transparent transparent transparent;
-}
-div.messageTopRightTooltip:after {
- bottom: -14px;
- right: 4px;
- border-color: var(--tool-tip-bg) transparent transparent transparent;
-}
-div.messageBottomLeftTooltip:after {
- top: -14px;
- left: 4px;
- border-color: transparent transparent var(--tool-tip-bg) transparent;
-}
-div.messageBottomRightTooltip:after {
- top: -14px;
- right: 4px;
- border-color: transparent transparent var(--tool-tip-bg) transparent;
-}
-
-div.messageActionActiveArea {
- position: absolute;
- display: flex;
- top: 0;
- bottom: 0;
- align-items: center;
- padding: 0 12px;
-}
-
-div.viewerMessageActionActiveArea {
- right: 100%;
-}
-div.nonViewerMessageActiveArea {
- left: 100%;
-}
-div.messageActionActiveArea > div + div {
- margin-left: 4px;
-}
-
-div.messageActionLinkIcon:hover {
- cursor: pointer;
-}
diff --git a/web/chat/message-timestamp-tooltip.react.js b/web/chat/message-timestamp-tooltip.react.js
deleted file mode 100644
--- a/web/chat/message-timestamp-tooltip.react.js
+++ /dev/null
@@ -1,148 +0,0 @@
-// @flow
-
-import invariant from 'invariant';
-import * as React from 'react';
-
-import { isComposableMessageType } from 'lib/types/message-types';
-import { longAbsoluteDate } from 'lib/utils/date-utils';
-
-import css from './message-timestamp-tooltip.css';
-import type { OnMessagePositionWithContainerInfo } from './position-types';
-import {
- type TooltipPosition,
- tooltipPositions,
- sizeOfTooltipArrow,
-} from './tooltip-utils';
-import {
- TooltipMenu,
- type TooltipStyle,
- TooltipTextItem,
-} from './tooltip.react';
-
-const availablePositionsForComposedViewerMessage = [tooltipPositions.LEFT];
-const availablePositionsForNonComposedOrNonViewerMessage = [
- tooltipPositions.RIGHT_BOTTOM,
-];
-
-type Props = {
- +messagePositionInfo: OnMessagePositionWithContainerInfo,
- +timeZone: ?string,
-};
-function MessageTimestampTooltip(props: Props): React.Node {
- const { messagePositionInfo, timeZone } = props;
- const { time, creator, type } = messagePositionInfo.item.messageInfo;
-
- const text = React.useMemo(() => longAbsoluteDate(time, timeZone), [
- time,
- timeZone,
- ]);
- const availableTooltipPositions = React.useMemo(() => {
- const { isViewer } = creator;
- const isComposed = isComposableMessageType(type);
- return isComposed && isViewer
- ? availablePositionsForComposedViewerMessage
- : availablePositionsForNonComposedOrNonViewerMessage;
- }, [creator, type]);
-
- const { messagePosition, containerPosition } = messagePositionInfo;
- const pointingToInfo = React.useMemo(() => {
- return {
- containerPosition,
- itemPosition: messagePosition,
- };
- }, [messagePosition, containerPosition]);
-
- const getTooltipStyle = React.useCallback(
- (tooltipPosition: TooltipPosition) =>
- getTimestampTooltipStyle(messagePositionInfo, tooltipPosition),
- [messagePositionInfo],
- );
- return (
-
-
-
- );
-}
-
-function getTimestampTooltipStyle(
- messagePositionInfo: OnMessagePositionWithContainerInfo,
- tooltipPosition: TooltipPosition,
-): TooltipStyle {
- const { messagePosition, containerPosition } = messagePositionInfo;
- const { height: containerHeight, width: containerWidth } = containerPosition;
-
- let style, className;
- if (tooltipPosition === tooltipPositions.LEFT) {
- const centerOfMessage = messagePosition.top + messagePosition.height / 2;
- const tooltipPointing = Math.max(
- Math.min(centerOfMessage, containerHeight),
- 0,
- );
- style = {
- right: containerWidth - messagePosition.left + sizeOfTooltipArrow + 2,
- bottom: containerHeight - tooltipPointing - 5 * sizeOfTooltipArrow,
- };
- className = css.messageLeftTooltip;
- } else if (tooltipPosition === tooltipPositions.RIGHT) {
- const centerOfMessage = messagePosition.top + messagePosition.height / 2;
- const tooltipPointing = Math.max(
- Math.min(centerOfMessage, containerHeight),
- 0,
- );
- style = {
- left: messagePosition.right + sizeOfTooltipArrow,
- top: tooltipPointing,
- };
- className = css.messageRightTooltip;
- } else if (tooltipPosition === tooltipPositions.LEFT_TOP) {
- const tooltipPointing = Math.min(
- containerHeight - messagePosition.top,
- containerHeight,
- );
- style = {
- left: messagePosition.left,
- bottom: tooltipPointing + sizeOfTooltipArrow,
- };
- className = css.messageTopLeftTooltip;
- } else if (tooltipPosition === tooltipPositions.RIGHT_TOP) {
- const tooltipPointing = Math.min(
- containerHeight - messagePosition.top,
- containerHeight,
- );
- style = {
- right: containerWidth - messagePosition.right,
- bottom: tooltipPointing + sizeOfTooltipArrow,
- };
- className = css.messageTopRightTooltip;
- } else if (tooltipPosition === tooltipPositions.LEFT_BOTTOM) {
- const tooltipPointing = Math.min(messagePosition.bottom, containerHeight);
- style = {
- left: messagePosition.left,
- top: tooltipPointing + sizeOfTooltipArrow,
- };
- className = css.messageBottomLeftTooltip;
- } else if (tooltipPosition === tooltipPositions.RIGHT_BOTTOM) {
- const centerOfMessage = messagePosition.top + messagePosition.height / 2;
- const tooltipPointing = Math.max(
- Math.min(centerOfMessage, containerHeight),
- 0,
- );
- style = {
- left: messagePosition.right + sizeOfTooltipArrow + 2,
- bottom: containerHeight - tooltipPointing - 5 * sizeOfTooltipArrow,
- };
- className = css.messageBottomRightTooltip;
- }
- invariant(
- className && style,
- `${tooltipPosition} is not valid for timestamp tooltip`,
- );
- return { className, style };
-}
-
-export default MessageTimestampTooltip;
diff --git a/web/chat/tooltip-utils.js b/web/chat/tooltip-utils.js
--- a/web/chat/tooltip-utils.js
+++ b/web/chat/tooltip-utils.js
@@ -53,7 +53,6 @@
+actionButtonContent: React.Node,
};
-const sizeOfTooltipArrow = 10; // 7px arrow + 3px extra
const tooltipPadding = 5;
const tooltipLabelPadding = 6;
const tooltipButtonPadding = 6;
@@ -409,5 +408,4 @@
useMessageTooltipReplyAction,
useComposedMessageTooltipActions,
useRobotextMessageTooltipActions,
- sizeOfTooltipArrow,
};
diff --git a/web/chat/tooltip.css b/web/chat/tooltip.css
--- a/web/chat/tooltip.css
+++ b/web/chat/tooltip.css
@@ -1,52 +1,3 @@
-div.messageTooltipMenu {
- position: absolute;
- background-color: var(--tool-tip-bg);
- color: var(--tool-tip-color);
- padding: 5px;
- border-radius: 5px;
- font-size: 14px;
- z-index: 1;
- white-space: nowrap;
-}
-div.messageTooltipMenu ul {
- list-style: none;
-}
-div.messageTooltipMenu li:not(:last-child) {
- padding-bottom: 5px;
-}
-div.messageTooltipMenu button {
- border: none;
- cursor: pointer;
- font-size: 14px;
- outline: none;
- background-color: black;
- color: white;
- text-decoration: underline;
-}
-div.messageTooltipMenu button:hover {
- background-color: black;
- color: #129aff;
-}
-
-div.messageLeftTooltip {
- transform: translate(0%, -50%);
-}
-div.messageRightTooltip {
- transform: translate(0%, -50%);
-}
-
-div.messageTimestampTooltip {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- padding: 6px;
- background-color: var(--message-action-tooltip-bg);
- border-radius: 8px;
- overflow: auto;
- min-width: 72px;
-}
-
div.leftTooltipAlign > div {
align-items: flex-start;
}
diff --git a/web/chat/tooltip.react.js b/web/chat/tooltip.react.js
deleted file mode 100644
--- a/web/chat/tooltip.react.js
+++ /dev/null
@@ -1,86 +0,0 @@
-// @flow
-
-import classNames from 'classnames';
-import * as React from 'react';
-
-import type { ItemAndContainerPositionInfo } from './position-types';
-import { type TooltipPosition, tooltipPositions } from './tooltip-utils';
-import css from './tooltip.css';
-
-type Style = {
- +left?: number,
- +right?: number,
- +top?: number,
- +bottom?: number,
-};
-export type TooltipStyle = { +className: string, +style?: Style };
-
-type TooltipMenuProps = {
- +availableTooltipPositions: $ReadOnlyArray,
- +targetPositionInfo: ItemAndContainerPositionInfo,
- +layoutPosition: 'relative' | 'absolute',
- +getStyle: (tooltipPosition: TooltipPosition) => TooltipStyle,
- +children: React.ChildrenArray<
- React.Element,
- >,
-};
-function TooltipMenu(props: TooltipMenuProps): React.Node {
- const { getStyle, children } = props;
-
- // eslint-disable-next-line no-unused-vars
- const tooltipTexts = React.useMemo(
- () => React.Children.map(children, item => item.props.text),
- [children],
- );
-
- const tooltipPosition = React.useMemo(() => tooltipPositions.LEFT, []);
-
- const tooltipStyle = React.useMemo(() => getStyle(tooltipPosition), [
- getStyle,
- tooltipPosition,
- ]);
-
- const className = React.useMemo(
- () =>
- classNames(
- css.messageTooltipMenu,
- tooltipStyle.className,
- css.messageTimestampTooltip,
- ),
- [tooltipStyle],
- );
-
- const style = tooltipStyle.style ? tooltipStyle.style : null;
-
- return (
-
- );
-}
-
-type TooltipButtonProps = {
- +onClick: (event: SyntheticEvent) => void,
- +text: string,
-};
-function TooltipButton(props: TooltipButtonProps): React.Node {
- const { onClick, text } = props;
- return (
-
-
-
- );
-}
-
-type TooltipTextItemProps = {
- +text: string,
-};
-function TooltipTextItem(props: TooltipTextItemProps): React.Node {
- return (
-
- {props.text}
-
- );
-}
-
-export { TooltipMenu, TooltipButton, TooltipTextItem };