@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
114 lines (112 loc) • 3.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MenuItem = 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 MenuItem component */
/**
* MenuItem component for rendering an item to live in a menu or similar styled items
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Menu.tsx | Example code}
*/
class MenuItem extends _react.default.Component {
get styles() {
const {
divider,
lastItem
} = this.props;
return _reactNative.StyleSheet.create({
wrapper: {
padding: 14,
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
borderBottomColor: divider && !lastItem ? (0, _colors.getColor)('borderSubtle00') : undefined,
borderBottomWidth: divider && !lastItem ? 1 : undefined
},
icon: {
paddingTop: 2,
paddingRight: 14
}
});
}
get textColor() {
const {
disabled
} = this.props;
return (0, _colors.getColor)(disabled ? 'textDisabled' : 'textSecondary');
}
get iconColor() {
const {
iconColor,
disabled
} = this.props;
if (disabled) {
return this.textColor;
}
return iconColor || this.textColor;
}
get textStyle() {
const finalStyle = {
color: this.textColor,
flex: 1
};
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);
}
};
getStateStyle = state => {
return state.pressed ? {
backgroundColor: (0, _colors.getColor)('layerActive01')
} : undefined;
};
render() {
const {
text,
disabled,
onLongPress,
componentProps,
textType,
style,
textBreakMode,
icon
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
disabled: disabled,
style: state => (0, _helpers.pressableFeedbackStyle)(state, (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style), this.getStateStyle),
accessibilityLabel: text,
accessibilityRole: "menuitem",
onPress: this.onPress,
onLongPress: onLongPress,
...(componentProps || {}),
children: [!!icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.icon,
children: (0, _helpers.createIcon)(icon, 20, 20, this.iconColor)
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
breakMode: textBreakMode,
type: textType,
style: this.textStyle,
text: text
})]
});
}
}
exports.MenuItem = MenuItem;
//# sourceMappingURL=index.js.map