refactor: Make the buttons usable without react-toolbox

Author: Rasmus Eneman

src/buttons.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import {DOMAttributes, ReactChild, ReactType, StatelessComponent} from 'react'
+import compose from 'recompose/compose'
+import setDisplayName from 'recompose/setDisplayName'
+import {withStepper} from './with-stepper'
+
+export type AdvanceButtonProps = {
+  component?: ReactType
+  onFinish?: () => void
+  onNext?: () => void
+  finishLabel?: ReactChild
+}
+
+export const AdvanceButton: StatelessComponent<DOMAttributes<HTMLButtonElement> & AdvanceButtonProps> = compose(
+  withStepper,
+  setDisplayName('AdvanceButton'),
+)(({
+  component: Button = 'button',
+  canReverse: _, pageState: __, setPageState: ___,
+  pages, canAdvance, currentPage, setPageIndex,
+  disabled, onClick, onNext, onFinish, finishLabel,
+  children, ...props,
+}) => {
+  const isLast = finishLabel && currentPage + 1 >= pages.length
+
+  return (
+    <Button disabled={disabled || (!isLast && !canAdvance)} {...props} onClick={e => {
+      if (currentPage + 1 >= pages.length) {
+        if (onFinish) {
+          onFinish()
+        }
+      } else {
+        if (onNext) {
+          onNext()
+        }
+        setPageIndex(currentPage + 1)
+      }
+      if (onClick) return onClick(e)
+    }}>
+      {finishLabel && currentPage + 1 >= pages.length
+        ? finishLabel
+        : children
+      }
+    </Button>
+  )
+})
+
+export type ReverseButtonProps = {
+  component?: ReactType
+  onCancel?: () => void
+  onPrevious?: () => void
+  cancelLabel?: ReactChild
+}
+
+export const ReverseButton: StatelessComponent<DOMAttributes<HTMLButtonElement> & ReverseButtonProps> = compose(
+  withStepper,
+  setDisplayName('ReverseButton'),
+)(({
+  component: Button = 'button',
+  canAdvance: _, pages: __, pageState: ___, setPageState: ____,
+  canReverse, currentPage, setPageIndex,
+  disabled, onClick, onPrevious, onCancel, cancelLabel,
+  children, ...props,
+}) =>
+  <Button disabled={disabled || (!cancelLabel && !canReverse)} {...props} onClick={e => {
+    if (currentPage <= 0) {
+      if (onCancel) {
+        onCancel()
+      }
+    } else {
+      if (onPrevious) {
+        onPrevious()
+      }
+      setPageIndex(currentPage - 1)
+    }
+    if (onClick) return onClick(e)
+  }}>
+    {cancelLabel && currentPage <= 0
+      ? cancelLabel
+      : children
+    }
+  </Button>
+)

src/dot-tracker.tsx

@@ -12,7 +12,7 @@ const row = {
 }
 
 export const DotTracker: StatelessComponent<{
-  acttiveColor?: string
+  activeColor?: string
   inactiveColor?: string
   style?: CSSProperties
 }> = compose(

src/index.tsx

@@ -1,8 +1,7 @@
-import {DotTracker} from './dot-tracker'
-import {StepTitle} from './step-title'
-import {Stepper} from './stepper'
-import {StepperView} from './stepper-view'
-import {TextTracker} from './text-tracker'
-import {withStepper} from './with-stepper'
-
-export {DotTracker, StepTitle, Stepper, StepperView, TextTracker, withStepper}
+export {DotTracker} from './dot-tracker'
+export {StepTitle} from './step-title'
+export {Stepper} from './stepper'
+export {StepperView} from './stepper-view'
+export {TextTracker} from './text-tracker'
+export {withStepper} from './with-stepper'
+export * from './buttons'

src/react-toolbox/buttons.tsx

@@ -1,76 +1,11 @@
 import * as React from 'react'
-import {ReactChild, StatelessComponent} from 'react'
+import {StatelessComponent} from 'react'
 import {Button, ButtonProps} from 'react-toolbox/lib/button'
-import compose from 'recompose/compose'
-import setDisplayName from 'recompose/setDisplayName'
-import {withStepper} from '../with-stepper'
+import * as buttons from '../buttons'
+import {AdvanceButtonProps, ReverseButtonProps} from '../buttons'
 
-export const AdvanceButton: StatelessComponent<ButtonProps & {
-  onFinish?: () => void
-  onNext?: () => void
-  finishLabel?: ReactChild
-}> = compose(
-  withStepper,
-  setDisplayName('AdvanceButton'),
-)(({
-  canReverse: _, pageState: __, setPageState: ___,
-  pages, canAdvance, currentPage, setPageIndex,
-  disabled, onClick, onNext, onFinish, finishLabel,
-  children, ...props,
-}) => {
-  const isLast = finishLabel && currentPage + 1 >= pages.length
+export const AdvanceButton: StatelessComponent<ButtonProps & AdvanceButtonProps> = (props: any) =>
+  <buttons.AdvanceButton component={Button} {...props} />
 
-  return (
-    <Button disabled={disabled || (!isLast && !canAdvance)} {...props} onClick={e => {
-      if (currentPage + 1 >= pages.length) {
-        if (onFinish) {
-          onFinish()
-        }
-      } else {
-        if (onNext) {
-          onNext()
-        }
-        setPageIndex(currentPage + 1)
-      }
-      if (onClick) return onClick(e)
-    }}>
-      {finishLabel && currentPage + 1 >= pages.length
-        ? finishLabel
-        : children
-      }
-    </Button>
-  )
-})
-
-export const ReverseButton: StatelessComponent<ButtonProps & {
-  onCancel?: () => void
-  onPrevious?: () => void
-  cancelLabel?: ReactChild
-}> = compose(
-  withStepper,
-  setDisplayName('ReverseButton'),
-)(({
-  canAdvance: _, pages: __, pageState: ___, setPageState: ____,
-  canReverse, currentPage, setPageIndex,
-  disabled, onClick, onPrevious, onCancel, cancelLabel,
-  children, ...props,
-}) =>
-  <Button disabled={disabled || (!cancelLabel && !canReverse)} {...props} onClick={e => {
-    if (currentPage <= 0) {
-      if (onCancel) {
-        onCancel()
-      }
-    } else {
-      if (onPrevious) {
-        onPrevious()
-      }
-      setPageIndex(currentPage - 1)
-    }
-    if (onClick) return onClick(e)
-  }}>
-    {cancelLabel && currentPage <= 0
-      ? cancelLabel
-      : children
-    }
-  </Button>
-)
+export const ReverseButton: StatelessComponent<ButtonProps & ReverseButtonProps> = (props: any) =>
+  <buttons.ReverseButton component={Button} {...props} />