FeaturePanel: Highlight colours (#591)

src/components/FeaturePanel/Properties/TagsTableInner.tsx

@@ -6,6 +6,7 @@ import { InlineEditButton } from '../helpers/InlineEditButton';
 import { buildAddress } from '../../../services/helpers';
 import { ToggleButton } from '../helpers/ToggleButton';
 import { renderValue } from './renderValue';
+import { Position } from '../../../services/types';
 
 const isAddr = (k) => k.match(/^addr:|uir_adr|:addr/);
 const isName = (k) => k.match(/^name(:|$)/);
@@ -59,7 +60,17 @@ const TagsGroup = ({ tags, label, value, hideArrow = false }) => {
 
 // TODO make it dynamic - count how many "first parts before :" are there, and group all >= 2
 
-export const TagsTableInner = ({ tags, center, except = [] }) => {
+type TagsTableInnerProps = {
+  tags: Record<string, string>;
+  center: Position;
+  except?: string[];
+};
+
+export const TagsTableInner = ({
+  tags,
+  center,
+  except = [],
+}: TagsTableInnerProps) => {
   const tagsEntries = Object.entries(tags).filter(([k]) => !except.includes(k));
 
   const addrs = tagsEntries.filter(([k]) => isAddr(k));

src/components/FeaturePanel/Properties/renderValue.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { getUrlForTag } from './getUrlForTag';
 import { slashToOptionalBr } from '../../helpers';
+import { osmColorToHex, whiteOrBlackText } from '../helpers/color';
+import styled from '@emotion/styled';
 
 const getEllipsisHumanUrl = (humanUrl) => {
   const MAX_LENGTH = 40;
@@ -42,9 +44,21 @@ const getHumanValue = (k, v, featured: boolean) => {
   return humanValue;
 };
 
-export const renderValue = (k, v, featured = false) => {
+const ColorValue = styled.div<{ v: string }>`
+  background-color: ${({ v }) => osmColorToHex(v)};
+  color: ${({ v }) => whiteOrBlackText(osmColorToHex(v))};
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.125rem;
+  display: inline;
+`;
+
+export const renderValue = (k: string, v: string, featured = false) => {
   const url = getUrlForTag(k, v);
   const humanValue = getHumanValue(k, v, featured);
 
+  if (k === 'colour') {
+    return <ColorValue v={v}>{humanValue}</ColorValue>;
+  }
+
   return url ? <a href={url}>{slashToOptionalBr(humanValue)}</a> : humanValue;
 };

src/components/FeaturePanel/PublicTransport/LineNumber.tsx

@@ -1,68 +1,10 @@
 import React from 'react';
 import { useUserThemeContext } from '../../../helpers/theme';
 import styled from '@emotion/styled';
-
-/**
- * A function to map a color name to hex. When a color is not found, it is returned as is, the same goes for hex colors.
- * @param color The color to map to hex
- * @returns The color in hex format, e.g. #ff0000
- */
-function mapColorToHex(color: string) {
-  switch (color.toLowerCase()) {
-    case 'black':
-      return '#000000';
-    case 'gray':
-    case 'grey':
-      return '#808080';
-    case 'maroon':
-      return '#800000';
-    case 'olive':
-      return '#808000';
-    case 'green':
-      return '#008000';
-    case 'teal':
-      return '#008080';
-    case 'navy':
-      return '#000080';
-    case 'purple':
-      return '#800080';
-    case 'white':
-      return '#ffffff';
-    case 'silver':
-      return '#c0c0c0';
-    case 'red':
-      return '#ff0000';
-    case 'yellow':
-      return '#ffff00';
-    case 'lime':
-      return '#00ff00';
-    case 'aqua':
-    case 'cyan':
-      return '#00ffff';
-    case 'blue':
-      return '#0000ff';
-    case 'fuchsia':
-    case 'magenta':
-      return '#ff00ff';
-    default:
-      return color;
-  }
-}
-/**
- * A function to determine whether the text color should be black or white
- * @param hexBgColor The background color in hex format, e.g. #ff0000
- * @returns 'black' or 'white' depending on the brightness of the background color
- */
-function whiteOrBlackText(hexBgColor: string) {
-  const r = parseInt(hexBgColor.slice(1, 3), 16);
-  const g = parseInt(hexBgColor.slice(3, 5), 16);
-  const b = parseInt(hexBgColor.slice(5, 7), 16);
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-  return brightness > 125 ? 'black' : 'white';
-}
+import { osmColorToHex, whiteOrBlackText } from '../helpers/color';
 
 const getBgColor = (color: string | undefined, darkmode: boolean) => {
-  if (color) return mapColorToHex(color);
+  if (color) return osmColorToHex(color);
 
   return darkmode ? '#898989' : '#dddddd';
 };

src/components/FeaturePanel/helpers/color.ts

@@ -0,0 +1,59 @@
+/**
+ * A function to map a color name to hex. When a color is not found, it is returned as is, the same goes for hex colors.
+ * @param color The color to map to hex
+ * @returns The color in hex format, e.g. #ff0000
+ */
+export function osmColorToHex(color: string) {
+  switch (color.toLowerCase()) {
+    case 'black':
+      return '#000000';
+    case 'gray':
+    case 'grey':
+      return '#808080';
+    case 'maroon':
+      return '#800000';
+    case 'olive':
+      return '#808000';
+    case 'green':
+      return '#008000';
+    case 'teal':
+      return '#008080';
+    case 'navy':
+      return '#000080';
+    case 'purple':
+      return '#800080';
+    case 'white':
+      return '#ffffff';
+    case 'silver':
+      return '#c0c0c0';
+    case 'red':
+      return '#ff0000';
+    case 'yellow':
+      return '#ffff00';
+    case 'lime':
+      return '#00ff00';
+    case 'aqua':
+    case 'cyan':
+      return '#00ffff';
+    case 'blue':
+      return '#0000ff';
+    case 'fuchsia':
+    case 'magenta':
+      return '#ff00ff';
+    default:
+      return color;
+  }
+}
+
+/**
+ * A function to determine whether the text color should be black or white
+ * @param hexBgColor The background color in hex format, e.g. #ff0000
+ * @returns 'black' or 'white' depending on the brightness of the background color
+ */
+export function whiteOrBlackText(hexBgColor: string) {
+  const r = parseInt(hexBgColor.slice(1, 3), 16);
+  const g = parseInt(hexBgColor.slice(3, 5), 16);
+  const b = parseInt(hexBgColor.slice(5, 7), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness > 125 ? 'black' : 'white';
+}

src/components/SearchBox/options/openstreetmap.tsx

@@ -63,7 +63,7 @@ export const getOsmOptions = (inputValue: string): OsmOption[] => {
   const idString = splitted[1];
   const id = parseInt(idString);
 
-  if (!type || (!idString.match(osmIdRegex) && !Number.isNaN(id))) {
+  if (!type || !(!!idString?.match(osmIdRegex) && !Number.isNaN(id))) {
     return [];
   }