Added full screen flex column
Summary: The original flex colum that came as standard did not flex to fill the remainder of the screen. Adding this component allows for a full screen flex column so that the scroll bar in the timeline looks correct. Reviewed By: jknoxville Differential Revision: D16416933 fbshipit-source-id: bd296aea85730f192778ed0aca4b226893b2829d
This commit is contained in:
committed by
Facebook Github Bot
parent
71784b1d64
commit
f313d5edcb
13
src/plugins/navigation/components/ScrollableFlexColumn.js
Normal file
13
src/plugins/navigation/components/ScrollableFlexColumn.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
/**
|
||||||
|
* 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 {FlexColumn, styled} from 'flipper';
|
||||||
|
|
||||||
|
export default styled(FlexColumn)({
|
||||||
|
height: '100%',
|
||||||
|
});
|
||||||
@@ -8,4 +8,5 @@
|
|||||||
|
|
||||||
export {default as IconButton} from './IconButton';
|
export {default as IconButton} from './IconButton';
|
||||||
export {default as NavigationInfoBox} from './NavigationInfoBox';
|
export {default as NavigationInfoBox} from './NavigationInfoBox';
|
||||||
|
export {default as ScrollableFlexColumn} from './ScrollableFlexColumn';
|
||||||
export {default as SearchBar} from './SearchBar';
|
export {default as SearchBar} from './SearchBar';
|
||||||
|
|||||||
@@ -6,8 +6,8 @@
|
|||||||
* @flow strict-local
|
* @flow strict-local
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {FlipperPlugin, FlexColumn} from 'flipper';
|
import {FlipperPlugin} from 'flipper';
|
||||||
import {SearchBar} from './components';
|
import {SearchBar, ScrollableFlexColumn} from './components';
|
||||||
|
|
||||||
type State = {||};
|
type State = {||};
|
||||||
|
|
||||||
@@ -70,12 +70,12 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<FlexColumn>
|
<ScrollableFlexColumn>
|
||||||
<SearchBar
|
<SearchBar
|
||||||
onNavigate={this.navigateTo}
|
onNavigate={this.navigateTo}
|
||||||
onFavorite={(query: string) => {}}
|
onFavorite={(query: string) => {}}
|
||||||
/>
|
/>
|
||||||
</FlexColumn>
|
</ScrollableFlexColumn>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user