@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
263 lines (260 loc) • 7.39 kB
JavaScript
"use strict";
import React from 'react';
import { Keyboard, Pressable, StyleSheet, View } from 'react-native';
import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
import { getColor } from '../../styles/colors';
import { Text } from '../Text';
import ChevronRightIcon from '@carbon/icons/es/chevron--right/20';
import { Checkbox } from '../Checkbox';
import { RadioButton } from '../RadioButton';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const getNavigationListItemStyle = () => {
return {
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: getColor('layer01'),
borderBottomColor: getColor('borderSubtle01'),
borderBottomWidth: 1,
minHeight: 48
};
};
/** Props for NavigationListItem component */
/**
* NavigationListItem component for rendering a navigation list item (used by NavigationList)
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/NavigationList.tsx | Example code}
*/
export class NavigationListItem extends React.Component {
get textIconColor() {
const {
disabled
} = this.props;
return getColor(disabled ? 'textDisabled' : 'textPrimary');
}
get styles() {
const {
disabled,
subText,
reverseSubText,
unreadBadge
} = this.props;
const topPadding = subText && reverseSubText ? 29 : 13;
return StyleSheet.create({
wrapper: getNavigationListItemStyle(),
pressableStyle: {
paddingRight: 14,
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start'
},
contentWrapper: {
flex: 1,
paddingTop: 13,
paddingBottom: 13,
paddingLeft: unreadBadge ? 30 : 16,
position: 'relative'
},
mainText: {
color: this.textIconColor
},
subText: {
color: getColor(disabled ? 'textDisabled' : 'textSecondary')
},
leftIcon: {
paddingTop: topPadding,
width: 48,
height: 48,
padding: 14
},
unreadBadge: {
width: 6,
height: 6,
backgroundColor: getColor('buttonPrimary'),
borderRadius: 6,
position: 'absolute',
left: 17,
top: topPadding + 9
},
rightIcon: {
paddingTop: topPadding,
paddingLeft: 8
},
rightText: {
paddingTop: topPadding,
paddingLeft: 8
},
rightTextItem: {
color: getColor(disabled ? 'textDisabled' : 'textSecondary')
},
chevronIcon: {
paddingTop: topPadding,
paddingLeft: 8
},
selectableArea: {
paddingTop: topPadding,
width: 48,
height: 48,
justifyContent: 'center'
}
});
}
onPress = event => {
const {
dismissKeyboardOnPress,
onPress,
id,
onSelectableRowChange,
selected
} = this.props;
if (dismissKeyboardOnPress && typeof Keyboard?.dismiss === 'function') {
Keyboard.dismiss();
}
if (typeof onPress === 'function') {
onPress(event, id);
} else if (typeof onSelectableRowChange === 'function') {
onSelectableRowChange(!selected, id);
}
};
onLongPress = event => {
const {
onLongPress,
id
} = this.props;
if (typeof onLongPress === 'function') {
onLongPress(event, id);
}
};
get contentArea() {
const {
customContent,
text,
subText,
textBreakMode,
reverseSubText,
unreadBadge
} = this.props;
const items = [/*#__PURE__*/_jsx(Text, {
style: this.styles.mainText,
text: text,
breakMode: textBreakMode
}, "text")];
if (subText) {
items.push(/*#__PURE__*/_jsx(Text, {
style: this.styles.subText,
type: "helper-text-01",
text: subText,
breakMode: reverseSubText ? 'tail' : textBreakMode
}, "subText"));
}
if (reverseSubText) {
items.reverse();
}
if (unreadBadge) {
items.unshift(/*#__PURE__*/_jsx(View, {
style: this.styles.unreadBadge
}, "unread"));
}
const textItem = items;
return /*#__PURE__*/_jsx(View, {
style: this.styles.contentWrapper,
children: customContent ? customContent : textItem
});
}
get selectableAreaSide() {
const {
selectableType,
selectableSide
} = this.props;
if (selectableType) {
return selectableSide || 'left';
}
return undefined;
}
get selectableArea() {
const {
selectableType,
selected,
onSelectableRowChange,
id,
text,
disabled,
selectableText
} = this.props;
if (selectableType) {
const selectableProps = {
label: text,
id: id || '',
checked: !!selected,
hideLabel: true,
disabled: disabled,
accessibleText: selectableText,
style: this.styles.selectableArea,
onPress: value => {
if (typeof onSelectableRowChange === 'function') {
onSelectableRowChange(value, id);
}
}
};
return selectableType === 'checkbox' ? /*#__PURE__*/_jsx(Checkbox, {
...selectableProps
}) : /*#__PURE__*/_jsx(RadioButton, {
...selectableProps
});
}
return null;
}
getStateStyle = state => {
return state.pressed ? {
backgroundColor: getColor('layerActive01')
} : undefined;
};
render() {
const {
text,
disabled,
componentProps,
style,
leftIcon,
rightIcon,
hasChevron,
lastItem,
rightText,
onPress,
onLongPress
} = this.props;
const finalStyle = styleReferenceBreaker(this.styles.wrapper);
if (lastItem) {
finalStyle.borderBottomWidth = 0;
}
const mainIsClickable = !!(typeof onPress === 'function' || typeof onLongPress === 'function');
return /*#__PURE__*/_jsxs(View, {
style: styleReferenceBreaker(finalStyle, style),
children: [this.selectableAreaSide === 'left' && this.selectableArea, /*#__PURE__*/_jsxs(Pressable, {
disabled: disabled,
style: state => mainIsClickable ? pressableFeedbackStyle(state, this.styles.pressableStyle, this.getStateStyle) : this.styles.pressableStyle,
accessibilityLabel: text,
accessibilityRole: "button",
onPress: this.onPress,
onLongPress: this.onLongPress,
...(componentProps || {}),
children: [!!leftIcon && /*#__PURE__*/_jsx(View, {
style: this.styles.leftIcon,
children: createIcon(leftIcon, 20, 20, this.textIconColor)
}), this.contentArea, !!rightText && /*#__PURE__*/_jsx(View, {
style: this.styles.rightText,
children: /*#__PURE__*/_jsx(Text, {
text: rightText,
style: this.styles.rightTextItem
})
}), !!rightIcon && /*#__PURE__*/_jsx(View, {
style: this.styles.rightIcon,
children: createIcon(rightIcon, 20, 20, this.textIconColor)
}), !!hasChevron && /*#__PURE__*/_jsx(View, {
style: this.styles.chevronIcon,
children: createIcon(ChevronRightIcon, 20, 20, this.textIconColor)
})]
}), this.selectableAreaSide === 'right' && this.selectableArea]
});
}
}
//# sourceMappingURL=index.js.map