prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: use primer form

Browse source
This commit is contained in:
EnixCoda 2022-05-30 00:19:31 +08:00
parent f66e38291f
commit 0902841928
2 changed files with 64 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
src/components/settings/SidebarSettings.tsx
View file

@ -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>
)
}

6
src/styles/index.scss
View file

@ -938,12 +938,6 @@ $minimal-z-index: max(
flex: 1;
}
}
.toggle-shortcut-input-control {
display: flex;
.toggle-shortcut-input {
flex: 1;
}
}
}
.gitako-footer {