@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
261 lines (259 loc) • 8.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Button = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _helpers = require("../../helpers");
var _colors = require("../../styles/colors");
var _Text = require("../Text");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for Button component */
/**
* Button component for rendering a button
* To not have a button be pressable 100% of screen format parent or pass style appropriately. `alignSelf: 'flex-start'` is useful.
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Button.tsx | Example code}
*/
class Button extends _react.default.Component {
basicButton = {
padding: 16,
paddingTop: 13,
paddingBottom: 13,
paddingRight: 48,
minHeight: 48,
minWidth: 48
};
get styles() {
return _reactNative.StyleSheet.create({
iconStyle: {
position: 'absolute',
top: 14,
bottom: 14,
right: 14,
justifyContent: 'center'
}
});
}
getBackgroundColor(active) {
const {
kind,
disabled,
forceTheme
} = this.props;
switch (kind) {
case 'secondary':
return (0, _colors.getColor)(disabled ? 'buttonDisabled' : active ? 'buttonSecondaryActive' : 'buttonSecondary', forceTheme);
case 'tertiary':
return active ? (0, _colors.getColor)('buttonTertiaryActive', forceTheme) : 'transparent';
case 'high-contrast':
return active ? (0, _colors.getColor)('buttonHighContrastActive', forceTheme) : 'transparent';
case 'high-contrast-inverse':
return active ? (0, _colors.getColor)('buttonHighContrastInverseActive', forceTheme) : 'transparent';
case 'danger':
return (0, _colors.getColor)(disabled ? 'buttonDisabled' : active ? 'buttonDangerActive' : 'buttonDangerPrimary', forceTheme);
case 'ghost':
return active ? (0, _colors.getColor)('layerActive01', forceTheme) : 'transparent';
case 'danger-ghost':
case 'danger-tertiary':
return active ? (0, _colors.getColor)('buttonDangerActive', forceTheme) : 'transparent';
case 'primary':
default:
return (0, _colors.getColor)(disabled ? 'buttonDisabled' : active ? 'buttonPrimaryActive' : 'buttonPrimary', forceTheme);
}
}
getStateStyle = state => {
const {
kind
} = this.props;
const keepBorder = ['high-contrast', 'high-contrast-inverse', 'tertiary', 'danger-tertiary'].includes(kind);
return state.pressed ? {
backgroundColor: this.getBackgroundColor(true),
borderWidth: keepBorder ? 1 : 0
} : undefined;
};
get buttonStyle() {
const {
kind,
style,
disabled,
iconOnlyMode,
icon,
overrideColor,
disableDesignPadding,
forceTheme
} = this.props;
let finalStyle = {};
switch (kind) {
case 'secondary':
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor()
}, this.basicButton);
break;
case 'tertiary':
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor(),
borderColor: (0, _colors.getColor)(disabled ? 'buttonDisabled' : 'buttonTertiary', forceTheme),
borderWidth: 1
}, this.basicButton);
break;
case 'high-contrast':
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor(),
borderColor: (0, _colors.getColor)(disabled ? 'buttonDisabled' : 'buttonHighContrast', forceTheme),
borderWidth: 1
}, this.basicButton);
break;
case 'high-contrast-inverse':
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor(),
borderColor: (0, _colors.getColor)(disabled ? 'buttonDisabled' : 'buttonHighContrastInverse', forceTheme),
borderWidth: 1
}, this.basicButton);
break;
case 'danger-tertiary':
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor(),
borderColor: (0, _colors.getColor)(disabled ? 'buttonDisabled' : 'buttonDangerSecondary', forceTheme),
borderWidth: 1
}, this.basicButton);
break;
case 'danger':
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor()
}, this.basicButton);
break;
case 'danger-ghost':
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor()
}, this.basicButton);
break;
case 'ghost':
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor()
}, this.basicButton);
break;
case 'primary':
default:
finalStyle = (0, _helpers.styleReferenceBreaker)({
backgroundColor: this.getBackgroundColor()
}, this.basicButton);
break;
}
if (icon && iconOnlyMode) {
finalStyle.paddingRight = 16;
finalStyle.paddingLeft = 16;
finalStyle.maxWidth = 48;
}
if (disableDesignPadding) {
finalStyle.paddingRight = 16;
}
if (overrideColor) {
finalStyle.borderColor = overrideColor;
}
return (0, _helpers.styleReferenceBreaker)(finalStyle, style);
}
get iconTextColor() {
const {
kind,
disabled,
overrideColor,
forceTheme
} = this.props;
switch (kind) {
case 'danger-ghost':
case 'danger-tertiary':
return overrideColor || (0, _colors.getColor)(disabled ? 'textDisabled' : 'buttonDangerSecondary', forceTheme);
case 'tertiary':
return overrideColor || (0, _colors.getColor)(disabled ? 'textDisabled' : 'buttonTertiary', forceTheme);
case 'high-contrast':
return overrideColor || (0, _colors.getColor)(disabled ? 'textDisabled' : 'buttonHighContrast', forceTheme);
case 'high-contrast-inverse':
return overrideColor || (0, _colors.getColor)(disabled ? 'textDisabled' : 'buttonHighContrastInverse', forceTheme);
case 'ghost':
return overrideColor || (0, _colors.getColor)(disabled ? 'textDisabled' : 'linkPrimary', forceTheme);
case 'primary':
case 'secondary':
case 'danger':
default:
return overrideColor || (0, _colors.getColor)(disabled ? 'textOnColorDisabled' : 'textOnColor', forceTheme);
}
}
get textStyle() {
const {
kind
} = this.props;
let finalStyle = {};
switch (kind) {
case 'tertiary':
case 'ghost':
case 'high-contrast':
case 'high-contrast-inverse':
finalStyle = (0, _helpers.styleReferenceBreaker)({
color: this.iconTextColor,
textAlign: 'left'
});
break;
case 'primary':
case 'secondary':
case 'danger':
default:
finalStyle = (0, _helpers.styleReferenceBreaker)({
color: this.iconTextColor,
textAlign: 'left'
});
break;
}
return finalStyle;
}
onPress = event => {
const {
dismissKeyboardOnPress,
onPress
} = this.props;
if (dismissKeyboardOnPress && typeof _reactNative.Keyboard?.dismiss === 'function') {
_reactNative.Keyboard.dismiss();
}
if (typeof onPress === 'function') {
onPress(event);
}
};
render() {
const {
text,
disabled,
onLongPress,
componentProps,
icon,
iconOnlyMode,
textType,
forwardRef,
breakMode,
textComponentProps
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
disabled: disabled,
style: state => (0, _helpers.pressableFeedbackStyle)(state, this.buttonStyle, this.getStateStyle),
accessibilityLabel: text,
accessibilityRole: "button",
onPress: this.onPress,
onLongPress: onLongPress,
ref: forwardRef,
...(componentProps || {}),
children: [!iconOnlyMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
type: textType || 'body-compact-02',
style: this.textStyle,
text: text,
breakMode: breakMode || 'tail',
componentProps: textComponentProps
}), !!icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.iconStyle,
children: (0, _helpers.createIcon)(icon, 20, 20, this.iconTextColor)
})]
});
}
}
exports.Button = Button;
//# sourceMappingURL=index.js.map