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
67 lines
1.5 KiB
JavaScript
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 */
|