You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

IconButton.tsx 2.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import React from 'react';
  2. import { TouchableRipple } from 'react-native-paper';
  3. import Icon from '../../../icons/components/Icon';
  4. import styles from '../../../react/components/native/styles';
  5. import { IIconButtonProps } from '../../../react/types';
  6. import { BUTTON_TYPES } from '../../constants.native';
  7. import BaseTheme from '../BaseTheme.native';
  8. const IconButton: React.FC<IIconButtonProps> = ({
  9. accessibilityLabel,
  10. color: iconColor,
  11. disabled,
  12. onPress,
  13. size,
  14. src,
  15. style,
  16. tapColor,
  17. type
  18. }: IIconButtonProps) => {
  19. const { PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
  20. let color;
  21. let rippleColor;
  22. let iconButtonContainerStyles;
  23. if (type === PRIMARY) {
  24. color = BaseTheme.palette.icon01;
  25. iconButtonContainerStyles = styles.iconButtonContainerPrimary;
  26. rippleColor = BaseTheme.palette.action01;
  27. } else if (type === SECONDARY) {
  28. color = BaseTheme.palette.icon04;
  29. iconButtonContainerStyles = styles.iconButtonContainerSecondary;
  30. rippleColor = BaseTheme.palette.action02;
  31. } else if (type === TERTIARY) {
  32. color = iconColor;
  33. iconButtonContainerStyles = styles.iconButtonContainer;
  34. rippleColor = BaseTheme.palette.action03;
  35. } else {
  36. color = iconColor;
  37. rippleColor = tapColor;
  38. }
  39. if (disabled) {
  40. color = BaseTheme.palette.icon03;
  41. iconButtonContainerStyles = styles.iconButtonContainerDisabled;
  42. rippleColor = 'transparent';
  43. }
  44. return (
  45. <TouchableRipple
  46. accessibilityLabel = { accessibilityLabel }
  47. disabled = { disabled }
  48. onPress = { onPress }
  49. rippleColor = { rippleColor }
  50. style = { [
  51. iconButtonContainerStyles,
  52. style
  53. ] }>
  54. <Icon
  55. color = { color }
  56. size = { 20 || size }
  57. src = { src } />
  58. </TouchableRipple>
  59. );
  60. };
  61. export default IconButton;