urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-28 22:33:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

leap: use a instead of Link if not default app

Browse Source 
Logging out currently doesn't work via Leap because we only use
react-router. This adds selection and navigation logic that passes
both app name and link href and compares app name against the default
app lib. This makes leap extensible for third party apps, too.
This commit is contained in:
Matilde Park 2020-09-08 17:08:15 -04:00
parent 39e73d16a9
commit 01a75d540f
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
pkg/interface/src/views/components/leap/Omnibox.js
View File

@ -6,6 +6,8 @@ import Mousetrap from 'mousetrap';
import OmniboxInput from './OmniboxInput'; import OmniboxInput from './OmniboxInput';
import OmniboxResult from './OmniboxResult'; import OmniboxResult from './OmniboxResult';
import defaultApps from '~/logic/lib/default-apps';
export class Omnibox extends Component { export class Omnibox extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -13,7 +15,7 @@ export class Omnibox extends Component {
index: new Map([]), index: new Map([]),
query: '', query: '',
results: this.initialResults(), results: this.initialResults(),
selected: '' selected: []
}; };
this.handleClickOutside = this.handleClickOutside.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this);
this.search = this.search.bind(this); this.search = this.search.bind(this);
@ -77,9 +79,11 @@ export class Omnibox extends Component {
if (evt.key === 'Enter') { if (evt.key === 'Enter') {
evt.preventDefault(); evt.preventDefault();
if (this.state.selected !== '') { if (this.state.selected !== '') {
this.navigate(this.state.selected); this.navigate(this.state.selected[0], this.state.selected[1]);
} else { } else {
this.navigate(Array.from(this.state.results.values()).flat()[0].link); this.navigate(
Array.from(this.state.results.values()).flat()[0].app,
Array.from(this.state.results.values()).flat()[0].link);
} }
} }
} }
@ -107,11 +111,15 @@ export class Omnibox extends Component {
})); }));
} }
navigate(link) { navigate(app, link) {
const { props } = this; const { props } = this;
this.setState({ results: this.initialResults(), query: '' }, () => { this.setState({ results: this.initialResults(), query: '' }, () => {
props.api.local.setOmnibox(); props.api.local.setOmnibox();
props.history.push(link); if (defaultApps.includes(app.toLowerCase()) || app === 'profile') {
props.history.push(link);
} else {
window.location.href = link;
}
}); });
} }
@ -165,19 +173,22 @@ export class Omnibox extends Component {
if (current !== '') { if (current !== '') {
const currentIndex = flattenedResults.indexOf( const currentIndex = flattenedResults.indexOf(
...flattenedResults.filter((e) => { ...flattenedResults.filter((e) => {
return e.link === current; return e.link === current[1];
}) })
); );
if (currentIndex > 0) { if (currentIndex > 0) {
const nextApp = flattenedResults[currentIndex - 1].app;
const nextLink = flattenedResults[currentIndex - 1].link; const nextLink = flattenedResults[currentIndex - 1].link;
this.setState({ selected: nextLink }); this.setState({ selected: [nextApp, nextLink] });
} else { } else {
const nextApp = flattenedResults[totalLength - 1].app;
const nextLink = flattenedResults[totalLength - 1].link; const nextLink = flattenedResults[totalLength - 1].link;
this.setState({ selected: nextLink }); this.setState({ selected: [nextApp, nextLink] });
} }
} else { } else {
const nextApp = flattenedResults[totalLength - 1].app;
const nextLink = flattenedResults[totalLength - 1].link; const nextLink = flattenedResults[totalLength - 1].link;
this.setState({ selected: nextLink }); this.setState({ selected: [nextApp, nextLink] });
} }
} }
@ -187,19 +198,22 @@ export class Omnibox extends Component {
if (current !== '') { if (current !== '') {
const currentIndex = flattenedResults.indexOf( const currentIndex = flattenedResults.indexOf(
...flattenedResults.filter((e) => { ...flattenedResults.filter((e) => {
return e.link === current; return e.link === current[1];
}) })
); );
if (currentIndex < flattenedResults.length - 1) { if (currentIndex < flattenedResults.length - 1) {
const nextApp = flattenedResults[currentIndex + 1].app;
const nextLink = flattenedResults[currentIndex + 1].link; const nextLink = flattenedResults[currentIndex + 1].link;
this.setState({ selected: nextLink }); this.setState({ selected: [nextApp, nextLink] });
} else { } else {
const nextApp = flattenedResults[0].app;
const nextLink = flattenedResults[0].link; const nextLink = flattenedResults[0].link;
this.setState({ selected: nextLink }); this.setState({ selected: [nextApp, nextLink] });
} }
} else { } else {
const nextApp = flattenedResults[0].app;
const nextLink = flattenedResults[0].link; const nextLink = flattenedResults[0].link;
this.setState({ selected: nextLink }); this.setState({ selected: [nextApp, nextLink] });
} }
} }
@ -228,8 +242,8 @@ export class Omnibox extends Component {
text={result.title} text={result.title}
subtext={result.host} subtext={result.host}
link={result.link} link={result.link}
navigate={() => this.navigate(result.link)} navigate={() => this.navigate(result.app, result.link)}
selected={this.state.selected} selected={this.state.selected[1]}
dark={props.dark} /> dark={props.dark} />
))} ))}
</Box> </Box>
@ -241,7 +255,7 @@ export class Omnibox extends Component {
render() { render() {
const { props, state } = this; const { props, state } = this;
if (!state.selected && Array.from(this.state.results.values()).flat().length) { if (state?.selected.length === 0 && Array.from(this.state.results.values()).flat().length) {
this.setNextSelected(); this.setNextSelected();
} }
return ( return (