@metamask/design-system-react-native
Version:
129 lines • 6.87 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.ButtonBase = 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 ButtonAnimated_1 = require("../temp-components/ButtonAnimated/index.cjs");
const Spinner_1 = require("../temp-components/Spinner/index.cjs");
const TextOrChildren_1 = require("../temp-components/TextOrChildren/TextOrChildren.cjs");
const Text_1 = require("../Text/index.cjs");
const ButtonBase_constants_1 = require("./ButtonBase.constants.cjs");
const ButtonBase = ({ children, textProps, size = types_1.ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName = '', textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
const finalStartIconName = startIconName ?? startIconProps?.name;
const finalEndIconName = endIconName ?? endIconProps?.name;
// Generate accessibility label if not provided
const finalAccessibilityLabel = (0, react_1.useMemo)(() => {
if (accessibilityLabel) {
return accessibilityLabel;
}
// For loading state with loadingText, prioritize loadingText
if (isLoading && loadingText) {
return loadingText;
}
// If children is a string, use it as the label
if (typeof children === 'string') {
return children;
}
return undefined;
}, [accessibilityLabel, children, isLoading, loadingText]);
// Generate accessibility hint for loading state if not provided
const finalAccessibilityHint = (0, react_1.useMemo)(() => {
if (accessibilityHint) {
return accessibilityHint;
}
if (isLoading) {
return 'Button is currently loading, please wait';
}
return undefined;
}, [accessibilityHint, isLoading]);
// Create accessibilityState object with only truthy values
const accessibilityState = (0, react_1.useMemo)(() => {
const state = {};
if (isDisabled || isLoading) {
state.disabled = true;
}
if (isLoading) {
state.busy = true;
}
return state;
}, [isDisabled, isLoading]);
return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled || isLoading} accessibilityRole={accessibilityRole} accessibilityLabel={finalAccessibilityLabel} accessibilityHint={finalAccessibilityHint} accessibilityActions={accessibilityActions} onAccessibilityAction={onAccessibilityAction} accessibilityState={accessibilityState} accessible style={({ pressed }) => {
const containerClassName = typeof twClassName === 'function'
? twClassName(pressed)
: twClassName;
const baseContainerClassNames = `
flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden
${ButtonBase_constants_1.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}
${isDisabled ? 'opacity-50' : 'opacity-100'}
${isFullWidth ? 'w-full' : 'w-auto'}
${containerClassName}
`;
const computedStyle = [
tw `${baseContainerClassNames}`,
];
if (typeof style === 'function') {
const additionalStyle = style({ pressed });
if (additionalStyle) {
computedStyle.push(additionalStyle);
}
}
else if (style) {
computedStyle.push(style);
}
return computedStyle;
}} {...props}>
{({ pressed }) => (<>
<react_native_1.View style={tw `absolute inset-0 flex items-center justify-center ${isLoading ? 'opacity-100' : 'opacity-0'}`} testID="spinner-container">
<Spinner_1.Spinner color={textClassName
? textClassName(pressed)
: Icon_1.IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
numberOfLines: 1,
twClassName: textClassName ? textClassName(pressed) : '',
...spinnerProps?.loadingTextProps,
}} {...spinnerProps}/>
</react_native_1.View>
<react_native_1.View style={tw `flex-row items-center justify-center gap-x-2 ${isLoading ? 'opacity-0' : 'opacity-100'}`} testID="content-container">
{finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)}
<TextOrChildren_1.TextOrChildren textProps={{
variant: Text_1.TextVariant.BodyMd,
fontWeight: Text_1.FontWeight.Medium,
color: Text_1.TextColor.TextDefault,
twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,
...textProps,
}}>
{children}
</TextOrChildren_1.TextOrChildren>
{finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)}
</react_native_1.View>
</>)}
</ButtonAnimated_1.ButtonAnimated>);
};
exports.ButtonBase = ButtonBase;
//# sourceMappingURL=ButtonBase.cjs.map