chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
126 lines (123 loc) • 5.57 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _setupWizardHelper = require("../utils/setupWizardHelper");
var _SetupItemRight = _interopRequireDefault(require("./SetupItemRight"));
var _withSetupWizardContext = _interopRequireDefault(require("./withSetupWizardContext"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* 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;
(0, _react.useEffect)(() => {
stepRequired(required, step);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, _react.useEffect)(() => {
const disabled = (0, _setupWizardHelper.isDisabled)(enabledSteps, step);
if (disabled && !disabledProp && readyProp) {
stepEnabled(true, step);
stepComplete(true, step);
}
}, [enabledSteps, disabledProp, readyProp, step, stepComplete, stepEnabled]);
const disabled = (0, _setupWizardHelper.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.default.createElement("div", {
className: (0, _clsx.default)('accordion', open && 'accordion--open', disabled && 'accordion--disabled')
}, /*#__PURE__*/_react.default.createElement("div", {
className: "accordion__head no-arrow ellipsis wizardHead" + (!disabled ? " pointer" : ""),
onClick: onClick
}, /*#__PURE__*/_react.default.createElement("div", {
className: "accordion__head__icon"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "react-chayns-icon ts-angle-right"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "accordion__head__title"
}, showStep !== null && `${(typeof showStep === 'number' ? showStep : step) + 1}. `, title), /*#__PURE__*/_react.default.createElement(_SetupItemRight.default, {
ready: ready,
right: right
})), /*#__PURE__*/_react.default.createElement("div", {
className: "accordion__body",
style: contentStyle
}, children));
};
SetupWizardItem.propTypes = {
/**
* The index of the step (`0`-based).
*/
step: _propTypes.default.number.isRequired,
showStep: _propTypes.default.number,
/**
* The title of the step.
*/
title: _propTypes.default.string.isRequired,
toStep: _propTypes.default.func.isRequired,
stepRequired: _propTypes.default.func.isRequired,
open: _propTypes.default.bool,
ready: _propTypes.default.bool,
disabled: _propTypes.default.bool,
onClick: _propTypes.default.func,
contentStyle: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
children: _propTypes.default.element,
/**
* Wether the step is required to continue the wizard.
*/
required: _propTypes.default.bool,
enabledSteps: _propTypes.default.arrayOf(_propTypes.default.number),
completedSteps: _propTypes.default.arrayOf(_propTypes.default.number),
currentStep: _propTypes.default.number,
stepEnabled: _propTypes.default.func.isRequired,
stepComplete: _propTypes.default.func.isRequired,
/**
* A component that is shown on the right hand of the accordion head.
*/
right: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.shape({
complete: _propTypes.default.node.isRequired,
notComplete: _propTypes.default.node.isRequired
}).isRequired])
};
SetupWizardItem.displayName = 'SetupWizardItem';
var _default = (0, _withSetupWizardContext.default)(SetupWizardItem);
exports.default = _default;
//# sourceMappingURL=SetupItem.js.map