[RN] Add an abstraction layer to Modal
This commit is contained in:
parent
d7475a44e4
commit
eef31d05cf
|
@ -1,7 +1,9 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component, type Node } from 'react';
|
import React, { Component, type Node } from 'react';
|
||||||
import { Modal, TouchableWithoutFeedback, View } from 'react-native';
|
import { TouchableWithoutFeedback, View } from 'react-native';
|
||||||
|
|
||||||
|
import { Modal } from '../../../react';
|
||||||
|
|
||||||
import { bottomSheetStyles as styles } from './styles';
|
import { bottomSheetStyles as styles } from './styles';
|
||||||
|
|
||||||
|
@ -50,14 +52,8 @@ export default class BottomSheet extends Component<Props> {
|
||||||
key = 'overlay'
|
key = 'overlay'
|
||||||
style = { styles.overlay } />,
|
style = { styles.overlay } />,
|
||||||
<Modal
|
<Modal
|
||||||
animationType = { 'slide' }
|
|
||||||
key = 'modal'
|
key = 'modal'
|
||||||
onRequestClose = { this._onCancel }
|
onRequestClose = { this._onCancel }
|
||||||
supportedOrientations = { [
|
|
||||||
'landscape',
|
|
||||||
'portrait'
|
|
||||||
] }
|
|
||||||
transparent = { true }
|
|
||||||
visible = { true }>
|
visible = { true }>
|
||||||
<View style = { styles.container }>
|
<View style = { styles.container }>
|
||||||
<TouchableWithoutFeedback
|
<TouchableWithoutFeedback
|
||||||
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React, { Component, type Node } from 'react';
|
||||||
|
import { Modal as NativeModal } from 'react-native';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Type of the props of the component.
|
||||||
|
*/
|
||||||
|
type Props = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Children of the component.
|
||||||
|
*/
|
||||||
|
children: Node
|
||||||
|
|
||||||
|
/**
|
||||||
|
* NOTE: We pass through all props to {@code react-native#Modal} that are
|
||||||
|
* passed to this component, so we don't list them all here, as that would
|
||||||
|
* be an unnecessary duplication and probably an unmaintained list after a
|
||||||
|
* while.
|
||||||
|
*
|
||||||
|
* See list: https://facebook.github.io/react-native/docs/modal
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implements a generic Modal (using the built-in Modal component) to share
|
||||||
|
* behaviour across modals in the app.
|
||||||
|
*/
|
||||||
|
export default class Modal extends Component<Props> {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implements {@code Component#render}.
|
||||||
|
*
|
||||||
|
* @inheritdoc
|
||||||
|
*/
|
||||||
|
render() {
|
||||||
|
const { children, ...props } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NativeModal
|
||||||
|
animationType = { 'slide' }
|
||||||
|
supportedOrientations = { [
|
||||||
|
'landscape',
|
||||||
|
'portrait'
|
||||||
|
] }
|
||||||
|
transparent = { true }
|
||||||
|
{ ...props } >
|
||||||
|
{ children }
|
||||||
|
</NativeModal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,6 +4,7 @@ export { default as Header } from './Header';
|
||||||
export { default as HeaderLabel } from './HeaderLabel';
|
export { default as HeaderLabel } from './HeaderLabel';
|
||||||
export { default as Link } from './Link';
|
export { default as Link } from './Link';
|
||||||
export { default as LoadingIndicator } from './LoadingIndicator';
|
export { default as LoadingIndicator } from './LoadingIndicator';
|
||||||
|
export { default as Modal } from './Modal';
|
||||||
export { default as NavigateSectionListEmptyComponent } from
|
export { default as NavigateSectionListEmptyComponent } from
|
||||||
'./NavigateSectionListEmptyComponent';
|
'./NavigateSectionListEmptyComponent';
|
||||||
export { default as NavigateSectionListItem }
|
export { default as NavigateSectionListItem }
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
Modal,
|
|
||||||
SafeAreaView,
|
SafeAreaView,
|
||||||
ScrollView,
|
ScrollView,
|
||||||
Switch,
|
Switch,
|
||||||
|
@ -13,7 +12,7 @@ import {
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { translate } from '../../../base/i18n';
|
import { translate } from '../../../base/i18n';
|
||||||
import { BackButton, Header } from '../../../base/react';
|
import { BackButton, Header, Modal } from '../../../base/react';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
AbstractSettingsView,
|
AbstractSettingsView,
|
||||||
|
@ -58,13 +57,8 @@ class SettingsView extends AbstractSettingsView {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
animationType = 'slide'
|
|
||||||
onRequestClose = { this._onRequestClose }
|
onRequestClose = { this._onRequestClose }
|
||||||
presentationStyle = 'fullScreen'
|
presentationStyle = 'overFullScreen'
|
||||||
supportedOrientations = { [
|
|
||||||
'landscape',
|
|
||||||
'portrait'
|
|
||||||
] }
|
|
||||||
visible = { this.props._visible }>
|
visible = { this.props._visible }>
|
||||||
<View style = { Header.pageStyle }>
|
<View style = { Header.pageStyle }>
|
||||||
{ this._renderHeader() }
|
{ this._renderHeader() }
|
||||||
|
|
|
@ -64,6 +64,11 @@ export default createStyleSheet({
|
||||||
padding: 5
|
padding: 5
|
||||||
},
|
},
|
||||||
|
|
||||||
|
settingsForm: {
|
||||||
|
backgroundColor: ColorPalette.white,
|
||||||
|
flex: 1
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Global {@code Text} color for the components.
|
* Global {@code Text} color for the components.
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue