Skip to content

Commit 464c8c2

Browse files
vonovakvonovak
committed
support custom onOverflowMenuPress
1 parent d399963 commit 464c8c2

File tree

4 files changed

+43
-25
lines changed

4 files changed

+43
-25
lines changed

‎README.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,16 @@ static navigationOptions = {
3131

3232
`HeaderButtons` accepts:
3333

34-
| prop and type | description | note |
35-
| --------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------- |
36-
| left: boolean | whether this HeaderButtons are on the left from header title | false by default |
37-
| IconComponent?: React.ComponentType<\*> | component to use for the icons | |
38-
| iconSize?: number | iconSize | |
39-
| color?: string | color of icons and buttons | |
40-
| OverflowIcon?: React.Element<\*> | React element for the overflow icon | you need to provide this only if you need overflow icon |
41-
| overflowButtonWrapperStyle?: StyleObj | optional styles for overflow button | there are some default styles set, as seen in `OverflowButton.js` |
42-
| cancelButtonLabel?: string | ios only, the cancel button label for overflow menu actions | 'Cancel' by default |
34+
| prop and type | description | note |
35+
| ------------------------------------------------------------------------ | ------------------------------------------------------------ | ----------------------------------------------------------------- |
36+
| left: boolean | whether this HeaderButtons are on the left from header title | false by default |
37+
| IconComponent?: React.ComponentType<\*> | component to use for the icons | |
38+
| iconSize?: number | iconSize | |
39+
| color?: string | color of icons and buttons | |
40+
| OverflowIcon?: React.Element<\*> | React element for the overflow icon | you need to provide this only if you need overflow icon |
41+
| overflowButtonWrapperStyle?: StyleObj | optional styles for overflow button | there are some default styles set, as seen in `OverflowButton.js` |
42+
| cancelButtonLabel?: string | ios only, the cancel button label for overflow menu actions | 'Cancel' by default |
43+
| onOverflowMenuPress?: ({ hiddenButtons: Array<React.Element<\*>> })=>any | function that is called when overflow menu is pressed. | this will override the default handler |
4344

4445
`HeaderButtons.Item` accepts:
4546

‎src/HeaderButton.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ import { StyleSheet, View } from 'react-native';
77
import Touchable from 'react-native-platform-touchable';
88
import type { StyleObj } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
99

10-
type Props = {
10+
export type HeaderButtonProps = {
1111
onPress: ?() => any,
12-
ButtonElement: React.Node,
1312
buttonWrapperStyle?: StyleObj,
1413
testID?: string,
1514
};
1615

17-
export class HeaderButton extends React.PureComponent<Props> {
16+
export class HeaderButton extends React.PureComponent<
17+
HeaderButtonProps & { ButtonElement: React.Node }
18+
> {
1819
render() {
1920
const { ButtonElement, onPress, buttonWrapperStyle, testID } = this.props;
2021
const RenderedComponent = !onPress ? View : Touchable;

‎src/HeaderButtons.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,20 @@
22
* @flow
33
*/
44
import * as React from 'react';
5-
import { HeaderButton } from './HeaderButton';
5+
import { HeaderButton, type HeaderButtonProps } from './HeaderButton';
66
import { StyleSheet, Platform, View, Text } from 'react-native';
7-
import { OverflowButton, textTransformer } from './OverflowButton';
7+
import { OverflowButton, textTransformer, type OverflowButtonProps } from './OverflowButton';
88
import type { StyleObj } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
99

10-
const OS_IOS = Platform.OS === 'ios';
11-
1210
type ItemProps = {
13-
onPress: ?() => any,
1411
title: string,
1512
show: string,
1613
IconElement?: React.Node,
1714
iconName?: string,
1815
color?: string,
1916
iconSize?: number,
2017
buttonStyle?: StyleObj,
18+
...$Exact<HeaderButtonProps>,
2119
};
2220

2321
// TODO check RTL
@@ -39,9 +37,8 @@ type HeaderButtonsProps = {
3937
IconComponent?: React.ComponentType<*>,
4038
iconSize?: number,
4139
color?: string,
42-
OverflowIcon?: React.Element<*>,
4340
overflowButtonWrapperStyle?: StyleObj,
44-
cancelButtonLabel?: string,
41+
...$Exact<OverflowButtonProps>,
4542
};
4643

4744
export class HeaderButtons extends React.Component<HeaderButtonsProps> {
@@ -52,7 +49,13 @@ export class HeaderButtons extends React.Component<HeaderButtonsProps> {
5249

5350
render() {
5451
const { visibleButtons, hiddenButtons } = getVisibleAndHiddenButtons(this.props);
55-
const { color, OverflowIcon, cancelButtonLabel, overflowButtonWrapperStyle } = this.props;
52+
const {
53+
color,
54+
OverflowIcon,
55+
cancelButtonLabel,
56+
overflowButtonWrapperStyle,
57+
onOverflowMenuPress,
58+
} = this.props;
5659

5760
return (
5861
<View style={[styles.row, this.getEdgeMargin()]}>
@@ -64,6 +67,7 @@ export class HeaderButtons extends React.Component<HeaderButtonsProps> {
6467
OverflowIcon={OverflowIcon}
6568
cancelButtonLabel={cancelButtonLabel}
6669
buttonWrapperStyle={overflowButtonWrapperStyle}
70+
onOverflowMenuPress={onOverflowMenuPress}
6771
/>
6872
)}
6973
</View>

‎src/OverflowButton.js

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,22 @@ import {
1313
import { HeaderButton } from './HeaderButton';
1414
import type { StyleObj } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
1515

16+
const IS_IOS = Platform.OS === 'ios';
17+
1618
export const textTransformer = (label: string) =>
17-
Platform.OS === 'ios' ? label.charAt(0).toUpperCase() + label.substr(1) : label.toUpperCase();
19+
IS_IOS ? label.charAt(0).toUpperCase() + label.substr(1) : label.toUpperCase();
20+
21+
export type OverflowButtonProps = {
22+
OverflowIcon?: React.Element<*>,
23+
cancelButtonLabel: string,
24+
onOverflowMenuPress?: ({ hiddenButtons: Array<React.Element<*>> }) => any,
25+
};
1826

1927
type Props = {
2028
hiddenButtons: Array<React.Element<*>>,
2129
color: string,
22-
OverflowIcon?: React.Element<*>,
23-
cancelButtonLabel: string,
2430
buttonWrapperStyle?: StyleObj,
31+
...$Exact<OverflowButtonProps>,
2532
};
2633

2734
export class OverflowButton extends React.Component<Props> {
@@ -51,7 +58,12 @@ export class OverflowButton extends React.Component<Props> {
5158
}
5259

5360
showOverflowPopup = () => {
54-
Platform.OS === 'android' ? this.showPopupAndroid() : this.showPopupIos();
61+
const { onOverflowMenuPress, hiddenButtons } = this.props;
62+
if (onOverflowMenuPress) {
63+
onOverflowMenuPress({ hiddenButtons });
64+
} else {
65+
IS_IOS ? this.showPopupIos() : this.showPopupAndroid();
66+
}
5567
};
5668

5769
showPopupAndroid() {
@@ -71,7 +83,7 @@ export class OverflowButton extends React.Component<Props> {
7183
};
7284

7385
showPopupIos() {
74-
const actionTitles = this.props.hiddenButtons.map(btn => btn.props.title);
86+
let actionTitles = this.props.hiddenButtons.map(btn => btn.props.title);
7587
actionTitles.push(this.props.cancelButtonLabel);
7688

7789
ActionSheetIOS.showActionSheetWithOptions(

0 commit comments

Comments
 (0)