@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
73 lines • 2.58 kB
JavaScript
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
import AccordionGroup from '../accordion/accordion-group/AccordionGroup';
import { StyledSetupWizard } from './SetupWizard.styles';
export const SetupWizardContext = /*#__PURE__*/React.createContext({
selectedId: undefined,
updateSelectedId: undefined,
activeId: undefined,
updateActiveId: undefined
});
SetupWizardContext.displayName = 'SetupWizardContext';
const SetupWizard = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
children,
isWrapped
} = _ref;
const [selectedId, setSelectedId] = useState(0);
const [activeId, setActiveId] = useState(0);
const [allIds, setAllIds] = useState([]);
useEffect(() => {
React.Children.map(children, child => {
setAllIds(prevState => [...prevState, child.props.id]);
});
}, [children]);
const updateSelectedId = useCallback(id => {
setSelectedId(id);
}, [setSelectedId]);
const updateActiveId = useCallback(id => {
setActiveId(id);
}, [setActiveId]);
const handleNext = useCallback(stepId => {
if (typeof stepId === 'number') {
updateSelectedId(stepId);
if (typeof activeId === 'number' && stepId > activeId) {
updateActiveId(stepId);
}
} else {
const index = allIds.findIndex(id => id === selectedId);
if (index < 0) {
return;
}
const numberAtIndex = allIds[index + 1];
if (!numberAtIndex) {
return;
}
updateSelectedId(numberAtIndex);
if (typeof activeId === 'number' && numberAtIndex > activeId) {
updateActiveId(numberAtIndex);
}
}
}, [activeId, allIds, selectedId, updateActiveId, updateSelectedId]);
const handleReset = useCallback(() => {
updateSelectedId(0);
updateActiveId(0);
}, [updateActiveId, updateSelectedId]);
useImperativeHandle(ref, () => ({
next: handleNext,
reset: handleReset
}), [handleNext, handleReset]);
const providerValue = useMemo(() => ({
selectedId,
updateSelectedId,
activeId,
updateActiveId
}), [activeId, selectedId, updateActiveId, updateSelectedId]);
return useMemo(() => /*#__PURE__*/React.createElement(SetupWizardContext.Provider, {
value: providerValue
}, /*#__PURE__*/React.createElement(StyledSetupWizard, null, /*#__PURE__*/React.createElement(AccordionGroup, {
isWrapped: isWrapped
}, children))), [children, isWrapped, providerValue]);
});
SetupWizard.displayName = 'SetupWizard';
export default SetupWizard;
//# sourceMappingURL=SetupWizard.js.map