feat: allow overflow button customization (vonovak#116)

Author: vonovak

.flowconfig

@@ -32,6 +32,8 @@ emoji=true
 esproposal.optional_chaining=enable
 esproposal.nullish_coalescing=enable
 
+exact_by_default=true
+
 module.file_ext=.js
 module.file_ext=.json
 module.file_ext=.ios.js
@@ -46,9 +48,6 @@ suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 [lints]
 sketchy-null-number=warn
@@ -72,4 +71,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.122.0
+^0.137.0

README.md

@@ -133,6 +133,7 @@ The package exports common handlers you can use, but you can provide your own to
 | accessibilityLabel?: string                  |                                                             | 'More options' by default                                                                                               |
 | left?: boolean                               | whether the `OverflowMenu` is on the left from header title | false by default, it just influences styling. No need to pass this if you passed it to `HeaderButtons`                  |
 | children: React.Node                         | the overflow items                                          | typically `HiddenItem`s, please read the note below                                                                     |
+| other props                                  | props passed to the nested Touchable                        | pass eg. `pressColor` to control ripple color on Android                                                                |
 
 ##### Important note
 
@@ -207,7 +208,7 @@ On Android, `OverflowMenuProvider` accepts an optional `spaceAboveMenu` prop, wh
 
 #### `HeaderButton`
 
-You will typically not use `HeaderButton` directly. `HeaderButton` is where all the `onPress`, `title` and Icon-related props meet to render actual button.
+You will typically not use `HeaderButton` directly. `HeaderButton` is where all the `onPress`, `title` and Icon-related props (color, size) meet to render actual button.
 See the source if you want to customize it.
 
 ### Recipes

example/screens/UsageWithIcons.tsx

@@ -21,18 +21,28 @@ const ReusableCapitalizedEditItem = ({ onPress }) => (
 
 const ReusableItem = ({ onPress }) => <HiddenItem title="hidden2" onPress={onPress} />;
 
+const rippleColorAndroidProps = {
+  pressColor: 'red',
+};
+
 export function UsageWithIcons({ navigation }) {
   React.useLayoutEffect(() => {
     navigation.setOptions({
       // in your app, extract the arrow function into a separate component
       // to avoid creating a new one every time
       headerRight: () => (
         <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
-          <Item title="search" iconName="ios-search" onPress={() => alert('search')} />
+          <Item
+            title="search"
+            iconName="ios-search"
+            onPress={() => alert('search')}
+            {...rippleColorAndroidProps}
+          />
           <ReusableCapitalizedEditItem onPress={() => alert('Edit')} />
           <OverflowMenu
             style={{ marginHorizontal: 10 }}
             OverflowIcon={<Ionicons name="ios-more" size={23} color="blue" />}
+            {...rippleColorAndroidProps}
           >
             <HiddenItem title="hidden1" onPress={() => alert('hidden1')} />
             <ReusableItem onPress={() => alert('hidden2')} />

package.json

@@ -42,7 +42,7 @@
     "@testing-library/react-native": "^7.0.1",
     "eslint": "^7.11.0",
     "eslint-plugin-prettier": "^3.1.2",
-    "flow-bin": "0.122",
+    "flow-bin": "^0.137.0",
     "jest": "^26.5.3",
     "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "^2.1.2",

src/ButtonsWrapper.js

@@ -12,12 +12,12 @@ const ButtonsExtraMarginContext = React.createContext<
   'toBeHandledByOverflowMenu' | 'alreadyHandledByHeaderButtons'
 >('toBeHandledByOverflowMenu');
 
-type Props = {|
+type Props = {
   left: boolean,
   children: React.Node,
-|};
+};
 
-export const ButtonsWrapper = ({ left, children }: Props) => {
+export const ButtonsWrapper = ({ left, children }: Props): any => {
   const marginStatus = React.useContext(ButtonsExtraMarginContext);
   const valueOfLeft = marginStatus === 'alreadyHandledByHeaderButtons' ? null : left;
   const extraSideMargin = getMargin(valueOfLeft);

src/HeaderButton.js

@@ -9,35 +9,33 @@ import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet
 const BUTTON_HIT_SLOP = Object.freeze({ top: 5, bottom: 5, left: 5, right: 5 });
 
 // for renderVisibleButton() function
-export type VisibleButtonProps = {|
+export type VisibleButtonProps = {
   IconComponent?: React.ComponentType<any>,
   iconSize?: number,
   color?: string,
   iconName?: string,
   title: string,
   buttonStyle?: ViewStyleProp,
-|};
+};
 
 // from <Item />
-export type ItemProps = {|
+export type ItemProps = {
   ...$Exact<React.ElementConfig<typeof TouchableWithoutFeedback>>,
   ...VisibleButtonProps,
   onPress: ?() => any,
   style?: ViewStyleProp,
-|};
+};
 
-type OtherProps = {|
+type OtherProps = {
   background?: any,
   foreground?: any,
   renderButtonElement: (VisibleButtonProps) => React.Element<any>,
-|};
+  ...
+};
 
-export type HeaderButtonProps = {|
-  ...ItemProps,
-  ...OtherProps,
-|};
+export type HeaderButtonProps = ItemProps & OtherProps;
 
-export function HeaderButton(props: HeaderButtonProps) {
+export function HeaderButton(props: HeaderButtonProps): React.Node {
   const {
     onPress,
     style,

src/HeaderButtons.js

@@ -6,21 +6,20 @@ import { HeaderButton } from './HeaderButton';
 import { HeaderButtonsContext } from './HeaderButtonsContext';
 import { ButtonsWrapper } from './ButtonsWrapper';
 
-type HeaderButtonsProps = {|
+type HeaderButtonsProps = {
   children: React.Node,
-  left: boolean,
-  HeaderButtonComponent: React.ComponentType<any>,
-|};
+  left?: boolean,
+  HeaderButtonComponent?: React.ComponentType<any>,
+};
 
-export function HeaderButtons({ HeaderButtonComponent, children, left }: HeaderButtonsProps) {
+export const HeaderButtons = ({
+  children,
+  HeaderButtonComponent = HeaderButton,
+  left = false,
+}: HeaderButtonsProps): React.Element<typeof HeaderButtons> => {
   return (
     <HeaderButtonsContext.Provider value={HeaderButtonComponent}>
       <ButtonsWrapper left={left}>{children}</ButtonsWrapper>
     </HeaderButtonsContext.Provider>
   );
-}
-
-HeaderButtons.defaultProps = {
-  left: false,
-  HeaderButtonComponent: HeaderButton,
 };

src/HeaderButtonsContext.js

@@ -2,4 +2,6 @@
 import * as React from 'react';
 import { HeaderButton } from './HeaderButton';
 
-export const HeaderButtonsContext = React.createContext<React.ComponentType<any>>(HeaderButton);
+export const HeaderButtonsContext: any = React.createContext<React.ComponentType<any>>(
+  HeaderButton
+);

src/HeaderItems.js

@@ -7,12 +7,15 @@ import { Text, StyleSheet, Platform } from 'react-native';
 import { OverflowMenuContext } from './overflowMenu/OverflowMenuContext';
 import { MenuItem } from './overflowMenu/vendor/MenuItem';
 
-type HiddenItemProps = {|
+type HiddenItemProps = {
   ...MenuItemProps,
   destructive?: boolean,
-|};
+};
 
-export function HiddenItem({ destructive, onPress, ...otherProps }: HiddenItemProps) {
+export function HiddenItem({
+  onPress,
+  ...otherProps
+}: HiddenItemProps): React.Element<typeof HiddenItem> {
   const toggleMenu = React.useContext(OverflowMenuContext);
 
   // when rendering dropdown menu (e.g. android default) the return value is actually rendered
@@ -23,14 +26,15 @@ export function HiddenItem({ destructive, onPress, ...otherProps }: HiddenItemPr
     onPress && onPress();
   };
 
+  // $FlowFixMeProps
   return <MenuItem {...otherProps} onPress={onMenuItemPress} />;
 }
 
 // TODO check RTL
-export function Item(props: ItemProps) {
+export function Item(props: ItemProps): React.Element<typeof Item> {
   const HeaderButtonComponent = React.useContext(HeaderButtonsContext);
-  // HeaderButtonComponent knows iconSize, icon color and etc.
-  // Item itself will likely only have title and onPress
+  // HeaderButtonComponent already knows iconSize, icon color and etc.
+  // Item itself will likely only have title and onPress but can override iconSize, icon color and etc. if needed
   return <HeaderButtonComponent {...props} renderButtonElement={renderVisibleButton} />;
 }
 

src/TouchableItem.ios.js

@@ -4,15 +4,15 @@ import { BaseButton } from 'react-native-gesture-handler';
 
 const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 
-type Props = {|
+export type Props = {
   ...ViewProps,
   disabled?: boolean,
   delayPressIn?: number,
   onPress?: () => void,
   children: React.Node,
-
   activeOpacity: number,
-|};
+  ...
+};
 
 const useNativeDriver = Platform.OS !== 'web';
 

src/TouchableItem.js

@@ -7,15 +7,15 @@ import {
   type ViewProps,
 } from 'react-native';
 
-type Props = {|
+type Props = {
   ...ViewProps,
   pressColor?: string,
   disabled?: boolean,
   borderless?: boolean,
   delayPressIn?: number,
   onPress?: () => void,
   children: React.Node,
-|};
+};
 
 const ANDROID_VERSION_LOLLIPOP = 21;
 

src/__tests__/overflowMenuPressHandlers.test.js

@@ -148,6 +148,7 @@ describe('overflowMenuPressHandlers', () => {
       { title: 'three', onPress: jest.fn(), destructive: true },
     ];
     beforeEach(() => {
+      // $FlowExpectedError
       ActionSheetIOS.showActionSheetWithOptions = jest.fn();
       // $FlowExpectedError
       UIManager.showPopupMenu = jest.fn();

src/overflowMenu/OverflowMenu.js

@@ -13,25 +13,27 @@ import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet
 import { OVERFLOW_BUTTON_TEST_ID } from '../e2e';
 import { ButtonsWrapper } from '../ButtonsWrapper';
 
-export type OverflowMenuProps = {|
+export type OverflowMenuProps = {
   children: React.Node,
   OverflowIcon: React.Element<any>,
   style?: ViewStyleProp,
-  testID: string,
-  accessibilityLabel: string,
+  testID?: string,
+  accessibilityLabel?: string,
   onPress: (OnOverflowMenuPressParams) => any,
-  left: boolean,
-|};
+  left?: boolean,
+  ...
+};
 
 export const OverflowMenu = ({
   children,
-  OverflowIcon,
-  accessibilityLabel,
-  testID,
   style,
-  onPress,
-  left,
-}: OverflowMenuProps) => {
+  OverflowIcon = <View />,
+  accessibilityLabel = 'More options',
+  testID = OVERFLOW_BUTTON_TEST_ID,
+  onPress = defaultOnOverflowMenuPress,
+  left = false, // this is needed only when OverflowMenu is rendered without HeaderButtons,
+  ...other
+}: OverflowMenuProps): React.Node => {
   const toggleMenu = React.useContext(OverflowMenuContext);
   const btnRef = React.useRef<typeof View | null>(null);
   const renderButtonElement = React.useCallback(() => OverflowIcon, [OverflowIcon]);
@@ -55,26 +57,20 @@ export const OverflowMenu = ({
   return (
     <ButtonsWrapper left={left}>
       <View ref={btnRef} collapsable={false} style={styles.overflowMenuView} />
+      {/* $FlowFixMeProps yeaah, this is boring :/ */}
       <HeaderButton
         title="overflow menu"
         renderButtonElement={renderButtonElement}
         style={[styles.icon, style]}
         onPress={usedOnPress}
         accessibilityLabel={accessibilityLabel}
         testID={testID}
+        {...other}
       />
     </ButtonsWrapper>
   );
 };
 
-OverflowMenu.defaultProps = {
-  accessibilityLabel: 'More options',
-  OverflowIcon: <View />,
-  onPress: defaultOnOverflowMenuPress,
-  testID: OVERFLOW_BUTTON_TEST_ID,
-  left: false, // this is needed only when OverflowMenu is rendered without HeaderButtons
-};
-
 const styles = StyleSheet.create({
   icon: {
     ...Platform.select({

src/overflowMenu/OverflowMenuContext.js

@@ -4,11 +4,11 @@ import { Dimensions, Platform } from 'react-native';
 import { getDefaultSpaceAboveMenu } from './statusBarUtils';
 import { Menu } from './vendor/Menu';
 
-export type ToggleMenuParam = ?{|
+export type ToggleMenuParam = ?{
   elements: React.ChildrenArray<any>,
   x: number,
   y: number,
-|};
+};
 
 export const OVERFLOW_TOP = 15;
 
@@ -20,14 +20,17 @@ const warn = () => {
       'Please check the installation instructions in the react-navigation-header-buttons readme!'
   );
 };
-export const OverflowMenuContext = React.createContext<(ToggleMenuParam) => void>(warn);
+export const OverflowMenuContext: any = React.createContext<(ToggleMenuParam) => void>(warn);
 
-type Props = {|
+type Props = {
   children: React.Element<any>,
   spaceAboveMenu?: number,
-|};
+};
 
-export const OverflowMenuProvider = ({ children, spaceAboveMenu }: Props) => {
+export const OverflowMenuProvider = ({
+  children,
+  spaceAboveMenu,
+}: Props): React.Element<typeof OverflowMenuProvider> => {
   const [visible, setVisible] = React.useState(false);
   const [position, setPosition] = React.useState({ x: Dimensions.get('window').width - 10, y: 40 });
   const [elements, setElements] = React.useState(null);

src/overflowMenu/vendor/Divider.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
 
-type Props = {|
+type Props = {
   ...ViewProps,
   inset?: boolean,
-|};
+};
 
 /**
  * A divider is a thin, lightweight separator that groups content in lists and page layouts.
@@ -28,7 +28,7 @@ type Props = {|
  *
  * ```
  */
-export function Divider(props: Props) {
+export function Divider(props: Props): React.Element<typeof View> {
   const { inset, style, ...rest } = props;
   return <View {...rest} style={[styles.light, inset && styles.inset, style]} />;
 }