theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
106 lines
2.5 KiB
TypeScript
106 lines
2.5 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { WithTranslation } from 'react-i18next';
|
|
import { ColorValue, GestureResponderEvent, Text, TouchableHighlight, ViewStyle } from 'react-native';
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
import { createReactionMenuEvent } from '../../../analytics/AnalyticsEvents';
|
|
import { sendAnalytics } from '../../../analytics/functions';
|
|
import { translate } from '../../../base/i18n/functions';
|
|
import { StyleType } from '../../../base/styles/functions.native';
|
|
import { addReactionToBuffer } from '../../actions.any';
|
|
import { REACTIONS } from '../../constants';
|
|
|
|
interface IReactionStyles {
|
|
|
|
/**
|
|
* Style for text container. Used on raise hand button.
|
|
*/
|
|
container?: StyleType;
|
|
|
|
/**
|
|
* Style for the emoji text on the button.
|
|
*/
|
|
emoji: StyleType;
|
|
|
|
/**
|
|
* Style for the gif button.
|
|
*/
|
|
gifButton: StyleType;
|
|
|
|
/**
|
|
* Style for the button.
|
|
*/
|
|
style: StyleType;
|
|
|
|
/**
|
|
* Style for the label text on the button.
|
|
*/
|
|
text?: StyleType;
|
|
|
|
/**
|
|
* Underlay color for the button.
|
|
*/
|
|
underlayColor: ColorValue;
|
|
|
|
}
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of {@link ReactionButton}.
|
|
*/
|
|
interface IProps extends WithTranslation {
|
|
|
|
/**
|
|
* Component children.
|
|
*/
|
|
children?: React.ReactNode;
|
|
|
|
/**
|
|
* External click handler.
|
|
*/
|
|
onClick?: (e?: GestureResponderEvent) => void;
|
|
|
|
/**
|
|
* The reaction to be sent.
|
|
*/
|
|
reaction?: string;
|
|
|
|
/**
|
|
* Collection of styles for the button.
|
|
*/
|
|
styles: IReactionStyles;
|
|
}
|
|
|
|
/**
|
|
* An implementation of a button to send a reaction.
|
|
*
|
|
* @returns {ReactElement}
|
|
*/
|
|
function ReactionButton({
|
|
children,
|
|
onClick,
|
|
styles,
|
|
reaction,
|
|
t
|
|
}: IProps) {
|
|
const dispatch = useDispatch();
|
|
const _onClick = useCallback(() => {
|
|
if (reaction) {
|
|
dispatch(addReactionToBuffer(reaction));
|
|
sendAnalytics(createReactionMenuEvent(reaction));
|
|
}
|
|
}, [ reaction ]);
|
|
|
|
return (
|
|
<TouchableHighlight
|
|
accessibilityLabel = { t(`toolbar.accessibilityLabel.${reaction}`) }
|
|
accessibilityRole = 'button'
|
|
onPress = { onClick || _onClick }
|
|
style = { [ styles.style, children && styles?.gifButton ] as ViewStyle[] }
|
|
underlayColor = { styles.underlayColor }>
|
|
{children ?? <Text style = { styles.emoji }>{REACTIONS[reaction ?? ''].emoji}</Text>}
|
|
</TouchableHighlight>
|
|
);
|
|
}
|
|
|
|
export default translate(ReactionButton);
|