@metamask/design-system-react-native
Version:
69 lines (67 loc) • 3.99 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextButton = void 0;
const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native/index.js");
const types_1 = require("../../types/index.cjs");
const Icon_1 = require("../Icon/index.cjs");
const Text_1 = require("../Text/index.cjs");
const TextButton_constants_1 = require("./TextButton.constants.cjs");
const TextButton = ({ children, size = types_1.TextButtonSize.BodyMd, textProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled = false, isInverse = false, twClassName = '', accessibilityRole, accessibilityLabel, style, ...props }) => {
const tw = (0, design_system_twrnc_preset_1.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-${TextButton_constants_1.MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}`;
const baselineOffset = (lineHeight - fontSize) / 2;
const getTextColor = (0, react_1.useCallback)((pressed) => {
if (isInverse) {
return 'text-primary-inverse';
}
return pressed ? 'text-primary-default-pressed' : 'text-primary-default';
}, [isInverse]);
const getTextDecoration = (0, react_1.useCallback)((pressed) => isInverse || pressed ? 'underline' : 'no-underline', [isInverse]);
return (<Text_1.Text>
<react_native_1.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_1.Icon name={startIconName} size={Icon_1.IconSize.Sm} testID="start-icon" twClassName={`${getTextColor(pressed)} mr-1`} {...startIconProps}/>) : (startAccessory)}
<Text_1.Text variant={TextButton_constants_1.MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]} fontWeight={Text_1.FontWeight.Medium} {...textProps} twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}>
{children}
</Text_1.Text>
{endIconName ? (<Icon_1.Icon name={endIconName} size={Icon_1.IconSize.Sm} testID="end-icon" twClassName={`${getTextColor(pressed)} ml-1`} {...endIconProps}/>) : (endAccessory)}
</>)}
</react_native_1.Pressable>
</Text_1.Text>);
};
exports.TextButton = TextButton;
//# sourceMappingURL=TextButton.cjs.map