fix: iOS 10 bottom sheet style
This commit is contained in:
parent
1bc28e4904
commit
d387cbe5bd
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
|
||||
import React, { PureComponent, type Node } from 'react';
|
||||
import { SafeAreaView, View } from 'react-native';
|
||||
import { Platform, SafeAreaView, View } from 'react-native';
|
||||
|
||||
import { ColorSchemeRegistry } from '../../../color-scheme';
|
||||
import { SlidingView } from '../../../react';
|
||||
|
@ -36,21 +36,6 @@ type Props = {
|
|||
* A component emulating Android's BottomSheet.
|
||||
*/
|
||||
class BottomSheet extends PureComponent<Props> {
|
||||
/**
|
||||
* Assembles a style for the BottomSheet container.
|
||||
*
|
||||
* @private
|
||||
* @returns {StyleType}
|
||||
*/
|
||||
_getContainerStyle() {
|
||||
const { _styles } = this.props;
|
||||
|
||||
return {
|
||||
...styles.container,
|
||||
backgroundColor: _styles.sheet.backgroundColor
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
|
@ -65,15 +50,44 @@ class BottomSheet extends PureComponent<Props> {
|
|||
onHide = { this.props.onCancel }
|
||||
position = 'bottom'
|
||||
show = { true }>
|
||||
<SafeAreaView
|
||||
style = { this._getContainerStyle() }>
|
||||
<View style = { _styles.sheet }>
|
||||
{ this.props.children }
|
||||
<View
|
||||
pointerEvents = 'box-none'
|
||||
style = { styles.sheetContainer }>
|
||||
<View
|
||||
pointerEvents = 'box-none'
|
||||
style = { styles.sheetAreaCover } />
|
||||
<View
|
||||
style = { [
|
||||
styles.sheetItemContainer,
|
||||
_styles.sheet
|
||||
] }>
|
||||
{ this._getWrappedContent() }
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
</SlidingView>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Wraps the content when needed (iOS 11 and above), or just returns the original children.
|
||||
*
|
||||
* @returns {React$Element}
|
||||
*/
|
||||
_getWrappedContent() {
|
||||
if (Platform.OS === 'ios') {
|
||||
const majorVersionIOS = parseInt(Platform.Version, 10);
|
||||
|
||||
if (majorVersionIOS > 10) {
|
||||
return (
|
||||
<SafeAreaView>
|
||||
{ this.props.children }
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -27,17 +27,25 @@ export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
|
|||
* been implemented as per the Material Design guidelines:
|
||||
* {@link https://material.io/guidelines/components/bottom-sheets.html}.
|
||||
*/
|
||||
export const bottomSheetStyles = createStyleSheet({
|
||||
export const bottomSheetStyles = {
|
||||
sheetAreaCover: {
|
||||
backgroundColor: ColorPalette.transparent,
|
||||
flex: 1
|
||||
},
|
||||
|
||||
/**
|
||||
* Style for the container of the sheet.
|
||||
*/
|
||||
container: {
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
right: 0
|
||||
sheetContainer: {
|
||||
alignContent: 'stretch',
|
||||
flex: 1,
|
||||
flexDirection: 'column'
|
||||
},
|
||||
|
||||
sheetItemContainer: {
|
||||
paddingHorizontal: MD_ITEM_MARGIN_PADDING
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const brandedDialog = createStyleSheet({
|
||||
|
||||
|
@ -137,10 +145,7 @@ ColorSchemeRegistry.register('BottomSheet', {
|
|||
* Bottom sheet's base style.
|
||||
*/
|
||||
sheet: {
|
||||
backgroundColor: schemeColor('background'),
|
||||
flex: 1,
|
||||
paddingHorizontal: MD_ITEM_MARGIN_PADDING,
|
||||
paddingVertical: 8
|
||||
backgroundColor: schemeColor('background')
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue