diff --git a/packages/components/src/components/wizard/index.tsx b/packages/components/src/components/wizard/index.ts
similarity index 57%
rename from packages/components/src/components/wizard/index.tsx
rename to packages/components/src/components/wizard/index.ts
index 6f56e33aea61..7b2fce1f353f 100644
--- a/packages/components/src/components/wizard/index.tsx
+++ b/packages/components/src/components/wizard/index.ts
@@ -1,4 +1,4 @@
-import Wizard from './wizard.jsx';
+import Wizard from './wizard';
import './wizard.scss';
export default Wizard;
diff --git a/packages/components/src/components/wizard/wizard-step.jsx b/packages/components/src/components/wizard/wizard-step.jsx
deleted file mode 100644
index 9724b73c8854..000000000000
--- a/packages/components/src/components/wizard/wizard-step.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-const Step = ({ children, className }) =>
{children}
;
-
-Step.defaultProps = {
- children: [],
-};
-
-Step.propTypes = {
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
- className: PropTypes.string,
-};
-
-export default Step;
diff --git a/packages/components/src/components/wizard/wizard-step.tsx b/packages/components/src/components/wizard/wizard-step.tsx
new file mode 100644
index 000000000000..ce511e47d774
--- /dev/null
+++ b/packages/components/src/components/wizard/wizard-step.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Step = ({ children = [], className }: React.PropsWithChildren<{ className?: string }>) => (
+ {children}
+);
+
+export default Step;
diff --git a/packages/components/src/components/wizard/wizard.jsx b/packages/components/src/components/wizard/wizard.tsx
similarity index 59%
rename from packages/components/src/components/wizard/wizard.jsx
rename to packages/components/src/components/wizard/wizard.tsx
index a82b6719899d..2d932d04c4c5 100644
--- a/packages/components/src/components/wizard/wizard.jsx
+++ b/packages/components/src/components/wizard/wizard.tsx
@@ -1,11 +1,27 @@
-import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
-import Step from './wizard-step.jsx';
+import Step from './wizard-step';
+
+type TWizard = {
+ className?: string;
+ initial_step: number;
+ onStepChange?: (prop: { [key: string]: number }) => void;
+ nav: React.ReactNode;
+ selected_step_ref: () => React.MutableRefObject;
+};
-const Wizard = ({ children, className, initial_step, onStepChange, nav, selected_step_ref }) => {
+const Wizard = ({
+ children = [],
+ className,
+ initial_step = 1,
+ onStepChange,
+ nav = null,
+ selected_step_ref,
+}: React.PropsWithChildren) => {
const [active_step, setActiveStep] = React.useState(0);
+ const getSteps = React.useCallback(() => React.Children.toArray(children), [children]);
+
React.useEffect(() => {
const local_initial_step = initial_step - 1;
const local_children = getSteps();
@@ -13,16 +29,16 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
if (local_initial_step && local_children[local_initial_step]) {
setActiveStep(initial_step);
}
- }, [initial_step, getSteps]);
+ }, [initial_step]);
- const onChangeStep = stats => {
+ const onChangeStep = (stats: { [key: string]: number }) => {
// User callback
- onStepChange(stats);
+ if (typeof onStepChange === 'function') onStepChange(stats);
};
- const isInvalidStep = next => next < 0 || next >= getTotalSteps();
+ const isInvalidStep = (next: number) => next < 0 || next >= getTotalSteps();
- const onSetActiveStep = next => {
+ const onSetActiveStep = (next: number) => {
if (active_step === next || isInvalidStep(next)) return;
setActiveStep(next);
onChangeStep({
@@ -30,13 +46,11 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
});
};
- const getSteps = React.useCallback(() => React.Children.toArray(children), [children]);
-
const getCurrentStep = () => active_step + 1;
const getTotalSteps = () => getSteps().length;
- const goToStep = step => onSetActiveStep(step - 1);
+ const goToStep = (step: number) => onSetActiveStep(step - 1);
const goToFirstStep = () => goToStep(1);
@@ -47,7 +61,7 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
const goToPreviousStep = () => onSetActiveStep(active_step - 1);
// Allows for using HTML elements as a step
- const isReactComponent = ({ type }) => typeof type === 'function' || typeof type === 'object';
+ const isReactComponent = ({ type }: any) => typeof type === 'function' || typeof type === 'object';
const properties = {
getCurrentStep,
@@ -64,14 +78,18 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
if (!child) return null;
if (i === active_step)
- return {isReactComponent(child) ? React.cloneElement(child, properties) : child};
+ return (
+
+ {isReactComponent(child) ? React.cloneElement(<>{child}>, properties) : child}
+
+ );
return null;
});
return (
- {nav && React.cloneElement(nav, properties)}
+ {nav && React.cloneElement(<>{nav}>, properties)}
{childrenWithProps}
);
@@ -80,23 +98,4 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
Wizard.displayName = 'Wizard';
Wizard.Step = Step;
-Wizard.defaultProps = {
- children: [],
- initial_step: 1,
- onStepChange: () => {},
- nav: null,
-};
-
-Wizard.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- initial_step: PropTypes.number,
- onStepChange: PropTypes.func,
- nav: PropTypes.node,
- selected_step_ref: PropTypes.oneOfType([
- PropTypes.func,
- PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
- ]),
-};
-
export default Wizard;