@yamada-ui/stepper
Version:
Yamada UI stepper component
77 lines (75 loc) • 2.07 kB
JavaScript
"use client"
// src/use-stepper.ts
import { createDescendant } from "@yamada-ui/use-descendant";
import { createContext, mergeRefs } from "@yamada-ui/utils";
import { useCallback } from "react";
var {
DescendantsContextProvider: StepperDescendantsContextProvider,
useDescendant: useStepperDescendant,
useDescendants: useStepperDescendants
} = createDescendant();
var [StepperProvider, useStepperContext] = createContext({
name: "StepperContext",
errorMessage: `useStepperContext returned is 'undefined'. Seems you forgot to wrap the components in "<Stepper />"`
});
var useStepper = ({
index,
orientation = "horizontal",
showLastSeparator = false,
...rest
}) => {
const descendants = useStepperDescendants();
const getStepStatus = useCallback(
(step) => {
if (step < index) return "complete";
if (step > index) return "incomplete";
return "active";
},
[index]
);
const getContainerProps = useCallback(
(props = {}, ref = null) => ({
...rest,
...props,
ref,
"data-orientation": orientation
}),
[orientation, rest]
);
return {
descendants,
getStepStatus,
index,
orientation,
showLastSeparator,
getContainerProps
};
};
var useStep = () => {
var _a;
const { getStepStatus, orientation } = useStepperContext();
const { descendants, index, register } = useStepperDescendant();
const isFirst = index === 0;
const isLast = index === ((_a = descendants.lastValue()) == null ? void 0 : _a.index);
const status = getStepStatus(index);
const getStepProps = useCallback(
(props = {}, ref = null) => ({
...props,
ref: mergeRefs(ref, register),
"data-orientation": orientation,
"data-status": status
}),
[orientation, register, status]
);
return { index, isFirst, isLast, status, getStepProps };
};
export {
StepperDescendantsContextProvider,
useStepperDescendant,
useStepperDescendants,
StepperProvider,
useStepperContext,
useStepper,
useStep
};
//# sourceMappingURL=chunk-CGZP2FXU.mjs.map