@metamask/design-system-react-native/dist/components/TextButton/TextButton.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, { useCallback } from "react";
const React = $importDefault($React);
import { Pressable } from "react-native/index.js";
import { TextButtonSize } from "../../types/index.mjs";
import { Icon, IconSize } from "../Icon/index.mjs";
import { Text, FontWeight } from "../Text/index.mjs";
import { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from "./TextButton.constants.mjs";
export const TextButton = ({ children, size = TextButtonSize.BodyMd, textProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled = false, isInverse = false, twClassName = '', accessibilityRole, accessibilityLabel, style, ...props }) => {
    const tw = useTailwind();
    /**
     * Calculating the baselineOffset. This baselineOffset is needed to make sure
     * the TextButton aligns perfectly when placed within Text elements
     */
    // eslint-disable-next-line tailwindcss/no-custom-classname
    const { fontSize, lineHeight } = tw `text-${MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}`;
    const baselineOffset = (lineHeight - fontSize) / 2;
    const getTextColor = useCallback((pressed) => {
        if (isInverse) {
            return 'text-primary-inverse';
        }
        return pressed ? 'text-primary-default-pressed' : 'text-primary-default';
    }, [isInverse]);
    const getTextDecoration = useCallback((pressed) => isInverse || pressed ? 'underline' : 'no-underline', [isInverse]);
    return (<Text>
      <Pressable accessibilityRole={accessibilityRole ?? 'button'} accessibilityLabel={accessibilityLabel} disabled={isDisabled} style={({ pressed }) => [
            { transform: [{ translateY: baselineOffset }] },
            tw `flex-row items-center ${pressed ? 'bg-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,
            style,
        ]} {...props}>
        {({ pressed }) => (<>
            {startIconName ? (<Icon name={startIconName} size={IconSize.Sm} testID="start-icon" twClassName={`${getTextColor(pressed)} mr-1`} {...startIconProps}/>) : (startAccessory)}

            <Text variant={MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]} fontWeight={FontWeight.Medium} {...textProps} twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}>
              {children}
            </Text>

            {endIconName ? (<Icon name={endIconName} size={IconSize.Sm} testID="end-icon" twClassName={`${getTextColor(pressed)} ml-1`} {...endIconProps}/>) : (endAccessory)}
          </>)}
      </Pressable>
    </Text>);
};
//# sourceMappingURL=TextButton.mjs.map