mirror of
https://github.com/expo/react-native-action-sheet.git
synced 2026-11-14 19:11:42 -10:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Peter Piekarczyk
|
3b4439dd09 |
No files matched your search
@@ -1,4 +0,0 @@
|
||||
node_modules
|
||||
|
||||
# generated by bob
|
||||
lib/
|
||||
@@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
extends: ['universe/native', 'universe/web'],
|
||||
};
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
[ignore]
|
||||
|
||||
# We fork some components by platform.
|
||||
.*/*.web.js
|
||||
.*/node_modules/.*/*.android.js
|
||||
|
||||
# Some modules have their own node_modules with overlap
|
||||
.*/node_modules/node-haste/.*
|
||||
|
||||
# Ugh
|
||||
.*/node_modules/babel.*
|
||||
.*/node_modules/babylon.*
|
||||
.*/node_modules/invariant.*
|
||||
|
||||
# Ignore react and fbjs where there are overlaps, but don't ignore
|
||||
# anything that react-native relies on
|
||||
.*/node_modules/fbjs/lib/Map.js
|
||||
.*/node_modules/fbjs/lib/ErrorUtils.js
|
||||
|
||||
# Flow has a built-in definition for the 'react' module which we prefer to use
|
||||
# over the currently-untyped source
|
||||
.*/node_modules/react/react.js
|
||||
.*/node_modules/react/lib/React.js
|
||||
.*/node_modules/react/lib/ReactDOM.js
|
||||
|
||||
.*/__mocks__/.*
|
||||
.*/__tests__/.*
|
||||
|
||||
.*/commoner/test/source/widget/share.js
|
||||
|
||||
# Ignore commoner tests
|
||||
.*/node_modules/commoner/test/.*
|
||||
|
||||
# See https://github.com/facebook/flow/issues/442
|
||||
.*/react-tools/node_modules/commoner/lib/reader.js
|
||||
|
||||
# Ignore jest
|
||||
.*/node_modules/jest-cli/.*
|
||||
|
||||
# Ignore Website
|
||||
.*/website/.*
|
||||
|
||||
# Ignore generators
|
||||
.*/local-cli/generator.*
|
||||
|
||||
# Ignore BUCK generated folders
|
||||
.*\.buckd/
|
||||
|
||||
# Ignore RNPM
|
||||
.*/local-cli/rnpm/.*
|
||||
|
||||
.*/node_modules/is-my-json-valid/test/.*\.json
|
||||
.*/node_modules/iconv-lite/encodings/tables/.*\.json
|
||||
.*/node_modules/y18n/test/.*\.json
|
||||
.*/node_modules/spdx-license-ids/spdx-license-ids.json
|
||||
.*/node_modules/spdx-exceptions/index.json
|
||||
.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
|
||||
.*/node_modules/resolve/lib/core.json
|
||||
.*/node_modules/jsonparse/samplejson/.*\.json
|
||||
.*/node_modules/json5/test/.*\.json
|
||||
.*/node_modules/ua-parser-js/test/.*\.json
|
||||
.*/node_modules/builtin-modules/builtin-modules.json
|
||||
.*/node_modules/binary-extensions/binary-extensions.json
|
||||
.*/node_modules/url-regex/tlds.json
|
||||
.*/node_modules/joi/.*\.json
|
||||
.*/node_modules/isemail/.*\.json
|
||||
.*/node_modules/tr46/.*\.json
|
||||
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
node_modules/react-native/Libraries/react-native/react-native-interface.js
|
||||
node_modules/react-native/flow
|
||||
flow/
|
||||
|
||||
[options]
|
||||
module.system=haste
|
||||
|
||||
esproposal.class_static_fields=enable
|
||||
esproposal.class_instance_fields=enable
|
||||
|
||||
experimental.strict_type_args=true
|
||||
|
||||
munge_underscores=true
|
||||
|
||||
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
|
||||
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
|
||||
|
||||
suppress_type=$FlowIssue
|
||||
suppress_type=$FlowFixMe
|
||||
suppress_type=$FixMe
|
||||
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-6]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-6]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
|
||||
|
||||
[version]
|
||||
^0.26.0
|
||||
@@ -1,30 +0,0 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
pull_request:
|
||||
branches: [master]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: 🗂️ Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: ⚙️ Setup Node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '18'
|
||||
cache: 'yarn'
|
||||
|
||||
- name: 🧱 Build
|
||||
run: yarn
|
||||
|
||||
- name: 🚧 Type Check
|
||||
run: npm run type-check
|
||||
|
||||
- name: 🛟 Lint Check
|
||||
run: npm run lint-check
|
||||
@@ -1,39 +0,0 @@
|
||||
name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
|
||||
jobs:
|
||||
release-please:
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
release-created: ${{ steps.release.outputs.releases_created }}
|
||||
steps:
|
||||
- uses: google-github-actions/release-please-action@v3
|
||||
id: release
|
||||
with:
|
||||
release-type: node
|
||||
package-name: '@expo/react-native-action-sheet'
|
||||
|
||||
deploy:
|
||||
needs: [release-please]
|
||||
if: needs.release-please.outputs.release-created == 'true'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: 🗂️ Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: ⚙️ Setup Node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '18'
|
||||
cache: 'yarn'
|
||||
|
||||
- name: 🧱 Build
|
||||
run: yarn
|
||||
|
||||
- name: 🚀 Deploy
|
||||
uses: JS-DevTools/npm-publish@v2
|
||||
with:
|
||||
token: ${{ secrets.NPM_TOKEN }}
|
||||
@@ -35,7 +35,6 @@ local.properties
|
||||
#
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# BUCK
|
||||
buck-out/
|
||||
@@ -44,6 +43,3 @@ android/app/libs
|
||||
android/keystores/debug.keystore
|
||||
|
||||
coverage
|
||||
|
||||
# generated by bob
|
||||
lib/
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||
node_modules
|
||||
@@ -1,4 +0,0 @@
|
||||
node_modules
|
||||
|
||||
# generated by bob
|
||||
lib/
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"bracketSameLine": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
"@semantic-release/commit-analyzer",
|
||||
"@semantic-release/release-notes-generator",
|
||||
[
|
||||
"@semantic-release/changelog",
|
||||
{
|
||||
"changelogFile": "CHANGELOG.md",
|
||||
"changelogTitle": "# Changelog"
|
||||
}
|
||||
],
|
||||
"@semantic-release/npm",
|
||||
[
|
||||
"@semantic-release/git",
|
||||
{
|
||||
"assets": [
|
||||
"CHANGELOG.md",
|
||||
"package.json"
|
||||
]
|
||||
}
|
||||
],
|
||||
"@semantic-release/github"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
import { ActionSheetIOS, View } from 'react-native';
|
||||
|
||||
export default class ActionSheet extends React.Component {
|
||||
render() {
|
||||
return <View style={{ flex: 1 }}>{React.Children.only(this.props.children)}</View>;
|
||||
}
|
||||
|
||||
showActionSheetWithOptions(options, onSelect) {
|
||||
const iosOptions = {
|
||||
...options,
|
||||
// A null title or message on iOS causes a crash
|
||||
title: options.title || undefined,
|
||||
message: options.message || undefined,
|
||||
icons: undefined,
|
||||
};
|
||||
|
||||
ActionSheetIOS.showActionSheetWithOptions(iosOptions, onSelect);
|
||||
}
|
||||
}
|
||||
+519
@@ -0,0 +1,519 @@
|
||||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Animated,
|
||||
BackHandler,
|
||||
Easing,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
TouchableNativeFeedback,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
ScrollView,
|
||||
} from 'react-native';
|
||||
|
||||
type ActionSheetOptions = {
|
||||
options: Array<string>,
|
||||
icons?: ?Array<number | React.Node>,
|
||||
tintIcons?: ?boolean,
|
||||
destructiveButtonIndex?: ?number,
|
||||
cancelButtonIndex?: ?number,
|
||||
textStyle?: ?any,
|
||||
tintColor?: ?string,
|
||||
title?: ?string,
|
||||
titleTextStyle?: ?any,
|
||||
message?: ?string,
|
||||
messageTextStyle?: ?any,
|
||||
showSeparators?: ?boolean,
|
||||
separatorStyle?: ?any,
|
||||
};
|
||||
|
||||
type ActionGroupProps = {
|
||||
options: Array<string>,
|
||||
icons: ?Array<number | React.Node>,
|
||||
tintIcons: ?boolean,
|
||||
destructiveButtonIndex: ?number,
|
||||
onSelect: (i: number) => boolean,
|
||||
startIndex: number,
|
||||
length: number,
|
||||
textStyle: ?any,
|
||||
tintColor: ?string,
|
||||
title: ?string,
|
||||
titleTextStyle: ?any,
|
||||
message: ?string,
|
||||
messageTextStyle: ?any,
|
||||
showSeparators: ?boolean,
|
||||
separatorStyle: ?any,
|
||||
};
|
||||
|
||||
type ActionSheetState = {
|
||||
isVisible: boolean,
|
||||
isAnimating: boolean,
|
||||
options: ?ActionSheetOptions,
|
||||
onSelect: ?(i: number) => void,
|
||||
overlayOpacity: any,
|
||||
sheetOpacity: any,
|
||||
};
|
||||
|
||||
type ActionSheetProps = {
|
||||
children: ?any,
|
||||
useNativeDriver: ?boolean,
|
||||
};
|
||||
|
||||
const OPACITY_ANIMATION_IN_TIME = 225;
|
||||
const OPACITY_ANIMATION_OUT_TIME = 195;
|
||||
const EASING_OUT = Easing.bezier(0.25, 0.46, 0.45, 0.94);
|
||||
const EASING_IN = Easing.out(EASING_OUT);
|
||||
const BLACK_54PC_TRANSPARENT = '#0000008a';
|
||||
const BLACK_87PC_TRANSPARENT = '#000000de';
|
||||
const DESTRUCTIVE_COLOR = '#d32f2f';
|
||||
|
||||
class ActionGroup extends React.Component {
|
||||
props: ActionGroupProps;
|
||||
|
||||
render() {
|
||||
let {
|
||||
options,
|
||||
icons,
|
||||
tintIcons,
|
||||
destructiveButtonIndex,
|
||||
onSelect,
|
||||
startIndex,
|
||||
length,
|
||||
textStyle,
|
||||
tintColor,
|
||||
showSeparators,
|
||||
} = this.props;
|
||||
|
||||
let optionViews = [];
|
||||
|
||||
let nativeFeedbackBackground = TouchableNativeFeedbackSafe.Ripple(
|
||||
'rgba(180, 180, 180, 1)',
|
||||
false
|
||||
);
|
||||
|
||||
for (let i = startIndex; i < startIndex + length; i++) {
|
||||
const defaultColor = tintColor
|
||||
? tintColor
|
||||
: (textStyle || {}).color || BLACK_87PC_TRANSPARENT;
|
||||
const color = i === destructiveButtonIndex ? DESTRUCTIVE_COLOR : defaultColor;
|
||||
const iconSource = icons != null && icons[i];
|
||||
let iconElement = undefined;
|
||||
|
||||
if (iconSource) {
|
||||
if (typeof iconSource === 'number') {
|
||||
const iconStyle = [styles.icon, { tintColor: tintIcons ? color : null }];
|
||||
iconElement = <Image
|
||||
fadeDuration={0}
|
||||
source={iconSource}
|
||||
resizeMode="contain"
|
||||
style={iconStyle}/>;
|
||||
} else {
|
||||
iconElement = <View style={styles.icon}>{iconSource}</View>;
|
||||
}
|
||||
}
|
||||
|
||||
optionViews.push(
|
||||
<TouchableNativeFeedbackSafe
|
||||
key={i}
|
||||
pressInDelay={0}
|
||||
background={nativeFeedbackBackground}
|
||||
onPress={() => onSelect(i)}
|
||||
style={styles.button}>
|
||||
{iconElement}
|
||||
<Text style={[styles.text, textStyle, { color }]}>{options[i]}</Text>
|
||||
</TouchableNativeFeedbackSafe>
|
||||
);
|
||||
|
||||
if (showSeparators && i < startIndex + length - 1) {
|
||||
optionViews.push(this._renderRowSeparator(i));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.groupContainer}>
|
||||
{this._renderTitleContent()}
|
||||
<ScrollView>{optionViews}</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_renderRowSeparator(key) {
|
||||
return <View key={key ? `separator-${key}` : null} style={[styles.rowSeparator, this.props.separatorStyle]} />;
|
||||
}
|
||||
|
||||
_renderTitleContent() {
|
||||
const { title, titleTextStyle, message, messageTextStyle, showSeparators } = this.props;
|
||||
|
||||
if (!title && !message) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={[styles.titleContainer, { paddingBottom: showSeparators ? 24 : 16 }]}>
|
||||
{!!title && <Text style={[styles.title, titleTextStyle]}>{title}</Text>}
|
||||
{!!message && <Text style={[styles.message, messageTextStyle]}>{message}</Text>}
|
||||
</View>
|
||||
{!!showSeparators && this._renderRowSeparator('title')}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ActionGroup.propTypes = {
|
||||
options: PropTypes.array.isRequired,
|
||||
icons: PropTypes.array,
|
||||
tintIcons: PropTypes.bool,
|
||||
destructiveButtonIndex: PropTypes.number,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
startIndex: PropTypes.number.isRequired,
|
||||
length: PropTypes.number.isRequired,
|
||||
textStyle: Text.propTypes.style,
|
||||
tintColor: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
titleTextStyle: Text.propTypes.style,
|
||||
message: PropTypes.string,
|
||||
messageTextStyle: Text.propTypes.style,
|
||||
showSeparators: PropTypes.bool,
|
||||
separatorStyle: PropTypes.object,
|
||||
};
|
||||
|
||||
ActionGroup.defaultProps = {
|
||||
title: null,
|
||||
message: null,
|
||||
showSeparators: false,
|
||||
tintIcons: true,
|
||||
textStyle: {},
|
||||
};
|
||||
|
||||
// Has same API as https://facebook.github.io/react-native/docs/actionsheetios.html
|
||||
export default class ActionSheet extends React.Component {
|
||||
props: ActionSheetProps;
|
||||
|
||||
_actionSheetHeight = 360;
|
||||
_animateOutCallback: ?() => void = null;
|
||||
|
||||
state: ActionSheetState = {
|
||||
isVisible: false,
|
||||
isAnimating: false,
|
||||
options: null,
|
||||
onSelect: null,
|
||||
overlayOpacity: new Animated.Value(0),
|
||||
sheetOpacity: new Animated.Value(0),
|
||||
};
|
||||
|
||||
_setActionSheetHeight = ({ nativeEvent }) =>
|
||||
this._actionSheetHeight = nativeEvent.layout.height;
|
||||
|
||||
render() {
|
||||
const { isVisible, overlayOpacity } = this.state;
|
||||
const overlay = !!isVisible && (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.overlay,
|
||||
{
|
||||
opacity: overlayOpacity,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
{React.Children.only(this.props.children)}
|
||||
{overlay}
|
||||
{!!isVisible && this._renderSheet()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_renderSheet() {
|
||||
const { options, isAnimating, sheetOpacity } = this.state;
|
||||
|
||||
if (!options) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const {
|
||||
options: optionsArray,
|
||||
icons,
|
||||
tintIcons,
|
||||
destructiveButtonIndex,
|
||||
textStyle,
|
||||
tintColor,
|
||||
title,
|
||||
titleTextStyle,
|
||||
message,
|
||||
messageTextStyle,
|
||||
showSeparators,
|
||||
separatorStyle,
|
||||
} = options;
|
||||
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={this._selectCancelButton}>
|
||||
<Animated.View
|
||||
needsOffscreenAlphaCompositing={isAnimating}
|
||||
style={[
|
||||
styles.sheetContainer,
|
||||
{
|
||||
opacity: sheetOpacity,
|
||||
transform: [
|
||||
{
|
||||
translateY: sheetOpacity.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [this._actionSheetHeight, 0],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}>
|
||||
<View style={styles.sheet} onLayout={this._setActionSheetHeight}>
|
||||
<ActionGroup
|
||||
options={optionsArray}
|
||||
icons={icons}
|
||||
tintIcons={tintIcons === undefined ? true : tintIcons}
|
||||
destructiveButtonIndex={destructiveButtonIndex}
|
||||
onSelect={this._onSelect}
|
||||
startIndex={0}
|
||||
length={optionsArray.length}
|
||||
textStyle={textStyle || {}}
|
||||
tintColor={tintColor}
|
||||
title={title || null}
|
||||
titleTextStyle={titleTextStyle}
|
||||
message={message || null}
|
||||
messageTextStyle={messageTextStyle}
|
||||
showSeparators={showSeparators}
|
||||
separatorStyle={separatorStyle}
|
||||
/>
|
||||
</View>
|
||||
</Animated.View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
showActionSheetWithOptions(
|
||||
options: ActionSheetOptions,
|
||||
onSelect: (i: number) => void,
|
||||
onAnimateOut: () => void
|
||||
) {
|
||||
const { isVisible, overlayOpacity, sheetOpacity } = this.state;
|
||||
|
||||
if (isVisible) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
options,
|
||||
onSelect,
|
||||
isVisible: true,
|
||||
isAnimating: true,
|
||||
});
|
||||
|
||||
overlayOpacity.setValue(0);
|
||||
sheetOpacity.setValue(0);
|
||||
|
||||
Animated.parallel([
|
||||
Animated.timing(overlayOpacity, {
|
||||
toValue: 0.32,
|
||||
easing: EASING_OUT,
|
||||
duration: OPACITY_ANIMATION_IN_TIME,
|
||||
useNativeDriver: this.props.useNativeDriver,
|
||||
}),
|
||||
Animated.timing(sheetOpacity, {
|
||||
toValue: 1,
|
||||
easing: EASING_OUT,
|
||||
duration: OPACITY_ANIMATION_IN_TIME,
|
||||
useNativeDriver: this.props.useNativeDriver,
|
||||
}),
|
||||
]).start(result => {
|
||||
if (result.finished) {
|
||||
this.setState({
|
||||
isAnimating: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this._animateOutCallback = onAnimateOut;
|
||||
|
||||
BackHandler.addEventListener(
|
||||
'actionSheetHardwareBackPress',
|
||||
this._selectCancelButton
|
||||
);
|
||||
}
|
||||
|
||||
_selectCancelButton = () => {
|
||||
const { options } = this.state;
|
||||
if (!options) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (typeof options.cancelButtonIndex === 'number') {
|
||||
return this._onSelect(options.cancelButtonIndex);
|
||||
} else {
|
||||
return this._animateOut();
|
||||
}
|
||||
};
|
||||
|
||||
_onSelect = (index: number): boolean => {
|
||||
const { isAnimating, onSelect } = this.state;
|
||||
|
||||
if (isAnimating) {
|
||||
return false;
|
||||
}
|
||||
|
||||
onSelect && onSelect(index);
|
||||
return this._animateOut();
|
||||
};
|
||||
|
||||
_animateOut = (): boolean => {
|
||||
const { isAnimating, overlayOpacity, sheetOpacity } = this.state;
|
||||
|
||||
if (isAnimating) {
|
||||
return false;
|
||||
}
|
||||
|
||||
BackHandler.removeEventListener(
|
||||
'actionSheetHardwareBackPress',
|
||||
this._selectCancelButton
|
||||
);
|
||||
|
||||
this.setState({
|
||||
isAnimating: true,
|
||||
});
|
||||
|
||||
Animated.parallel([
|
||||
Animated.timing(overlayOpacity, {
|
||||
toValue: 0,
|
||||
easing: EASING_IN,
|
||||
duration: OPACITY_ANIMATION_OUT_TIME,
|
||||
useNativeDriver: this.props.useNativeDriver,
|
||||
}),
|
||||
Animated.timing(sheetOpacity, {
|
||||
toValue: 0,
|
||||
easing: EASING_IN,
|
||||
duration: OPACITY_ANIMATION_OUT_TIME,
|
||||
useNativeDriver: this.props.useNativeDriver,
|
||||
}),
|
||||
]).start(result => {
|
||||
if (result.finished) {
|
||||
this.setState({
|
||||
isVisible: false,
|
||||
isAnimating: false,
|
||||
});
|
||||
if (typeof this._animateOutCallback === 'function') {
|
||||
this._animateOutCallback();
|
||||
this._animateOutCallback = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
ActionSheet.defaultProps = {
|
||||
useNativeDriver: true,
|
||||
};
|
||||
|
||||
let TouchableComponent = Platform.select({
|
||||
web: TouchableOpacity,
|
||||
default: Platform.Version <= 20 ? TouchableOpacity : TouchableNativeFeedback,
|
||||
});
|
||||
|
||||
if (TouchableComponent !== TouchableNativeFeedback) {
|
||||
TouchableComponent.SelectableBackground = () => ({});
|
||||
TouchableComponent.SelectableBackgroundBorderless = () => ({});
|
||||
TouchableComponent.Ripple = (color, borderless) => ({});
|
||||
}
|
||||
|
||||
class TouchableNativeFeedbackSafe extends React.Component {
|
||||
static SelectableBackground = TouchableComponent.SelectableBackground;
|
||||
static SelectableBackgroundBorderless = TouchableComponent.SelectableBackgroundBorderless;
|
||||
static Ripple = TouchableComponent.Ripple;
|
||||
|
||||
render() {
|
||||
if (TouchableComponent === TouchableNativeFeedback) {
|
||||
return (
|
||||
<TouchableComponent {...this.props} style={{}}>
|
||||
<View style={this.props.style}>{this.props.children}</View>
|
||||
</TouchableComponent>
|
||||
);
|
||||
} else {
|
||||
return <TouchableComponent {...this.props}>{this.props.children}</TouchableComponent>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
groupContainer: {
|
||||
backgroundColor: '#ffffff',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
button: {
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
height: 56,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
icon: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
marginRight: 32,
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
color: BLACK_87PC_TRANSPARENT,
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
rowSeparator: {
|
||||
backgroundColor: '#dddddd',
|
||||
height: 1,
|
||||
width: '100%',
|
||||
},
|
||||
overlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
backgroundColor: 'black',
|
||||
},
|
||||
sheetContainer: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: 'transparent',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
titleContainer: {
|
||||
alignItems: 'flex-start',
|
||||
padding: 16,
|
||||
paddingTop: 24,
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
color: BLACK_54PC_TRANSPARENT,
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
message: {
|
||||
marginTop: 12,
|
||||
fontSize: 14,
|
||||
color: BLACK_54PC_TRANSPARENT,
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ActionSheet from './ActionSheet';
|
||||
|
||||
export default class ActionSheetProvider extends React.Component {
|
||||
static propTypes = {
|
||||
textStyle: PropTypes.object,
|
||||
tintIcons: PropTypes.bool,
|
||||
tintColor: PropTypes.string,
|
||||
titleTextStyle: PropTypes.object,
|
||||
messageTextStyle: PropTypes.object,
|
||||
showSeparators: PropTypes.bool,
|
||||
separatorStyle: PropTypes.object,
|
||||
children: PropTypes.any.isRequired,
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
showActionSheetWithOptions: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
textStyle: {},
|
||||
tintIcons: true,
|
||||
titleTextStyle: {},
|
||||
messageTextStyle: {},
|
||||
showSeparators: false,
|
||||
separatorStyle: {},
|
||||
};
|
||||
|
||||
getNextValue = (config, propKey) => config[propKey] !== undefined ? config[propKey] : this.props[propKey];
|
||||
|
||||
getNextObject = (config, propKey) => ({...this.props[propKey], ...config[propKey]});
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
showActionSheetWithOptions: (...args) => {
|
||||
const [config, ...rest] = args;
|
||||
const nextConfig = {
|
||||
...config,
|
||||
textStyle: this.getNextObject(config, 'textStyle'),
|
||||
tintIcons: this.getNextValue(config, 'tintIcons'),
|
||||
tintColor: this.getNextValue(config, 'tintColor'),
|
||||
titleTextStyle: this.getNextObject(config, 'titleTextStyle'),
|
||||
messageTextStyle: this.getNextObject(config, 'messageTextStyle'),
|
||||
showSeparators: this.getNextValue(config, 'showSeparators'),
|
||||
separatorStyle: this.getNextObject(config, 'separatorStyle'),
|
||||
};
|
||||
|
||||
this._actionSheetRef.showActionSheetWithOptions(nextConfig, ...rest);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ActionSheet ref={component => (this._actionSheetRef = component)}>
|
||||
{React.Children.only(this.props.children)}
|
||||
</ActionSheet>
|
||||
);
|
||||
}
|
||||
}
|
||||
-138
@@ -1,138 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
## [4.0.1](https://github.com/expo/react-native-action-sheet/compare/v4.0.0...v4.0.1) (2022-11-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* expose ref on ActionSheetProvider for statically invoking ([#283](https://github.com/expo/react-native-action-sheet/issues/283)) ([b2f5f43](https://github.com/expo/react-native-action-sheet/commit/b2f5f433ff2070c77fdd62b273d2d80e636efd3a))
|
||||
|
||||
# [4.0.0](https://github.com/expo/react-native-action-sheet/compare/v3.14.0...v4.0.0) (2022-10-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* iOS use custom action sheet ([#281](https://github.com/expo/react-native-action-sheet/issues/281)) ([372dc80](https://github.com/expo/react-native-action-sheet/commit/372dc8065006a4da510ef5f31c27225d14a71ff3))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* This implementation is backwards compatible, but just to be safe I'm marking this as breaking so that it bumps the major version.
|
||||
|
||||
# [3.14.0](https://github.com/expo/react-native-action-sheet/compare/v3.13.1...v3.14.0) (2022-10-03)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* support cancelButtonTintColor ([#278](https://github.com/expo/react-native-action-sheet/issues/278)) ([2dcd54c](https://github.com/expo/react-native-action-sheet/commit/2dcd54c56f35a64c66f8d9a7d09a9475801cf037))
|
||||
|
||||
## [3.13.1](https://github.com/expo/react-native-action-sheet/compare/v3.13.0...v3.13.1) (2022-10-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add return type to connectActionSheet ([#273](https://github.com/expo/react-native-action-sheet/issues/273)) ([f46a5cf](https://github.com/expo/react-native-action-sheet/commit/f46a5cfc473807478c558a733c8adb1440941017))
|
||||
|
||||
# [3.13.0](https://github.com/expo/react-native-action-sheet/compare/v3.12.0...v3.13.0) (2022-01-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* defer calling onSelect until after animation ([#248](https://github.com/expo/react-native-action-sheet/issues/248)) ([1fb3411](https://github.com/expo/react-native-action-sheet/commit/1fb3411f575b4fa1cb762a804fc38cf3e2a5c73b)), closes [#203](https://github.com/expo/react-native-action-sheet/issues/203)
|
||||
* stabilize the identity of the context provider value ([#251](https://github.com/expo/react-native-action-sheet/issues/251)) ([55005ba](https://github.com/expo/react-native-action-sheet/commit/55005ba0fb4bc6aff546390cf324619bf2e0ed2a))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* support closing actionsheet with Esc key on web ([#247](https://github.com/expo/react-native-action-sheet/issues/247)) ([c4c3f8b](https://github.com/expo/react-native-action-sheet/commit/c4c3f8b873d76ff40daf8d2061d9f43346a3577f)), closes [#194](https://github.com/expo/react-native-action-sheet/issues/194)
|
||||
|
||||
# [3.12.0](https://github.com/expo/react-native-action-sheet/compare/v3.11.0...v3.12.0) (2021-10-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* use correct callback type allowing for undefined `i` ([#239](https://github.com/expo/react-native-action-sheet/issues/239)) ([b54b9f1](https://github.com/expo/react-native-action-sheet/commit/b54b9f16c251cb2ca5f1bd41ca7cc41b1393c6b3))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* adds support for disabledButtonIndices ([#246](https://github.com/expo/react-native-action-sheet/issues/246)) ([feed1f7](https://github.com/expo/react-native-action-sheet/commit/feed1f78b4c85855d48c1742fe9f8a67c0604609)), closes [#224](https://github.com/expo/react-native-action-sheet/issues/224)
|
||||
|
||||
# [3.11.0](https://github.com/expo/react-native-action-sheet/compare/v3.10.0...v3.11.0) (2021-09-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* yarn lock issues ([#238](https://github.com/expo/react-native-action-sheet/issues/238)) ([22fc214](https://github.com/expo/react-native-action-sheet/commit/22fc2144b3ce3b5fc1892eefd86f484dc1af58e9))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* default useModal to true when autoFocus is set ([688fd47](https://github.com/expo/react-native-action-sheet/commit/688fd47227dab6994b59ed85af622cb04ebed220))
|
||||
|
||||
# [3.10.0](https://github.com/expo/react-native-action-sheet/compare/v3.8.0...v3.10.0) (2021-08-09)
|
||||
|
||||
### Features
|
||||
* Allow multiple destructive indices ([#210](https://github.com/expo/react-native-action-sheet/issues/210)) ([81112b9](https://github.com/expo/react-native-action-sheet/commit/81112b9553dc34725e2708b02b64b7a5e5c57509))
|
||||
|
||||
# [3.9.0](https://github.com/expo/react-native-action-sheet/compare/v3.8.0...v3.9.0) (2021-03-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* allow callback to be async ([#183](https://github.com/expo/react-native-action-sheet/issues/183)) ([d0d5182](https://github.com/expo/react-native-action-sheet/commit/d0d518278028556a80deec3d9b57c332b82ba28d))
|
||||
* center icons with titles ([#188](https://github.com/expo/react-native-action-sheet/issues/188)) ([d48c323](https://github.com/expo/react-native-action-sheet/commit/d48c323e4563363c8683c427d1803e1ff4cddcb5))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add `userInterfaceStyle` option for iOS ([#206](https://github.com/expo/react-native-action-sheet/issues/206)) ([735cfa5](https://github.com/expo/react-native-action-sheet/commit/735cfa54ba1bfd90139671489aca525fdbd59626))
|
||||
|
||||
# [3.8.0](https://github.com/expo/react-native-action-sheet/compare/v3.7.0...v3.8.0) (2020-05-19)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Add destructiveColor option ([#171](https://github.com/expo/react-native-action-sheet/issues/171)) ([5549e36](https://github.com/expo/react-native-action-sheet/commit/5549e36a92d8afcc0ce2bf6a601e83209b5ce080))
|
||||
* Improvements to Android accessibility ([#168](https://github.com/expo/react-native-action-sheet/issues/168)) ([b605fb8](https://github.com/expo/react-native-action-sheet/commit/b605fb8a3b6421c244f7f18d934bb5ea0753d461))
|
||||
|
||||
# [3.7.0](https://github.com/expo/react-native-action-sheet/compare/v3.6.0...v3.7.0) (2020-05-06)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* adds `useModal` prop wrap action sheet in a modal ([9ed955d](https://github.com/expo/react-native-action-sheet/commit/9ed955dbba7259cbcf5e31ef3d4ed091ae4a3145)), closes [#169](https://github.com/expo/react-native-action-sheet/issues/169)
|
||||
|
||||
# [3.6.0](https://github.com/expo/react-native-action-sheet/compare/v3.5.0...v3.6.0) (2020-03-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Android 'Super expression must either be null or a function' ([37156da](https://github.com/expo/react-native-action-sheet/commit/37156dacf114aa5146da153db9ee00c1aea8eaca))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Add accessibility label to Action options ([#158](https://github.com/expo/react-native-action-sheet/issues/158)) ([bc3c27d](https://github.com/expo/react-native-action-sheet/commit/bc3c27d767a5657032b73f70aa1aacfea0481f66))
|
||||
|
||||
# [3.5.0](https://github.com/expo/react-native-action-sheet/compare/v3.4.1...v3.5.0) (2020-02-04)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add anchor option for iPads ([#155](https://github.com/expo/react-native-action-sheet/issues/155)) ([370e6e8](https://github.com/expo/react-native-action-sheet/commit/370e6e855fbacbfc683cc6ab16304f26c159e6b5))
|
||||
|
||||
## [3.4.1](https://github.com/expo/react-native-action-sheet/compare/v3.4.0...v3.4.1) (2019-12-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **iOS:** crash when using Android only options ([#144](https://github.com/expo/react-native-action-sheet/issues/144)) ([8016008](https://github.com/expo/react-native-action-sheet/commit/8016008781cbe418dc03f04a324d5e5ef5bcdaa7))
|
||||
|
||||
# [3.4.0](https://github.com/expo/react-native-action-sheet/compare/v3.3.2...v3.4.0) (2019-11-19)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **android:** allow customizing container styles ([#142](https://github.com/expo/react-native-action-sheet/issues/142)) ([39fc431](https://github.com/expo/react-native-action-sheet/commit/39fc431c97cb0ec03ab2a8386bd1b836d9f1cd2f))
|
||||
* Allow pointerEvents prop to pass through to containing view ([#124](https://github.com/expo/react-native-action-sheet/issues/124)) ([76397fa](https://github.com/expo/react-native-action-sheet/commit/76397fa7c4bff7318780ac72600156d753fad3f0))
|
||||
@@ -1,16 +1,6 @@
|
||||
# @expo/react-native-action-sheet
|
||||
# react-native-action-sheet [](https://slack.expo.io)
|
||||
|
||||
[](https://www.npmjs.com/package/@expo/react-native-action-sheet)
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://discord.gg/4gtbPAdpaE)
|
||||
|
||||
React Native Action Sheet is a cross-platform React Native component that uses the native UIActionSheet on iOS and a pure JS implementation on Android.
|
||||
|
||||
| iOS | Android | Web |
|
||||
| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <img src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/ios.gif" width="200" height="400"/> | <img src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/android.gif" width="200" height="400"/> | <img src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/web.gif" width="400" height="400"/> |
|
||||
|
||||
## [Check out the example snack here!](https://snack.expo.dev/@expo-action-sheet/example)
|
||||
ActionSheet is a cross-platform React Native component that uses the native UIActionSheet on iOS and a JS implementation on Android. Almost a drop in replacement for [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html) except it cannot be called statically.
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -18,204 +8,88 @@ React Native Action Sheet is a cross-platform React Native component that uses t
|
||||
npm install @expo/react-native-action-sheet
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
yarn add @expo/react-native-action-sheet
|
||||
```
|
||||
|
||||
## A basic ActionSheet Setup
|
||||
|
||||
### 1. Wrap your top-level component with `<ActionSheetProvider />`
|
||||
import ActionSheetProvider & connectActionSheet
|
||||
|
||||
ReactNativeActionSheet uses React context to allow your components to invoke the menu. This means your app needs to be wrapped with the `ActionSheetProvider` component first.
|
||||
```es6
|
||||
import {
|
||||
ActionSheetProvider,
|
||||
connectActionSheet,
|
||||
} from '@expo/react-native-action-sheet';
|
||||
```
|
||||
|
||||
```jsx
|
||||
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
|
||||
wrap your top-level component with `<ActionSheetProvider />`
|
||||
|
||||
export default function AppContainer() {
|
||||
return (
|
||||
<ActionSheetProvider>
|
||||
<App />
|
||||
</ActionSheetProvider>
|
||||
);
|
||||
```es6
|
||||
class AppContainer extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ActionSheetProvider>
|
||||
<App />
|
||||
</ActionSheetProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Call the `showActionSheetWithOptions` method with a hook or a higher order component.
|
||||
decorate the component you want to use the action sheet with `@connectActionSheet`
|
||||
|
||||
```tsx
|
||||
// Using the provided hook
|
||||
import { useActionSheet } from '@expo/react-native-action-sheet';
|
||||
|
||||
export default Menu() {
|
||||
const { showActionSheetWithOptions } = useActionSheet();
|
||||
|
||||
const onPress = () => {
|
||||
const options = ['Delete', 'Save', 'Cancel'];
|
||||
const destructiveButtonIndex = 0;
|
||||
const cancelButtonIndex = 2;
|
||||
|
||||
showActionSheetWithOptions({
|
||||
options,
|
||||
cancelButtonIndex,
|
||||
destructiveButtonIndex
|
||||
}, (selectedIndex: number) => {
|
||||
switch (selectedIndex) {
|
||||
case 1:
|
||||
// Save
|
||||
break;
|
||||
|
||||
case destructiveButtonIndex:
|
||||
// Delete
|
||||
break;
|
||||
|
||||
case cancelButtonIndex:
|
||||
// Canceled
|
||||
}});
|
||||
}
|
||||
|
||||
return (
|
||||
<Button title="Menu" onPress={onPress}/>
|
||||
)
|
||||
};
|
||||
```
|
||||
|
||||
Alternatively, any component can use the higher order component to access the context and pass the `showActionSheetWithOptions` as a prop.
|
||||
|
||||
```tsx
|
||||
// Using a Higher Order Component to wrap your component
|
||||
import { connectActionSheet } from '@expo/react-native-action-sheet';
|
||||
|
||||
function Menu({ showActionSheetWithOptions }) {
|
||||
```es6
|
||||
@connectActionSheet
|
||||
class App extends React.Component {
|
||||
/* ... */
|
||||
}
|
||||
|
||||
export default connectActionSheet(Menu);
|
||||
```
|
||||
|
||||
`Menu` component can now access the actionSheet prop as `showActionSheetWithOptions`.
|
||||
access actionSheet method as `this.props.showActionSheetWithOptions`
|
||||
|
||||
```es6
|
||||
_onOpenActionSheet = () => {
|
||||
// Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
|
||||
const options = ['Delete', 'Save', 'Cancel'];
|
||||
const destructiveButtonIndex = 0;
|
||||
const cancelButtonIndex = 2;
|
||||
|
||||
this.props.showActionSheetWithOptions(
|
||||
{
|
||||
options,
|
||||
cancelButtonIndex,
|
||||
destructiveButtonIndex,
|
||||
},
|
||||
buttonIndex => {
|
||||
// Do something here depending on the button index selected
|
||||
},
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
The goal of this library is to mimic the native iOS and Android ActionSheets as closely as possible.
|
||||
|
||||
This library can also be used in the browser with Expo for web.
|
||||
This library can also be used with on web with Expo.
|
||||
|
||||
### Universal Props
|
||||
|
||||
| Name | Type | Description |
|
||||
| ------------------------ | -------------------------- | ------------------------------------------------------------- |
|
||||
| `options` | array of strings | A list of button titles **(required)** |
|
||||
| `cancelButtonIndex` | number | Index of cancel button in options |
|
||||
| `cancelButtonTintColor` | string | Color used for the change the text color of the cancel button |
|
||||
| `destructiveButtonIndex` | number or array of numbers | Indices of destructive buttons in options |
|
||||
| `title` | string | Title to show above the action sheet |
|
||||
| `message` | string | Message to show below the title |
|
||||
| `tintColor` | string | Color used for non-destructive button titles |
|
||||
| `disabledButtonIndices` | array of numbers | Indices of disabled buttons in options |
|
||||
The same options available on React Native's [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html#showactionsheetwithoptions) component exist for both iOS and Android in this library.
|
||||
|
||||
### iOS Only Props
|
||||
|
||||
| Name | Type | Description |
|
||||
| -------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `anchor` | number | iPad only option that allows for docking the action sheet to a node. See [ShowActionSheetButton.tsx](/example/ShowActionSheetButton.tsx) for an example on how to implement this. |
|
||||
| `userInterfaceStyle` | string | The interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used. |
|
||||
|
||||
### Custom Action Sheet Only (Android/Web) Props
|
||||
### Android-Only Props
|
||||
|
||||
The below props allow modification of the Android ActionSheet. They have no effect on the look on iOS as the native iOS Action Sheet does not have options for modifying these options.
|
||||
|
||||
| Name | Type | Description |
|
||||
| ------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `icons` | array of required images or icons | Show icons to go along with each option. If image source paths are provided via `require`, images will be rendered for you. Alternatively, you can provide an array of elements such as vector icons, pre-rendered Images, etc. |
|
||||
| `tintIcons` | boolean | Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source. |
|
||||
| `textStyle` | TextStyle | Apply any text style props to the options. If the `tintColor` option is provided, it takes precedence over a color text style prop. |
|
||||
| `titleTextStyle` | TextStyle | Apply any text style props to the title if present. |
|
||||
| `messageTextStyle` | TextStyle | Apply any text style props to the message if present. |
|
||||
| `autoFocus` | boolean | If `true`, this will give the first option screen reader focus automatically when the action sheet becomes visible. On iOS, this is the default behavior of the native action sheet. |
|
||||
| `showSeparators` | boolean | Show separators between items. On iOS, separators always show so this prop has no effect. |
|
||||
| `containerStyle` | ViewStyle | Apply any view style props to the container rather than use the default look (e.g. dark mode). |
|
||||
| `separatorStyle` | ViewStyle | Modify the look of the separators rather than use the default look. |
|
||||
| `useModal` | boolean | Defaults to `false` (`true` if autoFocus is also `true`) Wraps the ActionSheet with a Modal, in order to show in front of other Modals that were already opened ([issue reference](https://github.com/expo/react-native-action-sheet/issues/164)). |
|
||||
| `destructiveColor` | string | Modify color for text of destructive option. Defaults to `#d32f2f`. |
|
||||
|
||||
## ActionSheetProvider Props
|
||||
|
||||
The following props can be set directly on the `ActionSheetProvider`
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `useCustomActionSheet` | boolean | iOS only prop that uses the custom pure JS action sheet (Android/Web version) instead of the native ActionSheetIOS component. Defaults to `false`. |
|
||||
| `useNativeDriver` | boolean | Windows only option that provides the option to disable the [native animation](https://reactnative.dev/docs/animated#using-the-native-driver) driver for React Native Windows projects targeting _Windows 10 Version-1809 ; Build-10.0.17763.0_ and earlier. `useNativeDriver` is [supported in Version-1903 and later](https://microsoft.github.io/react-native-windows/docs/win10-compat) so if your project is targeting that, you don't need to set this prop. |
|
||||
|
||||
```jsx
|
||||
// example of using useCustomActionSheet on iOS
|
||||
export default function AppContainer() {
|
||||
return (
|
||||
<ActionSheetProvider useCustomActionSheet={true}>
|
||||
<App />
|
||||
</ActionSheetProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Callback
|
||||
|
||||
The second parameter of the `showActionSheetWithOptions` function is a callback for when a button is selected. The callback takes a single argument which will be the zero-based index of the pressed option. You can check the value against your `cancelButtonIndex` to determine if the action was cancelled or not.
|
||||
|
||||
```tsx
|
||||
function onButtonPress(selectedIndex: number) {
|
||||
// handle it!
|
||||
}
|
||||
```
|
||||
- `icons` (array of required images or icons; optional): Show icons to go along with each option. If image source paths are provided via `require`, images will be rendered for you. Alternatively, you can provide an array of elements such as vector icons, pre-rendered Images, etc.
|
||||
- `tintIcons` (boolean; optional; default: `true`): Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source.
|
||||
- `textStyle` (Text.propTypes.style; optional): Apply any text style props to the options. If the `tintColor` option is provided, it takes precedence over a color text style prop.
|
||||
- `titleTextStyle` (Text.propTypes.style; optional): Apply any text style props to the title if present.
|
||||
- `messageTextStyle` (Text.propTypes.style; optional): Apply any text style props to the message if present.
|
||||
- `showSeparators`: (boolean; optional; default: false): Show separators between items. On iOS, separators always show so this prop has no effect.
|
||||
- `separatorStyle`: (View.propTypes.style; optional): Modify the look of the separators rather than use the default look.
|
||||
|
||||
## Try it out
|
||||
|
||||
Try it in Expo Snack: https://snack.expo.dev/@expo-action-sheet/example.
|
||||
Try it in Expo: https://expo.io/@community/react-native-action-sheet-example
|
||||
|
||||
## Example
|
||||
## Usage
|
||||
|
||||
See the [example app](https://github.com/expo/react-native-action-sheet/tree/master/example).
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
$ cd example
|
||||
$ yarn
|
||||
|
||||
// build simulator
|
||||
$ yarn ios
|
||||
$ yarn android
|
||||
|
||||
// web
|
||||
$ yarn web
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
### Setup
|
||||
|
||||
```
|
||||
$ git clone [email protected]:expo/react-native-action-sheet.git
|
||||
$ cd react-native-action-sheet
|
||||
$ yarn
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
We use [bob](https://github.com/react-native-community/bob).
|
||||
|
||||
```
|
||||
$ yarn build
|
||||
```
|
||||
|
||||
### Lint & Format
|
||||
|
||||
```
|
||||
// tsc
|
||||
$ yarn type-check
|
||||
|
||||
// ESLint + Prettier
|
||||
$ yarn lint
|
||||
```
|
||||
See the [example app](https://github.com/expo/react-native-action-sheet/tree/master/example) for examples of how to apply different options.
|
||||
@@ -0,0 +1,20 @@
|
||||
import hoistStatics from 'hoist-non-react-statics';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function connectActionSheet(WrappedComponent) {
|
||||
const ConnectedActionSheet = (props, context) => {
|
||||
return (
|
||||
<WrappedComponent
|
||||
{...props}
|
||||
showActionSheetWithOptions={context.showActionSheetWithOptions}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
ConnectedActionSheet.contextTypes = {
|
||||
showActionSheetWithOptions: PropTypes.func,
|
||||
};
|
||||
|
||||
return hoistStatics(ConnectedActionSheet, WrappedComponent);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"presets": ["babel-preset-expo"],
|
||||
"env": {
|
||||
"development": {
|
||||
"plugins": ["transform-react-jsx-source"]
|
||||
}
|
||||
}
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
import Expo from 'expo';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, View, ScrollView, SafeAreaView } from 'react-native';
|
||||
import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet';
|
||||
import ShowActionSheetButton from './ShowActionSheetButton';
|
||||
|
||||
export default class AppContainer extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ActionSheetProvider>
|
||||
<App />
|
||||
</ActionSheetProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@connectActionSheet
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
selectedIndex: null,
|
||||
};
|
||||
|
||||
_updateSelectionText = (selectedIndex) => {
|
||||
this.setState({ selectedIndex });
|
||||
};
|
||||
|
||||
_renderSelectionText() {
|
||||
const { selectedIndex } = this.state;
|
||||
const text = selectedIndex === null
|
||||
? 'No Option Selected'
|
||||
: `Option #${selectedIndex + 1} Selected`;
|
||||
|
||||
return <Text style={styles.selectionText}>{text}</Text>
|
||||
}
|
||||
|
||||
_renderSectionHeader(text) {
|
||||
return <Text style={styles.sectionHeaderText}>{text}</Text>;
|
||||
}
|
||||
|
||||
_renderButtons() {
|
||||
const { showActionSheetWithOptions } = this.props;
|
||||
return (
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
{this._renderSectionHeader('Universal Options')}
|
||||
<ShowActionSheetButton
|
||||
title="Options Only"
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions} />
|
||||
<ShowActionSheetButton
|
||||
title="Title"
|
||||
withTitle
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions} />
|
||||
<ShowActionSheetButton
|
||||
title="Title & Message"
|
||||
withTitle
|
||||
withMessage
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions} />
|
||||
{this._renderSectionHeader('Android-Only Options')}
|
||||
<ShowActionSheetButton
|
||||
title="Icons"
|
||||
withIcons
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions} />
|
||||
<ShowActionSheetButton
|
||||
title="Title, Message, & Icons"
|
||||
withTitle
|
||||
withMessage
|
||||
withIcons
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions} />
|
||||
<ShowActionSheetButton
|
||||
title="Use Separators"
|
||||
withTitle
|
||||
withIcons
|
||||
withSeparators
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions} />
|
||||
<ShowActionSheetButton
|
||||
title="Custom Styles"
|
||||
withTitle
|
||||
withMessage
|
||||
withIcons
|
||||
withCustomStyles
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={styles.flex}>
|
||||
<ScrollView style={styles.flex} contentContainerStyle={styles.contentContainer}>
|
||||
<Text style={styles.headerText}>
|
||||
{"Hello!\n\nThis is a simple example app to demonstrate @expo/react-native-action-sheet."}
|
||||
</Text>
|
||||
{this._renderButtons()}
|
||||
{this._renderSelectionText()}
|
||||
<Text style={styles.notes}>
|
||||
Note: Icons and custom text styles are only available on Android. Separators can only be toggled on Android; they always show on iOS.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: {
|
||||
flex: 1,
|
||||
},
|
||||
contentContainer: {
|
||||
padding: 16,
|
||||
paddingVertical: 20,
|
||||
},
|
||||
headerText: {
|
||||
textAlign: 'center',
|
||||
fontSize: 16,
|
||||
marginBottom: 10,
|
||||
},
|
||||
notes: {
|
||||
marginTop: 32,
|
||||
},
|
||||
sectionHeaderText: {
|
||||
color: 'orange',
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 20,
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
selectionText: {
|
||||
textAlign: 'center',
|
||||
color: 'blue',
|
||||
fontSize: 16,
|
||||
marginTop: 20,
|
||||
},
|
||||
});
|
||||
-304
@@ -1,304 +0,0 @@
|
||||
import {
|
||||
ActionSheetProvider,
|
||||
connectActionSheet,
|
||||
ActionSheetProps,
|
||||
} from '@expo/react-native-action-sheet';
|
||||
import { Entypo } from '@expo/vector-icons';
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
ScrollView,
|
||||
SafeAreaView,
|
||||
TouchableOpacity,
|
||||
Share,
|
||||
Platform,
|
||||
} from 'react-native';
|
||||
|
||||
import ShowActionSheetButton from './ShowActionSheetButton';
|
||||
|
||||
type Props = ActionSheetProps & {
|
||||
useCustomActionSheet: boolean;
|
||||
setUseCustomActionSheet: (next: boolean) => void;
|
||||
};
|
||||
|
||||
interface State {
|
||||
selectedIndex?: number | null;
|
||||
isModalOpen: boolean;
|
||||
}
|
||||
|
||||
class App extends React.Component<Props, State> {
|
||||
state: State = {
|
||||
selectedIndex: null,
|
||||
isModalOpen: false,
|
||||
};
|
||||
|
||||
_updateSelectionText = (selectedIndex?: number) => {
|
||||
this.setState({
|
||||
selectedIndex,
|
||||
});
|
||||
};
|
||||
|
||||
_renderSelectionText = () => {
|
||||
const { selectedIndex } = this.state;
|
||||
const text =
|
||||
selectedIndex === null || selectedIndex === undefined
|
||||
? 'No Option Selected'
|
||||
: `Option #${selectedIndex + 1} Selected`;
|
||||
return <Text style={styles.selectionText}>{text}</Text>;
|
||||
};
|
||||
|
||||
_renderSectionHeader = (text: string) => {
|
||||
return <Text style={styles.sectionHeaderText}>{text}</Text>;
|
||||
};
|
||||
|
||||
_toggleModal = () => {
|
||||
this.setState((prevState) => ({ isModalOpen: !prevState.isModalOpen }));
|
||||
};
|
||||
|
||||
async _onShare() {
|
||||
try {
|
||||
const result = await Share.share({
|
||||
message: 'React Native | A framework for building native apps using React',
|
||||
});
|
||||
if (result.action === Share.sharedAction) {
|
||||
if (result.activityType) {
|
||||
// shared with activity type of result.activityType
|
||||
} else {
|
||||
// shared
|
||||
}
|
||||
} else if (result.action === Share.dismissedAction) {
|
||||
// dismissed
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
_renderButtons() {
|
||||
const { showActionSheetWithOptions } = this.props;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: Platform.OS === 'ios' ? 'flex' : 'none',
|
||||
}}>
|
||||
{this._renderSectionHeader('Use Custom Action Sheet')}
|
||||
<Text style={{ marginBottom: 10 }}>
|
||||
On iOS the default action sheet will be the native UI. However, you can optionally
|
||||
enable the custom JS action sheet by setting the useCustomActionSheet prop on the
|
||||
provider.
|
||||
</Text>
|
||||
<Entypo.Button
|
||||
backgroundColor={this.props.useCustomActionSheet ? '#3e3e3e' : 'white'}
|
||||
name={this.props.useCustomActionSheet ? 'check' : 'circle'}
|
||||
color={this.props.useCustomActionSheet ? '#fff' : '#3e3e3e'}
|
||||
style={{
|
||||
borderColor: '#3e3e3e',
|
||||
borderWidth: 2,
|
||||
}}
|
||||
onPress={() => this.props.setUseCustomActionSheet(!this.props.useCustomActionSheet)}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 15,
|
||||
color: this.props.useCustomActionSheet ? '#fff' : '#3e3e3e',
|
||||
}}>
|
||||
Use Custom Action Sheet
|
||||
</Text>
|
||||
</Entypo.Button>
|
||||
</View>
|
||||
{this._renderSectionHeader('Universal Options')}
|
||||
<ShowActionSheetButton
|
||||
title="Options Only"
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="Title"
|
||||
withTitle
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="Title & Message"
|
||||
withTitle
|
||||
withMessage
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="Cancel Button Tint Color"
|
||||
withCancelButtonTintColor
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="iPad Anchor"
|
||||
withAnchor
|
||||
withTitle
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="Nested Action Sheets"
|
||||
onSelection={(index) => {
|
||||
if (!index || index < 3) {
|
||||
showActionSheetWithOptions(
|
||||
{
|
||||
title: 'Sub Action Sheet',
|
||||
options: ['One', 'Two', 'Three', 'Done'],
|
||||
cancelButtonIndex: 3,
|
||||
},
|
||||
this._updateSelectionText
|
||||
);
|
||||
}
|
||||
}}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="Share Menu"
|
||||
showActionSheetWithOptions={() =>
|
||||
showActionSheetWithOptions(
|
||||
{
|
||||
title: 'Share Menu',
|
||||
options: ['Share', 'Cancel'],
|
||||
cancelButtonIndex: 1,
|
||||
},
|
||||
(i) => {
|
||||
i === 0 && this._onShare();
|
||||
}
|
||||
)
|
||||
}
|
||||
/>
|
||||
{this._renderSectionHeader('Android-Only Options')}
|
||||
<ShowActionSheetButton
|
||||
title="Icons"
|
||||
withIcons
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="Title, Message, & Icons"
|
||||
withTitle
|
||||
withMessage
|
||||
withIcons
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="Use Separators"
|
||||
withTitle
|
||||
withIcons
|
||||
withSeparators
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
<ShowActionSheetButton
|
||||
title="Custom Styles"
|
||||
withTitle
|
||||
withMessage
|
||||
withIcons
|
||||
withCustomStyles
|
||||
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
|
||||
useModal
|
||||
title="Options Only"
|
||||
onSelection={this._updateSelectionText}
|
||||
showActionSheetWithOptions={showActionSheetWithOptions}
|
||||
/>
|
||||
|
||||
<TouchableOpacity onPress={this._toggleModal}>
|
||||
<Text style={styles.link}>Close Modal</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</Modal>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={styles.flex}>
|
||||
<ScrollView style={styles.flex} contentContainerStyle={styles.contentContainer}>
|
||||
<Text style={styles.headerText}>
|
||||
{
|
||||
'Hello!\n\nThis is a simple example app to demonstrate @expo/react-native-action-sheet.'
|
||||
}
|
||||
</Text>
|
||||
{this._renderButtons()}
|
||||
{this._renderSelectionText()}
|
||||
<Text style={styles.notes}>
|
||||
Note: Icons and custom text styles are only available on Android. Separators can only be
|
||||
toggled on Android; they always show on iOS.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const ConnectedApp = connectActionSheet<any>(App);
|
||||
|
||||
export default function WrappedApp() {
|
||||
const [useCustomActionSheet, setUseCustomActionSheet] = useState(false);
|
||||
|
||||
return (
|
||||
<ActionSheetProvider useCustomActionSheet={useCustomActionSheet}>
|
||||
<ConnectedApp
|
||||
useCustomActionSheet={useCustomActionSheet}
|
||||
setUseCustomActionSheet={setUseCustomActionSheet}
|
||||
/>
|
||||
</ActionSheetProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: {
|
||||
flex: 1,
|
||||
},
|
||||
contentContainer: {
|
||||
padding: 16,
|
||||
paddingVertical: 20,
|
||||
},
|
||||
headerText: {
|
||||
textAlign: 'center',
|
||||
fontSize: 16,
|
||||
marginBottom: 10,
|
||||
},
|
||||
notes: {
|
||||
marginTop: 32,
|
||||
},
|
||||
sectionHeaderText: {
|
||||
color: 'orange',
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 20,
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
selectionText: {
|
||||
textAlign: 'center',
|
||||
color: 'blue',
|
||||
fontSize: 16,
|
||||
marginTop: 20,
|
||||
},
|
||||
link: {
|
||||
fontSize: 15,
|
||||
textDecorationLine: 'underline',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
import { MaterialIcons, Entypo } from '@expo/vector-icons';
|
||||
|
||||
const icon = (name) => <MaterialIcons key={name} name={name} size={24} />;
|
||||
|
||||
// A custom button that shows examples of different share sheet configurations
|
||||
class ShowActionSheetButton extends React.PureComponent {
|
||||
_showActionSheet = () => {
|
||||
const {
|
||||
withTitle,
|
||||
withMessage,
|
||||
withIcons,
|
||||
withSeparators,
|
||||
withCustomStyles,
|
||||
onSelection,
|
||||
showActionSheetWithOptions,
|
||||
} = this.props;
|
||||
// Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
|
||||
const options = ['Delete', 'Save', 'Share', 'Cancel'];
|
||||
const icons = withIcons ? [icon('delete'), icon('save'), icon('share'), icon('cancel')] : null;
|
||||
const title = withTitle ? 'Choose An Action' : null;
|
||||
const message = withMessage ? 'This library tries to mimic the native share sheets as close as possible.' : null;
|
||||
const destructiveButtonIndex = 0;
|
||||
const cancelButtonIndex = 3;
|
||||
const textStyle = withCustomStyles ? { fontSize: 20, fontWeight: '500', color: 'blue' } : null;
|
||||
const titleTextStyle = withCustomStyles ? { fontSize: 24, textAlign: 'center', fontWeight: '700', color: 'orange' } : null;
|
||||
const messageTextStyle = withCustomStyles ? { fontSize: 12, color: 'purple', textAlign: 'right' } : null;
|
||||
|
||||
showActionSheetWithOptions(
|
||||
{
|
||||
options,
|
||||
cancelButtonIndex,
|
||||
destructiveButtonIndex,
|
||||
title,
|
||||
message,
|
||||
icons, // Android only
|
||||
tintIcons: true, // Android only; default is true
|
||||
showSeparators: withSeparators, // Affects Android only; default is false
|
||||
textStyle, // Android only
|
||||
titleTextStyle, // Android only
|
||||
messageTextStyle, // Android only
|
||||
},
|
||||
buttonIndex => {
|
||||
// Do something here depending on the button index selected
|
||||
onSelection(buttonIndex);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title } = this.props;
|
||||
return (
|
||||
<View style={{ margin: 6 }}>
|
||||
<Entypo.Button
|
||||
name="code"
|
||||
backgroundColor="#3e3e3e"
|
||||
onPress={this._showActionSheet}>
|
||||
<Text style={{
|
||||
fontSize: 15,
|
||||
color: '#fff'
|
||||
}}>{title}</Text>
|
||||
</Entypo.Button>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ShowActionSheetButton.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
onSelection: PropTypes.func,
|
||||
showActionSheetWithOptions: PropTypes.func.isRequired,
|
||||
withTitle: PropTypes.bool,
|
||||
withMessage: PropTypes.bool,
|
||||
withIcons: PropTypes.bool,
|
||||
withSeparators: PropTypes.bool,
|
||||
withCustomStyles: PropTypes.bool,
|
||||
};
|
||||
|
||||
ShowActionSheetButton.defaultProps = {
|
||||
withTitle: false,
|
||||
withMessage: false,
|
||||
withIcons: false,
|
||||
withSeparators: false,
|
||||
withCustomStyles: false,
|
||||
onSelection: null,
|
||||
};
|
||||
|
||||
export default ShowActionSheetButton;
|
||||
@@ -1,157 +0,0 @@
|
||||
import { ActionSheetOptions } from '@expo/react-native-action-sheet';
|
||||
import { MaterialIcons, Entypo } from '@expo/vector-icons';
|
||||
import * as React from 'react';
|
||||
import { Text, View, TextStyle, ViewStyle, findNodeHandle } from 'react-native';
|
||||
|
||||
const icon = (name: React.ComponentProps<typeof MaterialIcons>['name']) => (
|
||||
<MaterialIcons key={name} name={name} size={24} />
|
||||
);
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
showActionSheetWithOptions: (
|
||||
options: ActionSheetOptions,
|
||||
callback: (buttonIndex?: number) => void
|
||||
) => void;
|
||||
onSelection: (index?: number) => void;
|
||||
withTitle?: boolean;
|
||||
withMessage?: boolean;
|
||||
withIcons?: boolean;
|
||||
withSeparators?: boolean;
|
||||
withCustomStyles?: boolean;
|
||||
withCancelButtonTintColor?: boolean;
|
||||
withAnchor?: boolean;
|
||||
useModal?: boolean;
|
||||
}
|
||||
|
||||
// A custom button that shows examples of different share sheet configurations
|
||||
export default class ShowActionSheetButton extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
withTitle: false,
|
||||
withMessage: false,
|
||||
withIcons: false,
|
||||
withSeparators: false,
|
||||
withCustomStyles: false,
|
||||
withAnchor: false,
|
||||
withCancelButtonTintColor: false,
|
||||
onSelection: null,
|
||||
useModal: false,
|
||||
};
|
||||
|
||||
_anchorRef = React.createRef<any>();
|
||||
|
||||
_showActionSheet = () => {
|
||||
const {
|
||||
withAnchor,
|
||||
withTitle,
|
||||
withMessage,
|
||||
withIcons,
|
||||
withSeparators,
|
||||
withCustomStyles,
|
||||
withCancelButtonTintColor,
|
||||
onSelection,
|
||||
showActionSheetWithOptions,
|
||||
useModal,
|
||||
} = this.props;
|
||||
|
||||
// Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
|
||||
const options = ['Delete', 'Disabled', 'Save', 'Cancel'];
|
||||
const icons = withIcons
|
||||
? [icon('delete'), icon('save'), icon('share'), icon('cancel')]
|
||||
: undefined;
|
||||
const title = withTitle ? 'Choose An Action' : undefined;
|
||||
const message = withMessage
|
||||
? 'This library tries to mimic the native share sheets as close as possible.'
|
||||
: undefined;
|
||||
const destructiveButtonIndex = 0;
|
||||
const disabledButtonIndices = [1];
|
||||
const cancelButtonIndex = 3;
|
||||
const textStyle: TextStyle | undefined = withCustomStyles
|
||||
? {
|
||||
fontSize: 20,
|
||||
fontWeight: '500',
|
||||
color: 'blue',
|
||||
}
|
||||
: undefined;
|
||||
const titleTextStyle: TextStyle | undefined = withCustomStyles
|
||||
? {
|
||||
fontSize: 24,
|
||||
textAlign: 'center',
|
||||
fontWeight: '700',
|
||||
color: 'orange',
|
||||
}
|
||||
: undefined;
|
||||
const messageTextStyle: TextStyle | undefined = withCustomStyles
|
||||
? {
|
||||
fontSize: 12,
|
||||
color: 'purple',
|
||||
textAlign: 'right',
|
||||
}
|
||||
: undefined;
|
||||
const containerStyle: ViewStyle | undefined = withCustomStyles
|
||||
? {
|
||||
backgroundColor: 'lightgrey',
|
||||
}
|
||||
: undefined;
|
||||
const anchor: number | null = this._anchorRef.current
|
||||
? findNodeHandle(this._anchorRef.current)
|
||||
: null;
|
||||
|
||||
showActionSheetWithOptions(
|
||||
{
|
||||
options,
|
||||
cancelButtonIndex,
|
||||
cancelButtonTintColor: withCancelButtonTintColor ? '#D93F0B' : undefined,
|
||||
destructiveButtonIndex,
|
||||
disabledButtonIndices,
|
||||
title,
|
||||
message,
|
||||
icons,
|
||||
//iPad only
|
||||
anchor: withAnchor && anchor ? anchor : undefined,
|
||||
// Android only
|
||||
tintIcons: true,
|
||||
// Android only; default is true
|
||||
showSeparators: withSeparators,
|
||||
// Affects Android only; default is false
|
||||
textStyle,
|
||||
// Android only
|
||||
titleTextStyle,
|
||||
// Android only
|
||||
messageTextStyle,
|
||||
// Android only,
|
||||
containerStyle,
|
||||
// Android only,
|
||||
useModal,
|
||||
},
|
||||
(buttonIndex?: number) => {
|
||||
// Do something here depending on the button index selected
|
||||
onSelection(buttonIndex);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title } = this.props;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
margin: 6,
|
||||
}}>
|
||||
<Entypo.Button
|
||||
name="code"
|
||||
backgroundColor="#3e3e3e"
|
||||
onPress={this._showActionSheet}
|
||||
ref={this._anchorRef}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 15,
|
||||
color: '#fff',
|
||||
}}>
|
||||
{title}
|
||||
</Text>
|
||||
</Entypo.Button>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
+5
-6
@@ -4,14 +4,13 @@
|
||||
"description": "A cross-platform ActionSheet component. https://github.com/expo/react-native-action-sheet",
|
||||
"slug": "react-native-action-sheet-example",
|
||||
"privacy": "public",
|
||||
"version": "3.0.0",
|
||||
"sdkVersion": "25.0.0",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"primaryColor": "#cccccc",
|
||||
"icon": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
|
||||
"platforms": [
|
||||
"android",
|
||||
"ios",
|
||||
"web"
|
||||
]
|
||||
"packagerOpts": {
|
||||
"assetExts": ["ttf", "mp4"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
};
|
||||
};
|
||||
+7
-23
@@ -1,30 +1,14 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "3.0.0",
|
||||
"description": "Hello react native action sheet!!",
|
||||
"version": "0.0.0",
|
||||
"description": "Hello Expo!",
|
||||
"author": "[email protected]",
|
||||
"private": true,
|
||||
"main": "node_modules/expo/AppEntry.js",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"ios": "expo start --ios",
|
||||
"android": "expo start --android",
|
||||
"web": "expo start --web",
|
||||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/react-native-action-sheet": "../src",
|
||||
"@expo/vector-icons": "^13.0.0",
|
||||
"expo": "^46.0.0",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"react": "18.0.0",
|
||||
"react-dom": "18.0.0",
|
||||
"react-native": "0.69.6",
|
||||
"react-native-web": "~0.18.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "~18.0.0",
|
||||
"@types/react-native": "~0.69.1",
|
||||
"babel-preset-expo": "~9.2.0",
|
||||
"typescript": "^4.6.3"
|
||||
"@expo/react-native-action-sheet": "../",
|
||||
"expo": "^25.0.0",
|
||||
"react": "16.2.0",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz"
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react-native",
|
||||
"lib": [
|
||||
"esnext"
|
||||
],
|
||||
"moduleResolution": "node",
|
||||
"noEmit": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"target": "esnext",
|
||||
"typeRoots": [
|
||||
"./node_modules/@types"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"./**.tsx"
|
||||
],
|
||||
"extends": "expo/tsconfig.base"
|
||||
}
|
||||
+2991
-7035
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 MiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 MiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 MiB |
Vendored
+14
@@ -0,0 +1,14 @@
|
||||
import { ActionSheetIOSOptions } from 'react-native';
|
||||
|
||||
export interface ActionSheetProps {
|
||||
showActionSheetWithOptions: (
|
||||
options: ActionSheetIOSOptions,
|
||||
callback: (buttonIndex: number) => void,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export function connectActionSheet<T>(
|
||||
WrappedComponent: React.ComponentType<T & ActionSheetProps>,
|
||||
): React.ComponentClass<T>;
|
||||
|
||||
export const ActionSheetProvider: React.ComponentClass;
|
||||
@@ -0,0 +1,4 @@
|
||||
module.exports = require('./ActionSheet');
|
||||
|
||||
module.exports.ActionSheetProvider = require('./ActionSheetProvider').default;
|
||||
module.exports.connectActionSheet = require('./connectActionSheet').default;
|
||||
+21
-55
@@ -1,77 +1,43 @@
|
||||
{
|
||||
"name": "@expo/react-native-action-sheet",
|
||||
"version": "4.0.1",
|
||||
"version": "2.1.0",
|
||||
"description": "A cross-platform ActionSheet for React Native",
|
||||
"react-native": "lib/module/index.js",
|
||||
"types": "lib/typescript/index.d.ts",
|
||||
"main": "lib/commonjs/index.js",
|
||||
"module": "lib/module/index.js",
|
||||
"files": [
|
||||
"lib"
|
||||
],
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"prepare": "bob build",
|
||||
"build": "bob build",
|
||||
"type-check": "tsc --noEmit",
|
||||
"lint": "eslint . --fix",
|
||||
"lint-check": "eslint",
|
||||
"semantic-release": "semantic-release"
|
||||
"flow": "flow; test $? -eq 0 -o $? -eq 2"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/expo/react-native-action-sheet.git"
|
||||
},
|
||||
"keywords": [
|
||||
"expo",
|
||||
"react-native",
|
||||
"action-sheet"
|
||||
],
|
||||
"files": [
|
||||
"ActionSheet.js",
|
||||
"ActionSheet.ios.js",
|
||||
"ActionSheetProvider.js",
|
||||
"connectActionSheet.js",
|
||||
"index.js",
|
||||
"index.d.ts",
|
||||
"README.md"
|
||||
],
|
||||
"author": "Jesse Ruder <[email protected]>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/expo/react-native-action-sheet/issues"
|
||||
},
|
||||
"homepage": "https://github.com/expo/react-native-action-sheet",
|
||||
"devDependencies": {
|
||||
"@react-native-community/bob": "^0.6.1",
|
||||
"@semantic-release/changelog": "^5.0.1",
|
||||
"@semantic-release/git": "^9.0.0",
|
||||
"@types/react": "^16.8.23",
|
||||
"@types/react-native": "^0.57.65",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-universe": "^8.0.0",
|
||||
"husky": "^3.0.0",
|
||||
"lint-staged": "^9.2.0",
|
||||
"prettier": "^2.3.2",
|
||||
"react": "^16.8.6",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
|
||||
"typescript": "^3.5.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.0"
|
||||
},
|
||||
"@react-native-community/bob": {
|
||||
"source": "src",
|
||||
"output": "lib",
|
||||
"targets": [
|
||||
"commonjs",
|
||||
"module",
|
||||
"typescript"
|
||||
]
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,ts,tsx}": [
|
||||
"yarn lint",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
"hoist-non-react-statics": "^2.2.2",
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.4.6",
|
||||
"@types/react-native": "^0.56.0",
|
||||
"flow-bin": "^0.26.0",
|
||||
"react": "^15.6.1",
|
||||
"react-native": "^0.28.0"
|
||||
}
|
||||
}
|
||||
@@ -1,226 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
AccessibilityInfo,
|
||||
findNodeHandle,
|
||||
Image,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
UIManager,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import { ActionSheetOptions } from '../types';
|
||||
import TouchableNativeFeedbackSafe from './TouchableNativeFeedbackSafe';
|
||||
|
||||
type Props = ActionSheetOptions & {
|
||||
tintIcons: boolean | null;
|
||||
onSelect: (i: number) => boolean;
|
||||
startIndex: number;
|
||||
length: number;
|
||||
};
|
||||
|
||||
const BLACK_54PC_TRANSPARENT = '#0000008a';
|
||||
const BLACK_87PC_TRANSPARENT = '#000000de';
|
||||
const DESTRUCTIVE_COLOR = '#d32f2f';
|
||||
|
||||
/**
|
||||
* Can be used as a React ref for a component to auto-focus for accessibility on render.
|
||||
* @param ref The component to auto-focus
|
||||
*/
|
||||
const focusViewOnRender = (ref: React.Component | null) => {
|
||||
if (ref) {
|
||||
const reactTag = findNodeHandle(ref);
|
||||
if (reactTag) {
|
||||
if (Platform.OS === 'android') {
|
||||
// @ts-ignore: sendAccessibilityEvent is missing from @types/react-native
|
||||
UIManager.sendAccessibilityEvent(
|
||||
reactTag,
|
||||
// @ts-ignore: AccessibilityEventTypes is missing from @types/react-native
|
||||
UIManager.AccessibilityEventTypes.typeViewFocused
|
||||
);
|
||||
} else {
|
||||
AccessibilityInfo.setAccessibilityFocus(reactTag);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const isIndexDestructive = (index: number, destructiveIndex?: number | number[]) => {
|
||||
if (Array.isArray(destructiveIndex)) {
|
||||
return destructiveIndex.includes(index);
|
||||
}
|
||||
|
||||
return index === destructiveIndex;
|
||||
};
|
||||
|
||||
const isIndexDisabled = (index: number, disabledButtonIndices: number[] = []) => {
|
||||
return disabledButtonIndices.includes(index);
|
||||
};
|
||||
|
||||
export default class ActionGroup extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
title: null,
|
||||
message: null,
|
||||
showSeparators: false,
|
||||
tintIcons: true,
|
||||
textStyle: {},
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={[styles.groupContainer, this.props.containerStyle]}>
|
||||
{this._renderTitleContent()}
|
||||
<ScrollView>{this._renderOptionViews()}</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_renderRowSeparator = (key: string | number) => {
|
||||
return (
|
||||
<View key={`separator-${key}`} style={[styles.rowSeparator, this.props.separatorStyle]} />
|
||||
);
|
||||
};
|
||||
|
||||
_renderTitleContent = () => {
|
||||
const { title, titleTextStyle, message, messageTextStyle, showSeparators } = this.props;
|
||||
|
||||
if (!title && !message) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={[styles.titleContainer, { paddingBottom: showSeparators ? 24 : 16 }]}>
|
||||
{!!title && <Text style={[styles.title, titleTextStyle]}>{title}</Text>}
|
||||
{!!message && <Text style={[styles.message, messageTextStyle]}>{message}</Text>}
|
||||
</View>
|
||||
{!!showSeparators && this._renderRowSeparator('title')}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
_renderIconElement = (iconSource: React.ReactNode | null, color: string) => {
|
||||
const { tintIcons } = this.props;
|
||||
if (!iconSource) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (typeof iconSource === 'number') {
|
||||
const iconStyle = [styles.icon, { tintColor: tintIcons ? color : undefined }];
|
||||
return <Image fadeDuration={0} source={iconSource} resizeMode="contain" style={iconStyle} />;
|
||||
} else {
|
||||
return <View style={styles.icon}>{iconSource}</View>;
|
||||
}
|
||||
};
|
||||
|
||||
_renderOptionViews = () => {
|
||||
const {
|
||||
options,
|
||||
icons,
|
||||
cancelButtonIndex,
|
||||
cancelButtonTintColor,
|
||||
destructiveButtonIndex,
|
||||
disabledButtonIndices,
|
||||
destructiveColor = DESTRUCTIVE_COLOR,
|
||||
onSelect,
|
||||
startIndex,
|
||||
length,
|
||||
textStyle,
|
||||
tintColor,
|
||||
autoFocus,
|
||||
showSeparators,
|
||||
} = this.props;
|
||||
const optionViews: React.ReactNode[] = [];
|
||||
const nativeFeedbackBackground = TouchableNativeFeedbackSafe.Ripple(
|
||||
'rgba(180, 180, 180, 1)',
|
||||
false
|
||||
);
|
||||
|
||||
for (let i = startIndex; i < startIndex + length; i++) {
|
||||
const defaultColor = tintColor
|
||||
? tintColor
|
||||
: (textStyle || {}).color || BLACK_87PC_TRANSPARENT;
|
||||
const disabled = isIndexDisabled(i, disabledButtonIndices);
|
||||
const isCancelButton = i === cancelButtonIndex;
|
||||
const color = isIndexDestructive(i, destructiveButtonIndex)
|
||||
? destructiveColor
|
||||
: isCancelButton
|
||||
? cancelButtonTintColor || defaultColor
|
||||
: defaultColor;
|
||||
const iconSource = icons != null ? icons[i] : null;
|
||||
|
||||
optionViews.push(
|
||||
<TouchableNativeFeedbackSafe
|
||||
ref={autoFocus && i === 0 ? focusViewOnRender : undefined}
|
||||
key={i}
|
||||
pressInDelay={0}
|
||||
background={nativeFeedbackBackground}
|
||||
disabled={disabled}
|
||||
onPress={() => onSelect(i)}
|
||||
style={[styles.button, disabled && styles.disabledButton]}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={options[i]}>
|
||||
{this._renderIconElement(iconSource, color)}
|
||||
<Text style={[styles.text, textStyle, { color }]}>{options[i]}</Text>
|
||||
</TouchableNativeFeedbackSafe>
|
||||
);
|
||||
|
||||
if (showSeparators && i < startIndex + length - 1) {
|
||||
optionViews.push(this._renderRowSeparator(i));
|
||||
}
|
||||
}
|
||||
|
||||
return optionViews;
|
||||
};
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
height: 56,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
disabledButton: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
groupContainer: {
|
||||
backgroundColor: '#ffffff',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
icon: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
marginRight: 32,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
message: {
|
||||
marginTop: 12,
|
||||
fontSize: 14,
|
||||
color: BLACK_54PC_TRANSPARENT,
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
rowSeparator: {
|
||||
backgroundColor: '#dddddd',
|
||||
height: 1,
|
||||
width: '100%',
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
color: BLACK_87PC_TRANSPARENT,
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
color: BLACK_54PC_TRANSPARENT,
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
titleContainer: {
|
||||
alignItems: 'flex-start',
|
||||
padding: 16,
|
||||
paddingTop: 24,
|
||||
},
|
||||
});
|
||||
@@ -1,333 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Animated,
|
||||
BackHandler,
|
||||
Easing,
|
||||
Modal,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
ViewProps,
|
||||
} from 'react-native';
|
||||
|
||||
import { ActionSheetOptions } from '../types';
|
||||
import ActionGroup from './ActionGroup';
|
||||
|
||||
interface State {
|
||||
isVisible: boolean;
|
||||
isAnimating: boolean;
|
||||
options: ActionSheetOptions | null;
|
||||
onSelect: ((i: number) => void) | null;
|
||||
overlayOpacity: any;
|
||||
sheetOpacity: any;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
readonly children: React.ReactNode;
|
||||
readonly useNativeDriver?: boolean;
|
||||
readonly pointerEvents?: ViewProps['pointerEvents'];
|
||||
}
|
||||
|
||||
const OPACITY_ANIMATION_IN_TIME = 225;
|
||||
const OPACITY_ANIMATION_OUT_TIME = 195;
|
||||
const EASING_OUT = Easing.bezier(0.25, 0.46, 0.45, 0.94);
|
||||
const EASING_IN = Easing.out(EASING_OUT);
|
||||
const ESCAPE_KEY = 'Escape';
|
||||
|
||||
// Has same API as https://facebook.github.io/react-native/docs/actionsheetios.html
|
||||
export default class CustomActionSheet extends React.Component<Props, State> {
|
||||
_actionSheetHeight = 360;
|
||||
|
||||
state: State = {
|
||||
isVisible: false,
|
||||
isAnimating: false,
|
||||
options: null,
|
||||
onSelect: null,
|
||||
overlayOpacity: new Animated.Value(0),
|
||||
sheetOpacity: new Animated.Value(0),
|
||||
};
|
||||
|
||||
_deferAfterAnimation?: () => void = undefined;
|
||||
|
||||
componentDidMount() {
|
||||
if (Platform.OS === 'web') {
|
||||
document.addEventListener('keydown', this._handleWebKeyDown);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (Platform.OS === 'web') {
|
||||
document.removeEventListener('keydown', this._handleWebKeyDown);
|
||||
}
|
||||
}
|
||||
|
||||
_handleWebKeyDown = (event: KeyboardEvent): void => {
|
||||
if (event.key === ESCAPE_KEY && this.state.isVisible) {
|
||||
event.preventDefault();
|
||||
this._selectCancelButton();
|
||||
}
|
||||
};
|
||||
|
||||
_setActionSheetHeight = ({ nativeEvent }: any) =>
|
||||
(this._actionSheetHeight = nativeEvent.layout.height);
|
||||
|
||||
render() {
|
||||
const { isVisible, overlayOpacity, options } = this.state;
|
||||
const useModal = options ? options.autoFocus || options.useModal === true : false;
|
||||
const overlay = isVisible ? (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.overlay,
|
||||
{
|
||||
opacity: overlayOpacity,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
// While the sheet is visible, hide the rest of the app's content from screen readers.
|
||||
const appContent = (
|
||||
<View
|
||||
style={styles.flexContainer}
|
||||
importantForAccessibility={isVisible ? 'no-hide-descendants' : 'auto'}>
|
||||
{React.Children.only(this.props.children)}
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View pointerEvents={this.props.pointerEvents} style={styles.flexContainer}>
|
||||
{appContent}
|
||||
{isVisible && !useModal && (
|
||||
<>
|
||||
{overlay}
|
||||
{this._renderSheet()}
|
||||
</>
|
||||
)}
|
||||
{isVisible && useModal && (
|
||||
<Modal animationType="none" transparent onRequestClose={this._selectCancelButton}>
|
||||
{overlay}
|
||||
{this._renderSheet()}
|
||||
</Modal>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_renderSheet() {
|
||||
const { options, isAnimating, sheetOpacity } = this.state;
|
||||
|
||||
if (!options) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const {
|
||||
options: optionsArray,
|
||||
icons,
|
||||
tintIcons,
|
||||
destructiveButtonIndex,
|
||||
disabledButtonIndices,
|
||||
destructiveColor,
|
||||
textStyle,
|
||||
tintColor,
|
||||
title,
|
||||
titleTextStyle,
|
||||
message,
|
||||
messageTextStyle,
|
||||
autoFocus,
|
||||
showSeparators,
|
||||
containerStyle,
|
||||
separatorStyle,
|
||||
cancelButtonIndex,
|
||||
cancelButtonTintColor,
|
||||
} = options;
|
||||
return (
|
||||
<TouchableWithoutFeedback importantForAccessibility="yes" onPress={this._selectCancelButton}>
|
||||
<Animated.View
|
||||
needsOffscreenAlphaCompositing={isAnimating}
|
||||
style={[
|
||||
styles.sheetContainer,
|
||||
{
|
||||
opacity: sheetOpacity,
|
||||
transform: [
|
||||
{
|
||||
translateY: sheetOpacity.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [this._actionSheetHeight, 0],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}>
|
||||
<View style={styles.sheet} onLayout={this._setActionSheetHeight}>
|
||||
<ActionGroup
|
||||
options={optionsArray}
|
||||
icons={icons}
|
||||
tintIcons={tintIcons === undefined ? true : tintIcons}
|
||||
cancelButtonIndex={cancelButtonIndex}
|
||||
cancelButtonTintColor={cancelButtonTintColor}
|
||||
destructiveButtonIndex={destructiveButtonIndex}
|
||||
destructiveColor={destructiveColor}
|
||||
disabledButtonIndices={disabledButtonIndices}
|
||||
onSelect={this._onSelect}
|
||||
startIndex={0}
|
||||
length={optionsArray.length}
|
||||
textStyle={textStyle || {}}
|
||||
tintColor={tintColor}
|
||||
title={title || undefined}
|
||||
titleTextStyle={titleTextStyle}
|
||||
message={message || undefined}
|
||||
messageTextStyle={messageTextStyle}
|
||||
autoFocus={autoFocus}
|
||||
showSeparators={showSeparators}
|
||||
containerStyle={containerStyle}
|
||||
separatorStyle={separatorStyle}
|
||||
/>
|
||||
</View>
|
||||
</Animated.View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
showActionSheetWithOptions = (options: ActionSheetOptions, onSelect: (i: number) => void) => {
|
||||
const { isVisible, overlayOpacity, sheetOpacity } = this.state;
|
||||
const { useNativeDriver = true } = this.props;
|
||||
|
||||
if (isVisible) {
|
||||
this._deferAfterAnimation = this.showActionSheetWithOptions.bind(this, options, onSelect);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
options,
|
||||
onSelect,
|
||||
isVisible: true,
|
||||
isAnimating: true,
|
||||
});
|
||||
overlayOpacity.setValue(0);
|
||||
sheetOpacity.setValue(0);
|
||||
Animated.parallel([
|
||||
Animated.timing(overlayOpacity, {
|
||||
toValue: 0.32,
|
||||
easing: EASING_OUT,
|
||||
duration: OPACITY_ANIMATION_IN_TIME,
|
||||
useNativeDriver,
|
||||
}),
|
||||
Animated.timing(sheetOpacity, {
|
||||
toValue: 1,
|
||||
easing: EASING_OUT,
|
||||
duration: OPACITY_ANIMATION_IN_TIME,
|
||||
useNativeDriver,
|
||||
}),
|
||||
]).start((result) => {
|
||||
if (result.finished) {
|
||||
this.setState({
|
||||
isAnimating: false,
|
||||
});
|
||||
this._deferAfterAnimation = undefined;
|
||||
}
|
||||
});
|
||||
// @ts-ignore: Argument of type '"actionSheetHardwareBackPress"' is not assignable to parameter of type '"hardwareBackPress"'
|
||||
BackHandler.addEventListener('actionSheetHardwareBackPress', this._selectCancelButton);
|
||||
};
|
||||
|
||||
_selectCancelButton = () => {
|
||||
const { options } = this.state;
|
||||
|
||||
if (!options) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (typeof options.cancelButtonIndex === 'undefined') {
|
||||
return false;
|
||||
} else if (typeof options.cancelButtonIndex === 'number') {
|
||||
return this._onSelect(options.cancelButtonIndex);
|
||||
} else {
|
||||
return this._animateOut();
|
||||
}
|
||||
};
|
||||
|
||||
_onSelect = (index: number): boolean => {
|
||||
const { isAnimating, onSelect } = this.state;
|
||||
|
||||
if (isAnimating) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (onSelect) {
|
||||
this._deferAfterAnimation = onSelect.bind(this, index);
|
||||
}
|
||||
|
||||
return this._animateOut();
|
||||
};
|
||||
|
||||
_animateOut = (): boolean => {
|
||||
const { isAnimating, overlayOpacity, sheetOpacity } = this.state;
|
||||
const { useNativeDriver = true } = this.props;
|
||||
|
||||
if (isAnimating) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// @ts-ignore: Argument of type '"actionSheetHardwareBackPress"' is not assignable to parameter of type '"hardwareBackPress"'
|
||||
BackHandler.removeEventListener('actionSheetHardwareBackPress', this._selectCancelButton);
|
||||
this.setState({
|
||||
isAnimating: true,
|
||||
});
|
||||
Animated.parallel([
|
||||
Animated.timing(overlayOpacity, {
|
||||
toValue: 0,
|
||||
easing: EASING_IN,
|
||||
duration: OPACITY_ANIMATION_OUT_TIME,
|
||||
useNativeDriver,
|
||||
}),
|
||||
Animated.timing(sheetOpacity, {
|
||||
toValue: 0,
|
||||
easing: EASING_IN,
|
||||
duration: OPACITY_ANIMATION_OUT_TIME,
|
||||
useNativeDriver,
|
||||
}),
|
||||
]).start((result) => {
|
||||
if (result.finished) {
|
||||
this.setState({
|
||||
isVisible: false,
|
||||
isAnimating: false,
|
||||
});
|
||||
|
||||
if (this._deferAfterAnimation) {
|
||||
this._deferAfterAnimation();
|
||||
}
|
||||
}
|
||||
});
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flexContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
overlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
backgroundColor: 'black',
|
||||
},
|
||||
sheetContainer: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: 'transparent',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
});
|
||||
@@ -1,48 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Platform,
|
||||
TouchableNativeFeedback,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
TouchableWithoutFeedbackProps,
|
||||
} from 'react-native';
|
||||
|
||||
// This TouchableOpacity has the same staic method of TouchableNativeFeedback
|
||||
class CustomTouchableOpacity extends React.Component {
|
||||
static SelectableBackground = () => ({});
|
||||
static SelectableBackgroundBorderless = () => ({});
|
||||
static Ripple = (color: string, borderless?: boolean) => ({});
|
||||
|
||||
render() {
|
||||
return <TouchableOpacity {...this.props}>{this.props.children}</TouchableOpacity>;
|
||||
}
|
||||
}
|
||||
|
||||
const TouchableComponent = Platform.select({
|
||||
web: CustomTouchableOpacity,
|
||||
default: Platform.Version <= 20 ? CustomTouchableOpacity : TouchableNativeFeedback,
|
||||
});
|
||||
|
||||
type Props = TouchableWithoutFeedbackProps & {
|
||||
pressInDelay: number;
|
||||
background: any;
|
||||
};
|
||||
|
||||
export default class TouchableNativeFeedbackSafe extends React.Component<Props> {
|
||||
static SelectableBackground = TouchableComponent.SelectableBackground;
|
||||
static SelectableBackgroundBorderless = TouchableComponent.SelectableBackgroundBorderless;
|
||||
static Ripple = TouchableComponent.Ripple;
|
||||
|
||||
render() {
|
||||
if (TouchableComponent === TouchableNativeFeedback) {
|
||||
return (
|
||||
<TouchableComponent {...this.props} style={{}}>
|
||||
<View style={this.props.style}>{this.props.children}</View>
|
||||
</TouchableComponent>
|
||||
);
|
||||
}
|
||||
|
||||
// @ts-ignore: JSX element type 'TouchableComponent' does not have any construct or call signatures
|
||||
return <TouchableComponent {...this.props}>{this.props.children}</TouchableComponent>;
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { ActionSheetIOS, View, ViewProps } from 'react-native';
|
||||
|
||||
import { ActionSheetIOSOptions } from '../types';
|
||||
|
||||
interface Props {
|
||||
readonly children: React.ReactNode;
|
||||
readonly pointerEvents?: ViewProps['pointerEvents'];
|
||||
}
|
||||
|
||||
type onSelect = (buttonIndex: number) => void;
|
||||
|
||||
export default class ActionSheet extends React.Component<Props> {
|
||||
render() {
|
||||
return (
|
||||
<View pointerEvents={this.props.pointerEvents} style={{ flex: 1 }}>
|
||||
{React.Children.only(this.props.children)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
showActionSheetWithOptions(dataOptions: ActionSheetIOSOptions, onSelect: onSelect) {
|
||||
// ...dataOptions include other keys which use in android and web, thats why `Android-Only options` Crash on IOS
|
||||
const {
|
||||
cancelButtonIndex,
|
||||
destructiveButtonIndex,
|
||||
options,
|
||||
tintColor,
|
||||
cancelButtonTintColor,
|
||||
disabledButtonIndices,
|
||||
} = dataOptions;
|
||||
const iosOptions: ActionSheetIOSOptions = {
|
||||
cancelButtonIndex,
|
||||
destructiveButtonIndex,
|
||||
options,
|
||||
tintColor,
|
||||
cancelButtonTintColor,
|
||||
disabledButtonIndices,
|
||||
// A null title or message on iOS causes a crash
|
||||
title: dataOptions.title || undefined,
|
||||
message: dataOptions.message || undefined,
|
||||
anchor: dataOptions.anchor || undefined,
|
||||
userInterfaceStyle: dataOptions.userInterfaceStyle || undefined,
|
||||
};
|
||||
// @ts-ignore: Even though ActionSheetIOS supports array of numbers for `destructiveIndex` the types are not yet updated. See https://github.com/facebook/react-native/pull/18254.
|
||||
ActionSheetIOS.showActionSheetWithOptions(iosOptions, onSelect);
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
import CustomActionSheet from './CustomActionSheet';
|
||||
export default CustomActionSheet;
|
||||
@@ -1,54 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
// NativeActionSheet will always be custom when on Android/web
|
||||
import NativeActionSheet from './ActionSheet';
|
||||
import CustomActionSheet from './ActionSheet/CustomActionSheet';
|
||||
import { Provider } from './context';
|
||||
import { ActionSheetOptions, ActionSheetProviderRef } from './types';
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
useNativeDriver?: boolean;
|
||||
useCustomActionSheet?: boolean;
|
||||
}
|
||||
|
||||
export default React.forwardRef<ActionSheetProviderRef, Props>(function ActionSheetProvider(
|
||||
{ children, useNativeDriver, useCustomActionSheet = false },
|
||||
ref
|
||||
) {
|
||||
const actionSheetRef = React.useRef<NativeActionSheet>(null);
|
||||
|
||||
const context = React.useMemo(
|
||||
() => ({
|
||||
showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => {
|
||||
if (actionSheetRef.current) {
|
||||
actionSheetRef.current.showActionSheetWithOptions(options, callback);
|
||||
}
|
||||
},
|
||||
}),
|
||||
[actionSheetRef]
|
||||
);
|
||||
|
||||
React.useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
// backwards compatible with 13.x before context was being passed right on the ref
|
||||
getContext: () => context,
|
||||
showActionSheetWithOptions: context.showActionSheetWithOptions,
|
||||
}),
|
||||
[context]
|
||||
);
|
||||
|
||||
const ActionSheet = React.useMemo(
|
||||
() => (useCustomActionSheet ? CustomActionSheet : NativeActionSheet),
|
||||
[useCustomActionSheet]
|
||||
);
|
||||
|
||||
return (
|
||||
<Provider value={context}>
|
||||
<ActionSheet ref={actionSheetRef} useNativeDriver={useNativeDriver}>
|
||||
{React.Children.only(children)}
|
||||
</ActionSheet>
|
||||
</Provider>
|
||||
);
|
||||
});
|
||||
@@ -1,23 +0,0 @@
|
||||
import hoistNonReactStatic from 'hoist-non-react-statics';
|
||||
import * as React from 'react';
|
||||
|
||||
import { Consumer } from './context';
|
||||
import { ActionSheetProps } from './types';
|
||||
|
||||
export default function connectActionSheet<OwnProps = any>(
|
||||
WrappedComponent: React.ComponentType<OwnProps & ActionSheetProps>
|
||||
): React.FunctionComponent<OwnProps> {
|
||||
const ConnectedActionSheet = (props: OwnProps) => {
|
||||
return (
|
||||
<Consumer>
|
||||
{({ showActionSheetWithOptions }) => {
|
||||
return (
|
||||
<WrappedComponent {...props} showActionSheetWithOptions={showActionSheetWithOptions} />
|
||||
);
|
||||
}}
|
||||
</Consumer>
|
||||
);
|
||||
};
|
||||
|
||||
return hoistNonReactStatic(ConnectedActionSheet, WrappedComponent);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { ActionSheetOptions, ActionSheetProps } from './types';
|
||||
|
||||
const context = React.createContext<ActionSheetProps>({
|
||||
showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => {},
|
||||
});
|
||||
|
||||
export function useActionSheet() {
|
||||
return React.useContext(context);
|
||||
}
|
||||
|
||||
const { Provider, Consumer } = context;
|
||||
|
||||
export { Provider, Consumer };
|
||||
@@ -1,4 +0,0 @@
|
||||
export { default as ActionSheetProvider } from './ActionSheetProvider';
|
||||
export { default as connectActionSheet } from './connectActionSheet';
|
||||
export { useActionSheet } from './context';
|
||||
export * from './types';
|
||||
@@ -1,45 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { TextStyle, ViewStyle } from 'react-native';
|
||||
|
||||
export interface ActionSheetProps {
|
||||
showActionSheetWithOptions: (
|
||||
options: ActionSheetOptions,
|
||||
callback: (i?: number) => void | Promise<void>
|
||||
) => void;
|
||||
}
|
||||
|
||||
export interface ActionSheetProviderRef extends ActionSheetProps {
|
||||
/**
|
||||
* @deprecated Simply call `showActionSheetWithOptions()` directly from the ref now
|
||||
*/
|
||||
getContext: () => ActionSheetProps;
|
||||
}
|
||||
|
||||
// for iOS
|
||||
export interface ActionSheetIOSOptions {
|
||||
options: string[];
|
||||
title?: string;
|
||||
message?: string;
|
||||
tintColor?: string;
|
||||
cancelButtonIndex?: number;
|
||||
cancelButtonTintColor?: string;
|
||||
destructiveButtonIndex?: number | number[];
|
||||
anchor?: number;
|
||||
userInterfaceStyle?: 'light' | 'dark';
|
||||
disabledButtonIndices?: number[];
|
||||
}
|
||||
|
||||
// for Android or Web
|
||||
export interface ActionSheetOptions extends ActionSheetIOSOptions {
|
||||
icons?: React.ReactNode[];
|
||||
tintIcons?: boolean;
|
||||
textStyle?: TextStyle;
|
||||
titleTextStyle?: TextStyle;
|
||||
messageTextStyle?: TextStyle;
|
||||
autoFocus?: boolean;
|
||||
showSeparators?: boolean;
|
||||
containerStyle?: ViewStyle;
|
||||
separatorStyle?: ViewStyle;
|
||||
useModal?: boolean;
|
||||
destructiveColor?: string;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
{
|
||||
"include": ["src"],
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"strict": true,
|
||||
"moduleResolution": "node",
|
||||
"lib": ["dom", "es2015", "es2016", "esnext"],
|
||||
"jsx": "react-native",
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import {
|
||||
ActionSheetProps,
|
||||
ActionSheetProvider,
|
||||
connectActionSheet
|
||||
} from "./index";
|
||||
import * as React from "react";
|
||||
|
||||
interface ChildOwnProps {
|
||||
name: string;
|
||||
}
|
||||
|
||||
type ChildProps = ChildOwnProps & ActionSheetProps;
|
||||
|
||||
class Child extends React.Component<ChildProps> {
|
||||
showMore = () => {
|
||||
this.props.showActionSheetWithOptions(
|
||||
{ options: ["Delete"] },
|
||||
buttonIndex => {
|
||||
console.log(buttonIndex);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return this.props.name;
|
||||
}
|
||||
}
|
||||
|
||||
const EnhancedChild = connectActionSheet(Child);
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ActionSheetProvider>
|
||||
<EnhancedChild name="lool" />
|
||||
</ActionSheetProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user