Merge pull request #1 from ofirelarat/enable-customize-nav-buttons

enable nav buttons style and title in props

src/MultiStep.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { css, styled, setup } from 'goober'
-import { MultiStepPropsBase, Step} from './interfaces'
+import { MultiStepPropsBase, NavButton, Step} from './interfaces'
 
 setup(React.createElement)
 
@@ -205,16 +205,18 @@ export default function MultiStep (props: MultiStepPropsBase) {
  }
  )
 
- const renderButtonsNav = (show) =>
+ const renderButtonsNav = (show: boolean, prevButton?: NavButton, nextButton?: NavButton) =>
  show && (
  <div>
  <button onClick={previous}
+ style={prevButton?.style}
  disabled={buttonsState.showPrevBtn ? false : true}>
-  Prev
+ {prevButton && prevButton.title ? <>{prevButton.title}</> : <>Prev</>}
  </button>
  <button onClick={next}
+ style={nextButton?.style}
  disabled={buttonsState.showNextBtn ? false : true}>
-  Next
+ {nextButton && nextButton.title ? <>{nextButton.title}</> : <>Next</>}
  </button>
  </div>
  )
@@ -223,7 +225,7 @@ export default function MultiStep (props: MultiStepPropsBase) {
  <div style={{display: 'flex', flexDirection: directionType === 'column' ? 'row' : 'column'}}>
  <Ol className={directionType === 'column' ? ColumnDirection : RowDirection}>{renderTopNav()}</Ol>
  {steps[activeStep].component}
- <div>{renderButtonsNav(showNavButtons)}</div>
+ <div>{renderButtonsNav(showNavButtons, props.prevButton, props.nextButton)}</div>
  </div>
  )
 }

src/interfaces.ts

@@ -5,6 +5,11 @@ export interface Step {
  component: React.ReactElement
 }
 
+export interface NavButton{
+ title?: string
+ style?: React.CSSProperties
+}
+
 export interface MultiStepPropsBase {
  stepCustomStyle?: object
  showNavigation?: boolean
@@ -13,4 +18,6 @@ export interface MultiStepPropsBase {
  activeStep?: number
  children?: React.ReactElement[]
  steps?: Step[]
+ prevButton?: NavButton
+ nextButton?: NavButton
 }