@metamask/design-system-react-native/dist/components/ButtonIcon/ButtonIcon.mjs

Design System React Native

function $importDefault(module) {
    if (module?.__esModule) {
        return module.default;
    }
    return module;
}
import { useTailwind } from "@metamask/design-system-twrnc-preset";
import $React, { useState } from "react";
const React = $importDefault($React);
import { ButtonIconSize } from "../../types/index.mjs";
import { Icon } from "../Icon/index.mjs";
import { ButtonAnimated } from "../temp-components/ButtonAnimated/index.mjs";
import { MAP_BUTTONICON_SIZE_ICONSIZE, TWCLASSMAP_BUTTONICON_SIZE_DIMENSION } from "./ButtonIcon.constants.mjs";
export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDisabled = false, isInverse = false, isFloating = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
    const [isPressed, setIsPressed] = useState(false);
    const tw = useTailwind();
    // Determine background color based on state
    let backgroundColor = 'bg-transparent';
    if (isFloating) {
        backgroundColor = 'bg-icon-default';
    }
    else if (isPressed) {
        backgroundColor = 'bg-pressed';
    }
    const twContainerClassNames = `
    items-center justify-center
    ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}
    ${isFloating ? 'rounded-full' : 'rounded-sm'}
    ${backgroundColor}
    ${isDisabled ? 'opacity-50' : 'opacity-100'}
    ${twClassName}`;
    const twIconColorClassNames = isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';
    const onPressInHandler = (event) => {
        setIsPressed(true);
        onPressIn?.(event);
    };
    const onPressOutHandler = (event) => {
        setIsPressed(false);
        onPressOut?.(event);
    };
    return (<ButtonAnimated disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible style={[tw `${twContainerClassNames}`, style]} testID="button-icon" {...props}>
      <Icon name={iconName} color={twIconColorClassNames} size={MAP_BUTTONICON_SIZE_ICONSIZE[size]} {...iconProps}/>
    </ButtonAnimated>);
};
//# sourceMappingURL=ButtonIcon.mjs.map