From 0902841928f7bd0fbf30586f7e704e4b93b9cd81 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 30 May 2022 00:19:31 +0800
Subject: [PATCH] feat: use primer form

---
 src/components/settings/SidebarSettings.tsx | 120 +++++++++++---------
 src/styles/index.scss                       |   6 -
 2 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index f46422c..e2139cc 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -1,79 +1,29 @@
-import { Button, TextInput } from '@primer/react'
+import { Box, Button, FormControl, TextInput } from '@primer/react'
 import { SimpleToggleField } from 'components/SimpleToggleField'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { friendlyFormatShortcut, noop } from 'utils/general'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import * as keyHelper from 'utils/keyHelper'
-import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
 export function SidebarSettings() {
   const configContext = useConfigs()
-  const useToggleShowSideBarShortcut = useStateIO(configContext.value.shortcut)
-  const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
-  const focused = useStateIO(false)
-
-  React.useEffect(() => {
-    useToggleShowSideBarShortcut.onChange(configContext.value.shortcut)
-  }, [configContext.value.shortcut]) // eslint-disable-line react-hooks/exhaustive-deps
+  const { sidebarToggleMode } = configContext.value
 
   return (
     <SettingsSection title={'Sidebar'}>
-      <Field id="toggle-sidebar-shortcut" title="Keyboard shortcut to toggle visibility">
-        <div className={'toggle-shortcut-input-control'}>
-          <TextInput
-            id="toggle-sidebar-shortcut"
-            sx={{ marginRight: 1 }}
-            className={'toggle-shortcut-input'}
-            onFocus={() => focused.onChange(true)}
-            onBlur={() => focused.onChange(false)}
-            placeholder={focused.value ? 'Press key combination' : 'Click here to set'}
-            value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
-            onChange={noop}
-            onKeyDown={React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-              e.preventDefault()
-              e.stopPropagation()
-              // Clear shortcut with backspace
-              const shortcut = e.key === 'Backspace' ? '' : keyHelper.parseEvent(e)
-              useToggleShowSideBarShortcut.onChange(shortcut)
-            }, [])} // eslint-disable-line react-hooks/exhaustive-deps
-          />
-          {configContext.value.shortcut === toggleShowSideBarShortcut ? (
-            <Button
-              disabled={!configContext.value.shortcut}
-              onClick={() => {
-                configContext.onChange({ shortcut: '' })
-              }}
-            >
-              Clear
-            </Button>
-          ) : (
-            <Button
-              onClick={() => {
-                const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
-                if (typeof toggleShowSideBarShortcut !== 'string') return
-                configContext.onChange({ shortcut: toggleShowSideBarShortcut })
-              }}
-            >
-              Save
-            </Button>
-          )}
-        </div>
-      </Field>
+      <ToggleSidebarShortcutSettings />
       <SimpleToggleField
         field={{
           key: 'intelligentToggle',
           label: 'Auto expand',
-          disabled: configContext.value.sidebarToggleMode === 'float',
+          disabled: sidebarToggleMode === 'float',
           tooltip: `Gitako will expand when exploring source files, pull requests, etc. And collapse otherwise.${
-            configContext.value.sidebarToggleMode === 'float'
-              ? '\nNow disabled as sidebar is in float mode.'
-              : ''
+            sidebarToggleMode === 'float' ? '\nNow disabled as sidebar is in float mode.' : ''
           }`,
           overwrite: {
-            value: enabled =>
-              configContext.value.sidebarToggleMode === 'float' ? false : enabled === null,
+            value: enabled => (sidebarToggleMode === 'float' ? false : enabled === null),
             onChange: checked => (checked ? null : true),
           },
         }}
@@ -81,3 +31,61 @@ export function SidebarSettings() {
     </SettingsSection>
   )
 }
+
+function ToggleSidebarShortcutSettings() {
+  const configContext = useConfigs()
+  const { shortcut } = configContext.value
+  const id = 'toggle-show-sidebar-shortcut'
+
+  React.useEffect(() => {
+    useToggleShowSideBarShortcut.onChange(shortcut)
+  }, [shortcut]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const useToggleShowSideBarShortcut = useStateIO(shortcut)
+  const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
+  const focused = useStateIO(false)
+
+  return (
+    <FormControl>
+      <FormControl.Label htmlFor={id}>Keyboard shortcut to toggle visibility</FormControl.Label>
+      <Box display="inline-flex" width="100%">
+        <TextInput
+          id={id}
+          sx={{ marginRight: 1, flex: 1 }}
+          onFocus={() => focused.onChange(true)}
+          onBlur={() => focused.onChange(false)}
+          placeholder={focused.value ? 'Press key combination' : 'Click here to set'}
+          value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
+          onChange={noop}
+          onKeyDown={React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+            e.preventDefault()
+            e.stopPropagation()
+            // Clear shortcut with backspace
+            const shortcut = e.key === 'Backspace' ? '' : keyHelper.parseEvent(e)
+            useToggleShowSideBarShortcut.onChange(shortcut)
+          }, [])} // eslint-disable-line react-hooks/exhaustive-deps
+        />
+        {shortcut === toggleShowSideBarShortcut ? (
+          <Button
+            disabled={!shortcut}
+            onClick={() => {
+              configContext.onChange({ shortcut: '' })
+            }}
+          >
+            Clear
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
+              if (typeof toggleShowSideBarShortcut !== 'string') return
+              configContext.onChange({ shortcut: toggleShowSideBarShortcut })
+            }}
+          >
+            Save
+          </Button>
+        )}
+      </Box>
+    </FormControl>
+  )
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7d0c128..0145491 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -938,12 +938,6 @@ $minimal-z-index: max(
           flex: 1;
         }
       }
-      .toggle-shortcut-input-control {
-        display: flex;
-        .toggle-shortcut-input {
-          flex: 1;
-        }
-      }
     }
 
     .gitako-footer {