chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
119 lines (116 loc) • 3.73 kB
JavaScript
/**
* @component
*/
import classNames from 'clsx';
import PropTypes from 'prop-types';
import React, { useEffect } from 'react';
import { isDisabled } from '../utils/setupWizardHelper';
import SetupItemRight from './SetupItemRight';
import withSetupWizardContext from './withSetupWizardContext';
/**
* An item that represents one step in a `SetupWizard`.
*/
const SetupWizardItem = _ref => {
let {
step,
showStep,
title,
open: openProp = false,
ready: readyProp = false,
disabled: disabledProp = false,
onClick: onClickProp,
required = false,
contentStyle = {},
children,
enabledSteps = [],
completedSteps = [],
currentStep = -1,
toStep,
stepRequired,
right,
stepEnabled,
stepComplete
} = _ref;
useEffect(() => {
stepRequired(required, step);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
const disabled = isDisabled(enabledSteps, step);
if (disabled && !disabledProp && readyProp) {
stepEnabled(true, step);
stepComplete(true, step);
}
}, [enabledSteps, disabledProp, readyProp, step, stepComplete, stepEnabled]);
const disabled = isDisabled(enabledSteps, step) || disabledProp;
const open = step === currentStep || openProp;
const ready = completedSteps.indexOf(step) >= 0 || readyProp;
const onClick = event => {
if (!disabled) {
if (step === currentStep) {
toStep(-1);
} else {
toStep(step);
}
if (onClickProp) {
onClickProp(event);
}
}
};
return /*#__PURE__*/React.createElement("div", {
className: classNames('accordion', open && 'accordion--open', disabled && 'accordion--disabled')
}, /*#__PURE__*/React.createElement("div", {
className: "accordion__head no-arrow ellipsis wizardHead" + (!disabled ? " pointer" : ""),
onClick: onClick
}, /*#__PURE__*/React.createElement("div", {
className: "accordion__head__icon"
}, /*#__PURE__*/React.createElement("i", {
className: "react-chayns-icon ts-angle-right"
})), /*#__PURE__*/React.createElement("div", {
className: "accordion__head__title"
}, showStep !== null && `${(typeof showStep === 'number' ? showStep : step) + 1}. `, title), /*#__PURE__*/React.createElement(SetupItemRight, {
ready: ready,
right: right
})), /*#__PURE__*/React.createElement("div", {
className: "accordion__body",
style: contentStyle
}, children));
};
SetupWizardItem.propTypes = {
/**
* The index of the step (`0`-based).
*/
step: PropTypes.number.isRequired,
showStep: PropTypes.number,
/**
* The title of the step.
*/
title: PropTypes.string.isRequired,
toStep: PropTypes.func.isRequired,
stepRequired: PropTypes.func.isRequired,
open: PropTypes.bool,
ready: PropTypes.bool,
disabled: PropTypes.bool,
onClick: PropTypes.func,
contentStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
children: PropTypes.element,
/**
* Wether the step is required to continue the wizard.
*/
required: PropTypes.bool,
enabledSteps: PropTypes.arrayOf(PropTypes.number),
completedSteps: PropTypes.arrayOf(PropTypes.number),
currentStep: PropTypes.number,
stepEnabled: PropTypes.func.isRequired,
stepComplete: PropTypes.func.isRequired,
/**
* A component that is shown on the right hand of the accordion head.
*/
right: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.shape({
complete: PropTypes.node.isRequired,
notComplete: PropTypes.node.isRequired
}).isRequired])
};
SetupWizardItem.displayName = 'SetupWizardItem';
export default withSetupWizardContext(SetupWizardItem);
//# sourceMappingURL=SetupItem.js.map