@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
256 lines (253 loc) • 8.32 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.headerBarGetItems = exports.TopNavigationBar = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Button = require("../Button");
var _Link = require("../Link");
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 }; }
const headerBarGetItems = (items, style, itemStyle, type, forceDarkMode) => {
const finalWrapperStyles = (0, _helpers.styleReferenceBreaker)(style);
if (type === 'right') {
finalWrapperStyles.justifyContent = 'flex-end';
} else if (type === 'left') {
finalWrapperStyles.justifyContent = 'flex-start';
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: finalWrapperStyles,
children: items.map((item, index) => {
const finalStyles = (0, _helpers.styleReferenceBreaker)(itemStyle, item.style);
let finalColor = (0, _colors.getColor)('iconPrimary', forceDarkMode ? 'dark' : undefined);
if (item.disabled) {
finalColor = (0, _colors.getColor)('iconDisabled', forceDarkMode ? 'dark' : undefined);
} else if (item.active) {
finalStyles.backgroundColor = (0, _colors.getColor)('backgroundActive', forceDarkMode ? 'dark' : undefined);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: finalStyles,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
kind: "ghost",
overrideColor: finalColor,
disabled: item.disabled,
icon: item.icon,
iconOnlyMode: true,
text: item.text,
onPress: item.onPress,
onLongPress: item.onLongPress
})
}, index);
})
});
};
/** Props for TopNavigationBar component */
exports.headerBarGetItems = headerBarGetItems;
/**
* TopNavigationBar component for rendering a navigation bar at the top of the page (with title and actions)
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TopNavigationBar.tsx | Example code}
*/
class TopNavigationBar extends _react.default.Component {
state = {
leftLinkWidth: 100,
rightLinkWidth: 100
};
get styles() {
return _reactNative.StyleSheet.create({
wrapper: {
width: '100%',
backgroundColor: (0, _colors.getColor)('layer01'),
flexDirection: 'column',
borderBottomColor: (0, _colors.getColor)('borderSubtle01'),
borderBottomWidth: 1
},
headerWrapper: {
minHeight: 48,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-evenly'
},
headerItemWrapper: {
minWidth: 100
},
itemWrapper: {
flexDirection: 'row'
},
itemStyle: {},
headerTitleWrapper: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center'
},
headerTitle: {
textAlign: 'center'
},
headerSubTitle: {
textAlign: 'center',
color: (0, _colors.getColor)('textSecondary')
},
pageTitleWrapper: {
paddingRight: 16,
paddingLeft: 16,
marginBottom: 8
},
pageHeaderTitle: {
...(0, _typography.RegularFont)()
},
pageHeaderSubTitle: {
color: (0, _colors.getColor)('textSecondary')
},
additionalContent: {
paddingLeft: 16,
paddingRight: 16,
paddingBottom: 16
},
leftLink: {
paddingTop: 13,
paddingBottom: 13,
paddingLeft: 16,
paddingRight: 8
},
rightLink: {
paddingTop: 13,
paddingBottom: 13,
paddingRight: 16,
marginLeft: 'auto'
}
});
}
getLeftLinkLayout = event => {
this.setState({
leftLinkWidth: event.nativeEvent.layout.width || 100
});
};
getRightLinkLayout = event => {
this.setState({
rightLinkWidth: event.nativeEvent.layout.width || 100
});
};
get headerTitleArea() {
const {
title,
subTitle,
headerMode
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.headerTitleWrapper,
children: [!headerMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.headerTitle,
type: "heading-compact-02",
text: title,
breakMode: "tail"
}), !!subTitle && !headerMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.headerSubTitle,
type: "helper-text-01",
text: subTitle,
breakMode: "tail"
})]
});
}
get baseHeader() {
const {
leftItems,
leftLink,
rightItems,
rightLink
} = this.props;
const {
leftLinkWidth,
rightLinkWidth
} = this.state;
const wrapperStyle = (0, _helpers.styleReferenceBreaker)(this.styles.headerItemWrapper);
if (!leftLink && !rightLink) {
if ((!leftItems || !leftItems?.length) && (!rightItems || !rightItems?.length)) {
wrapperStyle.minWidth = 0;
} else if (leftItems?.length === 1 && rightItems?.length === 1 || leftItems?.length === 1 && !rightItems?.length || !leftItems?.length && rightItems?.length === 1) {
wrapperStyle.minWidth = 50;
}
} else {
wrapperStyle.minWidth = (leftLinkWidth > rightLinkWidth ? leftLinkWidth : rightLinkWidth) || 100;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.headerWrapper,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: wrapperStyle,
children: leftLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
...leftLink,
style: this.styles.leftLink,
textBreakMode: "tail",
componentProps: {
onLayout: this.getLeftLinkLayout
}
}) : headerBarGetItems(leftItems || [], this.styles.itemWrapper, this.styles.itemStyle, 'left')
}), this.headerTitleArea, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: wrapperStyle,
children: rightLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
...rightLink,
style: this.styles.rightLink,
textBreakMode: "tail",
componentProps: {
onLayout: this.getRightLinkLayout
}
}) : headerBarGetItems(rightItems || [], this.styles.itemWrapper, this.styles.itemStyle, 'right')
})]
});
}
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-05",
text: title
}), !!subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.pageHeaderSubTitle,
type: "helper-text-01",
text: subTitle
})]
});
}
get additionalContent() {
const {
additionalHeaderContent
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.additionalContent,
children: additionalHeaderContent
});
}
get mainView() {
const {
headerMode,
additionalHeaderContent
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [this.baseHeader, !!headerMode && this.pageHeader, !!additionalHeaderContent && this.additionalContent]
});
}
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: "toolbar",
...(componentProps || {}),
children: this.mainView
});
}
}
exports.TopNavigationBar = TopNavigationBar;
//# sourceMappingURL=index.js.map