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

Navigate via keyboard to edit labels page

Browse source
This commit is contained in:
Jackson Harper 2022-04-11 13:27:43 -07:00
parent 9f02f3ec15
commit 454f379e70
1 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/web/components/templates/article/EditLabelsControl.tsx
View file

@ -15,6 +15,7 @@ import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMu
import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects'
import Router, { useRouter } from 'next/router'
type EditLabelsControlProps = {
article: ArticleAttributes
@ -180,6 +181,7 @@ function EditLabelsButtonFooter(props: EditLabelsButtonFooterProps): JSX.Element
}
export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
const router = useRouter()
const [filterText, setFilterText] = useState('')
const { labels } = useGetLabelsQuery()
const [selectedLabels, setSelectedLabels] = useState<Label[]>(props.article.labels || [])
@ -207,7 +209,7 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
)
props.article.labels = result
props.articleActionHandler('refreshLabels', result)
}, [isSelected, selectedLabels])
}, [isSelected, selectedLabels, setSelectedLabels])
const filteredLabels = useMemo(() => {
if (!labels) {
@ -244,6 +246,10 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
}
if (event.key === 'Enter') {
event.preventDefault()
if (focusedIndex === maxIndex) {
router.push('/settings/labels')
return
}
if (focusedIndex !== undefined) {
const label = filteredLabels[focusedIndex]
if (label) {
@ -251,7 +257,7 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
}
}
}
}, [filteredLabels, focusedIndex])
}, [filteredLabels, focusedIndex, isSelected, selectedLabels, setSelectedLabels])
return (
<VStack
@ -285,7 +291,11 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
</VStack>
{filterText && (
<Button style='modalOption' css={{
pl: '26px', color: theme.colors.grayText.toString(), height: '42px', borderBottom: '1px solid $grayBorder'
pl: '26px',
color: theme.colors.grayText.toString(),
height: '42px',
borderBottom: '1px solid $grayBorder',
bg: focusedIndex === filteredLabels.length ? '$grayBgActive' : 'unset',
}}
onClick={async () => {
const label = await createLabelMutation(filterText, randomLabelColorHex(), '')