From ebc14e5bde95c1e36872f1addc6891abf5a6dfb0 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Thu, 14 Mar 2024 17:10:12 +0100 Subject: [PATCH] Fix regulation slice type --- .../ConfirmRegulationModal.jsx | 4 +- .../fishing_period/DayTimeCheckbox.tsx | 2 +- .../gear_regulation/RegulatedGears.jsx | 1 - .../identification/RegulationGeometryLine.tsx | 2 +- .../identification/RegulationLawTypeLine.tsx | 2 +- .../RegulationLayerZoneLine.tsx | 2 +- .../identification/RegulationRegionLine.tsx | 8 +-- .../identification/RegulationTopicLine.tsx | 4 +- .../edit_regulation/regulatory_text/utils.ts | 11 +-- .../list_regulation/SearchRegulations.tsx | 5 +- frontend/src/features/Backoffice/slice.ts | 4 +- .../VesselLogbook/LogbookSummary/utils.ts | 6 +- frontend/src/features/Regulation/types.ts | 8 ++- frontend/src/features/Regulation/utils.ts | 10 +-- .../commonStyles/Backoffice.style.tsx | 72 ++++++++++--------- .../commonStyles/FishingPeriod.style.jsx | 28 -------- .../commonStyles/FishingPeriod.style.tsx | 34 +++++++++ 17 files changed, 102 insertions(+), 101 deletions(-) delete mode 100644 frontend/src/features/commonStyles/FishingPeriod.style.jsx create mode 100644 frontend/src/features/commonStyles/FishingPeriod.style.tsx diff --git a/frontend/src/features/Backoffice/edit_regulation/ConfirmRegulationModal.jsx b/frontend/src/features/Backoffice/edit_regulation/ConfirmRegulationModal.jsx index e22b83cec6..85db4988c9 100644 --- a/frontend/src/features/Backoffice/edit_regulation/ConfirmRegulationModal.jsx +++ b/frontend/src/features/Backoffice/edit_regulation/ConfirmRegulationModal.jsx @@ -1,9 +1,9 @@ import React from 'react' -import { batch, useDispatch, useSelector } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import styled from 'styled-components' import { COLORS } from '../../../constants/constants' -import { setIsConfirmModalOpen, setRegulationModified, setSaveOrUpdateRegulation } from '../slice' +import { setIsConfirmModalOpen, setSaveOrUpdateRegulation } from '../slice' import { CancelButton, ValidateButton } from '../../commonStyles/Buttons.style' import { FooterButton } from '../../commonStyles/Backoffice.style' import CloseIconSVG from '../../icons/Croix_grise_clair.svg?react' diff --git a/frontend/src/features/Backoffice/edit_regulation/fishing_period/DayTimeCheckbox.tsx b/frontend/src/features/Backoffice/edit_regulation/fishing_period/DayTimeCheckbox.tsx index 09df26c122..e02028f01b 100644 --- a/frontend/src/features/Backoffice/edit_regulation/fishing_period/DayTimeCheckbox.tsx +++ b/frontend/src/features/Backoffice/edit_regulation/fishing_period/DayTimeCheckbox.tsx @@ -8,7 +8,7 @@ import { TimeRow } from '../../../commonStyles/FishingPeriod.style' import { FISHING_PERIOD_KEYS } from '../../../Regulation/utils' export function DayTimeCheckbox({ disabled, timeIsDisabled }) { - const { daytime } = useBackofficeAppSelector(state => state.regulation.processingRegulation.fishingPeriod) + const daytime = useBackofficeAppSelector(state => state.regulation.processingRegulation.fishingPeriod?.daytime) const setDaytime = useSetFishingPeriod(FISHING_PERIOD_KEYS.DAYTIME) useEffect(() => { diff --git a/frontend/src/features/Backoffice/edit_regulation/gear_regulation/RegulatedGears.jsx b/frontend/src/features/Backoffice/edit_regulation/gear_regulation/RegulatedGears.jsx index c1b66b0f0c..cc58e26d40 100644 --- a/frontend/src/features/Backoffice/edit_regulation/gear_regulation/RegulatedGears.jsx +++ b/frontend/src/features/Backoffice/edit_regulation/gear_regulation/RegulatedGears.jsx @@ -48,7 +48,6 @@ const RegulatedGears = props => { } = useSelector(state => state.gear) const onCheckboxChange = (groupName, checked) => { - console.log(groupName, checked) let nextSelectedCategoriesAndGears = selectedCategoriesAndGears ? [...selectedCategoriesAndGears] : [] const gearsListToConcatOrFilter = getGroupCategories(groupName, groupsToCategories) diff --git a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationGeometryLine.tsx b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationGeometryLine.tsx index faa1d1cc51..925300f2ba 100644 --- a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationGeometryLine.tsx +++ b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationGeometryLine.tsx @@ -10,7 +10,7 @@ import { updateProcessingRegulationByKey } from '../../slice' export function RegulationGeometryLine({ geometryIdList, setShowRegulatoryPreview, showRegulatoryPreview }) { const dispatch = useBackofficeAppDispatch() - const { id } = useBackofficeAppSelector(state => state.regulation.processingRegulation) + const id = useBackofficeAppSelector(state => state.regulation.processingRegulation?.id) const onCloseIconClicked = async () => { await dispatch(updateProcessingRegulationByKey({ key: REGULATORY_REFERENCE_KEYS.ID, value: undefined })) diff --git a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationLawTypeLine.tsx b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationLawTypeLine.tsx index f09b38b623..d6a25addb4 100644 --- a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationLawTypeLine.tsx +++ b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationLawTypeLine.tsx @@ -11,7 +11,7 @@ import { updateProcessingRegulationByKey } from '../../slice' export function RegulationLawTypeLine({ selectData }) { const dispatch = useBackofficeAppDispatch() - const { lawType } = useBackofficeAppSelector(state => state.regulation.processingRegulation) + const lawType = useBackofficeAppSelector(state => state.regulation.processingRegulation?.lawType) const onLawTypeChange = async (value?) => { if (LAWTYPES_TO_TERRITORY[value] !== UE) { diff --git a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationLayerZoneLine.tsx b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationLayerZoneLine.tsx index 0e7d34c42f..6fa1c56c89 100644 --- a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationLayerZoneLine.tsx +++ b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationLayerZoneLine.tsx @@ -13,7 +13,7 @@ import InfoBox from '../InfoBox' export function RegulationLayerZoneLine() { const dispatch = useBackofficeAppDispatch() - const { zone } = useBackofficeAppSelector(state => state.regulation.processingRegulation) + const zone = useBackofficeAppSelector(state => state.regulation.processingRegulation?.zone) const setZoneName = value => { dispatch(updateProcessingRegulationByKey({ key: REGULATORY_REFERENCE_KEYS.ZONE, value })) diff --git a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationRegionLine.tsx b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationRegionLine.tsx index 9924ede909..d97270b80e 100644 --- a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationRegionLine.tsx +++ b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationRegionLine.tsx @@ -13,9 +13,7 @@ import { updateProcessingRegulationByKey } from '../../slice' export function RegulationRegionLine({ isDisabled }) { const dispatch = useBackofficeAppDispatch() - const { region: regionList }: { region?: string[] } = useBackofficeAppSelector( - state => state.regulation.processingRegulation - ) + const regionList = useBackofficeAppSelector(state => state.regulation.processingRegulation?.region) const removeRegionToSelectedRegionList = async regionToRemove => { if (!regionList) { @@ -53,7 +51,9 @@ export function RegulationRegionLine({ isDisabled }) { value={regionList} /> {regionList?.map(selectedRegion => ( - removeRegionToSelectedRegionList(selectedRegion)}>{selectedRegion} + removeRegionToSelectedRegionList(selectedRegion)}> + {selectedRegion} + ))} ) diff --git a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationTopicLine.tsx b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationTopicLine.tsx index 3fd1baf3ef..e010f4c3fe 100644 --- a/frontend/src/features/Backoffice/edit_regulation/identification/RegulationTopicLine.tsx +++ b/frontend/src/features/Backoffice/edit_regulation/identification/RegulationTopicLine.tsx @@ -19,7 +19,7 @@ import type { Option } from '@mtes-mct/monitor-ui' export function RegulationTopicLine({ isDisabled }) { const dispatch = useBackofficeAppDispatch() const regulatoryTopics = useBackofficeAppSelector(state => state.regulatory.regulatoryTopics) - const { topic } = useBackofficeAppSelector(state => state.regulation.processingRegulation) + const topic = useBackofficeAppSelector(state => state.regulation.processingRegulation?.topic) const [layerTypeList, setLayerTypeList] = useState([]) const [isAddTopicClicked, setIsAddTopicClicked] = useState(false) @@ -27,7 +27,7 @@ export function RegulationTopicLine({ isDisabled }) { useEffect(() => { if (regulatoryTopics) { - setLayerTypeList(formatDataForSelectPicker([...regulatoryTopics].sort())) + setLayerTypeList(formatDataForSelectPicker([...regulatoryTopics].sort((a, b) => a.localeCompare(b)))) } }, [regulatoryTopics]) diff --git a/frontend/src/features/Backoffice/edit_regulation/regulatory_text/utils.ts b/frontend/src/features/Backoffice/edit_regulation/regulatory_text/utils.ts index 70bb20cb77..4430d9b4f1 100644 --- a/frontend/src/features/Backoffice/edit_regulation/regulatory_text/utils.ts +++ b/frontend/src/features/Backoffice/edit_regulation/regulatory_text/utils.ts @@ -4,16 +4,7 @@ import { checkURL } from '@features/Regulation/utils' * @returns true if a regulatory text form value is missing or incorrect, else false */ export function checkOtherRequiredValues(startDate, endDate, textType) { - let oneValueIsMissing = false - - let valueIsMissing = !startDate || startDate === '' - oneValueIsMissing = oneValueIsMissing || valueIsMissing - valueIsMissing = !endDate || endDate === '' - oneValueIsMissing = oneValueIsMissing || valueIsMissing - valueIsMissing = !textType || textType.length === 0 - oneValueIsMissing = oneValueIsMissing || valueIsMissing - - return oneValueIsMissing + return !startDate || startDate === '' || !endDate || endDate === '' || !textType || textType.length === 0 } /** diff --git a/frontend/src/features/Backoffice/list_regulation/SearchRegulations.tsx b/frontend/src/features/Backoffice/list_regulation/SearchRegulations.tsx index 7a4919c1a3..8cbd04b9ea 100644 --- a/frontend/src/features/Backoffice/list_regulation/SearchRegulations.tsx +++ b/frontend/src/features/Backoffice/list_regulation/SearchRegulations.tsx @@ -13,14 +13,13 @@ import SearchIconSVG from '../../icons/Loupe.svg?react' import { closeRegulatoryZoneMetadataPanel } from '../../Regulation/slice' import { searchByLawType, searchResultIncludeZone } from '../../Regulation/utils' -export function SearchRegulations(props) { +export function SearchRegulations({ regulatoryZoneListByRegTerritory, setFoundRegulatoryZonesByRegTerritory }) { const dispatch = useBackofficeAppDispatch() - const { regulatoryZoneListByRegTerritory, setFoundRegulatoryZonesByRegTerritory } = props const searchInput = useRef(null) const [searchText, setSearchText] = useState('') - const { regulatoryZoneMetadata } = useBackofficeAppSelector(state => state.regulatory) + const regulatoryZoneMetadata = useBackofficeAppSelector(state => state.regulatory.regulatoryZoneMetadata) useEffect(() => { searchRegulatoryZone() diff --git a/frontend/src/features/Backoffice/slice.ts b/frontend/src/features/Backoffice/slice.ts index e18888ca67..1ea4a2bcfa 100644 --- a/frontend/src/features/Backoffice/slice.ts +++ b/frontend/src/features/Backoffice/slice.ts @@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit' import { STATUS } from './constants' +import type { EditedRegulatoryZone } from '../Regulation/types' import { DEFAULT_REGULATION, REGULATORY_REFERENCE_KEYS } from '../Regulation/utils' import type { RegulatoryText } from '../Regulation/types' @@ -13,8 +14,7 @@ export type RegulationState = { hasOneOrMoreValuesMissing: boolean | undefined isConfirmModalOpen: boolean isRemoveModalOpen: boolean - // TODO Convert that to a real type. - processingRegulation: typeof DEFAULT_REGULATION + processingRegulation: Partial regulationDeleted: boolean regulationModified: boolean regulationSaved: boolean diff --git a/frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/utils.ts b/frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/utils.ts index 1390132124..e381310b99 100644 --- a/frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/utils.ts +++ b/frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/utils.ts @@ -28,10 +28,9 @@ export function getTripSegments( } export function getSegmentInfo(segment: Partial): string { - if (segment.gears || segment.faoAreas || segment.targetSpecies || segment.dirm || segment.bycatchSpecies) { + if (segment.gears || segment.faoAreas || segment.targetSpecies || segment.bycatchSpecies) { const gears = segment.gears?.length ? segment.gears.join(', ') : 'aucun' const faoAreas = segment.faoAreas?.length ? segment.faoAreas.join(', ') : 'aucune' - const dirm = segment.dirm?.length ? segment.dirm.join(', ') : 'aucune' let targetSpeciesArray: string[] = [] if (segment.targetSpecies?.length) { @@ -44,8 +43,7 @@ export function getSegmentInfo(segment: Partial): string { return `Engins: ${gears} Zones FAO: ${faoAreas} -Espèces: ${targetSpecies} -Façade: ${dirm}` +Espèces: ${targetSpecies}` } return 'Segment de flotte inconnu' diff --git a/frontend/src/features/Regulation/types.ts b/frontend/src/features/Regulation/types.ts index 84363ef6b1..5f69ae4987 100644 --- a/frontend/src/features/Regulation/types.ts +++ b/frontend/src/features/Regulation/types.ts @@ -7,7 +7,7 @@ export type BaseRegulatoryZone = { } export type RegulatoryZone = BaseRegulatoryZone & { - color: string + color?: string fishingPeriod: FishingPeriod gearRegulation: GearRegulation geometry: GeoJSON.Geometry @@ -17,10 +17,14 @@ export type RegulatoryZone = BaseRegulatoryZone & { otherInfo: string region: string regulatoryReferences: RegulatoryText[] | undefined - showed: boolean + showed?: boolean speciesRegulation: SpeciesRegulation } +export type EditedRegulatoryZone = RegulatoryZone & { + region: string[] | undefined +} + export type RegulatoryText = { // TODO Use `Infinity` endDate: Date | 'infinite' diff --git a/frontend/src/features/Regulation/utils.ts b/frontend/src/features/Regulation/utils.ts index 697ad8e25e..33b632bc46 100644 --- a/frontend/src/features/Regulation/utils.ts +++ b/frontend/src/features/Regulation/utils.ts @@ -3,6 +3,7 @@ import { getTextForSearch } from '../../utils' import { formatDataForSelectPicker } from '../Backoffice/utils' import type { + EditedRegulatoryZone, FishingPeriod, Gear, GearRegulation, @@ -15,7 +16,7 @@ import type { } from './types' import type { Specy } from '../../domain/types/specy' -export const mapToRegulatoryZone = ({ geometry, id, properties }, speciesByCode): Partial => ({ +export const mapToRegulatoryZone = ({ geometry, id, properties }, speciesByCode): RegulatoryZone => ({ fishingPeriod: parseFishingPeriod(properties.fishing_period), gearRegulation: parseGearRegulation(properties.gears), geometry, @@ -374,8 +375,9 @@ export const REGULATORY_REFERENCE_KEYS = { ZONE: 'zone' } -export const DEFAULT_REGULATION = { - [REGULATORY_REFERENCE_KEYS.REGULATORY_REFERENCES]: [DEFAULT_REGULATORY_TEXT], +export const DEFAULT_REGULATION: Partial = { + [REGULATORY_REFERENCE_KEYS.TOPIC]: undefined, + [REGULATORY_REFERENCE_KEYS.ZONE]: undefined, [REGULATORY_REFERENCE_KEYS.FISHING_PERIOD]: DEFAULT_FISHING_PERIOD_VALUES, [REGULATORY_REFERENCE_KEYS.SPECIES_REGULATION]: DEFAULT_SPECIES_REGULATION, [REGULATORY_REFERENCE_KEYS.GEAR_REGULATION]: DEFAULT_GEAR_REGULATION, @@ -390,8 +392,6 @@ export const GEARS_CATEGORIES_WITH_MESH = [ 'Filets maillants et filets emmêlants' ] -export const INITIAL_UPCOMING_REG_REFERENCE = { regulatoryTextList: [DEFAULT_REGULATORY_TEXT] } - export const FISHING_PERIOD_KEYS = { ALWAYS: 'always', ANNUAL_RECURRENCE: 'annualRecurrence', diff --git a/frontend/src/features/commonStyles/Backoffice.style.tsx b/frontend/src/features/commonStyles/Backoffice.style.tsx index 4fb560e4b2..74b2e7eb30 100644 --- a/frontend/src/features/commonStyles/Backoffice.style.tsx +++ b/frontend/src/features/commonStyles/Backoffice.style.tsx @@ -1,17 +1,15 @@ -import { Checkbox, RadioGroup } from 'rsuite' +import { THEME } from '@mtes-mct/monitor-ui' +import { Checkbox } from 'rsuite' import styled, { css } from 'styled-components' -import { COLORS } from '../../constants/constants' - export const ContentLine = styled.div<{ alignedToTop?: boolean isFormOpened?: boolean isInfoTextShown?: boolean }>` display: flex; - flex-direction: ${props => (props.isFormOpened && props.isInfoTextShown ? 'column' : 'row')}; - align-items: ${props => - (props.isFormOpened && props.isInfoTextShown) || props.alignedToTop ? 'flex-start' : 'center'}; + flex-direction: ${p => (p.isFormOpened && p.isInfoTextShown ? 'column' : 'row')}; + align-items: ${p => ((p.isFormOpened && p.isInfoTextShown) || p.alignedToTop ? 'flex-start' : 'center')}; margin-bottom: 12px; ` @@ -19,13 +17,13 @@ export const Title = styled.span` text-align: left; font-weight: bold; font-size: 16px; - color: ${COLORS.slateGray}; + color: ${THEME.color.slateGray}; text-transform: uppercase; width: 100%; - border-bottom: 1px solid ${COLORS.lightGray}; + border-bottom: 1px solid ${THEME.color.lightGray}; margin-bottom: 20px; padding-bottom: 8px; - cursor: ${props => (props.onClick !== undefined ? 'pointer' : 'auto')}; + cursor: ${p => (p.onClick !== undefined ? 'pointer' : 'auto')}; ` export const Footer = styled.div` @@ -35,7 +33,7 @@ export const Footer = styled.div` left: O; bottom: 0; width: 100%; - background-color: ${COLORS.white}; + background-color: ${THEME.color.white}; z-index: 100; ` @@ -47,17 +45,21 @@ export const FooterButton = styled.div` padding: 15px 0; ` -export const Delimiter = styled.div` - width: ${props => (props.width ? props.width : '700')}px; - border-bottom: 1px solid ${COLORS.lightGray}; +export const Delimiter = styled.div<{ + width?: number +}>` + width: ${p => (p.width ? p.width : '700')}px; + border-bottom: 1px solid ${THEME.color.lightGray}; margin-bottom: 15px; ` -export const Link = styled.a` +export const Link = styled.a<{ + tagUrl?: boolean +}>` font-size: 13px; padding: 0px 8px; cursor: pointer; - ${props => (!props.tagUrl ? 'font-weight: 500;' : '')} + ${p => (!p.tagUrl ? 'font-weight: 500;' : '')} ` export const InfoTextWrapper = styled.div` display: flex; @@ -70,11 +72,11 @@ export const InfoText = styled.span<{ bold?: boolean red?: boolean }>` - ${props => (props.bold ? 'font-weight: bold;' : '')} + ${p => (p.bold ? 'font-weight: bold;' : '')} text-align: left; display: inline-block; font-size: 13px; - color: ${props => (props.red ? COLORS.maximumRed : COLORS.gunMetal)}; + color: ${p => (p.red ? THEME.color.maximumRed : THEME.color.gunMetal)}; padding-left: 8px; white-space: pre-line; ` @@ -82,14 +84,14 @@ export const InfoText = styled.span<{ export const CustomCheckbox = styled(Checkbox)` padding-right: 15px; font-size: 13px; - color: ${COLORS.gunMetal}; + color: ${THEME.color.gunMetal}; display: flex; vertical-align: baseline; margin-left: 0px; .rs-checkbox-wrapper { top: 0px !important; left: 0px !important; - border: 1px solid ${props => (props.$isRequired ? COLORS.maximumRed : COLORS.lightGray)}; + border: 1px solid ${p => (p.$isRequired ? THEME.color.maximumRed : THEME.color.lightGray)}; } .rs-checkbox-wrapper .rs-checkbox-inner { &:before { @@ -113,39 +115,41 @@ export const customRadioGroup = css` align-items: center; ` -export const AuthorizedRadio = styled(RadioGroup)` - ${customRadioGroup} -` - export const RegulatorySectionTitle = styled.div` display: flex; padding: 0px 0px 10px 0px; align-items: center; font-size: 13px; - color: ${COLORS.slateGray}; + color: ${THEME.color.slateGray}; ` -export const FormSection = styled.div` - display: ${props => (props.show ? 'flex' : 'none')}; - ${props => (props.show ? 'flex-direction: column;' : '')}; +export const FormSection = styled.div<{ + show?: boolean +}>` + display: ${p => (p.show ? 'flex' : 'none')}; + ${p => (p.show ? 'flex-direction: column;' : '')}; margin-right: 40px; ` -export const FormContent = styled.div` - display: ${props => (!props.display ? 'none' : 'flex')}; +export const FormContent = styled.div<{ + display?: boolean +}>` + display: ${p => (!p.display ? 'none' : 'flex')}; flex-direction: column; align-items: flex-start; margin-bottom: 15px; ` export const Section = styled(FormSection)` - display: ${props => (props.show ? 'flex' : 'none')}; - ${props => (props.show ? 'flex-direction: column;' : '')}; + display: ${p => (p.show ? 'flex' : 'none')}; + ${p => (p.show ? 'flex-direction: column;' : '')}; padding-bottom: 60px; ` -export const OtherRemark = styled.div` - display: ${props => (props.show ? 'flex' : 'none')}; +export const OtherRemark = styled.div<{ + show?: boolean +}>` + display: ${p => (p.show ? 'flex' : 'none')}; margin-top: 15px; ` export const Content = styled.div` @@ -156,6 +160,6 @@ export const Content = styled.div` export const VerticalLine = styled.div` width: 1px; - background: ${COLORS.lightGray}; + background: ${THEME.color.lightGray}; margin-right: 40px; ` diff --git a/frontend/src/features/commonStyles/FishingPeriod.style.jsx b/frontend/src/features/commonStyles/FishingPeriod.style.jsx deleted file mode 100644 index e00e1d60ca..0000000000 --- a/frontend/src/features/commonStyles/FishingPeriod.style.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import styled from 'styled-components' -import { COLORS } from '../../constants/constants' - -export const Row = styled.div` - display: ${props => props.display === false ? 'none' : 'flex'}; - margin-bottom: 8px; - color: ${COLORS.slateGray} -` - -export const TimeRow = styled(Row)` - opacity: ${props => props.disabled ? '0.4' : '1'}; -` - -export const DateRanges = styled.div` - display: flex; - flex-direction: column; - align-items: center; - font-size: 13px; - color: ${COLORS.slateGray}; - margin-right: 10px; -` - -export const ContentWrapper = styled.div` - display: flex; - flex-direction: row; - height: 100%; - ${props => props.alignSelf ? `align-self: ${props.alignSelf}` : ''}; -` diff --git a/frontend/src/features/commonStyles/FishingPeriod.style.tsx b/frontend/src/features/commonStyles/FishingPeriod.style.tsx new file mode 100644 index 0000000000..c314640dbe --- /dev/null +++ b/frontend/src/features/commonStyles/FishingPeriod.style.tsx @@ -0,0 +1,34 @@ +import { THEME } from '@mtes-mct/monitor-ui' +import styled from 'styled-components' + +export const Row = styled.div<{ + display?: boolean +}>` + display: ${p => (p.display === false ? 'none' : 'flex')}; + margin-bottom: 8px; + color: ${THEME.color.slateGray}; +` + +export const TimeRow = styled(Row)<{ + disabled?: boolean +}>` + opacity: ${p => (p.disabled ? '0.4' : '1')}; +` + +export const DateRanges = styled.div` + display: flex; + flex-direction: column; + align-items: center; + font-size: 13px; + color: ${THEME.color.slateGray}; + margin-right: 10px; +` + +export const ContentWrapper = styled.div<{ + alignSelf?: boolean +}>` + display: flex; + flex-direction: row; + height: 100%; + ${p => (p.alignSelf ? `align-self: ${p.alignSelf}` : '')}; +`