feat/navigation

- isNavigationEnabled: optional boolean

Author: audi2014

README.md

@@ -205,6 +205,8 @@ Common date-time formats can be viewed [here](https://docs.sheetjs.com/docs/csf/
   autoMapHeaders?: boolean
   // Headers matching accuracy: 1 for strict and up for more flexible matching. Default: 2
   autoMapDistance?: number
+  // Enable navigation in stepper component and show back button. Default: false
+  isNavigationEnabled?: boolean
 ```
 
 ## Customisation

src/steps/Steps.tsx

@@ -10,7 +10,7 @@ import { steps, stepTypeToStepIndex, stepIndexToStepType } from "../utils/steps"
 const CheckIcon = ({ color }: { color: string }) => <CgCheck size="2.25rem" color={color} />
 
 export const Steps = () => {
-  const { initialStepState, translations } = useRsi()
+  const { initialStepState, translations, isNavigationEnabled } = useRsi()
 
   const initialStep = stepTypeToStepIndex(initialStepState?.type)
 
@@ -45,13 +45,17 @@ export const Steps = () => {
   return (
     <>
       <ModalHeader display={["none", "none", "block"]}>
-        <Stepper activeStep={activeStep} checkIcon={CheckIcon} onClickStep={onClickStep}>
+        <Stepper
+          activeStep={activeStep}
+          checkIcon={CheckIcon}
+          onClickStep={isNavigationEnabled ? onClickStep : undefined}
+        >
           {steps.map((key) => (
             <Step label={translations[key].title} key={key} />
           ))}
         </Stepper>
       </ModalHeader>
-      <UploadFlow state={state} onNext={onNext} onBack={onBack} />
+      <UploadFlow state={state} onNext={onNext} onBack={isNavigationEnabled ? onBack : undefined} />
     </>
   )
 }

src/stories/Default.stories.tsx

@@ -22,7 +22,13 @@ export const Basic = () => {
       <Link href="./exampleFile.csv" border="2px solid #718096" p="8px" borderRadius="8px" download="exampleCSV">
         Download example file
       </Link>
-      <ReactSpreadsheetImport {...mockRsiValues} isOpen={isOpen} onClose={onClose} onSubmit={setData} />
+      <ReactSpreadsheetImport
+        {...mockRsiValues}
+        isOpen={isOpen}
+        onClose={onClose}
+        onSubmit={setData}
+        isNavigationEnabled={true}
+      />
       {!!data && (
         <Box pt={64} display="flex" gap="8px" flexDirection="column">
           <b>Returned data (showing first 100 rows):</b>

src/types.ts

@@ -25,6 +25,8 @@ export type RsiProps<T extends string> = {
   onSubmit: (data: Result<T>, file: File) => void
   // Allows submitting with errors. Default: true
   allowInvalidSubmit?: boolean
+  // Enable navigation in stepper component and show back button. Default: false
+  isNavigationEnabled?: boolean
   // Translations for each text
   translations?: TranslationsRSIProps
   // Theme configuration passed to underlying Chakra-UI