Files
flipper/src/plugins/navigation/index.js
Benjamin Elo 9f1f34bd99 Added search bar to navigation plugin
Summary:
Here I've started work on a search bar for the top of my plugin. Currently it supports navigation in a device by typing in an app uri and pressing the enter key or by pressing the send icon.

More features will be added as other components for this plugin are added. I have added a function stub for the bookmark button for now and the drop down icon is purely cosmetic at the moment.

Reviewed By: jknoxville

Differential Revision: D16183223

fbshipit-source-id: 0313d8c6e3a967c9400b9e9d3f24960e6a021a8c
2019-07-11 07:48:47 -07:00

67 lines
1.5 KiB
JavaScript

/**
* Copyright 2018-present Facebook.
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
* @format
* @flow strict-local
*/
import {FlipperPlugin, FlexColumn} from 'flipper';
import SearchBar from './components/SearchBar';
type State = {||};
type Data = {||};
type PersistedState = {|
data: Array<Data>,
|};
export default class extends FlipperPlugin<State, {}, PersistedState> {
static title = 'Navigation';
static id = 'Navigation';
static icon = 'directions';
static keyboardActions = ['clear'];
static defaultPersistedState: PersistedState = {
data: [],
};
static persistedStateReducer = (
persistedState: PersistedState,
method: string,
data: Data,
): $Shape<PersistedState> => {
return {
...persistedState,
data: persistedState.data.concat([data]),
};
};
onKeyboardAction = (action: string) => {
if (action === 'clear') {
this.props.setPersistedState({data: []});
}
};
navigateTo = (query: string) => {
this.getDevice().then(device => {
device.navigateToLocation(query);
});
};
render() {
return (
<FlexColumn>
<SearchBar
onNavigate={this.navigateTo}
onFavorite={(query: string) => {}}
/>
</FlexColumn>
);
}
}
/* @scarf-info: do not remove, more info: https://fburl.com/scarf */
/* @scarf-generated: flipper-plugin index.js.template 0bfa32e5-fb15-4705-81f8-86260a1f3f8e */