From 45156abf07ef8c51e32156c5746cef28f9eb1a7f Mon Sep 17 00:00:00 2001
From: Manoj Vivek <p.manoj.vivek@gmail.com>
Date: Tue, 14 Nov 2023 13:32:33 +0530
Subject: [PATCH] Extracted VisionSimulationDropDown for reuse

---
 .../Device/ColorBlindnessTools/index.tsx      | 183 +++--------------
 .../VisionSimulationDropDown/index.tsx        | 193 ++++++++++++++++++
 2 files changed, 224 insertions(+), 152 deletions(-)
 create mode 100644 desktop-app/src/renderer/components/VisionSimulationDropDown/index.tsx

diff --git a/desktop-app/src/renderer/components/Previewer/Device/ColorBlindnessTools/index.tsx b/desktop-app/src/renderer/components/Previewer/Device/ColorBlindnessTools/index.tsx
index 66fa6774..f7769768 100644
--- a/desktop-app/src/renderer/components/Previewer/Device/ColorBlindnessTools/index.tsx
+++ b/desktop-app/src/renderer/components/Previewer/Device/ColorBlindnessTools/index.tsx
@@ -2,12 +2,14 @@ import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
 import { DropDown } from 'renderer/components/DropDown';
-
-const redgreen = ['Deuteranopia', 'Deuteranomaly', 'Protanopia', 'Protanomaly'];
-const blueyellow = ['Tritanopia', 'Tritanomaly'];
-const full = ['Achromatomaly', 'Achromatopsia'];
-const visualimpairments = ['Cataract', 'Farsightedness', 'Glaucome'];
-const sunlight = ['Solarize'];
+import {
+  BLUE_YELLOW,
+  FULL,
+  RED_GREEN,
+  SUNLIGHT,
+  VISUAL_IMPAIRMENTS,
+  VisionSimulationDropDown,
+} from 'renderer/components/VisionSimulationDropDown';
 
 interface InjectedCss {
   key: string;
@@ -20,45 +22,6 @@ interface Props {
   webview: Electron.WebviewTag | null;
 }
 
-const MenuItemLabel = ({
-  label,
-  isActive,
-}: {
-  label: string;
-  isActive: boolean;
-}) => {
-  return (
-    <div className="justify-normal flex w-full flex-shrink-0 items-center gap-1 whitespace-nowrap">
-      <Icon
-        icon="ic:round-check"
-        className={cx('opacity-0', {
-          'opacity-100': isActive,
-        })}
-      />
-      <span
-        className={cx({
-          'font-semibold text-black dark:text-white': isActive,
-        })}
-      >
-        {label}
-      </span>
-    </div>
-  );
-};
-
-const MenuItemHeader = ({ label }: { label: string }) => {
-  return (
-    <div className="relative flex w-full min-w-44 items-center justify-between gap-1 whitespace-nowrap">
-      <div className="absolute inset-0 flex items-center" aria-hidden="true">
-        <div className="w-full border-t border-gray-300 dark:border-gray-600" />
-      </div>
-      <span className="mxl-1 z-10 flex-shrink-0 bg-slate-100 pr-2 dark:bg-slate-900">
-        {label}
-      </span>
-    </div>
-  );
-};
-
 export const ColorBlindnessTools = ({ webview }: Props) => {
   const [injectCss, setInjectCss] = useState<InjectedCss>();
 
@@ -217,114 +180,30 @@ export const ColorBlindnessTools = ({ webview }: Props) => {
     return applyCss(visualImpairment, css, js);
   };
 
+  const applySimulation = async (simulation = '') => {
+    if (
+      RED_GREEN.indexOf(simulation) !== -1 ||
+      BLUE_YELLOW.indexOf(simulation) !== -1 ||
+      FULL.indexOf(simulation) !== -1
+    ) {
+      return applyColorDeficiency(simulation);
+    }
+
+    if (VISUAL_IMPAIRMENTS.indexOf(simulation) !== -1) {
+      return applyVisualImpairment(simulation);
+    }
+
+    if (SUNLIGHT.indexOf(simulation) !== -1) {
+      return applySunlight(simulation);
+    }
+
+    return clearSimulation();
+  };
+
   return (
-    <DropDown
-      className={cx('rounded-lg text-xs', {
-        'bg-slate-400/60': injectCss?.name != null,
-      })}
-      label={<Icon icon="bx:low-vision" fontSize={18} />}
-      options={[
-        {
-          label: <MenuItemHeader label="No deficiency" />,
-          onClick: null,
-        },
-        {
-          label: (
-            <MenuItemLabel
-              label="Normal Vision"
-              isActive={injectCss?.name == null}
-            />
-          ),
-          onClick: () => {
-            clearSimulation();
-          },
-        },
-        {
-          label: <MenuItemHeader label="Red-green deficiency" />,
-          onClick: null,
-        },
-        ...redgreen.map((x: string) => {
-          return {
-            label: (
-              <MenuItemLabel
-                label={x}
-                isActive={injectCss?.name === x.toLowerCase()}
-              />
-            ),
-            onClick: () => {
-              applyColorDeficiency(x.toLowerCase());
-            },
-          };
-        }),
-        {
-          label: <MenuItemHeader label="Blue-yellow deficiency" />,
-          onClick: null,
-        },
-        ...blueyellow.map((x: string) => {
-          return {
-            label: (
-              <MenuItemLabel
-                label={x}
-                isActive={injectCss?.name === x.toLowerCase()}
-              />
-            ),
-            onClick: () => {
-              applyColorDeficiency(x.toLowerCase());
-            },
-          };
-        }),
-        {
-          label: <MenuItemHeader label="Full color deficiency" />,
-          onClick: null,
-        },
-        ...full.map((x: string) => {
-          return {
-            label: (
-              <MenuItemLabel
-                label={x}
-                isActive={injectCss?.name === x.toLowerCase()}
-              />
-            ),
-            onClick: () => {
-              applyColorDeficiency(x.toLowerCase());
-            },
-          };
-        }),
-        {
-          label: <MenuItemHeader label="Visual impairment" />,
-          onClick: null,
-        },
-        ...visualimpairments.map((x: string) => {
-          return {
-            label: (
-              <MenuItemLabel
-                label={x}
-                isActive={injectCss?.name === x.toLowerCase()}
-              />
-            ),
-            onClick: () => {
-              applyVisualImpairment(x.toLowerCase());
-            },
-          };
-        }),
-        {
-          label: <MenuItemHeader label="Temporary impairment" />,
-          onClick: null,
-        },
-        ...sunlight.map((x: string) => {
-          return {
-            label: (
-              <MenuItemLabel
-                label={x}
-                isActive={injectCss?.name === x.toLowerCase()}
-              />
-            ),
-            onClick: () => {
-              applySunlight(x.toLowerCase());
-            },
-          };
-        }),
-      ]}
+    <VisionSimulationDropDown
+      simulationName={injectCss?.name}
+      onChange={applySimulation}
     />
   );
 };
diff --git a/desktop-app/src/renderer/components/VisionSimulationDropDown/index.tsx b/desktop-app/src/renderer/components/VisionSimulationDropDown/index.tsx
new file mode 100644
index 00000000..e29b5cb8
--- /dev/null
+++ b/desktop-app/src/renderer/components/VisionSimulationDropDown/index.tsx
@@ -0,0 +1,193 @@
+import cx from 'classnames';
+import { Icon } from '@iconify/react';
+import { DropDown } from '../DropDown';
+
+const MenuItemLabel = ({
+  label,
+  isActive,
+}: {
+  label: string;
+  isActive: boolean;
+}) => {
+  return (
+    <div className="justify-normal flex w-full flex-shrink-0 items-center gap-1 whitespace-nowrap">
+      <Icon
+        icon="ic:round-check"
+        className={cx('opacity-0', {
+          'opacity-100': isActive,
+        })}
+      />
+      <span
+        className={cx({
+          'font-semibold text-black dark:text-white': isActive,
+        })}
+      >
+        {label}
+      </span>
+    </div>
+  );
+};
+
+const MenuItemHeader = ({ label }: { label: string }) => {
+  return (
+    <div className="relative flex w-full min-w-44 items-center justify-between gap-1 whitespace-nowrap">
+      <div className="absolute inset-0 flex items-center" aria-hidden="true">
+        <div className="w-full border-t border-gray-300 dark:border-gray-600" />
+      </div>
+      <span className="mxl-1 z-10 flex-shrink-0 bg-slate-100 pr-2 dark:bg-slate-900">
+        {label}
+      </span>
+    </div>
+  );
+};
+
+export const SIMULATIONS = {
+  DEUTERANOPIA: 'deuteranopia',
+  DEUTERANOMALY: 'deuteranomaly',
+  PROTANOPIA: 'protanopia',
+  PROTANOMALY: 'protanomaly',
+  TRITANOPIA: 'tritanopia',
+  TRITANOMALY: 'tritanomaly',
+  ACHROMATOMALY: 'achromatomaly',
+  ACHROMATOPSIA: 'achromatopsia',
+  CATARACT: 'cataract',
+  FAR: 'farsightedness',
+  GLAUCOME: 'glaucoma',
+  SOLARIZE: 'solarize',
+};
+
+export const RED_GREEN = [
+  SIMULATIONS.DEUTERANOPIA,
+  SIMULATIONS.DEUTERANOMALY,
+  SIMULATIONS.PROTANOPIA,
+  SIMULATIONS.PROTANOMALY,
+];
+export const BLUE_YELLOW = [SIMULATIONS.TRITANOPIA, SIMULATIONS.TRITANOMALY];
+export const FULL = [SIMULATIONS.ACHROMATOMALY, SIMULATIONS.ACHROMATOPSIA];
+export const VISUAL_IMPAIRMENTS = [
+  SIMULATIONS.CATARACT,
+  SIMULATIONS.FAR,
+  SIMULATIONS.GLAUCOME,
+];
+export const SUNLIGHT = [SIMULATIONS.SOLARIZE];
+
+interface Props {
+  simulationName: string | undefined;
+  onChange: (name: string | undefined) => void;
+}
+
+export const VisionSimulationDropDown = ({
+  simulationName,
+  onChange,
+}: Props) => {
+  return (
+    <DropDown
+      className={cx('rounded-lg text-xs', {
+        'bg-slate-400/60': simulationName != null,
+      })}
+      label={<Icon icon="bx:low-vision" fontSize={18} />}
+      options={[
+        {
+          label: <MenuItemHeader label="No deficiency" />,
+          onClick: null,
+        },
+        {
+          label: (
+            <MenuItemLabel
+              label="Normal Vision"
+              isActive={simulationName === undefined}
+            />
+          ),
+          onClick: () => {
+            onChange(undefined);
+          },
+        },
+        {
+          label: <MenuItemHeader label="Red-green deficiency" />,
+          onClick: null,
+        },
+        ...RED_GREEN.map((x: string) => {
+          return {
+            label: (
+              <MenuItemLabel
+                label={x}
+                isActive={simulationName === x.toLowerCase()}
+              />
+            ),
+            onClick: () => {
+              onChange(x.toLowerCase());
+            },
+          };
+        }),
+        {
+          label: <MenuItemHeader label="Blue-yellow deficiency" />,
+          onClick: null,
+        },
+        ...BLUE_YELLOW.map((x: string) => {
+          return {
+            label: (
+              <MenuItemLabel
+                label={x}
+                isActive={simulationName === x.toLowerCase()}
+              />
+            ),
+            onClick: () => {
+              onChange(x.toLowerCase());
+            },
+          };
+        }),
+        {
+          label: <MenuItemHeader label="Full color deficiency" />,
+          onClick: null,
+        },
+        ...FULL.map((x: string) => {
+          return {
+            label: (
+              <MenuItemLabel
+                label={x}
+                isActive={simulationName === x.toLowerCase()}
+              />
+            ),
+            onClick: () => {
+              onChange(x.toLowerCase());
+            },
+          };
+        }),
+        {
+          label: <MenuItemHeader label="Visual impairment" />,
+          onClick: null,
+        },
+        ...VISUAL_IMPAIRMENTS.map((x: string) => {
+          return {
+            label: (
+              <MenuItemLabel
+                label={x}
+                isActive={simulationName === x.toLowerCase()}
+              />
+            ),
+            onClick: () => {
+              onChange(x.toLowerCase());
+            },
+          };
+        }),
+        {
+          label: <MenuItemHeader label="Temporary impairment" />,
+          onClick: null,
+        },
+        ...SUNLIGHT.map((x: string) => {
+          return {
+            label: (
+              <MenuItemLabel
+                label={x}
+                isActive={simulationName === x.toLowerCase()}
+              />
+            ),
+            onClick: () => {
+              onChange(x.toLowerCase());
+            },
+          };
+        }),
+      ]}
+    />
+  );
+};