Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wrap ActionSheet with a Modal #169

Merged
merged 7 commits into from
May 6, 2020
Merged

Wrap ActionSheet with a Modal #169

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a63bab7
Wrap ActionSheet with a Modal
BrodaNoel Apr 27, 2020
57ac1d1
Add Modal example
BrodaNoel Apr 27, 2020
15460e4
Simplify code
BrodaNoel Apr 27, 2020
3deddde
Add useModal on Example
BrodaNoel Apr 27, 2020
22c4081
Implement useModal
BrodaNoel Apr 27, 2020
944b2b3
Apply suggested changes
BrodaNoel Apr 28, 2020
44970a9
Add documentation
BrodaNoel Apr 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 38 additions & 2 deletions example/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import * as React from 'react';
import { StyleSheet, Text, View, ScrollView, SafeAreaView } from 'react-native';
import {
Modal,
StyleSheet,
Text,
View,
ScrollView,
SafeAreaView,
TouchableOpacity,
} from 'react-native';
import {
ActionSheetProvider,
connectActionSheet,
ActionSheetOptions,
ActionSheetProps,
} from '@expo/react-native-action-sheet';
import ShowActionSheetButton from './ShowActionSheetButton';
Expand All @@ -12,11 +19,13 @@ type Props = ActionSheetProps;

interface State {
selectedIndex: number | null;
isModalOpen: boolean;
}

class App extends React.Component<Props, State> {
state: State = {
selectedIndex: null,
isModalOpen: false,
};

_updateSelectionText = (selectedIndex: number) => {
Expand All @@ -36,6 +45,10 @@ class App extends React.Component<Props, State> {
return <Text style={styles.sectionHeaderText}>{text}</Text>;
};

_toggleModal = () => {
this.setState({ isModalOpen: !this.state.isModalOpen });
};

_renderButtons() {
const { showActionSheetWithOptions } = this.props;
return (
Expand Down Expand Up @@ -117,6 +130,25 @@ class App extends React.Component<Props, State> {
onSelection={this._updateSelectionText}
showActionSheetWithOptions={showActionSheetWithOptions}
/>
{this._renderSectionHeader('Special Cases')}
<TouchableOpacity onPress={this._toggleModal}>
<Text style={styles.link}>Open Modal</Text>
</TouchableOpacity>
{this.state.isModalOpen && (
<Modal>
<View style={{ flex: 1, padding: 30 }}>
<ShowActionSheetButton
title="Options Only"
onSelection={this._updateSelectionText}
showActionSheetWithOptions={showActionSheetWithOptions}
/>

<TouchableOpacity onPress={this._toggleModal}>
<Text style={styles.link}>Close Modal</Text>
</TouchableOpacity>
</View>
</Modal>
)}
</View>
);
}
Expand Down Expand Up @@ -184,4 +216,8 @@ const styles = StyleSheet.create({
fontSize: 16,
marginTop: 20,
},
link: {
fontSize: 15,
textDecorationLine: 'underline',
},
});
12 changes: 9 additions & 3 deletions src/ActionSheet/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
Animated,
BackHandler,
Easing,
Modal,
StyleSheet,
TouchableWithoutFeedback,
View,
Expand Down Expand Up @@ -71,8 +72,13 @@ export default class ActionSheet extends React.Component<Props, State> {
flex: 1,
}}>
{React.Children.only(this.props.children)}
{overlay}
{isVisible ? this._renderSheet() : null}

{isVisible && (
<Modal animationType="none" transparent={true} onRequestClose={this._selectCancelButton}>
BrodaNoel marked this conversation as resolved.
Show resolved Hide resolved
{overlay}
{isVisible ? this._renderSheet() : null}
</Modal>
)}
</View>
);
}
Expand Down Expand Up @@ -143,7 +149,7 @@ export default class ActionSheet extends React.Component<Props, State> {
}

showActionSheetWithOptions = (options: ActionSheetOptions, onSelect: (i: number) => void) => {
const { isVisible, isAnimating, overlayOpacity, sheetOpacity } = this.state;
const { isVisible, overlayOpacity, sheetOpacity } = this.state;

if (isVisible) {
this._deferNextShow = this.showActionSheetWithOptions.bind(this, options, onSelect);
Expand Down