64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Pressable, Platform, StyleSheet } from 'react-native';
|
|
import ToolTipMenu from './TooltipMenu';
|
|
import { useTheme } from './themes';
|
|
import Icon from './Icon';
|
|
import { Action } from './types';
|
|
|
|
interface HeaderMenuButtonProps {
|
|
onPressMenuItem: (id: string) => void;
|
|
actions?: Action[] | Action[][];
|
|
disabled?: boolean;
|
|
title?: string;
|
|
}
|
|
|
|
const HeaderMenuButton: React.FC<HeaderMenuButtonProps> = ({ onPressMenuItem, actions, disabled, title }) => {
|
|
const { colors } = useTheme();
|
|
const styleProps = Platform.OS === 'android' ? { iconStyle: { transform: [{ rotate: '90deg' }] } } : {};
|
|
|
|
if (!actions || actions.length === 0) {
|
|
return (
|
|
<Pressable
|
|
testID="HeaderMenuButton"
|
|
disabled={disabled}
|
|
android_ripple={{ color: colors.lightButton }}
|
|
hitSlop={8}
|
|
style={({ pressed }) => [styles.buttonCenter, pressed && styles.pressed]}
|
|
>
|
|
<Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} {...styleProps} />
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const menuActions = Array.isArray(actions[0]) ? (actions as Action[][]) : (actions as Action[]);
|
|
|
|
return (
|
|
<ToolTipMenu
|
|
testID="HeaderMenuButton"
|
|
disabled={disabled}
|
|
isButton
|
|
shouldOpenOnLongPress={false}
|
|
onPressMenuItem={onPressMenuItem}
|
|
actions={menuActions}
|
|
title={title}
|
|
buttonStyle={styles.buttonCenter}
|
|
>
|
|
<Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} {...styleProps} />
|
|
</ToolTipMenu>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
buttonCenter: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
minWidth: 44,
|
|
minHeight: 44,
|
|
},
|
|
pressed: { opacity: 0.5 },
|
|
});
|
|
|
|
export default HeaderMenuButton;
|