🐛 fix: Fix share modal

lobehub · Dec 26, 2023 · 984efab · 984efab
1 parent cb6fb2d
commit 984efab
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 28 deletions.
diff --git a/javascript/main.js b/javascript/main.js
diff --git a/src/features/Share/ShareModal.tsx b/src/features/Share/ShareModal.tsx
@@ -24,7 +24,11 @@ const DEFAULT_FIELD_VALUE: FieldType = {
   withFooter: false,
 };
 
-const ShareModal = memo<ModalProps & { type: 'txt' | 'img' }>(({ open, onCancel, type }) => {
+export interface ShareModalProps extends ModalProps {
+  type: 'txt' | 'img';
+}
+
+const ShareModal = memo<ShareModalProps>(({ open, onCancel, type }) => {
   const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
   const [tab, setTab] = useState<Tab>(Tab.Info);
   const { t } = useTranslation();
@@ -43,62 +47,63 @@ const ShareModal = memo<ModalProps & { type: 'txt' | 'img' }>(({ open, onCancel,
     [],
   );
 
-  const info: FormItemProps[] = useMemo(
+  const items: FormItemProps[] = useMemo(
     () => [
       {
         children: <Input />,
+        hidden: tab !== Tab.Info,
         label: t('shareModal.title'),
         name: 'title',
       },
       {
         children: <Switch />,
+        hidden: tab !== Tab.Info,
         label: t('shareModal.showAllImages'),
         minWidth: undefined,
         name: 'showAllImages',
         valuePropName: 'checked',
       },
       {
         children: <Switch />,
+        hidden: tab !== Tab.Info,
         label: t('shareModal.showNegative'),
         minWidth: undefined,
         name: 'showNegative',
         valuePropName: 'checked',
       },
       {
         children: <Switch />,
+        hidden: tab !== Tab.Info,
         label: t('shareModal.showConfig'),
         minWidth: undefined,
         name: 'showConfig',
         valuePropName: 'checked',
       },
-    ],
-    [],
-  );
-
-  const settings: FormItemProps[] = useMemo(
-    () => [
       {
         children: <Switch />,
+        hidden: tab !== Tab.Settings,
         label: t('shareModal.withBackground'),
         minWidth: undefined,
         name: 'withBackground',
         valuePropName: 'checked',
       },
       {
         children: <Switch />,
+        hidden: tab !== Tab.Settings,
         label: t('shareModal.withFooter'),
         minWidth: undefined,
         name: 'withFooter',
         valuePropName: 'checked',
       },
       {
         children: <Segmented options={imageTypeOptions} />,
+        hidden: tab !== Tab.Settings,
         label: t('shareModal.imageType'),
         minWidth: undefined,
         name: 'imageType',
       },
     ],
-    [],
+    [tab],
   );
 
   return (
@@ -110,6 +115,7 @@ const ShareModal = memo<ModalProps & { type: 'txt' | 'img' }>(({ open, onCancel,
           {t('shareModal.download')}
         </Button>
       }
+      maxHeight={false}
       onCancel={onCancel}
       open={open}
       title={t('share')}
@@ -122,22 +128,14 @@ const ShareModal = memo<ModalProps & { type: 'txt' | 'img' }>(({ open, onCancel,
           style={{ width: '100%' }}
           value={tab}
         />
-        {tab === Tab.Info && (
-          <Form
-            initialValues={DEFAULT_FIELD_VALUE}
-            items={info}
-            itemsType={'flat'}
-            onValuesChange={(_, v) => setFieldValue(v)}
-          />
-        )}
-        {tab === Tab.Settings && (
-          <Form
-            initialValues={DEFAULT_FIELD_VALUE}
-            items={settings}
-            itemsType={'flat'}
-            onValuesChange={(_, v) => setFieldValue(v)}
-          />
-        )}
+
+        <Form
+          initialValues={DEFAULT_FIELD_VALUE}
+          items={items}
+          itemsType={'flat'}
+          onValuesChange={(_, v) => setFieldValue({ ...fieldValue, ...v })}
+        />
+
         <Preview {...fieldValue}>
           <PreviewInner {...fieldValue} type={type} />
         </Preview>

diff --git a/src/features/Share/useScreenshot.ts b/src/features/Share/useScreenshot.ts
@@ -5,7 +5,7 @@ import { useCallback, useState } from 'react';
 
 import { ImageType } from './type';
 
-export const useScreenshot = (imageType: ImageType) => {
+export const useScreenshot = (imageType: ImageType = ImageType.JPG) => {
   const [loading, setLoading] = useState(false);
 
   const handleDownload = useCallback(async() => {