@eslam-elmeniawy/react-native-common-components
Version:
Common `ReactNative` components packed in library for usage in projects.
85 lines (80 loc) • 2.31 kB
JavaScript
"use strict";
// External imports.
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { withTheme, TouchableRipple } from 'react-native-paper';
import tinyColor from 'tinycolor2';
// Types imports.
// Internal imports.
import styles from "./IconButton.styles.js";
import Icon from "./Icon.js";
import ResponsiveDimensions from "../../utils/ResponsiveDimensions.js";
/**
* IconButton component (unwrapped, for testing)
* Renders an icon button with ripple effect
* @internal For testing purposes only. Do not use in production code.
*/
import { jsx as _jsx } from "react/jsx-runtime";
export const IconButtonComponent = /*#__PURE__*/React.memo(props => {
const {
image,
vector,
iconName,
size,
color,
onPress,
onLongPress,
onPressIn,
onPressOut,
disabled,
iconPercent,
style,
theme,
noIconTint,
...other
} = props;
const _size = ResponsiveDimensions.ms(size ?? 36);
const _color = color ?? theme.colors.primary;
const _enabledStyle = {
opacity: disabled ? 0.5 : 1.0
};
const _rippleColor = tinyColor(_color).setAlpha(0.25).toHex8String();
return /*#__PURE__*/_jsx(View, {
style: StyleSheet.flatten([styles.container, {
borderRadius: _size / 2
}, style, {
width: _size,
height: _size
}, _enabledStyle, styles.noPadding]),
...other,
children: /*#__PURE__*/_jsx(TouchableRipple, {
style: styles.ripple,
onPress: onPress,
onLongPress: onLongPress,
onPressIn: onPressIn,
onPressOut: onPressOut,
disabled: disabled,
rippleColor: _rippleColor,
underlayColor: _rippleColor,
children: /*#__PURE__*/_jsx(View, {
style: StyleSheet.flatten([styles.ripple, styles.rippleView]),
children: /*#__PURE__*/_jsx(Icon, {
image: image,
vector: vector,
iconName: iconName,
size: _size,
color: _color,
iconPercent: iconPercent,
noIconTint: noIconTint
})
})
})
});
});
IconButtonComponent.displayName = 'IconButtonComponent';
/**
* IconButton component (wrapped with theme, for production)
*/
const IconButton = withTheme(IconButtonComponent);
export default IconButton;
//# sourceMappingURL=IconButton.js.map