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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const Button = ({
  variant = 'contained',
  type = 'flat',
  fullWidth = false,
  paddingH = 19,
  paddingV = 14,
  bg,
  br = 5,
  stroke = 1,
  strokeColor,
  titleColor,
  title = 'Button',
  titleFS,
  titleVariant = 'h5',
  titleFF,
  size = 50,
  rippleColor,
  renderIcon,
  renderLeftIcon,
  renderRightIcon,
  disabled = false,
  buttonContainerStyle,
  textStyle,
  onPress,
  ...rest
}) => {
  const theme = (0, _index2.useTheme)();
  const {
    backgroundColor,
    buttonTextColor,
    buttonBorderColor,
    buttonIconColor
  } = (0, _utils.getButtonColors)({
    theme,
    variant,
    bg,
    titleColor,
    strokeColor,
    disabled
  });
  const STYLES = (0, _react.useMemo)(Styles, []);
  const dynamicStyles = {
    BUTTON_CONT: {
      backgroundColor: backgroundColor,
      borderWidth: variant === 'contained' ? 0 : stroke,
      borderColor: buttonBorderColor
    },
    BUTTON_TEXT: {
      color: buttonTextColor,
      fontFamily: titleFF ?? ''
    },
    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 ?? buttonIconColor
      });
    }
    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
        // 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, buttonContainerStyle],
          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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledText, {
              numberOfLines: 1,
              fs: titleFS,
              variant: titleVariant,
              style: [STYLES.BUTTON_TEXT, dynamicStyles.BUTTON_TEXT, textStyle],
              children: title
            })
          }), (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, buttonContainerStyle],
          children: renderIcon && cloneElement(renderIcon)
        })
      })
    })]
  });
};
var _default = exports.default = Button;
const Styles = () => _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