@eslam-elmeniawy/react-native-common-components/lib/module/components/Button/Button.js

Common `ReactNative` components packed in library for usage in projects.

"use strict";

// External imports.
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { withTheme, TouchableRipple } from 'react-native-paper';
import tinyColor from 'tinycolor2';

// Types imports.

// Internal imports.
import styles from "./Button.styles.js";
import { Text } from "../Text/index.js";
import Icon from "./Icon.js";
import ResponsiveDimensions from "../../utils/ResponsiveDimensions.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Button = /*#__PURE__*/React.memo(props => {
  const {
    text,
    startImage,
    startVector,
    startIconName,
    endImage,
    endVector,
    endIconName,
    onPress,
    onLongPress,
    onPressIn,
    onPressOut,
    disabled,
    iconSize,
    noIconTint,
    textProps,
    style,
    theme,
    ...other
  } = props;
  const {
    style: textStyle,
    type,
    ...rest
  } = textProps ?? {};
  const _enabledStyle = {
    opacity: disabled ? 0.5 : 1.0
  };
  const _buttonDefaultBackgroundStyle = {
    backgroundColor: theme.colors.primary
  };
  const _buttonColor = StyleSheet.flatten(style ?? _buttonDefaultBackgroundStyle).backgroundColor?.toString() ?? theme.colors.primary;
  const _defaultTextColorNonV3 = tinyColor(_buttonColor).isDark() ? '#ffffff' : '#000000';
  const _defaultTextColor = theme.isV3 ? theme.colors.onPrimary : _defaultTextColorNonV3;
  const _textColor = textStyle == null || textStyle === undefined ? _defaultTextColor : StyleSheet.flatten(textStyle).color?.toString() ?? _defaultTextColor;
  const _rippleColor = tinyColor(_textColor).setAlpha(0.25).toHex8String();
  const _iconSize = ResponsiveDimensions.ms(iconSize ?? 24);
  const _iconColor = noIconTint ? undefined : _textColor;
  const _flattenStyle = StyleSheet.flatten(style ?? {});
  const {
    padding,
    paddingHorizontal,
    paddingVertical,
    paddingTop,
    paddingBottom,
    paddingStart,
    paddingEnd,
    paddingRight,
    paddingLeft
  } = _flattenStyle;
  const _borderRadius = (theme.isV3 ? 5 : 1) * theme.roundness;
  return /*#__PURE__*/_jsx(View, {
    style: StyleSheet.flatten([styles.container, {
      backgroundColor: theme.colors.primary,
      borderRadius: _borderRadius
    }, style, _enabledStyle, styles.noPadding]),
    ...other,
    children: /*#__PURE__*/_jsx(TouchableRipple, {
      onPress: onPress,
      onLongPress: onLongPress,
      onPressIn: onPressIn,
      onPressOut: onPressOut,
      disabled: disabled,
      rippleColor: _rippleColor,
      underlayColor: _rippleColor,
      children: /*#__PURE__*/_jsxs(View, {
        style: StyleSheet.flatten([styles.rippleView, {
          padding,
          paddingHorizontal,
          paddingVertical,
          paddingTop,
          paddingBottom,
          paddingStart,
          paddingEnd,
          paddingRight,
          paddingLeft
        }]),
        children: [/*#__PURE__*/_jsx(Icon, {
          image: startImage,
          vector: startVector,
          iconName: startIconName,
          size: _iconSize,
          color: _iconColor
        }), /*#__PURE__*/_jsx(Text, {
          style: StyleSheet.flatten([styles.text, {
            color: _textColor
          }, textStyle]),
          type: type ?? 'bold',
          ...rest,
          children: text
        }), /*#__PURE__*/_jsx(Icon, {
          image: endImage,
          vector: endVector,
          iconName: endIconName,
          size: _iconSize,
          color: _iconColor
        })]
      })
    })
  });
});
export default withTheme(Button);
//# sourceMappingURL=Button.js.map