143 строки
3.6 KiB
JavaScript
143 строки
3.6 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const Dimensions = require('Dimensions');
|
|
const React = require('React');
|
|
const FlatList = require('FlatList');
|
|
const SafeAreaView = require('SafeAreaView');
|
|
const StyleSheet = require('StyleSheet');
|
|
const View = require('View');
|
|
const YellowBoxButton = require('YellowBoxButton');
|
|
const YellowBoxInspector = require('YellowBoxInspector');
|
|
const YellowBoxListRow = require('YellowBoxListRow');
|
|
const YellowBoxStyle = require('YellowBoxStyle');
|
|
|
|
import type {Category} from 'YellowBoxCategory';
|
|
import type {Registry} from 'YellowBoxRegistry';
|
|
|
|
type Props = $ReadOnly<{|
|
|
onDismiss: (category: Category) => void,
|
|
onDismissAll: () => void,
|
|
registry: Registry,
|
|
|}>;
|
|
|
|
type State = {|
|
|
selectedCategory: ?Category,
|
|
|};
|
|
|
|
const VIEWPORT_RATIO = 0.5;
|
|
const MAX_ITEMS = Math.floor(
|
|
(Dimensions.get('window').height * VIEWPORT_RATIO) /
|
|
(YellowBoxListRow.GUTTER + YellowBoxListRow.HEIGHT),
|
|
);
|
|
|
|
class YellowBoxList extends React.Component<Props, State> {
|
|
state = {
|
|
selectedCategory: null,
|
|
};
|
|
|
|
render(): React.Node {
|
|
const selectedWarnings =
|
|
this.state.selectedCategory == null
|
|
? null
|
|
: this.props.registry.get(this.state.selectedCategory);
|
|
|
|
if (selectedWarnings != null) {
|
|
return (
|
|
<View style={StyleSheet.absoluteFill}>
|
|
<YellowBoxInspector
|
|
onDismiss={this._handleInspectorDismiss}
|
|
onMinimize={this._handleInspectorMinimize}
|
|
warnings={selectedWarnings}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const items = [];
|
|
for (const [category, warnings] of this.props.registry) {
|
|
items.unshift({category, warnings});
|
|
}
|
|
|
|
const listStyle = {
|
|
height:
|
|
// Additional `0.5` so the (N + 1)th row can peek into view.
|
|
Math.min(items.length, MAX_ITEMS + 0.5) *
|
|
(YellowBoxListRow.GUTTER + YellowBoxListRow.HEIGHT),
|
|
};
|
|
|
|
return items.length === 0 ? null : (
|
|
<View style={styles.list}>
|
|
<View pointerEvents="box-none" style={styles.dismissAll}>
|
|
<YellowBoxButton
|
|
hitSlop={{bottom: 4, left: 4, right: 4, top: 4}}
|
|
label="Dismiss All"
|
|
onPress={this.props.onDismissAll}
|
|
/>
|
|
</View>
|
|
<FlatList
|
|
data={items}
|
|
keyExtractor={item => item.category}
|
|
renderItem={({item}) => (
|
|
<YellowBoxListRow {...item} onPress={this._handleRowPress} />
|
|
)}
|
|
scrollEnabled={items.length > MAX_ITEMS}
|
|
scrollsToTop={false}
|
|
style={listStyle}
|
|
/>
|
|
<SafeAreaView style={styles.safeArea} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
_handleInspectorDismiss = () => {
|
|
const category = this.state.selectedCategory;
|
|
if (category == null) {
|
|
return;
|
|
}
|
|
this.setState({selectedCategory: null}, () => {
|
|
this.props.onDismiss(category);
|
|
});
|
|
};
|
|
|
|
_handleInspectorMinimize = () => {
|
|
this.setState({selectedCategory: null});
|
|
};
|
|
|
|
_handleRowPress = (category: Category) => {
|
|
this.setState({selectedCategory: category});
|
|
};
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
list: {
|
|
bottom: 0,
|
|
position: 'absolute',
|
|
width: '100%',
|
|
},
|
|
dismissAll: {
|
|
bottom: '100%',
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
paddingBottom: 4,
|
|
paddingEnd: 4,
|
|
position: 'absolute',
|
|
width: '100%',
|
|
},
|
|
safeArea: {
|
|
backgroundColor: YellowBoxStyle.getBackgroundColor(0.95),
|
|
marginTop: StyleSheet.hairlineWidth,
|
|
},
|
|
});
|
|
|
|
module.exports = YellowBoxList;
|