Skip to content

Commit

Permalink
Refacto DetailsTopIcons
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtrucs
dtrucs committed Nov 20, 2024
1 parent e0ba022 commit bb5dd7b
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 74 deletions.
85 changes: 44 additions & 41 deletions ...end/src/components/pages/details/components/DetailsDownloadIcons/DetailsDownloadIcons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Printer } from 'components/Icons/Printer';
import { DetailsButton } from 'components/pages/details/components/DetailsButton';
import { useState } from 'react';
import ToolTip from 'components/ToolTip';
import { useIntl } from 'react-intl';
import { FormattedMessage, useIntl } from 'react-intl';
import { Download } from 'components/Icons/Download';
import { Details } from 'modules/details/interface';
import { ThreeD } from 'components/3D';
Expand Down Expand Up @@ -73,7 +73,7 @@ export const DetailsDownloadIcons: React.FC<DetailsTopIconsProps> = ({
return (
<div
id="details_topDownloadIcons"
className="flex justify-between items-center mx-4 desktop:mr-12 desktop:ml-auto menu-download"
className="flex justify-between items-center gap-4 desktop:mr-12 desktop:ml-auto menu-download"
data-testid={'download-button'}
>
{open3D && is3DfeatureEnabled && (
Expand All @@ -86,51 +86,54 @@ export const DetailsDownloadIcons: React.FC<DetailsTopIconsProps> = ({
/>
)}

<div className="flex space-x-4">
{details.pdfUri && (
<ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.print' })} invertPosition>
<DetailsButton url={details.pdfUri}>
<Printer size={30} />
</DetailsButton>
</ToolTip>
)}

{dropdownButtonOptions.length > 0 && (
<ToolTip toolTipText={intl.formatMessage({ id: 'details.download' })} invertPosition>
<DetailsButtonDropdown options={dropdownButtonOptions}>
<Download className="text-primary1" size={size} />
</DetailsButtonDropdown>
</ToolTip>
)}
{details.pdfUri && (
<ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.print' })} invertPosition>
<DetailsButton url={details.pdfUri}>
<Printer size={30} aria-hidden />
<span className="sr-only"><FormattedMessage id="tooltip.print" /></span>
</DetailsButton>
</ToolTip>
)}

{displayReport && Number(details.id) && getGlobalConfig().enableReport && (
<ToolTip toolTipText={intl.formatMessage({ id: 'report.title' })} invertPosition>
<DetailsButton url="#details_report" onClick={() => setReportVisibility(true)}>
<AlertTriangle size={size} />
</DetailsButton>
</ToolTip>
)}
{dropdownButtonOptions.length > 0 && (
<ToolTip toolTipText={intl.formatMessage({ id: 'details.download' })} invertPosition>
<DetailsButtonDropdown options={dropdownButtonOptions}>
<Download className="text-primary1" size={size} aria-hidden />
<span className="sr-only"><FormattedMessage id="details.download" /></span>
</DetailsButtonDropdown>
</ToolTip>
)}

{displayReservationWidget &&
(details as Details).reservation &&
(details as Details).reservation_id &&
getGlobalConfig().reservationPartner &&
getGlobalConfig().reservationProject && (
<ToolTip toolTipText={intl.formatMessage({ id: 'search.book' })} invertPosition>
<DetailsButton url="#details_reservationWidget">
<Reservation width={30} height={30} />
</DetailsButton>
</ToolTip>
)}
{displayReport && Number(details.id) && getGlobalConfig().enableReport && (
<ToolTip toolTipText={intl.formatMessage({ id: 'report.title' })} invertPosition>
<DetailsButton url="#details_report" onClick={() => setReportVisibility(true)}>
<AlertTriangle size={size} aria-hidden />
<span className="sr-only"><FormattedMessage id="report.title" /></span>
</DetailsButton>
</ToolTip>
)}

{is3DfeatureEnabled && (
<ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.show3D' })} invertPosition>
<DetailsButton onClick={() => setOpen3D(true)}>
<ThreeDMap size={size} />
{displayReservationWidget &&
(details as Details).reservation &&
(details as Details).reservation_id &&
getGlobalConfig().reservationPartner &&
getGlobalConfig().reservationProject && (
<ToolTip toolTipText={intl.formatMessage({ id: 'search.book' })} invertPosition>
<DetailsButton url="#details_reservationWidget">
<Reservation width={30} height={30} aria-hidden />
<span className="sr-only"><FormattedMessage id="search.book" /></span>
</DetailsButton>
</ToolTip>
)}
</div>

{is3DfeatureEnabled && (
<ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.show3D' })} invertPosition>
<DetailsButton onClick={() => setOpen3D(true)}>
<ThreeDMap size={size} aria-hidden/>
<span className="sr-only"><FormattedMessage id="tooltip.show3D" /></span>
</DetailsButton>
</ToolTip>
)}
</div>
);
};
62 changes: 29 additions & 33 deletions frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,25 @@ interface DetailsTopIconsProps {
}

interface IconProps {
className?: string;
height?: number;
width?: number;
src?: string;
}

const Icon: React.FC<IconProps> = ({ src = '', ...props }) => {
const Icon: React.FC<IconProps> = ({ src, ...props }) => {
if (!src) {
return null;
}
if (RegExp(/(.*).svg/).test(src)) {
return (
<SVG src={src} {...props} className="text-white" preProcessor={optimizeAndDefineColor()} />
<SVG
src={src}
{...props}
className={cn('text-white', props.className)}
preProcessor={optimizeAndDefineColor()}
aria-hidden
/>
);
}
return <Image loading="lazy" src={src} {...props} alt="" />;
Expand All @@ -49,30 +56,25 @@ export const DetailsTopIcons: React.FC<DetailsTopIconsProps> = ({
displayReservationWidget = true,
}) => {
return (
<>
<div
id="details_topRoundIcons"
className="flex justify-between items-center min-w-0 mx-4 desktop:mx-12 menu-download"
>
{practice && <ActivityLogo type={type} src={practice.pictogramUri} />}
<div
id="details_topRoundIcons"
className="flex justify-between items-center mx-4 desktop:mx-12 menu-download"
className={cn(
(type === 'TREK' || type === 'OUTDOOR_SITE' || type === 'TOURISTIC_EVENT') &&
'desktop:hidden',
)}
>
{practice && <ActivityLogo type={type} src={practice.pictogramUri} />}
<div className="flex space-x-4">
<div
className={
type === 'TREK' || type === 'OUTDOOR_SITE' || type === 'TOURISTIC_EVENT'
? 'desktop:hidden'
: undefined
}
>
<DetailsDownloadIcons
details={details}
size={30}
displayReport={type === 'TREK'}
displayReservationWidget={displayReservationWidget}
/>
</div>
</div>
<DetailsDownloadIcons
details={details}
size={30}
displayReport={type === 'TREK'}
displayReservationWidget={displayReservationWidget}
/>
</div>
</>
</div>
);
};

Expand All @@ -82,18 +84,12 @@ const ActivityLogo: React.FC<{
}> = ({ src, type = null }) => (
<div
className={cn(
`size-12 desktop:size-18 rounded-full
flex items-center justify-center
shadow-md
bg-primary1`,
'size-12 desktop:size-18 rounded-full',
'flex items-center justify-center',
'shadow-md bg-primary1',
getActivityColorClassName(type, { withBackground: true }),
)}
>
<div className="desktop:hidden">
<Icon src={src} height={40} width={40} />
</div>
<div className="hidden desktop:block">
<Icon src={src} height={53} width={53} />
</div>
<Icon src={src} className="size-10 desktop:size-13" height={53} width={53} />
</div>
);

0 comments on commit bb5dd7b

Please sign in to comment.