From 1a3ed626e8c217a6704f756768d313aa1365ebf4 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 17 Aug 2022 11:41:05 +0200 Subject: [PATCH 1/5] Get an icon dynamically --- packages/app/src/components/get-icon-by-name.ts | 15 +++++++++++++++ packages/app/src/pages/nieuw-actueel.tsx | 4 ++++ 2 files changed, 19 insertions(+) create mode 100644 packages/app/src/components/get-icon-by-name.ts diff --git a/packages/app/src/components/get-icon-by-name.ts b/packages/app/src/components/get-icon-by-name.ts new file mode 100644 index 0000000000..9d2b014b50 --- /dev/null +++ b/packages/app/src/components/get-icon-by-name.ts @@ -0,0 +1,15 @@ +import * as allIcons from '@corona-dashboard/icons'; + +interface DynamicIconProps { + iconName: string +} + +/** + * Returns a icon component by the name of the icon + */ + +export default function ({iconName}: DynamicIconProps +) { + const DynamicIcon = allIcons[iconName] + return +} \ No newline at end of file diff --git a/packages/app/src/pages/nieuw-actueel.tsx b/packages/app/src/pages/nieuw-actueel.tsx index 6af66a8be2..4822aaa1fa 100644 --- a/packages/app/src/pages/nieuw-actueel.tsx +++ b/packages/app/src/pages/nieuw-actueel.tsx @@ -5,6 +5,7 @@ import { ArticleList, TopicalSectionHeader } from '~/domain/topical'; import { isPresent } from 'ts-is-present'; import { Search } from '~/domain/topical/components/search'; import { Languages, SiteText } from '~/locale'; +import DynamicIcon from '~/components/get-icon-by-name'; import { createGetStaticProps, StaticProps, @@ -85,6 +86,9 @@ const Home = (props: StaticProps) => { pt={{ _: 3, md: 5 }} px={{ _: 3, sm: 4 }} > + + + From c11e03c1ca0de38fd23c27658029fa9cd15883f5 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard24 Date: Wed, 17 Aug 2022 13:29:23 +0200 Subject: [PATCH 2/5] feat: make dynamic icon work including typings --- .../app/src/components/get-icon-by-name.ts | 15 -------- .../app/src/components/get-icon-by-name.tsx | 37 +++++++++++++++++++ packages/app/src/pages/nieuw-actueel.tsx | 2 +- packages/icons/src/icon-name2filename.ts | 2 +- 4 files changed, 39 insertions(+), 17 deletions(-) delete mode 100644 packages/app/src/components/get-icon-by-name.ts create mode 100644 packages/app/src/components/get-icon-by-name.tsx diff --git a/packages/app/src/components/get-icon-by-name.ts b/packages/app/src/components/get-icon-by-name.ts deleted file mode 100644 index 9d2b014b50..0000000000 --- a/packages/app/src/components/get-icon-by-name.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as allIcons from '@corona-dashboard/icons'; - -interface DynamicIconProps { - iconName: string -} - -/** - * Returns a icon component by the name of the icon - */ - -export default function ({iconName}: DynamicIconProps -) { - const DynamicIcon = allIcons[iconName] - return -} \ No newline at end of file diff --git a/packages/app/src/components/get-icon-by-name.tsx b/packages/app/src/components/get-icon-by-name.tsx new file mode 100644 index 0000000000..f172653bdc --- /dev/null +++ b/packages/app/src/components/get-icon-by-name.tsx @@ -0,0 +1,37 @@ +import * as allIcons from '@corona-dashboard/icons'; +import { iconName2filename, IconProps } from '@corona-dashboard/icons'; +import React from 'react'; +import { isDefined } from 'ts-is-present'; +import { assert } from '~/utils/assert'; + +type IconTypes = keyof typeof iconName2filename; + +interface DynamicIconProps extends IconProps { + name: IconTypes; +} + +/** + * Returns an icon component by the name of the icon + * Throws when requested component was not found + */ +function getIconByName(name: IconTypes) { + const icons: Record = allIcons; + const DynamicIcon = icons[name]; + + assert( + isDefined(DynamicIcon), + `[${getIconByName.name}] Icon with name "${name}" does not exist` + ); + + return DynamicIcon; +} + +/** + * Renders an icon component by the name of the icon + */ +function DynamicIcon({ name, ...otherProps }: DynamicIconProps) { + const Icon = getIconByName(name); + return ; +} + +export default DynamicIcon; diff --git a/packages/app/src/pages/nieuw-actueel.tsx b/packages/app/src/pages/nieuw-actueel.tsx index a85cd1e5f4..9618feca6a 100644 --- a/packages/app/src/pages/nieuw-actueel.tsx +++ b/packages/app/src/pages/nieuw-actueel.tsx @@ -64,7 +64,7 @@ const Home = (props: StaticProps) => { px={{ _: 3, sm: 4 }} > - + diff --git a/packages/icons/src/icon-name2filename.ts b/packages/icons/src/icon-name2filename.ts index 7f57735ac1..c5381f816f 100644 --- a/packages/icons/src/icon-name2filename.ts +++ b/packages/icons/src/icon-name2filename.ts @@ -1,4 +1,4 @@ -export const iconName2filename: Record = { +export const iconName2filename = { Afstand: 'afstand.svg', AfstandSporten: 'afstand-sporten.svg', AlcoholVerkoop: 'alcohol-verkoop.svg', From 4ff90461b66c2d0d1027d672b4a37f6118892e22 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard24 Date: Wed, 17 Aug 2022 13:33:04 +0200 Subject: [PATCH 3/5] fix: code cleanup --- packages/app/src/components/get-icon-by-name.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/app/src/components/get-icon-by-name.tsx b/packages/app/src/components/get-icon-by-name.tsx index f172653bdc..83aba56a4f 100644 --- a/packages/app/src/components/get-icon-by-name.tsx +++ b/packages/app/src/components/get-icon-by-name.tsx @@ -4,18 +4,18 @@ import React from 'react'; import { isDefined } from 'ts-is-present'; import { assert } from '~/utils/assert'; -type IconTypes = keyof typeof iconName2filename; +type IconName = keyof typeof iconName2filename; interface DynamicIconProps extends IconProps { - name: IconTypes; + name: IconName; } /** * Returns an icon component by the name of the icon * Throws when requested component was not found */ -function getIconByName(name: IconTypes) { - const icons: Record = allIcons; +function getIconByName(name: IconName) { + const icons: Record = allIcons; const DynamicIcon = icons[name]; assert( From f9f6540117ddcc6ef01d7b3a84d70f3fcfc9e4db Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard24 Date: Wed, 17 Aug 2022 14:17:33 +0200 Subject: [PATCH 4/5] feat: extend type info in icon build --- .../app/src/components/get-icon-by-name.tsx | 3 +- .../kpi-configuration/kpi-icon-input.tsx | 20 +- packages/icons/bin/generate.js | 5 +- packages/icons/src/icon-name2filename.ts | 186 +++++++++++++++++- 4 files changed, 205 insertions(+), 9 deletions(-) diff --git a/packages/app/src/components/get-icon-by-name.tsx b/packages/app/src/components/get-icon-by-name.tsx index 83aba56a4f..cd5801502d 100644 --- a/packages/app/src/components/get-icon-by-name.tsx +++ b/packages/app/src/components/get-icon-by-name.tsx @@ -5,6 +5,7 @@ import { isDefined } from 'ts-is-present'; import { assert } from '~/utils/assert'; type IconName = keyof typeof iconName2filename; +type IconCollection = Record; interface DynamicIconProps extends IconProps { name: IconName; @@ -15,7 +16,7 @@ interface DynamicIconProps extends IconProps { * Throws when requested component was not found */ function getIconByName(name: IconName) { - const icons: Record = allIcons; + const icons: IconCollection = allIcons; const DynamicIcon = icons[name]; assert( diff --git a/packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx b/packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx index f888fd0619..cd817ba51a 100644 --- a/packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx +++ b/packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx @@ -18,10 +18,15 @@ import { PatchEvent, set, unset } from 'part:@sanity/form-builder/patch-event'; import React, { forwardRef, useCallback, useState } from 'react'; import { isDefined } from 'ts-is-present'; -const filename2IconName = Object.keys(iconName2filename).reduce((aggr, key) => { - aggr[iconName2filename[key]] = key; - return aggr; -}, {} as Record); +const allIconsToFilename: Record = iconName2filename; + +const filename2IconName = Object.keys(allIconsToFilename).reduce( + (aggr, key) => { + aggr[allIconsToFilename[key]] = key; + return aggr; + }, + {} as Record +); export type KpiIconKey = keyof typeof allIcons; @@ -83,11 +88,14 @@ export const KpiIconInput = forwardRef((props: any, ref: any) => { key={id} direction="column" align="center" - onClick={() => onChangeIcon(iconName2filename[id])} + onClick={() => onChangeIcon(allIconsToFilename[id])} title={id} > - + ))} diff --git a/packages/icons/bin/generate.js b/packages/icons/bin/generate.js index e8fa4101d0..548f8a8dfe 100644 --- a/packages/icons/bin/generate.js +++ b/packages/icons/bin/generate.js @@ -83,9 +83,12 @@ const attrsToString = (attrs) => { }; const lookup = icons.sort().map((x) => `${pascalcase(x)}: '${x}.svg'`); +const iconNames = icons.sort().map((x) => `'${pascalcase(x)}'`); const iconName2filename = [ - 'export const iconName2filename: Record = {', + `export type IconName = ${iconNames.join(' | ')};`, + '', + 'export const iconName2filename: Record = {', ] .concat(lookup.join(',')) .concat(['}', '']); diff --git a/packages/icons/src/icon-name2filename.ts b/packages/icons/src/icon-name2filename.ts index c5381f816f..6c6bcd53d5 100644 --- a/packages/icons/src/icon-name2filename.ts +++ b/packages/icons/src/icon-name2filename.ts @@ -1,4 +1,188 @@ -export const iconName2filename = { +export type IconName = + | 'Afstand' + | 'AfstandSporten' + | 'AlcoholVerkoop' + | 'Arrow' + | 'Arts' + | 'ArtsSmall' + | 'AvoidCrowds' + | 'Avondklok' + | 'BarChart' + | 'BasisregelsAfstand' + | 'BasisregelsBlijfThuis' + | 'BasisregelsDrukte' + | 'BasisregelsElleboog' + | 'BasisregelsGeenBezoek' + | 'BasisregelsHandenwassen' + | 'BasisregelsMondkapje' + | 'BasisregelsTesten' + | 'Bevolking' + | 'Bezoek' + | 'Bibliotheken' + | 'BinnenMetZitplaats' + | 'BinnenZonderZitplaats' + | 'Binnensporten' + | 'Binnensportlocaties' + | 'Boosterprik' + | 'Calendar' + | 'Chart' + | 'Check' + | 'CheckSmall' + | 'Checked' + | 'Chevron' + | 'ChevronDown' + | 'ChevronDownMagenta' + | 'ChevronLarge' + | 'Clock' + | 'Close' + | 'CloseThick' + | 'Contactberoepen' + | 'Coronavirus' + | 'Cross' + | 'CrossSmall' + | 'Curfew' + | 'Database' + | 'Doorstroomevenementen' + | 'Dot' + | 'Down' + | 'Download' + | 'EenPersoonDoorgestreept' + | 'Elderly' + | 'Elleboog' + | 'Expand' + | 'Experimenteel' + | 'External' + | 'Frame2' + | 'FrisseLucht' + | 'Gathering' + | 'GedeeltelijkOpenRugzak' + | 'Gedrag' + | 'GeenEntertainment' + | 'GeenMaxAantalBezoekers' + | 'GeenWedstrijden' + | 'GehandicaptenZorg' + | 'Gehandicaptenzorg' + | 'Gelijk' + | 'GeorganiseerdeKunstEnCultuurbeoefening' + | 'GgdTesten' + | 'Groepen' + | 'Handenwassen' + | 'HealthCare' + | 'HomeAndVisits' + | 'HorecaEnEvenementenBestellen' + | 'HorecaEnEvenementenEtendrinken' + | 'HorecaEnEvenementenEvenementen' + | 'HorecaEvenementen' + | 'Hospitality' + | 'Information' + | 'KeepDistance' + | 'Klachten' + | 'Klok2100' + | 'KunstCultuur' + | 'KunstcultuurMusea' + | 'Line' + | 'Locatie' + | 'Locaties' + | 'Lopend' + | 'Maatregelen' + | 'MaxAantalBezoekers' + | 'MaxVisitors' + | 'MedischeScreening' + | 'MeerInformatie' + | 'MeerdaagseEvenementen' + | 'Menu' + | 'Mondkapje' + | 'Nederland' + | 'NederlandGroot' + | 'Notification' + | 'OnderwijsEnKinderopvangKinderopvang' + | 'OnderwijsEnKinderopvangNoodopvang' + | 'OnderwijsEnKinderopvangOpAfstand' + | 'OntmoetingenBezoek' + | 'OpenbaarVervoer' + | 'Openingstijden' + | 'Other' + | 'Overig' + | 'Oversterfte' + | 'Phone' + | 'PositiefGetesteMensen' + | 'PubliekToegankelijkeLocaties' + | 'Recreatie' + | 'Reizen' + | 'ReproductieGraf' + | 'Reproductiegetal' + | 'ReproductiegetalSmall' + | 'Reset' + | 'Rioolvirus' + | 'RioolwaterMonitoring' + | 'SchoolAndDayCare' + | 'Search' + | 'SearchIcon' + | 'SearchIconBold' + | 'SneezeCoughElbow' + | 'SportBinnensportlocaties' + | 'SportBuiten' + | 'SportWedstrijden' + | 'SporterMetZweetband' + | 'Stap1Avondklok' + | 'Stap1HorecaMax' + | 'Stap1HorecaPertafel' + | 'Stap1HorecaReserveren' + | 'Stap1HorecaSportaccomodaties' + | 'Stap1HorecaTerras' + | 'Stap1HorecaVerplaatsen' + | 'Stap1OnderwijsBibliotheek' + | 'Stap1OnderwijsOpen' + | 'Stap1Theorie' + | 'Stap1Thuisbezoek' + | 'Stap1Uitvaarten' + | 'Stap1WinkelsAlleen' + | 'Stap1WinkelsMarkten' + | 'Stap1WinkelsMax' + | 'Stap1WinkelsOpen' + | 'Sterfte' + | 'Stopwatch' + | 'SymptomsGetTested' + | 'SymptomsStayHome' + | 'Taxi' + | 'Test' + | 'Testbewijs' + | 'Testen' + | 'Teststraat' + | 'Thuis' + | 'Thuisblijven' + | 'Thuiswerken' + | 'Toegangsbewijzen' + | 'Travel' + | 'Unchecked' + | 'Up' + | 'Vaccinaties' + | 'Vaccine' + | 'VaccineBoosterThird' + | 'Varianten' + | 'Vermijd' + | 'Verpleeghuis' + | 'Verpleeghuiszorg' + | 'VervoerEnReizenBlijfthuis' + | 'VervoerEnReizenBuitenland' + | 'VervoerEnReizenOv' + | 'Vliegen' + | 'Warn' + | 'Warning' + | 'WashHands' + | 'WearMaskPublicIndoors' + | 'WearMaskPublicTransport' + | 'WhiteArrow' + | 'WhiteArrowLg' + | 'WinkelenEnBoodschappenAlcohol' + | 'WinkelenEnBoodschappenOpen' + | 'Work' + | 'WorkFromHome' + | 'Ziekenhuis' + | 'ZiekenhuisSmall' + | 'Ziektegolf'; + +export const iconName2filename: Record = { Afstand: 'afstand.svg', AfstandSporten: 'afstand-sporten.svg', AlcoholVerkoop: 'alcohol-verkoop.svg', From 14450b122915f4a3f83d59fb48219f753edf5b8c Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard24 Date: Wed, 17 Aug 2022 14:33:08 +0200 Subject: [PATCH 5/5] feat: add eye icon --- packages/app/src/pages/nieuw-actueel.tsx | 2 +- packages/icons/src/icon-name2filename.ts | 2 ++ packages/icons/src/svg/eye.svg | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 packages/icons/src/svg/eye.svg diff --git a/packages/app/src/pages/nieuw-actueel.tsx b/packages/app/src/pages/nieuw-actueel.tsx index 9618feca6a..c44612acb5 100644 --- a/packages/app/src/pages/nieuw-actueel.tsx +++ b/packages/app/src/pages/nieuw-actueel.tsx @@ -64,7 +64,7 @@ const Home = (props: StaticProps) => { px={{ _: 3, sm: 4 }} > - + diff --git a/packages/icons/src/icon-name2filename.ts b/packages/icons/src/icon-name2filename.ts index 6c6bcd53d5..339c0e86e0 100644 --- a/packages/icons/src/icon-name2filename.ts +++ b/packages/icons/src/icon-name2filename.ts @@ -52,6 +52,7 @@ export type IconName = | 'Expand' | 'Experimenteel' | 'External' + | 'Eye' | 'Frame2' | 'FrisseLucht' | 'Gathering' @@ -236,6 +237,7 @@ export const iconName2filename: Record = { Expand: 'expand.svg', Experimenteel: 'experimenteel.svg', External: 'external.svg', + Eye: 'eye.svg', Frame2: 'frame_2.svg', FrisseLucht: 'frisse_lucht.svg', Gathering: 'gathering.svg', diff --git a/packages/icons/src/svg/eye.svg b/packages/icons/src/svg/eye.svg new file mode 100644 index 0000000000..9ccad4bf50 --- /dev/null +++ b/packages/icons/src/svg/eye.svg @@ -0,0 +1 @@ +