@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
112 lines (110 loc) • 3.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BottomNavigationBar = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Text = require("../Text");
var _typography = require("../../styles/typography");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for BottomNavigationBar component */
/**
* BottomNavigationBar component for rendering the bottom navigation bar
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomNavigationBar.tsx | Example code}
*/
class BottomNavigationBar extends _react.default.Component {
get styles() {
return _reactNative.StyleSheet.create({
wrapper: {
height: 49,
maxHeight: 49,
width: '100%',
backgroundColor: (0, _colors.getColor)('layer01'),
flexDirection: 'row',
borderTopColor: (0, _colors.getColor)('borderSubtle01'),
borderTopWidth: 1
},
itemStyle: {
borderTopColor: (0, _colors.getColor)('layer01'),
borderTopWidth: 4,
paddingTop: 6,
textAlign: 'center',
flex: 1,
paddingRight: 2,
paddingLeft: 2
},
icon: {
marginRight: 'auto',
marginLeft: 'auto'
},
textActive: {
...(0, _typography.SemiBoldFont)()
}
});
}
get items() {
const {
items
} = this.props;
const fontScaling = (0, _typography.fontScalingActive)();
return items.map((item, index) => {
const finalStyles = (0, _helpers.styleReferenceBreaker)(this.styles.itemStyle, item.style);
let finalColor = (0, _colors.getColor)('iconSecondary');
let useActiveText = false;
if (item.disabled) {
finalColor = (0, _colors.getColor)('iconDisabled');
} else if (item.active) {
finalColor = (0, _colors.getColor)('iconPrimary');
finalStyles.borderTopColor = (0, _colors.getColor)('borderInteractive');
useActiveText = true;
}
const getStateStyle = state => {
return state.pressed ? {
backgroundColor: (0, _colors.getColor)('layerActive01'),
borderTopColor: item.active ? (0, _colors.getColor)('borderInteractive') : (0, _colors.getColor)('layerActive01')
} : undefined;
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
style: state => (0, _helpers.pressableFeedbackStyle)(state, finalStyles, getStateStyle),
disabled: item.disabled,
onPress: item.onPress,
onLongPress: item.onLongPress,
accessibilityLabel: item.text,
accessibilityRole: "tab",
...(item.componentProps || {}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.icon,
children: (0, _helpers.createIcon)(item.icon, 20, 20, finalColor)
}), !fontScaling && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: (0, _helpers.styleReferenceBreaker)(useActiveText ? this.styles.textActive : {}, {
color: finalColor,
textAlign: 'center'
}),
text: item.text,
type: "label-01",
breakMode: "tail"
})]
}, index);
});
}
render() {
const {
componentProps,
style
} = this.props;
const finalStyles = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: finalStyles,
accessibilityRole: "tablist",
...(componentProps || {}),
children: this.items
});
}
}
exports.BottomNavigationBar = BottomNavigationBar;
//# sourceMappingURL=index.js.map