@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
147 lines (145 loc) • 4.56 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TopNavigationBarLogin = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Link = require("../Link");
var _Text = require("../Text");
var _TopNavigationBar = require("../TopNavigationBar");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for TopNavigationBarLogin component */
/**
* TopNavigationBarLogin component for rendering the top navigation bar for login flows (which is different from regular views)
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TopNavigationBarLogin.tsx | Example code}
*/
class TopNavigationBarLogin extends _react.default.Component {
get styles() {
return _reactNative.StyleSheet.create({
wrapper: {
width: '100%',
backgroundColor: '#000000',
flexDirection: 'column'
},
headerWrapper: {
height: 48,
maxHeight: 48,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-evenly'
},
headerItemWrapper: {
flex: 1
},
itemWrapper: {
flexDirection: 'row',
justifyContent: 'flex-end'
},
itemStyle: {},
headerTitleWrapper: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center'
},
headerTitle: {
textAlign: 'center'
},
pageTitleWrapper: {
paddingRight: 16,
paddingLeft: 16,
marginBottom: 14
},
pageHeaderTitle: {
color: (0, _colors.getColor)('textOnColor', 'dark')
},
subHeaderText: {
color: (0, _colors.getColor)('textOnColor', 'dark')
},
pageHeaderSubTitle: {
marginTop: 28
},
leftLink: {
paddingTop: 13,
paddingBottom: 13,
paddingLeft: 16,
paddingRight: 8
},
rightLink: {
paddingTop: 13,
paddingBottom: 13,
paddingRight: 16,
marginLeft: 'auto'
}
});
}
get baseHeader() {
const {
backOnPress,
backText,
rightItems,
rightLink
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.headerWrapper,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.headerItemWrapper,
children: !!(backText && backOnPress) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
text: backText,
forceDarkMode: true,
onPress: backOnPress,
backButtonMode: true,
style: this.styles.leftLink,
textBreakMode: "tail"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.headerItemWrapper,
children: rightLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
...rightLink,
forceDarkMode: true,
style: this.styles.rightLink,
textBreakMode: "tail"
}) : (0, _TopNavigationBar.headerBarGetItems)(rightItems || [], this.styles.itemWrapper, this.styles.itemStyle, 'right', true)
})]
});
}
get pageHeader() {
const {
title,
subTitle
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.pageTitleWrapper,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.pageHeaderTitle,
type: "heading-04",
text: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.pageHeaderSubTitle,
children: typeof subTitle === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.subHeaderText,
text: subTitle || ''
}) : subTitle || null
})]
});
}
render() {
const {
componentProps,
style
} = this.props;
const finalStyles = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: finalStyles,
accessibilityRole: "toolbar",
...(componentProps || {}),
children: [this.baseHeader, this.pageHeader]
});
}
}
exports.TopNavigationBarLogin = TopNavigationBarLogin;
//# sourceMappingURL=index.js.map