2022-07-07 12:29:18 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { TouchableRipple } from 'react-native-paper';
|
|
|
|
|
2022-07-27 09:56:07 +00:00
|
|
|
import Icon from '../../../icons/components/Icon';
|
2022-11-28 10:52:45 +00:00
|
|
|
// eslint-disable-next-line lines-around-comment
|
2022-11-01 12:36:32 +00:00
|
|
|
// @ts-ignore
|
2022-10-31 14:34:26 +00:00
|
|
|
import styles from '../../../react/components/native/styles';
|
|
|
|
import { IIconButtonProps } from '../../../react/types';
|
2022-11-09 12:45:55 +00:00
|
|
|
import { BUTTON_TYPES } from '../../constants.native';
|
2022-10-31 14:34:26 +00:00
|
|
|
import BaseTheme from '../BaseTheme.native';
|
2022-07-11 12:30:37 +00:00
|
|
|
|
2022-07-07 12:29:18 +00:00
|
|
|
|
2022-10-21 11:09:15 +00:00
|
|
|
const IconButton: React.FC<IIconButtonProps> = ({
|
2022-07-07 12:29:18 +00:00
|
|
|
accessibilityLabel,
|
|
|
|
color: iconColor,
|
|
|
|
disabled,
|
|
|
|
onPress,
|
|
|
|
size,
|
|
|
|
src,
|
|
|
|
style,
|
|
|
|
tapColor,
|
|
|
|
type
|
2022-10-21 11:09:15 +00:00
|
|
|
}: IIconButtonProps) => {
|
2022-07-07 12:29:18 +00:00
|
|
|
const { PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
|
|
|
|
|
|
|
|
let color;
|
|
|
|
let rippleColor;
|
|
|
|
let iconButtonContainerStyles;
|
|
|
|
|
|
|
|
if (type === PRIMARY) {
|
|
|
|
color = BaseTheme.palette.icon01;
|
|
|
|
iconButtonContainerStyles = styles.iconButtonContainerPrimary;
|
|
|
|
rippleColor = BaseTheme.palette.action01;
|
|
|
|
} else if (type === SECONDARY) {
|
2022-07-12 12:28:20 +00:00
|
|
|
color = BaseTheme.palette.icon04;
|
2022-07-07 12:29:18 +00:00
|
|
|
iconButtonContainerStyles = styles.iconButtonContainerSecondary;
|
|
|
|
rippleColor = BaseTheme.palette.action02;
|
2022-07-11 12:30:37 +00:00
|
|
|
} else if (type === TERTIARY) {
|
2023-02-21 09:26:04 +00:00
|
|
|
color = iconColor;
|
2022-07-07 12:29:18 +00:00
|
|
|
iconButtonContainerStyles = styles.iconButtonContainer;
|
|
|
|
rippleColor = BaseTheme.palette.action03;
|
|
|
|
} else {
|
|
|
|
color = iconColor;
|
|
|
|
rippleColor = tapColor;
|
|
|
|
}
|
|
|
|
|
2022-11-08 15:46:46 +00:00
|
|
|
if (disabled) {
|
|
|
|
color = BaseTheme.palette.icon03;
|
|
|
|
iconButtonContainerStyles = styles.iconButtonContainerDisabled;
|
|
|
|
rippleColor = 'transparent';
|
|
|
|
}
|
2022-07-07 12:29:18 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<TouchableRipple
|
|
|
|
accessibilityLabel = { accessibilityLabel }
|
|
|
|
disabled = { disabled }
|
2022-10-11 10:47:54 +00:00
|
|
|
|
2022-07-18 13:16:08 +00:00
|
|
|
// @ts-ignore
|
2022-07-07 12:29:18 +00:00
|
|
|
onPress = { onPress }
|
|
|
|
rippleColor = { rippleColor }
|
|
|
|
style = { [
|
|
|
|
iconButtonContainerStyles,
|
|
|
|
style
|
|
|
|
] }>
|
|
|
|
<Icon
|
|
|
|
color = { color }
|
|
|
|
size = { 20 || size }
|
|
|
|
src = { src } />
|
|
|
|
</TouchableRipple>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default IconButton;
|