@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
61 lines • 2.28 kB
JavaScript
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import Accordion from '../../accordion/Accordion';
import AccordionContent from '../../accordion/accordion-content/AccordionContent';
import Badge from '../../badge/Badge';
import Icon from '../../icon/Icon';
import { SetupWizardContext } from '../SetupWizard';
import { StyledSetupWizardItemBadge } from './SetupWizardItem.styles';
const SetupWizardItem = ({
children,
step,
title,
id
}) => {
const {
selectedId,
updateSelectedId,
activeId,
shouldEnableKeyboardHighlighting
} = useContext(SetupWizardContext);
const [shouldOpen, setShouldOpen] = useState(false);
const initialRender = useRef(0);
useEffect(() => {
initialRender.current++;
}, []);
useEffect(() => {
const timeout = setTimeout(() => {
setShouldOpen(id === selectedId);
}, 5);
return () => clearTimeout(timeout);
}, [id, selectedId]);
const shouldBeDisabled = useMemo(() => {
if (typeof activeId === 'number' && activeId === id) {
return false;
}
return typeof activeId === 'number' && activeId < id;
}, [activeId, id]);
const rightElement = useMemo(() => {
if (activeId && id < activeId) {
return /*#__PURE__*/React.createElement(Badge, null, /*#__PURE__*/React.createElement(StyledSetupWizardItemBadge, null, /*#__PURE__*/React.createElement(Icon, {
icons: ['ts-check']
})));
}
return null;
}, [activeId, id]);
const handleAccordionOpen = useCallback(() => {
if (typeof updateSelectedId === 'function') {
updateSelectedId(id);
}
}, [id, updateSelectedId]);
return useMemo(() => /*#__PURE__*/React.createElement(Accordion, {
onOpen: handleAccordionOpen,
title: `${step}. ${title}`,
isOpened: shouldOpen,
isDisabled: shouldBeDisabled,
rightElement: rightElement,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
}, /*#__PURE__*/React.createElement(AccordionContent, null, children)), [children, handleAccordionOpen, rightElement, shouldBeDisabled, shouldEnableKeyboardHighlighting, shouldOpen, step, title]);
};
SetupWizardItem.displayName = 'SetupWizardItem';
export default SetupWizardItem;
//# sourceMappingURL=SetupWizardItem.js.map