@nexara/nativeflow/lib/module/components/Button/Button.js

Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.

"use strict";

import React, { useMemo } from 'react';
import { ActivityIndicator, StyleSheet, TouchableOpacity } from "react-native";
import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations.js";
import { StyledText, StyledView } from "../StyledComponents/index.js";
import { useTheme } from "../../hooks/index.js";
import { getButtonColors } from "./utils.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const Button = ({
  variant = 'contained',
  type = 'flat',
  fullWidth = false,
  paddingH = 19,
  paddingV = 12,
  bg,
  br = 8,
  stroke = 1,
  strokeColor,
  titleColor,
  title,
  fScale = 'base',
  fs,
  ff,
  size = 50,
  rippleColor,
  renderIcon,
  renderLeftIcon,
  renderRightIcon,
  disabled = false,
  loading = false,
  containerStyle,
  titleStyle,
  onPress,
  children,
  ...rest
}) => {
  const theme = useTheme();
  const {
    backgroundColor,
    buttonTextColor,
    buttonBorderColor
  } = getButtonColors({
    theme,
    variant,
    bg,
    titleColor,
    strokeColor,
    disabled,
    loading
  });
  const STYLES = useMemo(customStyles, []);
  const dynamicStyles = {
    BUTTON_CONT: {
      backgroundColor: backgroundColor,
      borderWidth: variant === 'contained' ? 0 : stroke,
      borderColor: buttonBorderColor
    },
    BUTTON_TEXT: {
      color: buttonTextColor,
      fontFamily: ff ?? ''
    },
    FLAT_BTN_MAIN_CONT: {
      borderRadius: verticalScale(br),
      alignSelf: fullWidth ? 'stretch' : 'flex-start'
    },
    FLAT_BTN_INNER_CONT: {
      paddingVertical: verticalScale(paddingV),
      paddingHorizontal: horizontalScale(!fullWidth ? paddingH : 30),
      borderRadius: verticalScale(br)
    },
    ROUND_BTN_INNER_CONT: {
      height: verticalScale(size),
      width: verticalScale(size)
    }
  };
  const cloneElement = element => {
    if (/*#__PURE__*/React.isValidElement(element)) {
      return /*#__PURE__*/React.cloneElement(element, {
        color: element.props.color ?? buttonTextColor
      });
    }
    return null;
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [type === 'flat' && /*#__PURE__*/_jsx(StyledView, {
      style: [STYLES.FLAT_BTN_MAIN_CONT, dynamicStyles.FLAT_BTN_MAIN_CONT],
      children: /*#__PURE__*/_jsx(TouchableOpacity, {
        onPress: onPress
        // rippleColor={rippleColor}
        ,
        disabled: disabled || loading
        // ref={ref}
        ,
        ...rest,
        children: /*#__PURE__*/_jsxs(StyledView, {
          style: [STYLES.FLAT_BTN_INNER_CONT, STYLES.BUTTON_CONT, dynamicStyles.FLAT_BTN_INNER_CONT, dynamicStyles.BUTTON_CONT, containerStyle],
          children: [(renderLeftIcon || fullWidth && renderRightIcon) && /*#__PURE__*/_jsx(StyledView, {
            f: fullWidth ? 1 : undefined,
            children: renderLeftIcon && cloneElement(renderLeftIcon)
          }), /*#__PURE__*/_jsx(StyledView, {
            flexShrink: 1,
            f: fullWidth ? 8 : undefined,
            children: !loading ? title ?? children ? /*#__PURE__*/_jsx(StyledText, {
              numberOfLines: 1,
              fs: fs,
              fScale: fScale,
              style: [STYLES.BUTTON_TEXT, dynamicStyles.BUTTON_TEXT, titleStyle],
              children: title ?? children
            }) : renderIcon && cloneElement(renderIcon) : /*#__PURE__*/_jsx(ActivityIndicator, {
              color: dynamicStyles.BUTTON_TEXT.color,
              size: "small"
            })
          }), (renderRightIcon || fullWidth && renderLeftIcon) && /*#__PURE__*/_jsx(StyledView, {
            alignItems: "flex-end",
            f: fullWidth ? 1 : undefined,
            children: renderRightIcon && cloneElement(renderRightIcon)
          })]
        })
      })
    }), type === 'round' && /*#__PURE__*/_jsx(StyledView, {
      style: STYLES.ROUND_BTN_MAIN_CONT,
      children: /*#__PURE__*/_jsx(TouchableOpacity, {
        onPress: onPress
        // rippleColor={rippleColor}
        ,
        ...rest,
        children: /*#__PURE__*/_jsx(StyledView, {
          style: [STYLES.BUTTON_CONT, STYLES.ROUND_BTN_INNER_CONT, dynamicStyles.BUTTON_CONT, dynamicStyles.ROUND_BTN_INNER_CONT, containerStyle],
          children: renderIcon && cloneElement(renderIcon)
        })
      })
    })]
  });
};
export default Button;
const customStyles = () => StyleSheet.create({
  BUTTON_CONT: {
    maxWidth: '100%'
  },
  BUTTON_TEXT: {
    textAlign: 'center'
  },
  FLAT_BTN_MAIN_CONT: {
    overflow: 'hidden'
  },
  FLAT_BTN_INNER_CONT: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: horizontalScale(10)
  },
  ROUND_BTN_MAIN_CONT: {
    overflow: 'hidden',
    borderRadius: verticalScale(100),
    alignSelf: 'flex-start'
  },
  ROUND_BTN_INNER_CONT: {
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=Button.js.map