From 5ffde09392a8df78c5a3006f6cf9ae9d6b70d4a7 Mon Sep 17 00:00:00 2001 From: Ivan Gabriele Date: Thu, 12 Sep 2024 15:46:18 +0200 Subject: [PATCH 1/4] Import FulfillingBouncingCircleSpinner component from react-epic-spinners --- .../FulfillingBouncingCircleSpinner.tsx | 138 ++++++++++++++++++ .../FleetSegmentsBackoffice/index.tsx | 2 +- .../LoadOffline/components/LoadOffline.tsx | 2 +- frontend/src/features/SideWindow/index.tsx | 2 +- .../Vessel/components/VesselLoader.tsx | 2 +- frontend/src/ui/LoadingSpinnerWall.tsx | 2 +- 6 files changed, 143 insertions(+), 5 deletions(-) create mode 100644 frontend/src/components/FulfillingBouncingCircleSpinner.tsx diff --git a/frontend/src/components/FulfillingBouncingCircleSpinner.tsx b/frontend/src/components/FulfillingBouncingCircleSpinner.tsx new file mode 100644 index 0000000000..81ece53219 --- /dev/null +++ b/frontend/src/components/FulfillingBouncingCircleSpinner.tsx @@ -0,0 +1,138 @@ +// https://github.com/bondz/react-epic-spinners/blob/c5b731c58edd75a93753ab95857dbc633e387fb1/src/components/FulfillingBouncingCircleSpinner.js + +import styled from 'styled-components' + +import type { HTMLAttributes } from 'react' + +type FulfillingBouncingCircleSpinnerProps = Readonly< + HTMLAttributes & { + animationDuration?: number + color?: string + size?: number + } +> +export function FulfillingBouncingCircleSpinner({ + animationDuration = 4000, + className = '', + color = '#fff', + size = 60, + ...props +}: FulfillingBouncingCircleSpinnerProps) { + return ( + +
+
+ + ) +} + +const BouncingCircle = styled.div<{ + $animationDuration: number + $color: string + $size: number +}>` + height: ${props => props.$size}px; + width: ${props => props.$size}px; + position: relative; + animation: fulfilling-bouncing-circle-spinner-animation infinite ${props => props.$animationDuration}ms ease; + + * { + box-sizing: border-box; + } + + .orbit { + height: ${props => props.$size}px; + width: ${props => props.$size}px; + position: absolute; + top: 0; + left: 0; + border-radius: 50%; + border: calc(${props => props.$size}px * 0.03) solid ${props => props.$color}; + animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite ${props => props.$animationDuration}ms ease; + } + .circle { + height: ${props => props.$size}px; + width: ${props => props.$size}px; + color: ${props => props.$color}; + display: block; + border-radius: 50%; + position: relative; + border: calc(${props => props.$size}px * 0.1) solid ${props => props.$color}; + animation: fulfilling-bouncing-circle-spinner-circle-animation infinite ${props => props.$animationDuration}ms ease; + transform: rotate(0deg) scale(1); + } + @keyframes fulfilling-bouncing-circle-spinner-animation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + @keyframes fulfilling-bouncing-circle-spinner-orbit-animation { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1); + } + 62.5% { + transform: scale(0.8); + } + 75% { + transform: scale(1); + } + 87.5% { + transform: scale(0.8); + } + 100% { + transform: scale(1); + } + } + @keyframes fulfilling-bouncing-circle-spinner-circle-animation { + 0% { + transform: scale(1); + border-color: transparent; + border-top-color: inherit; + } + 16.7% { + border-color: transparent; + border-top-color: initial; + border-right-color: initial; + } + 33.4% { + border-color: transparent; + border-top-color: inherit; + border-right-color: inherit; + border-bottom-color: inherit; + } + 50% { + border-color: inherit; + transform: scale(1); + } + 62.5% { + border-color: inherit; + transform: scale(1.4); + } + 75% { + border-color: inherit; + transform: scale(1); + opacity: 1; + } + 87.5% { + border-color: inherit; + transform: scale(1.4); + } + 100% { + border-color: transparent; + border-top-color: inherit; + transform: scale(1); + } + } +` diff --git a/frontend/src/features/FleetSegment/components/FleetSegmentsBackoffice/index.tsx b/frontend/src/features/FleetSegment/components/FleetSegmentsBackoffice/index.tsx index 18571c69d1..e0a873779b 100644 --- a/frontend/src/features/FleetSegment/components/FleetSegmentsBackoffice/index.tsx +++ b/frontend/src/features/FleetSegment/components/FleetSegmentsBackoffice/index.tsx @@ -1,9 +1,9 @@ +import { FulfillingBouncingCircleSpinner } from '@components/FulfillingBouncingCircleSpinner' import { fleetSegmentApi } from '@features/FleetSegment/apis' import { useBackofficeAppDispatch } from '@hooks/useBackofficeAppDispatch' import { Button, customDayjs, Select, THEME } from '@mtes-mct/monitor-ui' import _ from 'lodash' import { useCallback, useEffect, useMemo, useState } from 'react' -import { FulfillingBouncingCircleSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { CreateOrEditFleetSegmentModal } from './CreateOrEditFleetSegmentModal' diff --git a/frontend/src/features/LoadOffline/components/LoadOffline.tsx b/frontend/src/features/LoadOffline/components/LoadOffline.tsx index 92ff8ebc6c..cf339a3940 100644 --- a/frontend/src/features/LoadOffline/components/LoadOffline.tsx +++ b/frontend/src/features/LoadOffline/components/LoadOffline.tsx @@ -1,6 +1,6 @@ +import { FulfillingBouncingCircleSpinner } from '@components/FulfillingBouncingCircleSpinner' import { Accent, Button, Icon, THEME } from '@mtes-mct/monitor-ui' import { useEffect, useMemo, useState } from 'react' -import { FulfillingBouncingCircleSpinner } from 'react-epic-spinners' import { Progress } from 'rsuite' import styled from 'styled-components' diff --git a/frontend/src/features/SideWindow/index.tsx b/frontend/src/features/SideWindow/index.tsx index 68ce3d8250..297895d546 100644 --- a/frontend/src/features/SideWindow/index.tsx +++ b/frontend/src/features/SideWindow/index.tsx @@ -1,4 +1,5 @@ import { FrontendErrorBoundary } from '@components/FrontendErrorBoundary' +import { FulfillingBouncingCircleSpinner } from '@components/FulfillingBouncingCircleSpinner' import { MissionForm } from '@features/Mission/components/MissionForm' import { useListenToAllMissionEventsUpdates } from '@features/Mission/components/MissionForm/hooks/useListenToAllMissionEventsUpdates' import { openSideWindowPath } from '@features/SideWindow/useCases/openSideWindowPath' @@ -14,7 +15,6 @@ import { useState, Fragment } from 'react' -import { FulfillingBouncingCircleSpinner } from 'react-epic-spinners' import styled, { createGlobalStyle, css, StyleSheetManager } from 'styled-components' import { Alert } from './Alert' diff --git a/frontend/src/features/Vessel/components/VesselLoader.tsx b/frontend/src/features/Vessel/components/VesselLoader.tsx index df19db20ce..eaa3bb0ac3 100644 --- a/frontend/src/features/Vessel/components/VesselLoader.tsx +++ b/frontend/src/features/Vessel/components/VesselLoader.tsx @@ -1,7 +1,7 @@ +import { FulfillingBouncingCircleSpinner } from '@components/FulfillingBouncingCircleSpinner' import { useIsInLightMode } from '@hooks/useIsInLightMode' import { skipToken } from '@reduxjs/toolkit/query' import { useEffect, useState } from 'react' -import { FulfillingBouncingCircleSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { FIVE_MINUTES, TWENTY_MINUTES } from '../../../api/APIWorker' diff --git a/frontend/src/ui/LoadingSpinnerWall.tsx b/frontend/src/ui/LoadingSpinnerWall.tsx index 864c8e186a..7a773738db 100644 --- a/frontend/src/ui/LoadingSpinnerWall.tsx +++ b/frontend/src/ui/LoadingSpinnerWall.tsx @@ -1,5 +1,5 @@ +import { FulfillingBouncingCircleSpinner } from '@components/FulfillingBouncingCircleSpinner' import { THEME } from '@mtes-mct/monitor-ui' -import { FulfillingBouncingCircleSpinner } from 'react-epic-spinners' import styled from 'styled-components' import VesselSVG from '../features/icons/Icone_navire.svg?react' From df74a7064f2fa2bc5b06d31146eef0f4c79505e6 Mon Sep 17 00:00:00 2001 From: Ivan Gabriele Date: Thu, 12 Sep 2024 15:53:28 +0200 Subject: [PATCH 2/4] Import FingerprintSpinner component from react-epic-spinners --- .../src/components/FingerprintSpinner.tsx | 127 ++++++++++++++++++ .../components/VesselLogbook/index.tsx | 2 +- .../RegulatoryZoneMetadata/index.tsx | 2 +- .../components/VesselReportings/index.tsx | 2 +- .../VesselSidebar/Controls/index.tsx | 2 +- .../Equipment/VesselEquipment.tsx | 2 +- .../Equipment/resume/EquipmentResume.tsx | 2 +- .../components/VesselSidebar/Identity.tsx | 2 +- .../components/VesselSidebar/Summary.tsx | 2 +- 9 files changed, 135 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/FingerprintSpinner.tsx diff --git a/frontend/src/components/FingerprintSpinner.tsx b/frontend/src/components/FingerprintSpinner.tsx new file mode 100644 index 0000000000..85f89d7bca --- /dev/null +++ b/frontend/src/components/FingerprintSpinner.tsx @@ -0,0 +1,127 @@ +// https://github.com/bondz/react-epic-spinners/blob/c5b731c58edd75a93753ab95857dbc633e387fb1/src/components/FingerprintSpinner.js + +import styled from 'styled-components' + +import type { HTMLAttributes } from 'react' + +function generateRings(num: number) { + // eslint-disable-next-line react/no-array-index-key + return Array.from({ length: num }).map((_val, index) =>
) +} + +type FingerprintSpinnerProps = Readonly< + HTMLAttributes & { + animationDuration?: number + color?: string + size?: number + } +> +export function FingerprintSpinner({ + animationDuration = 1500, + className = '', + color = '#fff', + size = 60, + ...props +}: FingerprintSpinnerProps) { + const ringsNum = 9 + const containerPadding = 2 + const outerRingSize = size - containerPadding * 2 + const ringBase = outerRingSize / ringsNum + + return ( + + {generateRings(ringsNum)} + + ) +} + +const RingSpinner = styled.div<{ + $animationDuration: number + $color: string + $containerPadding: number + $ringBase: number + $size: number +}>` + height: ${props => props.$size}px; + width: ${props => props.$size}px; + padding: ${props => props.$containerPadding}px; + overflow: hidden; + position: relative; + + * { + box-sizing: border-box; + } + + .spinner-ring { + position: absolute; + border-radius: 50%; + border: 2px solid transparent; + border-top-color: ${props => props.$color}; + animation: fingerprint-spinner-animation ${props => props.$animationDuration}ms + cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite forwards; + margin: auto; + bottom: 0; + left: 0; + right: 0; + top: 0; + } + .spinner-ring:nth-child(1) { + height: ${props => props.$ringBase + 0 * props.$ringBase}px; + width: ${props => props.$ringBase + 0 * props.$ringBase}px; + animation-delay: calc(50ms * 1); + } + .spinner-ring:nth-child(2) { + height: ${props => props.$ringBase + 1 * props.$ringBase}px; + width: ${props => props.$ringBase + 1 * props.$ringBase}px; + animation-delay: calc(50ms * 2); + } + .spinner-ring:nth-child(3) { + height: ${props => props.$ringBase + 2 * props.$ringBase}px; + width: ${props => props.$ringBase + 2 * props.$ringBase}px; + animation-delay: calc(50ms * 3); + } + .spinner-ring:nth-child(4) { + height: ${props => props.$ringBase + 3 * props.$ringBase}px; + width: ${props => props.$ringBase + 3 * props.$ringBase}px; + animation-delay: calc(50ms * 4); + } + .spinner-ring:nth-child(5) { + height: ${props => props.$ringBase + 4 * props.$ringBase}px; + width: ${props => props.$ringBase + 4 * props.$ringBase}px; + animation-delay: calc(50ms * 5); + } + .spinner-ring:nth-child(6) { + height: ${props => props.$ringBase + 5 * props.$ringBase}px; + width: ${props => props.$ringBase + 5 * props.$ringBase}px; + animation-delay: calc(50ms * 6); + } + .spinner-ring:nth-child(7) { + height: ${props => props.$ringBase + 6 * props.$ringBase}px; + width: ${props => props.$ringBase + 6 * props.$ringBase}px; + animation-delay: calc(50ms * 7); + } + .spinner-ring:nth-child(8) { + height: ${props => props.$ringBase + 7 * props.$ringBase}px; + width: ${props => props.$ringBase + 7 * props.$ringBase}px; + animation-delay: calc(50ms * 8); + } + .spinner-ring:nth-child(9) { + height: ${props => props.$ringBase + 8 * props.$ringBase}px; + width: ${props => props.$ringBase + 8 * props.$ringBase}px; + animation-delay: calc(50ms * 9); + } + + @keyframes fingerprint-spinner-animation { + 100% { + transform: rotate(360deg); + } + } +` diff --git a/frontend/src/features/Logbook/components/VesselLogbook/index.tsx b/frontend/src/features/Logbook/components/VesselLogbook/index.tsx index 1a665cadf6..69ad82b289 100644 --- a/frontend/src/features/Logbook/components/VesselLogbook/index.tsx +++ b/frontend/src/features/Logbook/components/VesselLogbook/index.tsx @@ -1,8 +1,8 @@ import { FIVE_MINUTES } from '@api/APIWorker' +import { FingerprintSpinner } from '@components/FingerprintSpinner' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' import { useCallback, useEffect, useState } from 'react' -import { FingerprintSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { LogbookMessages } from './LogbookMessages' diff --git a/frontend/src/features/Regulation/components/RegulatoryZoneMetadata/index.tsx b/frontend/src/features/Regulation/components/RegulatoryZoneMetadata/index.tsx index 2f46747ca5..3bfcce64ff 100644 --- a/frontend/src/features/Regulation/components/RegulatoryZoneMetadata/index.tsx +++ b/frontend/src/features/Regulation/components/RegulatoryZoneMetadata/index.tsx @@ -1,9 +1,9 @@ +import { FingerprintSpinner } from '@components/FingerprintSpinner' import { ZonePreview } from '@features/Regulation/components/ZonePreview' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' import { Icon, THEME } from '@mtes-mct/monitor-ui' import { useCallback } from 'react' -import { FingerprintSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { FishingPeriodDisplayed } from './fishingPeriod' diff --git a/frontend/src/features/Reporting/components/VesselReportings/index.tsx b/frontend/src/features/Reporting/components/VesselReportings/index.tsx index d513051214..35d88bb3b2 100644 --- a/frontend/src/features/Reporting/components/VesselReportings/index.tsx +++ b/frontend/src/features/Reporting/components/VesselReportings/index.tsx @@ -1,9 +1,9 @@ +import { FingerprintSpinner } from '@components/FingerprintSpinner' import { Summary } from '@features/Reporting/components/VesselReportings/Summary' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' import { THEME, usePrevious } from '@mtes-mct/monitor-ui' import { useEffect, useState } from 'react' -import { FingerprintSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { Archived } from './Archived' diff --git a/frontend/src/features/Vessel/components/VesselSidebar/Controls/index.tsx b/frontend/src/features/Vessel/components/VesselSidebar/Controls/index.tsx index 1b85718a9c..685c5a82bb 100644 --- a/frontend/src/features/Vessel/components/VesselSidebar/Controls/index.tsx +++ b/frontend/src/features/Vessel/components/VesselSidebar/Controls/index.tsx @@ -1,5 +1,5 @@ +import { FingerprintSpinner } from '@components/FingerprintSpinner' import { useCallback, useEffect, useMemo } from 'react' -import { FingerprintSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { ControlsSummary } from './ControlsSummary' diff --git a/frontend/src/features/Vessel/components/VesselSidebar/Equipment/VesselEquipment.tsx b/frontend/src/features/Vessel/components/VesselSidebar/Equipment/VesselEquipment.tsx index b688bba882..ce97b71c39 100644 --- a/frontend/src/features/Vessel/components/VesselSidebar/Equipment/VesselEquipment.tsx +++ b/frontend/src/features/Vessel/components/VesselSidebar/Equipment/VesselEquipment.tsx @@ -1,6 +1,6 @@ +import { FingerprintSpinner } from '@components/FingerprintSpinner' import { usePrevious } from '@mtes-mct/monitor-ui' import { useEffect, useState } from 'react' -import { FingerprintSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { BeaconMalfunctionDetails } from './details/BeaconMalfunctionDetails' diff --git a/frontend/src/features/Vessel/components/VesselSidebar/Equipment/resume/EquipmentResume.tsx b/frontend/src/features/Vessel/components/VesselSidebar/Equipment/resume/EquipmentResume.tsx index dfd6337022..4152f05c39 100644 --- a/frontend/src/features/Vessel/components/VesselSidebar/Equipment/resume/EquipmentResume.tsx +++ b/frontend/src/features/Vessel/components/VesselSidebar/Equipment/resume/EquipmentResume.tsx @@ -1,9 +1,9 @@ +import { FingerprintSpinner } from '@components/FingerprintSpinner' import { FlatKeyValue } from '@features/Vessel/components/VesselSidebar/common/FlatKeyValue' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' import { THEME } from '@mtes-mct/monitor-ui' import { useMemo } from 'react' -import { FingerprintSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { BeaconMalfunctionsResume } from './BeaconMalfunctionsResume' diff --git a/frontend/src/features/Vessel/components/VesselSidebar/Identity.tsx b/frontend/src/features/Vessel/components/VesselSidebar/Identity.tsx index d74ed5bd16..c16227a387 100644 --- a/frontend/src/features/Vessel/components/VesselSidebar/Identity.tsx +++ b/frontend/src/features/Vessel/components/VesselSidebar/Identity.tsx @@ -1,10 +1,10 @@ +import { FingerprintSpinner } from '@components/FingerprintSpinner' import { FlatTwoColumnKeyValue } from '@features/Vessel/components/VesselSidebar/common/FlatTwoColumnKeyValue' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' import { THEME } from '@mtes-mct/monitor-ui' import countries from 'i18n-iso-countries' import { useEffect, useMemo } from 'react' -import { FingerprintSpinner } from 'react-epic-spinners' import styled from 'styled-components' import { showVessel } from '../../../../domain/use_cases/vessel/showVessel' diff --git a/frontend/src/features/Vessel/components/VesselSidebar/Summary.tsx b/frontend/src/features/Vessel/components/VesselSidebar/Summary.tsx index 6e4c1d02a6..86670bd4c0 100644 --- a/frontend/src/features/Vessel/components/VesselSidebar/Summary.tsx +++ b/frontend/src/features/Vessel/components/VesselSidebar/Summary.tsx @@ -1,3 +1,4 @@ +import { FingerprintSpinner } from '@components/FingerprintSpinner' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' import { THEME } from '@mtes-mct/monitor-ui' @@ -6,7 +7,6 @@ import { getCoordinates } from 'coordinates' import { WSG84_PROJECTION } from 'domain/entities/map/constants' import { showVessel } from 'domain/use_cases/vessel/showVessel' import { useEffect, useState } from 'react' -import { FingerprintSpinner } from 'react-epic-spinners' import styled from 'styled-components' import * as timeago from 'timeago.js' import { getDateTime, timeagoFrenchLocale } from 'utils' From d7582af32233153e76d7e9d38065cf12ded44380 Mon Sep 17 00:00:00 2001 From: Ivan Gabriele Date: Thu, 12 Sep 2024 15:59:33 +0200 Subject: [PATCH 3/4] Import LoopingRhombusesSpinner component from react-epic-spinners --- frontend/package-lock.json | 11 --- frontend/package.json | 1 - .../components/LoopingRhombusesSpinner.tsx | 85 +++++++++++++++++++ .../MissionForm/shared/FieldsetGroup.tsx | 2 +- 4 files changed, 86 insertions(+), 13 deletions(-) create mode 100644 frontend/src/components/LoopingRhombusesSpinner.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 383e81ddc6..216dadb9f8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -39,7 +39,6 @@ "react-color": "2.19.3", "react-device-detect": "2.2.3", "react-dom": "18.3.1", - "react-epic-spinners": "0.5.0", "react-highlight-words": "0.20.0", "react-imask": "6.4.3", "react-markdown": "8.0.7", @@ -15460,16 +15459,6 @@ "react": "^18.3.1" } }, - "node_modules/react-epic-spinners": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/react-epic-spinners/-/react-epic-spinners-0.5.0.tgz", - "integrity": "sha512-tKdJ/FiesCVifYETHW0qS/7kQ6vDE4kf0pJR4iTwkNjl84/rBePdZQgrWKniiY+SexUVd+ApooIhsoEorJ9mMg==", - "license": "MIT", - "dependencies": { - "react": ">=0.14.x", - "styled-components": ">=2.4.0" - } - }, "node_modules/react-fast-compare": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index e3852351ad..571c8b193d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -65,7 +65,6 @@ "react-color": "2.19.3", "react-device-detect": "2.2.3", "react-dom": "18.3.1", - "react-epic-spinners": "0.5.0", "react-highlight-words": "0.20.0", "react-imask": "6.4.3", "react-markdown": "8.0.7", diff --git a/frontend/src/components/LoopingRhombusesSpinner.tsx b/frontend/src/components/LoopingRhombusesSpinner.tsx new file mode 100644 index 0000000000..1503039aec --- /dev/null +++ b/frontend/src/components/LoopingRhombusesSpinner.tsx @@ -0,0 +1,85 @@ +// https://github.com/bondz/react-epic-spinners/blob/c5b731c58edd75a93753ab95857dbc633e387fb1/src/components/LoopingRhombusesSpinner.js + +import styled from 'styled-components' + +import type { HTMLAttributes } from 'react' + +function generateSpinners(num: number) { + // eslint-disable-next-line react/no-array-index-key + return Array.from({ length: num }).map((_val, index) =>
) +} + +type LoopingRhombusesSpinnerProps = Readonly< + HTMLAttributes & { + animationDuration?: number + color?: string + size?: number + } +> +export function LoopingRhombusesSpinner({ + animationDuration = 2500, + className = '', + color = '#fff', + size = 15, + ...props +}: LoopingRhombusesSpinnerProps) { + const num = 3 + + return ( + + {generateSpinners(num)} + + ) +} + +const LoadingRhombus = styled.div<{ + $animationDuration: number + $color: string + $size: number +}>` + width: ${props => props.$size * 4}px; + height: ${props => props.$size}px; + position: relative; + + * { + box-sizing: border-box; + } + + .rhombus { + height: ${props => props.$size}px; + width: ${props => props.$size}px; + background-color: ${props => props.$color}; + left: ${props => props.$size * 4}px; + position: absolute; + margin: 0 auto; + border-radius: 2px; + transform: translateY(0) rotate(45deg) scale(0); + animation: looping-rhombuses-spinner-animation ${props => props.$animationDuration}ms linear infinite; + } + .rhombus:nth-child(1) { + animation-delay: calc(${props => props.$animationDuration}ms * 1 / -1.5); + } + .rhombus:nth-child(2) { + animation-delay: calc(${props => props.$animationDuration}ms * 2 / -1.5); + } + .rhombus:nth-child(3) { + animation-delay: calc(${props => props.$animationDuration}ms * 3 / -1.5); + } + @keyframes looping-rhombuses-spinner-animation { + 0% { + transform: translateX(0) rotate(45deg) scale(0); + } + 50% { + transform: translateX(-233%) rotate(45deg) scale(1); + } + 100% { + transform: translateX(-466%) rotate(45deg) scale(0); + } + } +` diff --git a/frontend/src/features/Mission/components/MissionForm/shared/FieldsetGroup.tsx b/frontend/src/features/Mission/components/MissionForm/shared/FieldsetGroup.tsx index 210fbb1485..0ba8f21d13 100644 --- a/frontend/src/features/Mission/components/MissionForm/shared/FieldsetGroup.tsx +++ b/frontend/src/features/Mission/components/MissionForm/shared/FieldsetGroup.tsx @@ -1,5 +1,5 @@ +import { LoopingRhombusesSpinner } from '@components/LoopingRhombusesSpinner' import { Fieldset, THEME } from '@mtes-mct/monitor-ui' -import { LoopingRhombusesSpinner } from 'react-epic-spinners' import styled, { css } from 'styled-components' import type { FieldsetProps } from '@mtes-mct/monitor-ui' From f37a13b9e40ee3e82d5b08c4688ef81a49cbf252 Mon Sep 17 00:00:00 2001 From: Ivan Gabriele Date: Thu, 12 Sep 2024 16:00:51 +0200 Subject: [PATCH 4/4] Upgrade monitor-ui from v22.0.1 to v23.0.0 --- .../api/outputs/ReportingSummaryDataOutput.kt | 16 +++++++++------- ...rtingTitleAndNumberOfOccurrencesDataOutput.kt | 4 +++- frontend/package-lock.json | 8 ++++---- frontend/package.json | 2 +- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingSummaryDataOutput.kt b/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingSummaryDataOutput.kt index ba8aaca4f8..ebf7a32da7 100644 --- a/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingSummaryDataOutput.kt +++ b/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingSummaryDataOutput.kt @@ -8,12 +8,14 @@ data class ReportingSummaryDataOutput( val numberOfObservations: Int, ) { companion object { - fun fromReportingSummary(reportingSummary: ReportingSummary) = ReportingSummaryDataOutput( - infractionSuspicionsSummary = reportingSummary.infractionSuspicionsSummary.map { - ReportingTitleAndNumberOfOccurrencesDataOutput.fromReportingTitleAndNumberOfOccurrences(it) - }, - numberOfInfractionSuspicions = reportingSummary.numberOfInfractionSuspicions, - numberOfObservations = reportingSummary.numberOfObservations - ) + fun fromReportingSummary(reportingSummary: ReportingSummary) = + ReportingSummaryDataOutput( + infractionSuspicionsSummary = + reportingSummary.infractionSuspicionsSummary.map { + ReportingTitleAndNumberOfOccurrencesDataOutput.fromReportingTitleAndNumberOfOccurrences(it) + }, + numberOfInfractionSuspicions = reportingSummary.numberOfInfractionSuspicions, + numberOfObservations = reportingSummary.numberOfObservations, + ) } } diff --git a/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingTitleAndNumberOfOccurrencesDataOutput.kt b/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingTitleAndNumberOfOccurrencesDataOutput.kt index f0e02eff22..b197fd589b 100644 --- a/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingTitleAndNumberOfOccurrencesDataOutput.kt +++ b/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingTitleAndNumberOfOccurrencesDataOutput.kt @@ -7,7 +7,9 @@ data class ReportingTitleAndNumberOfOccurrencesDataOutput( val numberOfOccurrences: Int, ) { companion object { - fun fromReportingTitleAndNumberOfOccurrences(reportingTitleAndNumberOfOccurrences: ReportingTitleAndNumberOfOccurrences) = ReportingTitleAndNumberOfOccurrencesDataOutput( + fun fromReportingTitleAndNumberOfOccurrences( + reportingTitleAndNumberOfOccurrences: ReportingTitleAndNumberOfOccurrences, + ) = ReportingTitleAndNumberOfOccurrencesDataOutput( title = reportingTitleAndNumberOfOccurrences.title, numberOfOccurrences = reportingTitleAndNumberOfOccurrences.numberOfOccurrences, ) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 216dadb9f8..0da53dbff3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@dnd-kit/core": "6.1.0", "@dnd-kit/modifiers": "6.0.1", - "@mtes-mct/monitor-ui": "22.0.1", + "@mtes-mct/monitor-ui": "23.0.0", "@reduxjs/toolkit": "2.2.7", "@sentry/react": "7.117.0", "@tanstack/react-table": "8.20.5", @@ -2854,9 +2854,9 @@ "license": "BSD-2-Clause" }, "node_modules/@mtes-mct/monitor-ui": { - "version": "22.0.1", - "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-22.0.1.tgz", - "integrity": "sha512-XJN9Yzph00vDl0rM7pOa2JVci9M1YsrzpiAQEGq7AOe4D6moO2g8/1WYmu6NCmSUoJQCgQyCYoeLZmAk7cSljg==", + "version": "23.0.0", + "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-23.0.0.tgz", + "integrity": "sha512-RXN9j6/ggZNVlUcRMUgLTYT/tOGfmTjZZj4mgthbNszODbQsAkDBp+A855rZ+kBFPVnol9mdmzNov7ThSb3U5A==", "license": "AGPL-3.0", "dependencies": { "@babel/runtime": "7.25.6", diff --git a/frontend/package.json b/frontend/package.json index 571c8b193d..15b9305fe0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -37,7 +37,7 @@ "dependencies": { "@dnd-kit/core": "6.1.0", "@dnd-kit/modifiers": "6.0.1", - "@mtes-mct/monitor-ui": "22.0.1", + "@mtes-mct/monitor-ui": "23.0.0", "@reduxjs/toolkit": "2.2.7", "@sentry/react": "7.117.0", "@tanstack/react-table": "8.20.5",