fix: Option clear bug (#132)

yurucam · Apr 13, 2024 · 5f84483 · 5f84483
2 parents a8ce798 + 938668a
commit 5f84483
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/web/src/pages/root/components/theme-option.list-input.tsx b/web/src/pages/root/components/theme-option.list-input.tsx
@@ -1,34 +1,41 @@
 import { ListInput } from 'konsta/react';
 import { useThemeStore } from '../../../themes';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 interface ThemeOptionListInputProps {
   index: number;
-  key: string;
+  optionKey: string;
   description?: string;
   defaultValue: string | number;
   type: typeof String | typeof Number;
 }
 
 const ThemeOptionListInput = (props: ThemeOptionListInputProps) => {
-  const { index, key, description, defaultValue, type } = props;
+  const { index, optionKey, description, defaultValue, type } = props;
   const { option, setOption } = useThemeStore();
-  const [value, setValue] = useState(option.get(key) ?? defaultValue);
+  const [value, setValue] = useState(option.get(optionKey) ?? defaultValue);
+
+  useEffect(() => {
+    setValue(option.get(optionKey) ?? defaultValue);
+  }, [option, optionKey, defaultValue]);
 
   return (
     <ListInput
       key={index}
-      name={key}
-      title={key}
+      name={optionKey}
+      title={optionKey}
       info={description}
       value={value}
       onChange={(e) => {
         const value = e.target.value;
         if (type === Number) {
-          if (isNaN(Number(value))) setOption(key, defaultValue);
-          else setOption(key, Number(value));
+          if (isNaN(Number(value))) {
+            setOption(optionKey, defaultValue);
+          } else {
+            setOption(optionKey, Number(value));
+          }
         } else {
-          setOption(key, value);
+          setOption(optionKey, value);
         }
         setValue(value);
       }}

diff --git a/web/src/pages/root/page.tsx b/web/src/pages/root/page.tsx
@@ -122,15 +122,17 @@ const RootPage = () => {
           {theme?.options.length !== 0 && <BlockTitle>{t('root.themes.customize')}</BlockTitle>}
 
           <List strongIos inset>
-            {theme?.options.map((themeOption, index) => (
-              <ThemeOptionListInput
-                index={index}
-                key={themeOption.key}
-                description={themeOption.description}
-                defaultValue={themeOption.default}
-                type={themeOption.type}
-              />
-            ))}
+            {theme?.options.map((option, index) => {
+              return (
+                <ThemeOptionListInput
+                  index={index}
+                  optionKey={option.key}
+                  description={option.description}
+                  defaultValue={option.default}
+                  type={option.type}
+                />
+              );
+            })}
           </List>
         </>
       )}