@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
80 lines (79 loc) • 3.39 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 { ImageBackground, StyleSheet } from 'react-native';
import { Card } from 'react-native-paper';
import { useScreenDimensions } from '../../hooks/useScreenDimensions';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Spinner } from '../Spinner';
import { WorkflowCardHeader } from './WorkflowCardHeader';
const defaultImage = require('../../assets/images/background.png');
const MAX_CARD_HEIGHT = 730;
const MAX_CARD_WIDTH = 450;
const makeStyles = ({ insets, theme, }) => StyleSheet.create({
mobile: {
paddingBottom: insets.bottom,
height: '100%',
width: '100%',
borderRadius: 0,
},
tablet: {
height: MAX_CARD_HEIGHT,
width: MAX_CARD_WIDTH,
borderRadius: theme.roundness * 6,
overflow: 'hidden',
},
});
function hasWorkflowCardHeaderRecursive(children) {
return React.Children.toArray(children).some((child) => child.type === WorkflowCardHeader);
}
/**
* Component that renders the workflow card that is used for all screen components.
*
* @param {WorkflowCardBaseProps} props - Props of WorkflowCardBase component
*
* @category Component
*/
export const WorkflowCard = (props) => {
const { loading, backgroundImage, children, style } = props, otherImageProps = __rest(props, ["loading", "backgroundImage", "children", "style"]);
const theme = useExtendedTheme();
const { isTablet, width, height } = useScreenDimensions();
const hasWorkflowCardHeader = hasWorkflowCardHeaderRecursive(children);
const insets = useSafeAreaInsets();
const styles = makeStyles({ insets, theme });
return (React.createElement(ImageBackground, Object.assign({ source: backgroundImage !== null && backgroundImage !== void 0 ? backgroundImage : defaultImage, resizeMode: "repeat", style: [
{
flex: 1,
height: '100%',
width: '100%',
justifyContent: 'center',
alignItems: isTablet ? 'center' : 'stretch',
backgroundColor: theme.colors.primary,
},
...(Array.isArray(style) ? style : [style]),
] }, otherImageProps),
React.createElement(Card, { style: {
maxHeight: height,
maxWidth: width,
borderRadius: isTablet ? theme.roundness * 6 : 0,
}, contentStyle: [
isTablet ? styles.tablet : styles.mobile,
{
backgroundColor: theme.colors.surfaceContainer,
paddingTop: !isTablet && !hasWorkflowCardHeader ? insets.top : 0,
position: 'relative',
},
] },
children,
loading && React.createElement(Spinner, { visible: loading }))));
};