urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-25 13:04:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: omnibox go fast

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-07-02 15:42:17 +10:00
parent 9a3d04a8ee
commit 6b7030d617
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pkg/interface/src/views/components/leap/Omnibox.tsx
View File

@ -1,6 +1,8 @@
import { Box, Row, Text } from '@tlon/indigo-react'; import { Box, Row, Text } from '@tlon/indigo-react';
import { omit } from 'lodash'; import { omit } from 'lodash';
import Mousetrap from 'mousetrap'; import Mousetrap from 'mousetrap';
import _ from 'lodash';
import f from 'lodash/fp';
import React, { import React, {
ReactElement, useCallback, ReactElement, useCallback,
useEffect, useMemo, useEffect, useMemo,
@ -41,6 +43,7 @@ const SEARCHED_CATEGORIES = [
'apps' 'apps'
]; ];
const settingsSel = (s: SettingsState) => s.leap; const settingsSel = (s: SettingsState) => s.leap;
const CAT_LIMIT = 6;
export function Omnibox(props: OmniboxProps): ReactElement { export function Omnibox(props: OmniboxProps): ReactElement {
const location = useLocation(); const location = useLocation();
@ -175,7 +178,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
); );
const setPreviousSelected = useCallback(() => { const setPreviousSelected = useCallback(() => {
const flattenedResults = Array.from(results.values()).flat(); const flattenedResults = Array.from(results.values()).map(f.take(CAT_LIMIT)).flat();
const totalLength = flattenedResults.length; const totalLength = flattenedResults.length;
if (selected.length) { if (selected.length) {
const currentIndex = flattenedResults.indexOf( const currentIndex = flattenedResults.indexOf(
@ -198,7 +201,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
}, [results, selected]); }, [results, selected]);
const setNextSelected = useCallback(() => { const setNextSelected = useCallback(() => {
const flattenedResults = Array.from(results.values()).flat(); const flattenedResults = Array.from(results.values()).map(f.take(CAT_LIMIT)).flat();
if (selected.length) { if (selected.length) {
const currentIndex = flattenedResults.indexOf( const currentIndex = flattenedResults.indexOf(
// @ts-ignore unclear how to give this spread a return signature // @ts-ignore unclear how to give this spread a return signature
@ -309,13 +312,15 @@ export function Omnibox(props: OmniboxProps): ReactElement {
return ( return (
<Box <Box
maxHeight={['200px', '400px']} maxHeight={['200px', '400px']}
overflowY='auto' overflow='hidden'
overflowX='hidden'
borderBottomLeftRadius={2} borderBottomLeftRadius={2}
borderBottomRightRadius={2} borderBottomRightRadius={2}
> >
{SEARCHED_CATEGORIES.map(category => {SEARCHED_CATEGORIES.map(category =>
Object({ category, categoryResults: results.get(category) }) Object({
category,
categoryResults: _.take(results.get(category).sort(sortResults), CAT_LIMIT)
})
) )
.filter(category => category.categoryResults.length > 0) .filter(category => category.categoryResults.length > 0)
.map(({ category, categoryResults }, i) => { .map(({ category, categoryResults }, i) => {
@ -331,7 +336,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
return ( return (
<Box key={i} width='max(50vw, 300px)' maxWidth='700px'> <Box key={i} width='max(50vw, 300px)' maxWidth='700px'>
{categoryTitle} {categoryTitle}
{categoryResults.sort(sortResults).map((result, i2) => ( {categoryResults.map((result, i2) => (
<OmniboxResult <OmniboxResult
key={i2} key={i2}
// @ts-ignore withHovering doesn't pass props // @ts-ignore withHovering doesn't pass props