Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix tooltip on mobile version #211

Merged
merged 1 commit into from
Dec 6, 2023
Merged

fix tooltip on mobile version #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
* <TcConnectedPlatformsItem platform={platform} />
*/

import React from 'react';
import React, { useState } from 'react';
import TcText from '../../shared/TcText';
import clsx from 'clsx';
import TcAvatar from '../../shared/TcAvatar';
Expand All @@ -49,13 +49,22 @@ import TcIntegrationIcon from './TcIntegrationIcon';
import { capitalizeFirstChar, truncateCenter } from '../../../helpers/helper';
import { IntegrationPlatform } from '../../../utils/enums';
import { BsThreeDots } from 'react-icons/bs';
import { Tooltip } from '@mui/material';
import { ClickAwayListener, Tooltip } from '@mui/material';

interface TcConnectedPlatformsItemProps {
platform: IPlatformProps;
}

function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
const [open, setOpen] = useState<boolean>(false);

const handleTooltipClose = () => {
setOpen(false);
};

const handleTooltipOpen = () => {
setOpen(true);
};
return (
<TcIntegrationCard>
<>
Expand All @@ -75,9 +84,16 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
variant="body1"
className="text-semibold"
/>
<Tooltip title={'Connected'} arrow placement="right">
<div className={'h-3 w-3 rounded-full bg-success'} />
</Tooltip>
<ClickAwayListener onClickAway={handleTooltipClose}>
<Tooltip
title={'Connected'}
arrow
placement="right"
enterTouchDelay={0}
>
<div className={'h-3 w-3 rounded-full bg-success'} />
</Tooltip>
</ClickAwayListener>
</div>
<div className="flex justify-center">
<TcIntegrationIcon
Expand Down
34 changes: 25 additions & 9 deletions src/components/pages/statistics/StatisticalData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Tooltip } from '@mui/material';
import { ClickAwayListener, Tooltip } from '@mui/material';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import { RxArrowTopRight, RxArrowBottomRight } from 'react-icons/rx';
Expand All @@ -25,6 +25,7 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
handleSelectedOption,
}) => {
const [activeState, setActiveState] = useState<string | string[]>();
const [open, setOpen] = useState<boolean>(false);

useEffect(() => {
const queries = router.query;
Expand Down Expand Up @@ -55,6 +56,14 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
}
}, [router.query]);

const handleTooltipClose = () => {
setOpen(false);
};

const handleTooltipOpen = () => {
setOpen(true);
};

return (
<>
<div
Expand Down Expand Up @@ -114,14 +123,21 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
<span className="text-base flex items-center">
{stat.label}
{stat.hasTooltip && (
<Tooltip title={stat.tooltipText} arrow placement="bottom">
<span>
<AiOutlineExclamationCircle
size={'18px'}
className="mx-auto ml-1"
/>
</span>
</Tooltip>
<ClickAwayListener onClickAway={handleTooltipClose}>
<Tooltip
title={stat.tooltipText}
arrow
placement="bottom"
enterTouchDelay={0}
>
<span onClick={handleTooltipOpen}>
<AiOutlineExclamationCircle
size={'18px'}
className="mx-auto ml-1"
/>
</span>
</Tooltip>
</ClickAwayListener>
)}
</span>
</div>
Expand Down
32 changes: 25 additions & 7 deletions src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
Avatar,
Button,
Checkbox,
ClickAwayListener,
FormControlLabel,
List,
ListItem,
Expand Down Expand Up @@ -78,6 +79,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
>(activityCompositionOptions.map((option) => option.value));
const [selectAllActivityOptions, setSelectAllActivityOptions] =
useState(true);
const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);

const handleOpenActivityPopup = (
event: React.MouseEvent<HTMLButtonElement>
Expand Down Expand Up @@ -230,6 +232,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
}
}, [router.query]);

const handleTooltipClose = () => {
setTooltipOpen(false);
};

const handleTooltipOpen = () => {
setTooltipOpen(true);
};

return (
<>
<Table className="border-separate border-spacing-y-2">
Expand Down Expand Up @@ -462,13 +472,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
{row.ngu}
</span>
{row[column.id].length > 10 ? (
<Tooltip title={row[column.id]} placement="top">
<span className="text-gray-subtitle text-base cursor-pointer">
{`${row[column.id].slice(0, 3)}...${row[
column.id
].slice(-4)}`}
</span>
</Tooltip>
<ClickAwayListener
onClickAway={handleTooltipClose}
>
<Tooltip
title={row[column.id]}
placement="top"
enterTouchDelay={0}
>
<span className="text-gray-subtitle text-base cursor-pointer">
{`${row[column.id].slice(0, 3)}...${row[
column.id
].slice(-4)}`}
</span>
</Tooltip>
</ClickAwayListener>
) : (
<span className="text-gray-subtitle text-base">
{row[column.id]}
Expand Down
Loading