From 6a402afa3f16b8cc00a939b72250b5aaabaf5b7d Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 5 Jun 2022 23:40:25 +0800
Subject: [PATCH] Fix theme switcher button shape on iOS

---
 src/components/APIDiscovery.tsx               |  6 ++----
 src/components/Config.tsx                     | 21 ++++++-------------
 src/components/Input.tsx                      | 17 ++++-----------
 .../shared/ThemeSwitcher.module.scss          |  3 ++-
 src/misc/errors.ts                            |  7 +++++++
 5 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/components/APIDiscovery.tsx b/src/components/APIDiscovery.tsx
index f34c886..d211e04 100644
--- a/src/components/APIDiscovery.tsx
+++ b/src/components/APIDiscovery.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ThemeSwitcher } from 'src/components/shared/ThemeSwitcher';
-import { DOES_NOT_SUPPORT_FETCH, errors } from 'src/misc/errors';
+import { DOES_NOT_SUPPORT_FETCH, errors, YacdError } from 'src/misc/errors';
 import { getClashAPIConfig } from 'src/store/app';
 import { fetchConfigs } from 'src/store/configs';
 import { closeModal } from 'src/store/modals';
@@ -16,9 +16,7 @@ const { useCallback, useEffect } = React;
 function APIDiscovery({ dispatch, apiConfig, modals }) {
   if (!window.fetch) {
     const { detail } = errors[DOES_NOT_SUPPORT_FETCH];
-    const err = new Error(detail);
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'code' does not exist on type 'Error'.
-    err.code = DOES_NOT_SUPPORT_FETCH;
+    const err = new YacdError(detail, DOES_NOT_SUPPORT_FETCH);
     throw err;
   }
 
diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 34bb20a..6107789 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -6,11 +6,7 @@ import Select from 'src/components/shared/Select';
 import { ClashGeneralConfig, DispatchFn, State } from 'src/store/types';
 import { ClashAPIConfig } from 'src/types';
 
-import {
-  getClashAPIConfig,
-  getLatencyTestUrl,
-  getSelectedChartStyleIndex,
-} from '../store/app';
+import { getClashAPIConfig, getLatencyTestUrl, getSelectedChartStyleIndex } from '../store/app';
 import { fetchConfigs, getConfigs, updateConfigs } from '../store/configs';
 import { openModal } from '../store/modals';
 import Button from './Button';
@@ -103,7 +99,7 @@ function ConfigImpl({
   }, [dispatch]);
 
   const setConfigState = useCallback(
-    (name, val) => {
+    (name: keyof ClashGeneralConfig, val: ClashGeneralConfig[keyof ClashGeneralConfig]) => {
       setConfigStateInternal({ ...configState, [name]: val });
     },
     [configState]
@@ -147,14 +143,14 @@ function ConfigImpl({
     [apiConfig, dispatch, setConfigState]
   );
 
-  const handleInputOnChange = useCallback(
+  const handleInputOnChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
     (e) => handleChangeValue(e.target),
     [handleChangeValue]
   );
 
   const { selectChartStyleIndex, updateAppConfig } = useStoreActions();
 
-  const handleInputOnBlur = useCallback(
+  const handleInputOnBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(
     (e) => {
       const target = e.target;
       const { name, value } = target;
@@ -198,7 +194,6 @@ function ConfigImpl({
                 name={f.key}
                 value={configState[f.key]}
                 onChange={handleInputOnChange}
-                // @ts-expect-error ts-migrate(2322) FIXME: Type '{ name: string; value: any; onChange: (e: an... Remove this comment to see the full error message
                 onBlur={handleInputOnBlur}
               />
             </div>
@@ -210,9 +205,7 @@ function ConfigImpl({
           <Select
             options={modeOptions}
             selected={mode}
-            onChange={(e) =>
-              handleChangeValue({ name: 'mode', value: e.target.value })
-            }
+            onChange={(e) => handleChangeValue({ name: 'mode', value: e.target.value })}
           />
         </div>
 
@@ -221,9 +214,7 @@ function ConfigImpl({
           <Select
             options={logLeveOptions}
             selected={configState['log-level']}
-            onChange={(e) =>
-              handleChangeValue({ name: 'log-level', value: e.target.value })
-            }
+            onChange={(e) => handleChangeValue({ name: 'log-level', value: e.target.value })}
           />
         </div>
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index c132a3b..efb5665 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -7,7 +7,8 @@ const { useState, useRef, useEffect, useCallback } = React;
 type InputProps = {
   value?: string | number;
   type?: string;
-  onChange?: (...args: any[]) => any;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
   name?: string;
   placeholder?: string;
 };
@@ -26,17 +27,7 @@ export function SelfControlledInput({ value, ...restProps }) {
     }
     refValue.current = value;
   }, [value]);
-  const onChange = useCallback(
-    (e) => setInternalValue(e.target.value),
-    [setInternalValue]
-  );
+  const onChange = useCallback((e) => setInternalValue(e.target.value), [setInternalValue]);
 
-  return (
-    <input
-      className={s0.input}
-      value={internalValue}
-      onChange={onChange}
-      {...restProps}
-    />
-  );
+  return <input className={s0.input} value={internalValue} onChange={onChange} {...restProps} />;
 }
diff --git a/src/components/shared/ThemeSwitcher.module.scss b/src/components/shared/ThemeSwitcher.module.scss
index c5de126..951376a 100644
--- a/src/components/shared/ThemeSwitcher.module.scss
+++ b/src/components/shared/ThemeSwitcher.module.scss
@@ -29,7 +29,8 @@
   height: var(--sz);
   select {
     cursor: pointer;
-    padding-left: var(--sz);
+    padding-left: calc(var(--sz) - 2px);
+    font-size: 0;
     width: var(--sz);
     height: var(--sz);
     appearance: none;
diff --git a/src/misc/errors.ts b/src/misc/errors.ts
index 1bc369a..ec12b6a 100644
--- a/src/misc/errors.ts
+++ b/src/misc/errors.ts
@@ -1,5 +1,12 @@
 export const DOES_NOT_SUPPORT_FETCH = 0;
 
+export class YacdError extends Error {
+  constructor(public message: string, public code?: string | number) {
+    super(message);
+    Error.captureStackTrace(this, this.constructor);
+  }
+}
+
 export const errors = {
   [DOES_NOT_SUPPORT_FETCH]: {
     message: 'Browser not supported!',