@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
56 lines (55 loc) • 3.6 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 { Button, Divider } from 'react-native-paper';
import { StyleSheet, View } from 'react-native';
import { MobileStepper } from '@brightlayer-ui/react-native-components';
import { useScreenDimensions } from '../../hooks/useScreenDimensions';
const makeStyles = (fullWidthButton) => StyleSheet.create({
button: {
width: fullWidthButton ? '100%' : 100,
},
previousButton: {
alignSelf: 'flex-start',
},
nextButton: {
alignSelf: 'flex-end',
},
});
/**
* Component that renders the workflow card action elements used for all screen components.
* @param {WorkflowCardActionsProps} props - props of WorkflowCardActions component
* @category Component
*/
export const WorkflowCardActions = (props) => {
const { divider = true, canGoPrevious, showPrevious, previousLabel, onPrevious, canGoNext, showNext, nextLabel, onNext, currentStep = 0, totalSteps = 5, fullWidthButton, stepperVariant = 'dots', style } = props, otherProps = __rest(props, ["divider", "canGoPrevious", "showPrevious", "previousLabel", "onPrevious", "canGoNext", "showNext", "nextLabel", "onNext", "currentStep", "totalSteps", "fullWidthButton", "stepperVariant", "style"]);
const defaultStyles = makeStyles(fullWidthButton);
const { isTablet } = useScreenDimensions();
const showStepperDots = totalSteps !== 0 && !fullWidthButton;
return (React.createElement(View, Object.assign({}, otherProps, { style: style }),
divider && React.createElement(Divider, { testID: "blui-workflow-card-action-divider", bold: true }),
React.createElement(MobileStepper, { styles: {
root: [
{
flex: 0,
justifyContent: 'space-between',
paddingHorizontal: isTablet ? 8 : 0,
paddingVertical: isTablet ? 8 : 0,
},
],
stepperContainer: !showStepperDots
? {
display: 'none',
}
: { display: 'flex' },
}, activeStep: currentStep, steps: totalSteps, leftButton: showPrevious ? (React.createElement(Button, { mode: "outlined", disabled: canGoPrevious === false || (typeof canGoPrevious === 'function' && !canGoPrevious()), testID: 'blui-workflow-card-actions-previous-button', style: [defaultStyles.previousButton, defaultStyles.button], onPress: onPrevious, labelStyle: { marginHorizontal: 10 } }, previousLabel)) : (React.createElement(View, { style: { width: fullWidthButton ? 0 : 100 } })), rightButton: showNext ? (React.createElement(Button, { mode: "contained", disabled: canGoNext === false || (typeof canGoNext === 'function' && !canGoNext()), onPress: onNext, testID: 'blui-workflow-card-actions-next-button', style: [defaultStyles.nextButton, defaultStyles.button], labelStyle: { marginHorizontal: 10 } }, nextLabel)) : (React.createElement(View, { style: { width: fullWidthButton ? 0 : 100 } })), variant: stepperVariant, "data-testid": 'workflow-card-stepper' })));
};