diff --git a/src/components/FormWizard.tsx b/src/components/FormWizard.tsx index e166f51..a98b93c 100644 --- a/src/components/FormWizard.tsx +++ b/src/components/FormWizard.tsx @@ -40,6 +40,7 @@ const FormWizard: React.FC & { removeBackgroundTabTransparentColor = "", onComplete, onTabChange, + rtl = false, }: FormWizardProps, ref ) => { @@ -243,10 +244,12 @@ const FormWizard: React.FC & { }; const isVertical = layout === "vertical" ? "vertical" : "horizontal"; const isInline = inlineStep ? "inline" : ""; + const isRtl = rtl ? "rtl" : ""; return (
{/* if title is element render other wise render string props */} @@ -296,78 +299,160 @@ const FormWizard: React.FC & {
- {currentStep > 0 && ( + {rtl ? ( <> - {backButtonTemplate ? ( - backButtonTemplate(handlePrevious) - ) : ( -
- - {backButtonText} - -
+ {currentStep < steps.length - 1 && ( + <> + {nextButtonTemplate ? ( + nextButtonTemplate(handleNext) + ) : ( +
+ + {nextButtonText} + +
+ )} + )} - - )} - {currentStep < steps.length - 1 && ( - <> - {nextButtonTemplate ? ( - nextButtonTemplate(handleNext) - ) : ( -
- - {nextButtonText} - -
+ {currentStep > 0 && ( + <> + {backButtonTemplate ? ( + backButtonTemplate(handlePrevious) + ) : ( +
+ + {backButtonText} + +
+ )} + + )} + {currentStep === steps.length - 1 && ( + <> + {finishButtonTemplate ? ( + finishButtonTemplate(handleSubmit) + ) : ( +
+ + {finishButtonText} + +
+ )} + )} - )} - {currentStep === steps.length - 1 && ( + ) : ( <> - {finishButtonTemplate ? ( - finishButtonTemplate(handleSubmit) - ) : ( -
- - {finishButtonText} - -
+ {currentStep > 0 && ( + <> + {backButtonTemplate ? ( + backButtonTemplate(handlePrevious) + ) : ( +
+ + {backButtonText} + +
+ )} + + )} + {currentStep < steps.length - 1 && ( + <> + {nextButtonTemplate ? ( + nextButtonTemplate(handleNext) + ) : ( +
+ + {nextButtonText} + +
+ )} + + )} + {currentStep === steps.length - 1 && ( + <> + {finishButtonTemplate ? ( + finishButtonTemplate(handleSubmit) + ) : ( +
+ + {finishButtonText} + +
+ )} + )} )} diff --git a/src/index.css b/src/index.css index 90546ce..179c484 100644 --- a/src/index.css +++ b/src/index.css @@ -385,3 +385,19 @@ fieldset[disabled] .react-form-wizard .wizard-btn { width: 100%; top: 39%; } + +.react-form-wizard.rtl { + direction: rtl; +} + +.react-form-wizard.rtl .wizard-navigation { + text-align: right; +} + +.react-form-wizard.rtl .wizard-footer-left { + float: right; +} + +.react-form-wizard.rtl .wizard-footer-right { + float: left; +} \ No newline at end of file diff --git a/src/types/FormWizard.ts b/src/types/FormWizard.ts index e629e17..694feb2 100644 --- a/src/types/FormWizard.ts +++ b/src/types/FormWizard.ts @@ -46,6 +46,7 @@ export interface FormWizardProps { removeBackgroundTabTransparentColor?: string; onComplete?: () => void; onTabChange?: (e: { prevIndex: number; nextIndex: number }) => void; + rtl?: boolean; } export interface FormWizardMethods { nextTab: () => void;