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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _ResponsiveCalculations = require("../../helpers/ResponsiveCalculations.js");
var _index = require("../StyledComponents/index.js");
var _index2 = require("../../hooks/index.js");
var _utils = require("./utils.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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 = (0, _index2.useTheme)();
  const {
    backgroundColor,
    buttonTextColor,
    buttonBorderColor
  } = (0, _utils.getButtonColors)({
    theme,
    variant,
    bg,
    titleColor,
    strokeColor,
    disabled,
    loading
  });
  const STYLES = (0, _react.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: (0, _ResponsiveCalculations.verticalScale)(br),
      alignSelf: fullWidth ? 'stretch' : 'flex-start'
    },
    FLAT_BTN_INNER_CONT: {
      paddingVertical: (0, _ResponsiveCalculations.verticalScale)(paddingV),
      paddingHorizontal: (0, _ResponsiveCalculations.horizontalScale)(!fullWidth ? paddingH : 30),
      borderRadius: (0, _ResponsiveCalculations.verticalScale)(br)
    },
    ROUND_BTN_INNER_CONT: {
      height: (0, _ResponsiveCalculations.verticalScale)(size),
      width: (0, _ResponsiveCalculations.verticalScale)(size)
    }
  };
  const cloneElement = element => {
    if (/*#__PURE__*/_react.default.isValidElement(element)) {
      return /*#__PURE__*/_react.default.cloneElement(element, {
        color: element.props.color ?? buttonTextColor
      });
    }
    return null;
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [type === 'flat' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledView, {
      style: [STYLES.FLAT_BTN_MAIN_CONT, dynamicStyles.FLAT_BTN_MAIN_CONT],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
        onPress: onPress
        // rippleColor={rippleColor}
        ,
        disabled: disabled || loading
        // ref={ref}
        ,
        ...rest,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.StyledView, {
          style: [STYLES.FLAT_BTN_INNER_CONT, STYLES.BUTTON_CONT, dynamicStyles.FLAT_BTN_INNER_CONT, dynamicStyles.BUTTON_CONT, containerStyle],
          children: [(renderLeftIcon || fullWidth && renderRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledView, {
            f: fullWidth ? 1 : undefined,
            children: renderLeftIcon && cloneElement(renderLeftIcon)
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledView, {
            flexShrink: 1,
            f: fullWidth ? 8 : undefined,
            children: !loading ? title ?? children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledText, {
              numberOfLines: 1,
              fs: fs,
              fScale: fScale,
              style: [STYLES.BUTTON_TEXT, dynamicStyles.BUTTON_TEXT, titleStyle],
              children: title ?? children
            }) : renderIcon && cloneElement(renderIcon) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
              color: dynamicStyles.BUTTON_TEXT.color,
              size: "small"
            })
          }), (renderRightIcon || fullWidth && renderLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledView, {
            alignItems: "flex-end",
            f: fullWidth ? 1 : undefined,
            children: renderRightIcon && cloneElement(renderRightIcon)
          })]
        })
      })
    }), type === 'round' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledView, {
      style: STYLES.ROUND_BTN_MAIN_CONT,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
        onPress: onPress
        // rippleColor={rippleColor}
        ,
        ...rest,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledView, {
          style: [STYLES.BUTTON_CONT, STYLES.ROUND_BTN_INNER_CONT, dynamicStyles.BUTTON_CONT, dynamicStyles.ROUND_BTN_INNER_CONT, containerStyle],
          children: renderIcon && cloneElement(renderIcon)
        })
      })
    })]
  });
};
var _default = exports.default = Button;
const customStyles = () => _reactNative.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: (0, _ResponsiveCalculations.horizontalScale)(10)
  },
  ROUND_BTN_MAIN_CONT: {
    overflow: 'hidden',
    borderRadius: (0, _ResponsiveCalculations.verticalScale)(100),
    alignSelf: 'flex-start'
  },
  ROUND_BTN_INNER_CONT: {
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=Button.js.map