From 7bb3906fedb4075abe627ea4de9a0354ed0d1ade Mon Sep 17 00:00:00 2001
From: Deftera <55022020+Deftera186@users.noreply.github.com>
Date: Thu, 21 Nov 2024 14:48:05 +0200
Subject: [PATCH] Add RTL support to component

---
 src/components/FormWizard.tsx | 221 +++++++++++++++++++++++-----------
 src/index.css                 |  16 +++
 src/types/FormWizard.ts       |   1 +
 3 files changed, 170 insertions(+), 68 deletions(-)

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<FormWizardProps> & {
       removeBackgroundTabTransparentColor = "",
       onComplete,
       onTabChange,
+      rtl = false,
     }: FormWizardProps,
     ref
   ) => {
@@ -243,10 +244,12 @@ const FormWizard: React.FC<FormWizardProps> & {
     };
     const isVertical = layout === "vertical" ? "vertical" : "horizontal";
     const isInline = inlineStep ? "inline" : "";
+    const isRtl = rtl ? "rtl" : "";
 
     return (
       <div
-        className={`react-form-wizard ${stepSize} ${isVertical} ${isInline} `}
+        className={`react-form-wizard ${stepSize} ${isVertical} ${isInline} ${isRtl}`}
+        style={{ direction: rtl ? "rtl" : "ltr" }}
       >
         <div className="wizard-header">
           {/* if title is element render other wise render string props */}
@@ -296,78 +299,160 @@ const FormWizard: React.FC<FormWizardProps> & {
         </div>
 
         <div className="wizard-card-footer clearfix">
-          {currentStep > 0 && (
+          {rtl ? (
             <>
-              {backButtonTemplate ? (
-                backButtonTemplate(handlePrevious)
-              ) : (
-                <div className="wizard-footer-left" style={fillButtonStyle}>
-                  <WizardButton
-                    darkTextColor={
-                      prefersDarkMode && customDarkModeColor?.buttonsText
-                        ? customDarkModeColor?.buttonsText
-                        : ""
-                    }
-                    darkButtonColor={
-                      prefersDarkMode && customDarkModeColor?.buttons
-                        ? customDarkModeColor?.buttons
-                        : ""
-                    }
-                    onClick={handlePrevious}
-                  >
-                    {backButtonText}
-                  </WizardButton>
-                </div>
+              {currentStep < steps.length - 1 && (
+                <>
+                  {nextButtonTemplate ? (
+                    nextButtonTemplate(handleNext)
+                  ) : (
+                    <div className="wizard-footer-left" style={fillButtonStyle}>
+                      <WizardButton
+                        darkTextColor={
+                          prefersDarkMode && customDarkModeColor?.buttonsText
+                            ? customDarkModeColor?.buttonsText
+                            : ""
+                        }
+                        darkButtonColor={
+                          prefersDarkMode && customDarkModeColor?.buttons
+                            ? customDarkModeColor?.buttons
+                            : ""
+                        }
+                        onClick={handleNext}
+                      >
+                        {nextButtonText}
+                      </WizardButton>
+                    </div>
+                  )}
+                </>
               )}
-            </>
-          )}
-          {currentStep < steps.length - 1 && (
-            <>
-              {nextButtonTemplate ? (
-                nextButtonTemplate(handleNext)
-              ) : (
-                <div className="wizard-footer-right" style={fillButtonStyle}>
-                  <WizardButton
-                    darkTextColor={
-                      prefersDarkMode && customDarkModeColor?.buttonsText
-                        ? customDarkModeColor?.buttonsText
-                        : ""
-                    }
-                    darkButtonColor={
-                      prefersDarkMode && customDarkModeColor?.buttons
-                        ? customDarkModeColor?.buttons
-                        : ""
-                    }
-                    onClick={handleNext}
-                  >
-                    {nextButtonText}
-                  </WizardButton>
-                </div>
+              {currentStep > 0 && (
+                <>
+                  {backButtonTemplate ? (
+                    backButtonTemplate(handlePrevious)
+                  ) : (
+                    <div className="wizard-footer-right" style={fillButtonStyle}>
+                      <WizardButton
+                        darkTextColor={
+                          prefersDarkMode && customDarkModeColor?.buttonsText
+                            ? customDarkModeColor?.buttonsText
+                            : ""
+                        }
+                        darkButtonColor={
+                          prefersDarkMode && customDarkModeColor?.buttons
+                            ? customDarkModeColor?.buttons
+                            : ""
+                        }
+                        onClick={handlePrevious}
+                      >
+                        {backButtonText}
+                      </WizardButton>
+                    </div>
+                  )}
+                </>
+              )}
+              {currentStep === steps.length - 1 && (
+                <>
+                  {finishButtonTemplate ? (
+                    finishButtonTemplate(handleSubmit)
+                  ) : (
+                    <div className="wizard-footer-left" style={fillButtonStyle}>
+                      <WizardButton
+                        darkTextColor={
+                          prefersDarkMode && customDarkModeColor?.finishButtonText
+                            ? customDarkModeColor?.finishButtonText
+                            : ""
+                        }
+                        darkButtonColor={
+                          prefersDarkMode && customDarkModeColor?.finishButton
+                            ? customDarkModeColor?.finishButton
+                            : ""
+                        }
+                        onClick={handleSubmit}
+                      >
+                        {finishButtonText}
+                      </WizardButton>
+                    </div>
+                  )}
+                </>
               )}
             </>
-          )}
-          {currentStep === steps.length - 1 && (
+          ) : (
             <>
-              {finishButtonTemplate ? (
-                finishButtonTemplate(handleSubmit)
-              ) : (
-                <div className="wizard-footer-right" style={fillButtonStyle}>
-                  <WizardButton
-                    darkTextColor={
-                      prefersDarkMode && customDarkModeColor?.finishButtonText
-                        ? customDarkModeColor?.finishButtonText
-                        : ""
-                    }
-                    darkButtonColor={
-                      prefersDarkMode && customDarkModeColor?.finishButton
-                        ? customDarkModeColor?.finishButton
-                        : ""
-                    }
-                    onClick={handleSubmit}
-                  >
-                    {finishButtonText}
-                  </WizardButton>
-                </div>
+              {currentStep > 0 && (
+                <>
+                  {backButtonTemplate ? (
+                    backButtonTemplate(handlePrevious)
+                  ) : (
+                    <div className="wizard-footer-left" style={fillButtonStyle}>
+                      <WizardButton
+                        darkTextColor={
+                          prefersDarkMode && customDarkModeColor?.buttonsText
+                            ? customDarkModeColor?.buttonsText
+                            : ""
+                        }
+                        darkButtonColor={
+                          prefersDarkMode && customDarkModeColor?.buttons
+                            ? customDarkModeColor?.buttons
+                            : ""
+                        }
+                        onClick={handlePrevious}
+                      >
+                        {backButtonText}
+                      </WizardButton>
+                    </div>
+                  )}
+                </>
+              )}
+              {currentStep < steps.length - 1 && (
+                <>
+                  {nextButtonTemplate ? (
+                    nextButtonTemplate(handleNext)
+                  ) : (
+                    <div className="wizard-footer-right" style={fillButtonStyle}>
+                      <WizardButton
+                        darkTextColor={
+                          prefersDarkMode && customDarkModeColor?.buttonsText
+                            ? customDarkModeColor?.buttonsText
+                            : ""
+                        }
+                        darkButtonColor={
+                          prefersDarkMode && customDarkModeColor?.buttons
+                            ? customDarkModeColor?.buttons
+                            : ""
+                        }
+                        onClick={handleNext}
+                      >
+                        {nextButtonText}
+                      </WizardButton>
+                    </div>
+                  )}
+                </>
+              )}
+              {currentStep === steps.length - 1 && (
+                <>
+                  {finishButtonTemplate ? (
+                    finishButtonTemplate(handleSubmit)
+                  ) : (
+                    <div className="wizard-footer-right" style={fillButtonStyle}>
+                      <WizardButton
+                        darkTextColor={
+                          prefersDarkMode && customDarkModeColor?.finishButtonText
+                            ? customDarkModeColor?.finishButtonText
+                            : ""
+                        }
+                        darkButtonColor={
+                          prefersDarkMode && customDarkModeColor?.finishButton
+                            ? customDarkModeColor?.finishButton
+                            : ""
+                        }
+                        onClick={handleSubmit}
+                      >
+                        {finishButtonText}
+                      </WizardButton>
+                    </div>
+                  )}
+                </>
               )}
             </>
           )}
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;