stream-chat-react-native-core/lib/commonjs/components/ui/Button/Button.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Button = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _constants = require("./constants");
var _useButtonStyles = require("./hooks/useButtonStyles");
var _useA11yLabel = require("../../../a11y/hooks/useA11yLabel");
var _useAccessibilityActivateAction = require("../../../a11y/hooks/useAccessibilityActivateAction");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _theme = require("../../../theme");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ui/Button/Button.tsx";
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 (var _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); }
var buttonAccessibilityStates = {
  disabled: {
    disabled: true,
    selected: false
  },
  disabledSelected: {
    disabled: true,
    selected: true
  },
  enabled: {
    disabled: false,
    selected: false
  },
  selected: {
    disabled: false,
    selected: true
  }
};
var getButtonAccessibilityState = ({
  disabled,
  selected
}) => {
  if (disabled) return selected ? buttonAccessibilityStates.disabledSelected : buttonAccessibilityStates.disabled;
  return selected ? buttonAccessibilityStates.selected : buttonAccessibilityStates.enabled;
};
var Button = ({
  accessibilityLabel,
  accessibilityLabelKey,
  accessibilityLabelParams,
  variant,
  type,
  selected = false,
  size = 'md',
  LeadingIcon,
  TrailingIcon,
  iconOnly = false,
  label,
  onLayout,
  disabled = false,
  style,
  ...rest
}) => {
  var _useTheme = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme.theme.semantics;
  var buttonStyles = (0, _useButtonStyles.useButtonStyles)({
    variant,
    type
  });
  var styles = useStyles();
  var isRTL = _reactNative.I18nManager.isRTL;
  var LeftIcon = isRTL ? TrailingIcon : LeadingIcon;
  var RightIcon = isRTL ? LeadingIcon : TrailingIcon;
  var IconOnlyIcon = LeadingIcon != null ? LeadingIcon : TrailingIcon;
  var PrimaryIcon = iconOnly ? IconOnlyIcon : LeftIcon;
  var accessibilityState = getButtonAccessibilityState({
    disabled: !!disabled,
    selected
  });
  var translatedAccessibilityLabel = (0, _useA11yLabel.useA11yLabel)(accessibilityLabelKey != null ? accessibilityLabelKey : '', accessibilityLabelParams);
  var resolvedAccessibilityLabel = translatedAccessibilityLabel != null ? translatedAccessibilityLabel : accessibilityLabel;
  var accessibilityActivateActionProps = (0, _useAccessibilityActivateAction.useAccessibilityActivateAction)({
    onPress: rest.onPress,
    shouldHandleActivate: !!rest.onPress && !disabled && !!resolvedAccessibilityLabel
  });
  return (0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.wrapper, {
      backgroundColor: disabled ? buttonStyles.disabledBackgroundColor : buttonStyles.backgroundColor,
      borderWidth: buttonStyles.borderColor ? 1 : undefined,
      borderColor: disabled ? buttonStyles.disabledBorderColor : buttonStyles.borderColor,
      height: _constants.buttonSizes[size].height,
      width: iconOnly ? _constants.buttonSizes[size].width : '100%'
    }, style],
    onLayout: onLayout,
    children: (0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.Pressable, {
      accessible: true,
      accessibilityLabel: resolvedAccessibilityLabel,
      accessibilityRole: "button",
      accessibilityState: accessibilityState,
      style: ({
        pressed
      }) => [{
        backgroundColor: pressed ? semantics.backgroundUtilityPressed : selected ? semantics.backgroundUtilitySelected : 'transparent',
        paddingHorizontal: iconOnly ? 0 : _constants.buttonPadding[size]
      }, styles.container],
      disabled: disabled,
      ...accessibilityActivateActionProps,
      ...rest,
      children: [PrimaryIcon ? (0, _jsxRuntime.jsx)(PrimaryIcon, {
        height: 20,
        width: 20,
        strokeWidth: 1.5,
        stroke: disabled ? buttonStyles.disabledForegroundColor : buttonStyles.foregroundColor
      }) : null, !iconOnly ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [typeof label === 'string' ? (0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [styles.label, {
            color: disabled ? buttonStyles.disabledForegroundColor : buttonStyles.foregroundColor
          }],
          children: label
        }) : label, RightIcon ? (0, _jsxRuntime.jsx)(RightIcon, {
          height: 20,
          width: 20,
          strokeWidth: 1.5,
          stroke: disabled ? buttonStyles.disabledForegroundColor : buttonStyles.foregroundColor
        }) : null]
      }) : null]
    })
  });
};
exports.Button = Button;
var useStyles = () => {
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    wrapper: {
      borderRadius: _theme.primitives.radiusMax
    },
    container: {
      borderRadius: _theme.primitives.radiusMax,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      flex: 1,
      gap: _theme.primitives.spacingXs
    },
    label: {
      fontSize: _theme.primitives.typographyFontSizeMd,
      fontWeight: _theme.primitives.typographyFontWeightSemiBold,
      lineHeight: _theme.primitives.typographyLineHeightNormal
    }
  }), []);
};
//# sourceMappingURL=Button.js.map