From bc1b0039cf788b8dcd99b68d9d0885111b7b496b Mon Sep 17 00:00:00 2001 From: HO <93981322+VWSCoronaDashboard19@users.noreply.github.com> Date: Thu, 17 Nov 2022 18:42:57 +0100 Subject: [PATCH] Set header and clean up old unused data on measures page in Sanity (#4495) * feat(measures): add consistent header with icon to page * feat(measures): Clean up old unused data on measures page in Sanity * fix: revert agegroup change * feat: updated logic for icons and Sanity * feat: cleanup code and optimize better naming * fix: removed redundant code as its already removed * fix: remove redundant code comment * feat: updated query for measuresItems * fix: fixed Sanity bug by filtering keyless docs * fix: cleaned up css formatting --- .../src/domain/measures/measures-table.tsx | 123 +++++++++ packages/app/src/domain/measures/types.ts | 5 + .../domain/restrictions/lockdown-table.tsx | 233 ------------------ .../domain/restrictions/restriction-icons.ts | 81 ------ .../vaccine/components/age-group-select.tsx | 26 +- .../src/pages/landelijk/geldende-adviezen.tsx | 86 +++---- .../[code]/geldende-adviezen.tsx | 88 +++---- packages/app/src/types/cms.d.ts | 34 +-- packages/cms/src/components/index.ts | 1 - .../src/components/restriction-icon/index.ts | 2 - .../restriction-icon-input.tsx | 96 -------- .../restriction-icon/restriction-icons.ts | 102 -------- packages/cms/src/dashboard-config.tsx | 7 +- packages/cms/src/desk-structure.ts | 8 +- packages/cms/src/schemas/measures/index.ts | 3 + .../schemas/measures/measures-collection.ts | 43 ++++ .../cms/src/schemas/measures/measures-item.ts | 37 +++ packages/cms/src/schemas/measures/measures.ts | 35 +++ .../cms/src/schemas/restrictions/index.ts | 3 - .../cms/src/schemas/restrictions/lockdown.ts | 31 --- .../restriction-group-lockdown.tsx | 52 ---- .../src/schemas/restrictions/restriction.tsx | 42 ---- packages/cms/src/schemas/schema.ts | 4 +- 23 files changed, 342 insertions(+), 800 deletions(-) create mode 100644 packages/app/src/domain/measures/measures-table.tsx create mode 100644 packages/app/src/domain/measures/types.ts delete mode 100644 packages/app/src/domain/restrictions/lockdown-table.tsx delete mode 100644 packages/app/src/domain/restrictions/restriction-icons.ts delete mode 100644 packages/cms/src/components/restriction-icon/index.ts delete mode 100644 packages/cms/src/components/restriction-icon/restriction-icon-input.tsx delete mode 100644 packages/cms/src/components/restriction-icon/restriction-icons.ts create mode 100644 packages/cms/src/schemas/measures/index.ts create mode 100644 packages/cms/src/schemas/measures/measures-collection.ts create mode 100644 packages/cms/src/schemas/measures/measures-item.ts create mode 100644 packages/cms/src/schemas/measures/measures.ts delete mode 100644 packages/cms/src/schemas/restrictions/index.ts delete mode 100644 packages/cms/src/schemas/restrictions/lockdown.ts delete mode 100644 packages/cms/src/schemas/restrictions/restriction-group-lockdown.tsx delete mode 100644 packages/cms/src/schemas/restrictions/restriction.tsx diff --git a/packages/app/src/domain/measures/measures-table.tsx b/packages/app/src/domain/measures/measures-table.tsx new file mode 100644 index 0000000000..24e2f5b1b8 --- /dev/null +++ b/packages/app/src/domain/measures/measures-table.tsx @@ -0,0 +1,123 @@ +import { css } from '@styled-system/css'; +import { Fragment } from 'react'; +import { Box } from '~/components/base'; +import { Cell, Row, Table, TableBody } from '~/components/table'; +import { BoldText } from '~/components/typography'; +import { space } from '~/style/theme'; +import { Measures } from '~/types/cms'; +import { useBreakpoints } from '~/utils/use-breakpoints'; +import DynamicIcon from '~/components/get-icon-by-name'; +import { TopicalIcon as MeasuresIcon } from '@corona-dashboard/common/src/types'; +import { getFilenameToIconName } from '~/utils'; +import styled from 'styled-components'; +import { colors } from '@corona-dashboard/common'; +import { Dot } from '@corona-dashboard/icons'; + +interface MeasuresTableProps { + data: Measures; +} + +export function MeasuresTable(props: MeasuresTableProps) { + const { data } = props; + + const breakpoints = useBreakpoints(true); + + if (breakpoints.lg) { + return ; + } + + return ; +} + +const MobileMeasuresTable = (props: MeasuresTableProps) => { + const { data } = props; + + return ( + + + {data.measuresCollection.map((collection, index) => { + return ( + + + + {collection.title} + + + + + + {collection.measuresItems.map((measuresItem, index) => { + return ( + + {measuresItem.icon ? : } + + {measuresItem.title} + + ); + })} + + + + + ); + })} + +
+ ); +}; + +const DesktopMeasuresTable = (props: MeasuresTableProps) => { + const { data } = props; + + return ( + + + {data.measuresCollection.map((collection, index) => { + return ( + + + {collection.title} + + + + {collection.measuresItems.map((measuresItem, index) => { + return ( + + {measuresItem.icon ? : } + + {measuresItem.title} + + + ); + })} + + + + ); + })} + +
+ ); +}; + +const StyledIconWrapper = styled.span` + display: flex; + flex-shrink: 0; + margin-right: ${space[2]}; + width: 36px; + height: 36px; + align-items: center; + justify-content: center; + color: ${colors.blue8}; + svg { + height: ${space[4]}; + width: ${space[4]}; + } +`; diff --git a/packages/app/src/domain/measures/types.ts b/packages/app/src/domain/measures/types.ts new file mode 100644 index 0000000000..eebc2a642a --- /dev/null +++ b/packages/app/src/domain/measures/types.ts @@ -0,0 +1,5 @@ +import { Measures } from '~/types/cms'; + +export interface GeldendeAdviezenData { + measures: Measures; +}; \ No newline at end of file diff --git a/packages/app/src/domain/restrictions/lockdown-table.tsx b/packages/app/src/domain/restrictions/lockdown-table.tsx deleted file mode 100644 index ef84a6add9..0000000000 --- a/packages/app/src/domain/restrictions/lockdown-table.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import { css } from '@styled-system/css'; -import { Fragment } from 'react'; -import { Box } from '~/components/base'; -import { Cell, Row, Table, TableBody } from '~/components/table'; -import { BoldText } from '~/components/typography'; -import { LockdownData } from '~/types/cms'; -import { useBreakpoints } from '~/utils/use-breakpoints'; -import { restrictionIcons } from './restriction-icons'; - -type EscalationLevelType = 1 | 2 | 3; - -type LockdownTableProps = { - data: LockdownData; - level: EscalationLevelType; -}; - -export function LockdownTable(props: LockdownTableProps) { - const { data, level } = props; - - const breakpoints = useBreakpoints(true); - - if (breakpoints.lg) { - return ; - } - - return ; -} - -/** - * This function returns a css filter to change an image from black to the desired escalation level color - * We can't use fill or currentColor because we're loading the SVG's as images to save on bundle size - * The colors are pre-calculated though this URL: https://codepen.io/sosuke/pen/Pjoqqp - */ -function getEscalationFilter(escalationLevel: EscalationLevelType) { - switch (escalationLevel) { - // #F291BC - case 1: - return 'invert(64%) sepia(40%) saturate(490%) hue-rotate(286deg) brightness(99%) contrast(91%)'; - // #D95790 - case 2: - return 'invert(52%) sepia(21%) saturate(3993%) hue-rotate(302deg) brightness(91%) contrast(86%)'; - // #A11050 - case 3: - return 'invert(15%) sepia(48%) saturate(4967%) hue-rotate(317deg) brightness(92%) contrast(101%)'; - default: - return; - } -} - -type LockdownTableData = { - data: LockdownData; - escalationLevel: EscalationLevelType; -}; - -function MobileLockdownTable(props: LockdownTableData) { - const { data, escalationLevel } = props; - const filter = getEscalationFilter(escalationLevel); - - return ( - - - {data.groups.map((group) => { - return ( - - - - {group.title} - - - - - - {group.restrictions.map((restriction) => { - return ( - - - {restriction.icon ? ( - - ) : ( - - )} - - {restriction.text} - - ); - })} - - - - - ); - })} - -
- ); -} - -function DesktopLockdownTable(props: LockdownTableData) { - const { data, escalationLevel } = props; - - const filter = getEscalationFilter(escalationLevel); - - return ( - - - {data.groups.map((group) => { - return ( - - - {group.title} - - - - {group.restrictions.map((restriction) => { - return ( - - - {restriction.icon && - restrictionIcons[restriction.icon] ? ( - - ) : ( - - )} - - - {restriction.text} - - - ); - })} - - - - ); - })} - -
- ); -} diff --git a/packages/app/src/domain/restrictions/restriction-icons.ts b/packages/app/src/domain/restrictions/restriction-icons.ts deleted file mode 100644 index c620d87804..0000000000 --- a/packages/app/src/domain/restrictions/restriction-icons.ts +++ /dev/null @@ -1,81 +0,0 @@ -export const restrictionIcons: Record = { - '0_algemeen_18': 'onderwijs-en-kinderopvang_op-afstand.svg', - '0_algemeen_19': 'basisregels_afstand.svg', - '0_algemeen_20': 'basisregels_drukte.svg', - '0_algemeen_21': 'basisregels_handenwassen.svg', - '0_algemeen_22': 'basisregels_elleboog.svg', - '0_algemeen_23': 'basisregels_mondkapje.svg', - '0_algemeen_42': 'basisregels_blijf-thuis.svg', - '0_algemeen_43': 'basisregels_testen.svg', - '0_algemeen_44': 'basisregels_geen-bezoek.svg', - '41_bezoek_24': 'thuis.svg', - '41_er_op_uit_25': 'groepen.svg', - '41_samenkomst_26': 'publiek-toegankelijke-locaties.svg', - '41_horeca_27': 'horeca-en-evenementen_etendrinken.svg', - '41_horeca_28': 'horeca-en-evenementen_bestellen.svg', - '41_horeca_29': 'horeca-en-evenementen_evenementen.svg', - '41_winkels_30': 'publiek-toegankelijke-locaties.svg', - '41_winkels_31': 'winkelen-en-boodschappen_open.svg', - '41_winkels_32': 'winkelen-en-boodschappen_alcohol.svg', - '41_contactberoep_33': 'contactberoepen.svg', - '41_sport_34': 'sport_buiten.svg', - '41_sport_35': 'sport_binnensportlocaties.svg', - '41_sport_36': 'sport_wedstrijden.svg', - '41_ov_37': 'vervoer-en-reizen_blijfthuis.svg', - '41_ov_38': 'vervoer-en-reizen_buitenland.svg', - '41_ov_45': 'vervoer-en-reizen_ov.svg', - '41_onderwijs_39': 'onderwijs-en-kinderopvang_op-afstand.svg', - '41_onderwijs_40': 'onderwijs-en-kinderopvang_kinderopvang.svg', - '41_onderwijs_41': 'onderwijs-en-kinderopvang_noodopvang.svg', - avondklok: 'avondklok.svg', - bezoek: 'bezoek.svg', - lopend: 'lopend.svg', - eenPersoonDoorgestreept: 'een-persoon-doorgestreept.svg', - gedeeltelijkOpenRugzak: 'gedeeltelijk-open-rugzak.svg', - geenWedstrijden: 'geen-wedstrijden.svg', - sporterMetZweetband: 'sporter-met-zweetband.svg', - 'stap_1-horeca_max': 'stap_1-horeca_max.svg', - 'stap_1-horeca_per_tafel': 'stap_1-horeca_pertafel.svg', - 'stap_1-horeca_reserveren': 'stap_1-horeca_reserveren.svg', - 'stap_1-horeca_sportaccomodaties': 'stap_1-horeca_sportaccomodaties.svg', - 'stap_1-horeca_terras': 'stap_1-horeca_terras.svg', - 'stap_1-horeca_verplaatsen': 'stap_1-horeca_verplaatsen.svg', - 'stap_1-onderwijs_bibliotheek': 'stap_1-onderwijs_bibliotheek.svg', - 'stap_1-onderwijs_open': 'stap_1-onderwijs_open.svg', - 'stap_1-theorie': 'stap_1-theorie.svg', - 'stap_1-thuisbezoek': 'stap_1-thuisbezoek.svg', - 'stap_1-uitvaarten': 'stap_1-uitvaarten.svg', - 'stap_1-winkels_alleen': 'stap_1-winkels_alleen.svg', - 'stap_1-winkels_markten': 'stap_1-winkels_markten.svg', - 'stap_1-winkels_max': 'stap_1-winkels_max.svg', - 'stap_1-winkels_open': 'stap_1-winkels_open.svg', - 'stap-1_avondklok': 'stap-1_avondklok.svg', - testbewijs: 'testbewijs.svg', - reizen: 'reizen.svg', - recreatie: 'recreatie.svg', - binnensporten: 'binnensporten.svg', - bibliotheken: 'bibliotheken.svg', - horeca_evenementen: 'horeca_evenementen.svg', - kunstcultuur_musea: 'kunstcultuur_musea.svg', - ontmoetingen_bezoek: 'ontmoetingen_bezoek.svg', - alcohol_verkoop: 'alcohol-verkoop.svg', - max_aantal_bezoekers: 'max-aantal-bezoekers.svg', - meerdaagse_evenementen: 'meerdaagse-evenementen.svg', - openingstijden: 'openingstijden.svg', - toegangsbewijzen: 'toegangsbewijzen.svg', - klok_2100: 'klok-2100.svg', - geen_entertainment: 'geen-entertainment.svg', - frisse_lucht: 'frisse_lucht.svg', - binnen_met_zitplaats: 'binnen-met-zitplaats.svg', - binnen_zonder_zitplaats: 'binnen-zonder-zitplaats.svg', - geen_max_aantal_bezoekers: 'geen-max-aantal-bezoekers.svg', - kunst_cultuur: 'kunst-cultuur.svg', - taxi: 'taxi.svg', - vliegen: 'vliegen.svg', - doorstroomevenementen: 'doorstroomevenementen.svg', - afstand_sporten: 'afstand-sporten.svg', - georganiseerdeKunstEnCultuurbeoefeningen: - 'georganiseerde-kunst-en-cultuurbeoefening.svg', - openbaarVervoer: 'openbaar-vervoer.svg', - binnensportlocaties: 'binnensportlocaties.svg', -}; diff --git a/packages/app/src/domain/vaccine/components/age-group-select.tsx b/packages/app/src/domain/vaccine/components/age-group-select.tsx index 15d9e9a629..19a2ea5798 100644 --- a/packages/app/src/domain/vaccine/components/age-group-select.tsx +++ b/packages/app/src/domain/vaccine/components/age-group-select.tsx @@ -39,39 +39,23 @@ export function AgeGroupSelect(props: AgeGroupSelectProps) { const options: Option[] = useMemo( () => AGE_GROUPS.map((ageGroupAndRange) => { - const birthyearRange = parseBirthyearRange( - ageGroupAndRange.birthyearRange - ); + const birthyearRange = parseBirthyearRange(ageGroupAndRange.birthyearRange); if (isPresent(birthyearRange)) { - if ( - shownAgeGroups && - shownAgeGroups.includes(ageGroupAndRange.ageGroup) - ) { + if (shownAgeGroups && shownAgeGroups.includes(ageGroupAndRange.ageGroup)) { return { value: ageGroupAndRange.ageGroup, label: commonTexts.common.age_groups[ageGroupAndRange.ageGroup], content: ( - - {commonTexts.common.age_groups[ageGroupAndRange.ageGroup]} - - - {replaceVariablesInText( - commonTexts.common.birthyear_ranges[birthyearRange.type], - birthyearRange - )} - + {commonTexts.common.age_groups[ageGroupAndRange.ageGroup]} + {replaceVariablesInText(commonTexts.common.birthyear_ranges[birthyearRange.type], birthyearRange)} ), }; } } }).filter(isPresent), - [ - commonTexts.common.age_groups, - commonTexts.common.birthyear_ranges, - shownAgeGroups, - ] + [commonTexts.common.age_groups, commonTexts.common.birthyear_ranges, shownAgeGroups] ); return ( diff --git a/packages/app/src/pages/landelijk/geldende-adviezen.tsx b/packages/app/src/pages/landelijk/geldende-adviezen.tsx index 16c823fc55..bcb3947eaf 100644 --- a/packages/app/src/pages/landelijk/geldende-adviezen.tsx +++ b/packages/app/src/pages/landelijk/geldende-adviezen.tsx @@ -1,89 +1,77 @@ +import { TopicalIcon as PageIcon } from '@corona-dashboard/common/src/types'; import { Box } from '~/components/base/box'; import { RichContent } from '~/components/cms/rich-content'; import { TileList } from '~/components/tile-list'; import { Heading } from '~/components/typography'; +import { Header } from '~/components/page-information-block/components/header'; import { Layout } from '~/domain/layout/layout'; import { NlLayout } from '~/domain/layout/nl-layout'; -import { LockdownTable } from '~/domain/restrictions/lockdown-table'; +import { MeasuresTable } from '~/domain/measures/measures-table'; import { Languages, SiteText } from '~/locale'; -import { - createGetStaticProps, - StaticProps, -} from '~/static-props/create-get-static-props'; -import { - createGetContent, - getLastGeneratedDate, - getLokalizeTexts, -} from '~/static-props/get-data'; -import { LockdownData, RoadmapData } from '~/types/cms'; +import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; +import { createGetContent, getLastGeneratedDate, getLokalizeTexts } from '~/static-props/get-data'; import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts'; - -type GeldendeAdviezenData = { - lockdown: LockdownData; - roadmap?: RoadmapData; -}; +import { getFilenameToIconName } from '~/utils'; +import { useIntl } from '~/intl'; +import DynamicIcon from '~/components/get-icon-by-name'; +import { GeldendeAdviezenData } from '~/domain/measures/types'; const selectLokalizeTexts = (siteText: SiteText) => ({ metadataTexts: siteText.pages.topical_page.nl.nationaal_metadata, textNl: siteText.pages.measures_page.nl, }); -type LokalizeTexts = ReturnType; - export const getStaticProps = createGetStaticProps( - ({ locale }: { locale: keyof Languages }) => - getLokalizeTexts(selectLokalizeTexts, locale), + ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale), getLastGeneratedDate, createGetContent((context) => { const { locale } = context; return ` { - 'lockdown': *[_type == 'lockdown']{ - ..., - "message": { - ...message, - "description": { - ...message.description, - "${locale}": [ - ...message.description.${locale}[] - { - ..., - "asset": asset-> - }, - ] + 'measures': *[ + _type == 'measures' && !(_id in path("drafts.**")) + ][0] { + icon, + 'measuresCollection': measuresCollection[]->{ + 'title': title.${locale}, + icon, + 'measuresItems': measuresItems[]->{ + 'title': title.${locale}, + icon + } }, - } - }[0], - // We will need the roadmap when lockdown is disabled in the CMS. - // 'roadmap': *[_type == 'roadmap'][0] + 'title':title.${locale}, + 'description': description.${locale} + }, }`; }) ); const NationalRestrictions = (props: StaticProps) => { const { pageText, content, lastGenerated } = props; - const { metadataTexts, textNl } = useDynamicLokalizeTexts( - pageText, - selectLokalizeTexts - ); - - const { lockdown } = content; + const { metadataTexts } = useDynamicLokalizeTexts(pageText, selectLokalizeTexts); + const { commonTexts } = useIntl(); + const { measures } = content; return ( - {textNl.titel} - {lockdown.message.description ? ( +
} + title={measures.title} + category={commonTexts.sidebar.categories.actions_to_take.title} + /> + {measures.description && ( - + - ) : null} + )} - {lockdown.title} - + {measures.title} + diff --git a/packages/app/src/pages/veiligheidsregio/[code]/geldende-adviezen.tsx b/packages/app/src/pages/veiligheidsregio/[code]/geldende-adviezen.tsx index 4c0003cdb2..a48646f8c8 100644 --- a/packages/app/src/pages/veiligheidsregio/[code]/geldende-adviezen.tsx +++ b/packages/app/src/pages/veiligheidsregio/[code]/geldende-adviezen.tsx @@ -1,44 +1,32 @@ import { useRouter } from 'next/router'; +import { TopicalIcon as PageIcon } from '@corona-dashboard/common/src/types'; import { AnchorTile } from '~/components/anchor-tile'; import { Box } from '~/components/base'; import { RichContent } from '~/components/cms/rich-content'; import { TileList } from '~/components/tile-list'; import { Heading } from '~/components/typography'; +import { Header } from '~/components/page-information-block/components/header'; +import DynamicIcon from '~/components/get-icon-by-name'; import { Layout } from '~/domain/layout/layout'; import { VrLayout } from '~/domain/layout/vr-layout'; -import { LockdownTable } from '~/domain/restrictions/lockdown-table'; +import { MeasuresTable } from '~/domain/measures/measures-table'; import { useIntl } from '~/intl'; import { Languages, SiteText } from '~/locale'; -import { - createGetStaticProps, - StaticProps, -} from '~/static-props/create-get-static-props'; -import { - createGetContent, - getLastGeneratedDate, - selectVrData, - getLokalizeTexts, -} from '~/static-props/get-data'; -import { LockdownData, RoadmapData } from '~/types/cms'; +import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; +import { createGetContent, getLastGeneratedDate, selectVrData, getLokalizeTexts } from '~/static-props/get-data'; import { replaceVariablesInText } from '~/utils/replace-variables-in-text'; import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts'; +import { getFilenameToIconName } from '~/utils'; +import { GeldendeAdviezenData } from '~/domain/measures/types'; const selectLokalizeTexts = (siteText: SiteText) => ({ textVr: siteText.pages.measures_page.vr, }); -type LokalizeTexts = ReturnType; - export { getStaticPaths } from '~/static-paths/vr'; -type GeldendeAdviezenData = { - lockdown: LockdownData; - roadmap?: RoadmapData; -}; - export const getStaticProps = createGetStaticProps( - ({ locale }: { locale: keyof Languages }) => - getLokalizeTexts(selectLokalizeTexts, locale), + ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale), getLastGeneratedDate, selectVrData(), createGetContent((context) => { @@ -46,24 +34,21 @@ export const getStaticProps = createGetStaticProps( return ` { - 'lockdown': *[_type == 'lockdown']{ - ..., - "message": { - ...message, - "description": { - ...message.description, - "${locale}": [ - ...message.description.${locale}[] - { - ..., - "asset": asset-> - }, - ] + 'measures': *[ + _type == 'measures' && !(_id in path("drafts.**")) + ][0] { + icon, + 'measuresCollection': measuresCollection[]->{ + 'title': title.${locale}, + icon, + 'measuresItems': measuresItems[]->{ + 'title': title.${locale}, + icon + } }, - } - }[0], - // We will need the roadmap when lockdown is disabled in the CMS. - // 'roadmap': *[_type == 'roadmap'][0] + 'title':title.${locale}, + 'description': description.${locale} + }, }`; }) ); @@ -72,13 +57,10 @@ const RegionalRestrictions = (props: StaticProps) => { const { pageText, content, vrName, lastGenerated } = props; const { commonTexts } = useIntl(); - const { textVr } = useDynamicLokalizeTexts( - pageText, - selectLokalizeTexts - ); + const { textVr } = useDynamicLokalizeTexts(pageText, selectLokalizeTexts); type VRCode = keyof typeof textVr.urls; - const { lockdown } = content; + const { measures } = content; const router = useRouter(); const code = router.query.code as unknown as VRCode; @@ -100,21 +82,21 @@ const RegionalRestrictions = (props: StaticProps) => { - - {replaceVariablesInText(textVr.titel, { - safetyRegionName: vrName, - })} - - {lockdown.message.description ? ( +
} + title={measures.title} + category={commonTexts.sidebar.categories.actions_to_take.title} + /> + {measures.description && ( - + - ) : null} + )} - {lockdown.title} - + {measures.title} + void; -} -export function RestrictionIconInput(props: RestrictionIconInputProps) { - const [isOpen, setIsOpen] = useState(false); - const onClose = useCallback(() => setIsOpen(false), []); - const onOpen = useCallback(() => setIsOpen(true), []); - - const { type, value, onChange } = props; - - const allIcons = Object.entries(restrictionIcons) - // hide empty icons - .filter((entry) => entry[1]) as [string, TIcon][]; - - const TheIcon = restrictionIcons[value] as TIcon; - - return ( - - - - {type.title} - - {value === undefined ? ( - Er is geen icoon geselecteerd - ) : ( - - - - )} - - -