Added Enter Submit functionality (#2170)
* Added Enter Submit functionalit Signed-off-by: GitHub <noreply@github.com> * Added Enter Submit functionalit Signed-off-by: Anujeet Chatterjee <anujeet99@gmail.com> Author: Anujeet Chatterjee <anujeet99@gmail.com> Date: Thu Oct 1 19:48:27 2020 +0000 * welcomemodel -> welcomModal Signed-off-by: GitHub <noreply@github.com> Co-authored-by: Arkajyoti Mukherjee <32966391+arkajyotiMukherjee@users.noreply.github.com>
This commit is contained in:
Anujeet Chatterjee
GitHub
parent
a9ea060354
commit
bd365a0f09
|
|
@ -1,4 +1,4 @@
|
|||
welcomeModel:
|
||||
welcomeModal:
|
||||
title: Welcome to Litmus Portal,
|
||||
info: What do you want to name your project?
|
||||
button:
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ interface InputFieldProps {
|
|||
iconType?: string | undefined;
|
||||
styles?: Object;
|
||||
handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onKeyPress?: (event: React.KeyboardEvent) => void;
|
||||
}
|
||||
|
||||
const InputField: React.FC<InputFieldProps> = ({
|
||||
|
|
@ -33,6 +34,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
required,
|
||||
iconType,
|
||||
handleChange,
|
||||
onKeyPress,
|
||||
}) => {
|
||||
const LitmusTextFieldStylesExternal = useStyles();
|
||||
|
||||
|
|
@ -63,6 +65,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
onChange={handleChange}
|
||||
variant="filled"
|
||||
style={styles}
|
||||
onKeyPress={onKeyPress}
|
||||
InputProps={
|
||||
{
|
||||
classes,
|
||||
|
|
@ -86,6 +89,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
if (type === 'password' && validationError === true) {
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
error
|
||||
label={label}
|
||||
|
|
@ -121,6 +125,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
if (iconType === 'iconLeft' && validationError === false) {
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
label={label}
|
||||
helperText={helperText}
|
||||
|
|
@ -147,6 +152,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
if (iconType === 'iconLeft' && validationError === true) {
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
error
|
||||
label={label}
|
||||
|
|
@ -174,6 +180,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
if (iconType === 'iconRight' && validationError === false) {
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
label={label}
|
||||
helperText={helperText}
|
||||
|
|
@ -204,6 +211,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
) {
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
label={label}
|
||||
helperText={helperText}
|
||||
|
|
@ -230,6 +238,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
if (iconType === 'iconRight' && validationError === true) {
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
error
|
||||
label={label}
|
||||
|
|
@ -257,6 +266,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
if (iconType === 'iconLeftRight' && validationError === false) {
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
label={label}
|
||||
helperText={helperText}
|
||||
|
|
@ -288,6 +298,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
if (iconType === 'iconLeftRight' && validationError === true) {
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
error
|
||||
label={label}
|
||||
|
|
@ -321,6 +332,7 @@ const InputField: React.FC<InputFieldProps> = ({
|
|||
|
||||
return (
|
||||
<TextField
|
||||
onKeyPress={onKeyPress}
|
||||
className={LitmusTextFieldStylesExternal.inputArea}
|
||||
error={validationError}
|
||||
disabled={disabled}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const ModalPage: React.FC<ModalDataProps> = ({
|
|||
<div className={classes.insideModal}>
|
||||
<Icon />
|
||||
<div className={classes.heading}>
|
||||
{t('welcomeModel.title')}
|
||||
{t('welcomeModal.title')}
|
||||
<br />
|
||||
<strong> {setName} </strong>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
isDisabled={isError.current}
|
||||
handleClick={handleNext}
|
||||
>
|
||||
<div>{t('welcomeModel.button.continue')}</div>
|
||||
<div>{t('welcomeModal.button.continue')}</div>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -205,7 +205,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
<div className={classes.buttonDiv}>
|
||||
<div data-cy="backButton">
|
||||
<ButtonOutline isDisabled={false} handleClick={handleBack}>
|
||||
<>{t('welcomeModel.button.back')}</>
|
||||
<>{t('welcomeModal.button.back')}</>
|
||||
</ButtonOutline>
|
||||
</div>
|
||||
<div data-cy="startButton">
|
||||
|
|
@ -215,7 +215,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
handleClick={handleSubmit}
|
||||
data-cy="Start"
|
||||
>
|
||||
<div>{t('welcomeModel.button.letsStart')}</div>
|
||||
<div>{t('welcomeModal.button.letsStart')}</div>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -229,7 +229,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
handleClick={handleBack}
|
||||
data-cy="Back"
|
||||
>
|
||||
<>{t('welcomeModel.button.back')}</>
|
||||
<>{t('welcomeModal.button.back')}</>
|
||||
</ButtonOutline>
|
||||
</div>
|
||||
<div data-cy="startButton">
|
||||
|
|
@ -239,13 +239,28 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
handleClick={handleNext}
|
||||
data-cy="Continue"
|
||||
>
|
||||
<div>{t('welcomeModel.button.continue')}</div>
|
||||
<div>{t('welcomeModal.button.continue')}</div>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Submit on Enter Key-press
|
||||
const keyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (activeStep === 0) {
|
||||
handleNext();
|
||||
return;
|
||||
}
|
||||
if (activeStep === 3) {
|
||||
handleSubmit();
|
||||
return;
|
||||
}
|
||||
handleNext();
|
||||
}
|
||||
};
|
||||
|
||||
// Content of the steps based on active step count
|
||||
const getStepContent = (step: number) => {
|
||||
switch (step) {
|
||||
|
|
@ -256,7 +271,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
<div>
|
||||
<div className={classes.inputArea} data-cy="InputProjectName">
|
||||
<InputField
|
||||
label={t('welcomeModel.case-0.label')}
|
||||
label={t('welcomeModal.case-0.label')}
|
||||
value={info.project_name}
|
||||
required
|
||||
helperText={
|
||||
|
|
@ -271,6 +286,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
handleChange={(event) => {
|
||||
setData('project_name', event.target.value);
|
||||
}}
|
||||
onKeyPress={keyPress}
|
||||
/>
|
||||
</div>
|
||||
{selectiveButtons()}
|
||||
|
|
@ -281,7 +297,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
? 'Administrator'
|
||||
: userData.username
|
||||
}
|
||||
setText={t('welcomeModel.case-0.info')}
|
||||
setText={t('welcomeModal.case-0.info')}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
|
|
@ -291,7 +307,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
<div>
|
||||
<div className={classes.inputArea} data-cy="InputName">
|
||||
<InputField
|
||||
label={t('welcomeModel.case-1.label')}
|
||||
label={t('welcomeModal.case-1.label')}
|
||||
value={info.name}
|
||||
required
|
||||
helperText={
|
||||
|
|
@ -303,13 +319,14 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
handleChange={(event) => {
|
||||
setData('name', event.target.value);
|
||||
}}
|
||||
onKeyPress={keyPress}
|
||||
/>
|
||||
</div>
|
||||
{selectiveButtons()}
|
||||
</div>
|
||||
}
|
||||
setName={info.name}
|
||||
setText={t('welcomeModel.case-1.info')}
|
||||
setText={t('welcomeModal.case-1.info')}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
|
|
@ -322,7 +339,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
>
|
||||
<div className={classes.passwordArea}>
|
||||
<InputField
|
||||
label={t('welcomeModel.case-2.label')}
|
||||
label={t('welcomeModal.case-2.label')}
|
||||
type="password"
|
||||
required
|
||||
validationError={false}
|
||||
|
|
@ -334,11 +351,12 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
confirmPassword: values.confirmPassword,
|
||||
})
|
||||
}
|
||||
onKeyPress={keyPress}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.passwordArea}>
|
||||
<InputField
|
||||
label={t('welcomeModel.case-2.cnfLabel')}
|
||||
label={t('welcomeModal.case-2.cnfLabel')}
|
||||
type="password"
|
||||
required
|
||||
value={values.confirmPassword}
|
||||
|
|
@ -364,13 +382,14 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
confirmPassword: event.target.value,
|
||||
})
|
||||
}
|
||||
onKeyPress={keyPress}
|
||||
/>
|
||||
</div>
|
||||
{selectiveButtons()}
|
||||
</div>
|
||||
}
|
||||
setName={info.name}
|
||||
setText={t('welcomeModel.case-2.info')}
|
||||
setText={t('welcomeModal.case-2.info')}
|
||||
/>
|
||||
);
|
||||
case 3:
|
||||
|
|
@ -380,7 +399,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
<div className={classes.passwordSetterDiv}>
|
||||
<div className={classes.inputArea} data-cy="InputEmail">
|
||||
<InputField
|
||||
label={t('welcomeModel.case-3.label')}
|
||||
label={t('welcomeModal.case-3.label')}
|
||||
required
|
||||
value={info.email}
|
||||
helperText={
|
||||
|
|
@ -390,6 +409,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
handleChange={(event) => {
|
||||
setData('email', event.target.value);
|
||||
}}
|
||||
onKeyPress={keyPress}
|
||||
/>
|
||||
</div>
|
||||
{selectiveButtons()}
|
||||
|
|
@ -397,7 +417,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
|
|||
}
|
||||
// pass here corresponding name of user
|
||||
setName={info.name}
|
||||
setText={t('welcomeModel.case-3.info')}
|
||||
setText={t('welcomeModal.case-3.info')}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue