@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
104 lines (103 loc) • 6.79 kB
JavaScript
import React, { useCallback, useRef, useState } from 'react';
import { ErrorManager, WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader, } from '../../components';
import { ScrollView, TouchableOpacity, View, StyleSheet } from 'react-native';
import { Checkbox, Text } from 'react-native-paper';
import { Icon } from '@brightlayer-ui/react-native-components';
import { WebView } from 'react-native-webview';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
import { useTranslation } from 'react-i18next';
const makeStyles = (theme) => StyleSheet.create({
container: {
flex: 1,
},
retryContainer: {
display: 'flex',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
retryBody: {
alignItems: 'center',
justifyContent: 'center',
},
text: { letterSpacing: 0, paddingLeft: 10 },
webview: {
flex: 1,
backgroundColor: theme.colors.background,
},
checkbox: {
paddingLeft: 0,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
checkboxLabel: { flexGrow: 0, flexShrink: 0, textAlign: 'left' },
});
/**
* Base Component that renders a screen displaying the EULA and requests acceptance via a checkbox.
*
* @param {EulaScreenProps} props - Basic props of EULA Screen Base component
*
* @category Component
*/
export const EulaScreenBase = (props) => {
var _a, _b, _c, _d, _e, _f;
const { onEulaAcceptedChange, eulaContent, checkboxLabel, html, initialCheckboxValue, checkboxProps, errorDisplayConfig, refreshConfig, } = props;
const cardBaseProps = (_a = props.WorkflowCardBaseProps) !== null && _a !== void 0 ? _a : {};
const headerProps = (_b = props.WorkflowCardHeaderProps) !== null && _b !== void 0 ? _b : {};
const cardBodyProps = (_c = props.WorkflowCardBodyProps) !== null && _c !== void 0 ? _c : {};
const actionsProps = (_d = props.WorkflowCardActionsProps) !== null && _d !== void 0 ? _d : {};
const theme = useExtendedTheme();
const { t } = useTranslation();
const scrollViewRef = useRef(null);
const contentSizeRef = useRef({ width: 0, height: 0 });
const defaultStyles = makeStyles(theme);
const [eulaAccepted, setEulaAccepted] = useState(initialCheckboxValue !== null && initialCheckboxValue !== void 0 ? initialCheckboxValue : false);
const [checkboxEnable, setCheckboxEnable] = useState(eulaAccepted);
const handleEulaAcceptedChecked = useCallback((accepted) => {
setEulaAccepted(accepted);
onEulaAcceptedChange === null || onEulaAcceptedChange === void 0 ? void 0 : onEulaAcceptedChange(accepted);
}, [onEulaAcceptedChange]);
const isCloseToBottom = ({ layoutMeasurement, contentOffset, contentSize, }) => {
const paddingToBottom = 30;
if (eulaAccepted) {
return true;
}
return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
};
const handleLayout = (event) => {
const { width, height } = event.nativeEvent.layout;
contentSizeRef.current = { width, height };
};
return (React.createElement(WorkflowCard, Object.assign({}, cardBaseProps),
React.createElement(WorkflowCardHeader, Object.assign({}, headerProps)),
React.createElement(WorkflowCardBody, Object.assign({ scrollable: false }, cardBodyProps),
React.createElement(View, { style: defaultStyles.container }, (refreshConfig === null || refreshConfig === void 0 ? void 0 : refreshConfig.showRefreshButton) ? (React.createElement(View, { style: defaultStyles.retryContainer },
React.createElement(TouchableOpacity, { style: defaultStyles.retryBody, onPress: refreshConfig === null || refreshConfig === void 0 ? void 0 : refreshConfig.onRefresh },
React.createElement(Icon, { source: { name: 'refresh' } }),
React.createElement(Text, { variant: 'titleSmall', style: defaultStyles.text }, (_e = refreshConfig === null || refreshConfig === void 0 ? void 0 : refreshConfig.refreshButtonLabel) !== null && _e !== void 0 ? _e : t('bluiCommon:MESSAGES.RETRY'))))) : (React.createElement(View, { style: defaultStyles.container },
html ? (React.createElement(WebView, { originWhitelist: ['*'], testID: "blui-eula-web-view", source: { html: eulaContent, baseUrl: '' }, scalesPageToFit: false, nestedScrollEnabled: true, onScroll: ({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent)) {
setCheckboxEnable(true);
}
}, injectedJavaScript: `
function updateScroll() {
window.scrollTo(1, 0);
}
updateScroll();
`, scrollEventThrottle: 10, forceDarkOn: theme.dark ? true : false, style: defaultStyles.webview })) : (React.createElement(ScrollView, { onScroll: ({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent)) {
setCheckboxEnable(true);
}
}, testID: "blui-eula-scroll-view", ref: scrollViewRef, scrollEventThrottle: 10, nestedScrollEnabled: true, onContentSizeChange: (w, height) => {
if (eulaAccepted === false) {
setCheckboxEnable(height <= contentSizeRef.current.height);
}
}, onLayout: handleLayout },
React.createElement(Text, { variant: 'bodyLarge', style: defaultStyles.text }, eulaContent))),
React.createElement(ErrorManager, Object.assign({}, errorDisplayConfig),
React.createElement(Checkbox.Item, Object.assign({ testID: "blui-eula-checkbox", color: (_f = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.color) !== null && _f !== void 0 ? _f : theme.colors.primary, disabled: !checkboxEnable, status: eulaAccepted ? 'checked' : 'unchecked', label: checkboxLabel, onPress: () => {
handleEulaAcceptedChecked(!eulaAccepted);
}, style: [defaultStyles.checkbox, checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.style], labelStyle: [defaultStyles.checkboxLabel, checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.labelStyle], position: "leading", mode: "android" }, checkboxProps))))))),
React.createElement(WorkflowCardActions, Object.assign({}, actionsProps, { canGoNext: eulaAccepted && actionsProps.canGoNext }))));
};