@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
82 lines (81 loc) • 4.4 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
import { Icon } from '@brightlayer-ui/react-native-components';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
import { Text } from 'react-native-paper';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Color from 'color';
import { useScreenDimensions } from '../../hooks/useScreenDimensions';
const makeStyles = (theme, isTablet, backgroundColor, textColor) => StyleSheet.create({
header: {
height: 64,
paddingHorizontal: isTablet ? 24 : 16,
paddingVertical: 12,
alignItems: 'center',
flexDirection: 'row',
},
mobileHeader: {
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.primaryContainer,
},
tabletHeader: {
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'transparent',
},
headerContent: {
marginLeft: 16,
justifyContent: 'center',
color: textColor !== null && textColor !== void 0 ? textColor : (isTablet ? theme.colors.onSurface : theme.colors.onPrimaryContainer),
},
headerText: {
color: textColor !== null && textColor !== void 0 ? textColor : (isTablet ? theme.colors.onSurface : theme.colors.onPrimaryContainer),
},
});
/**
* Component that renders the Header for the workflow card.
*
* @param {WorkflowCardHeaderProps} props - Props of WorkflowCardHeader component
*
* @category Component
*/
export const WorkflowCardHeader = (props) => {
const { title, subTitle, backgroundColor, textColor, iconColor, icon, style, onIconPress } = props, otherprops = __rest(props, ["title", "subTitle", "backgroundColor", "textColor", "iconColor", "icon", "style", "onIconPress"]);
const theme = useExtendedTheme();
const { isTablet } = useScreenDimensions();
const defaultStyles = makeStyles(theme, isTablet, backgroundColor, textColor);
const insets = useSafeAreaInsets();
const statusBarHeight = insets.top;
const getIcon = () => {
if (icon) {
return React.createElement(Icon, { source: icon, color: iconColor !== null && iconColor !== void 0 ? iconColor : theme.colors.onSurface, size: 24 });
}
return React.createElement(Icon, { source: { name: 'close' }, color: iconColor !== null && iconColor !== void 0 ? iconColor : theme.colors.onSurface, size: 24 });
};
return (React.createElement(View, null,
!isTablet && (React.createElement(View, { style: {
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.primaryContainer,
height: statusBarHeight,
} },
React.createElement(StatusBar, { barStyle: Color(backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.primaryContainer).isDark()
? 'light-content'
: 'dark-content' }))),
isTablet && (React.createElement(StatusBar, { barStyle: Color(theme.colors.primary).isDark() ? 'light-content' : 'dark-content' })),
React.createElement(View, Object.assign({ style: [
isTablet ? defaultStyles.tabletHeader : defaultStyles.mobileHeader,
defaultStyles.header,
style,
] }, otherprops),
React.createElement(TouchableOpacity, { testID: "blui-workflow-card-header-icon", onPress: onIconPress }, getIcon()),
React.createElement(View, { style: defaultStyles.headerContent },
React.createElement(Text, { variant: "titleLarge", style: [defaultStyles.headerText] }, title),
subTitle && (React.createElement(Text, { variant: "bodyMedium", style: [defaultStyles.headerText] }, subTitle))))));
};