@metamask/design-system-react-native
Version:
78 lines • 3.55 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.ButtonPrimary = void 0;
const react_1 = __importStar(require("react"));
const ButtonBase_1 = require("../../../ButtonBase/index.cjs");
const Icon_1 = require("../../../Icon/index.cjs");
const Text_1 = require("../../../Text/index.cjs");
const ButtonPrimary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, twClassName = '', style, ...props }) => {
const getContainerClassName = (0, react_1.useCallback)((pressed) => {
const classNameStr = typeof twClassName === 'function' ? twClassName(pressed) : twClassName;
if (isInverse && isDanger) {
return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${classNameStr}`;
}
if (isDanger) {
return `${pressed || isLoading ? 'bg-error-default-pressed' : 'bg-error-default'} ${classNameStr}`;
}
if (isInverse) {
return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${classNameStr}`;
}
return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${classNameStr}`;
}, [isInverse, isDanger, isLoading, twClassName]);
const getTextClassName = (0, react_1.useCallback)((pressed) => {
if (isInverse && isDanger) {
return pressed || isLoading
? 'text-error-default-pressed'
: 'text-error-default';
}
if (isDanger) {
return 'text-primary-inverse';
}
if (isInverse) {
return 'text-default';
}
return 'text-primary-inverse';
}, [isInverse, isDanger, isLoading]);
return (<ButtonBase_1.ButtonBase textProps={{
variant: Text_1.TextVariant.BodyMd,
fontWeight: Text_1.FontWeight.Medium,
numberOfLines: 1,
ellipsizeMode: 'clip',
...textProps,
}} spinnerProps={{
...spinnerProps,
}} startIconProps={{
size: Icon_1.IconSize.Sm,
...startIconProps,
}} endIconProps={{
size: Icon_1.IconSize.Sm,
...endIconProps,
}} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
{children}
</ButtonBase_1.ButtonBase>);
};
exports.ButtonPrimary = ButtonPrimary;
//# sourceMappingURL=ButtonPrimary.cjs.map