temp useWizardControlledValue

Author: TheSonOfThomp

packages/wizard/src/Wizard/Wizard.tsx

@@ -1,23 +1,23 @@
-import React, { Children, cloneElement, isValidElement, useState } from 'react';
+import React, { Children, cloneElement, isValidElement } from 'react';
 
+import { useWizardControlledValue } from '../utils/useWizardControlledValue/useWizardControlledValue';
 import { WizardFooter } from '../WizardFooter';
 import { WizardStep } from '../WizardStep';
 
 import { stepContentStyles, wizardContainerStyles } from './Wizard.styles';
 import { WizardProps } from './Wizard.types';
 
 export function Wizard({
-  activeStep: controlledActiveStep,
+  activeStep: activeStepProp,
   onStepChange,
   children,
 }: WizardProps) {
-  // TODO: replace with `useControlledValue`
-  // Internal state for uncontrolled mode
-  const [internalActiveStep, setInternalActiveStep] = useState<number>(0);
-
-  // Use controlled prop if provided, otherwise use internal state
-  const isControlled = controlledActiveStep !== undefined;
-  const activeStep = isControlled ? controlledActiveStep : internalActiveStep;
+  // Controlled/Uncontrolled activeStep value
+  const {
+    isControlled,
+    value: activeStep,
+    setValue: setInternalActiveStep,
+  } = useWizardControlledValue<number>(activeStepProp, undefined, 0);
 
   // Handle step changes
   const handleStepChange = (newStep: number) => {

packages/wizard/src/utils/useWizardControlledValue/index.ts

@@ -0,0 +1 @@
+export { useControlledValue } from './useControlledValue';

packages/wizard/src/utils/useWizardControlledValue/useWizardControlledValue.ts

@@ -0,0 +1,95 @@
+import { useEffect, useMemo, useState } from 'react';
+import isUndefined from 'lodash/isUndefined';
+
+import { usePrevious } from '@leafygreen-ui/hooks';
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+interface ControlledValueReturnObject<T extends any> {
+  /** Whether the value is controlled */
+  isControlled: boolean;
+
+  /** The controlled or uncontrolled value */
+  value: T;
+
+  /**
+   * Either updates the uncontrolled value,
+   * or calls the provided `onChange` callback
+   */
+  setValue: (newVal?: T, ...args: Array<any>) => void;
+}
+
+/**
+ * A hook that enables a component to be both controlled or uncontrolled.
+ *
+ * Returns a {@link ControlledValueReturnObject}
+ * @deprecated Use `useControlled` from `@leafygreen-ui/hooks` instead
+ * https://github.com/mongodb/leafygreen-ui/pull/3153
+ */
+export const useWizardControlledValue = <T extends any>(
+  valueProp?: T,
+  onChange?: (val?: T, ...args: Array<any>) => void,
+  initialProp?: T,
+): ControlledValueReturnObject<T> => {
+  // Initially set isControlled to the existence of `valueProp`.
+  // If the value prop changes from undefined to something defined,
+  // then isControlled is set to true,
+  // and will remain true for the life of the component
+  const [isControlled, setControlled] = useState(!isUndefined(valueProp));
+  useEffect(() => {
+    setControlled(isControlled || !isUndefined(valueProp));
+  }, [isControlled, valueProp]);
+
+  const wasControlled = usePrevious(isControlled);
+
+  useEffect(() => {
+    if (isUndefined(isControlled) || isUndefined(wasControlled)) return;
+
+    if (isControlled !== wasControlled) {
+      const err = `WARN: A component changed from ${
+        wasControlled ? 'controlled' : 'uncontrolled'
+      } to ${
+        isControlled ? 'controlled' : 'uncontrolled'
+      }. This can cause issues with React states. ${
+        isControlled
+          ? 'To control a component, but have an initially empty input, consider setting the `value` prop to `null`.'
+          : ''
+      }`;
+
+      consoleOnce.warn(err);
+    }
+  }, [isControlled, wasControlled]);
+
+  // We set the initial value to either the `value`
+  // or the temporary `initialValue` prop
+  const initialValue = useMemo(
+    () => (isControlled ? valueProp : initialProp),
+    [initialProp, isControlled, valueProp],
+  );
+
+  // Keep track of the internal value state
+  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(
+    initialValue,
+  );
+
+  // The returned value is wither the provided value prop
+  // or the uncontrolled value
+  const value = useMemo(
+    () => (isControlled ? (valueProp as T) : (uncontrolledValue as T)),
+    [isControlled, uncontrolledValue, valueProp],
+  );
+
+  // A wrapper around `handleChange` that fires a simulated event
+  const setValue = (newVal: T | undefined) => {
+    if (!isControlled) {
+      setUncontrolledValue(newVal);
+    }
+
+    onChange?.(newVal);
+  };
+
+  return {
+    isControlled,
+    value,
+    setValue,
+  };
+};