@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
269 lines (267 loc) • 8.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getNavigationListItemStyle = exports.NavigationListItem = 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 _ = _interopRequireDefault(require("@carbon/icons/es/chevron--right/20"));
var _Checkbox = require("../Checkbox");
var _RadioButton = require("../RadioButton");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const getNavigationListItemStyle = () => {
return {
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: (0, _colors.getColor)('layer01'),
borderBottomColor: (0, _colors.getColor)('borderSubtle01'),
borderBottomWidth: 1,
minHeight: 48
};
};
/** Props for NavigationListItem component */
exports.getNavigationListItemStyle = getNavigationListItemStyle;
/**
* 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}
*/
class NavigationListItem extends _react.default.Component {
get textIconColor() {
const {
disabled
} = this.props;
return (0, _colors.getColor)(disabled ? 'textDisabled' : 'textPrimary');
}
get styles() {
const {
disabled,
subText,
reverseSubText,
unreadBadge
} = this.props;
const topPadding = subText && reverseSubText ? 29 : 13;
return _reactNative.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: (0, _colors.getColor)(disabled ? 'textDisabled' : 'textSecondary')
},
leftIcon: {
paddingTop: topPadding,
width: 48,
height: 48,
padding: 14
},
unreadBadge: {
width: 6,
height: 6,
backgroundColor: (0, _colors.getColor)('buttonPrimary'),
borderRadius: 6,
position: 'absolute',
left: 17,
top: topPadding + 9
},
rightIcon: {
paddingTop: topPadding,
paddingLeft: 8
},
rightText: {
paddingTop: topPadding,
paddingLeft: 8
},
rightTextItem: {
color: (0, _colors.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 _reactNative.Keyboard?.dismiss === 'function') {
_reactNative.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__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.mainText,
text: text,
breakMode: textBreakMode
}, "text")];
if (subText) {
items.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.unreadBadge
}, "unread"));
}
const textItem = items;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
...selectableProps
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.RadioButton, {
...selectableProps
});
}
return null;
}
getStateStyle = state => {
return state.pressed ? {
backgroundColor: (0, _colors.getColor)('layerActive01')
} : undefined;
};
render() {
const {
text,
disabled,
componentProps,
style,
leftIcon,
rightIcon,
hasChevron,
lastItem,
rightText,
onPress,
onLongPress
} = this.props;
const finalStyle = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper);
if (lastItem) {
finalStyle.borderBottomWidth = 0;
}
const mainIsClickable = !!(typeof onPress === 'function' || typeof onLongPress === 'function');
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: (0, _helpers.styleReferenceBreaker)(finalStyle, style),
children: [this.selectableAreaSide === 'left' && this.selectableArea, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
disabled: disabled,
style: state => mainIsClickable ? (0, _helpers.pressableFeedbackStyle)(state, this.styles.pressableStyle, this.getStateStyle) : this.styles.pressableStyle,
accessibilityLabel: text,
accessibilityRole: "button",
onPress: this.onPress,
onLongPress: this.onLongPress,
...(componentProps || {}),
children: [!!leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.leftIcon,
children: (0, _helpers.createIcon)(leftIcon, 20, 20, this.textIconColor)
}), this.contentArea, !!rightText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.rightText,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
text: rightText,
style: this.styles.rightTextItem
})
}), !!rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.rightIcon,
children: (0, _helpers.createIcon)(rightIcon, 20, 20, this.textIconColor)
}), !!hasChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.chevronIcon,
children: (0, _helpers.createIcon)(_.default, 20, 20, this.textIconColor)
})]
}), this.selectableAreaSide === 'right' && this.selectableArea]
});
}
}
exports.NavigationListItem = NavigationListItem;
//# sourceMappingURL=index.js.map