Merge pull request #3825 from James-Baloyi/james/en/44/3781

toggle done and back buttons

Author: James-Baloyi

shesha-reactjs/src/designer-components/wizard/index.tsx

@@ -29,6 +29,8 @@ const TabsComponent: IToolboxComponent<Omit<IWizardComponentProps, 'size'>> = {
   },
   initModel: (model) => ({
     ...model,
+    showBackButton: model.showBackButton ?? true,
+    showDoneButton: model.showDoneButton ?? true,
   }),
   migrator: (m) =>
     m

shesha-reactjs/src/designer-components/wizard/models.ts

@@ -80,4 +80,6 @@ export interface IWizardComponentProps extends Omit<IConfigurableFormComponent,
   secondaryBgColor?: React.CSSProperties['color'];
   secondaryTextColor?: React.CSSProperties['color'];
   stepWidth?: string;
+  showBackButton?: boolean;
+  showDoneButton?: boolean;
 }

shesha-reactjs/src/designer-components/wizard/settingsForm.ts

@@ -156,6 +156,31 @@ export const getSettings = () => {
                                     ]
                                 }
                             )
+                            .addSettingsInputRow(
+                                {
+                                    id: nanoid(),
+                                    inputs: [
+                                        {
+                                            id: nanoid(),
+                                            propertyName: 'showBackButton',
+                                            label: 'Show Back Button',
+                                            parentId: 'root',
+                                            type: 'switch',
+                                            jsSetting: true,
+                                            defaultValue: true,
+                                        },
+                                        {
+                                            id: nanoid(),
+                                            propertyName: 'showDoneButton',
+                                            label: 'Show Done Button',
+                                            parentId: 'root',
+                                            type: 'switch',
+                                            jsSetting: true,
+                                            defaultValue: true,
+                                        }
+                                    ]
+                                }
+                            )
                             .toJson()
                         ]
                     },

shesha-reactjs/src/designer-components/wizard/tabs.tsx

@@ -38,7 +38,9 @@ export const Tabs: FC<Omit<IWizardComponentProps, 'size'>> = ({ form, ...model }
         isDynamic,
         labelPlacement,
         wizardType = 'default',
-        stepWidth
+        stepWidth,
+        showBackButton = true,
+        showDoneButton = true
     } = model;
 
     const { primaryTextColor, secondaryTextColor, primaryBgColor, secondaryBgColor } = model;
@@ -121,7 +123,7 @@ export const Tabs: FC<Omit<IWizardComponentProps, 'size'>> = ({ form, ...model }
                                 condition={splitButtons}
                                 wrap={(children) => <Space><div className={styles.shaStepsButtons}>{children}</div></Space>}
                             >
-                                {current > 0 && (
+                                {current > 0 && showBackButton && (
                                     <Button
                                         style={btnStyle('back')}
                                         onClick={back}
@@ -155,7 +157,7 @@ export const Tabs: FC<Omit<IWizardComponentProps, 'size'>> = ({ form, ...model }
                                         {currentStep.nextButtonText ? currentStep.nextButtonText : 'Next'}
                                     </Button>
                                 )}
-                                {current === visibleSteps.length - 1 && (
+                                {current === visibleSteps.length - 1 && showDoneButton && (
                                     <Button
                                         type="primary"
                                         style={btnStyle('next')}