chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
364 lines (357 loc) • 11.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _setupWizardHelper = require("../utils/setupWizardHelper");
var _SetupItem = _interopRequireDefault(require("./SetupItem"));
var _setupWizardContext = _interopRequireDefault(require("./setupWizardContext"));
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 {./docs.md}
*/
/**
* A set of steps the user has to go through sequentially.
*/
class SetupWizard extends _react.Component {
constructor(props) {
super(props);
this.stepComplete = (value, step) => {
const {
currentStep
} = this.state;
const selectedStep = step === undefined ? currentStep : step;
if (value && this.completedSteps.indexOf(selectedStep) === -1) {
this.completedSteps.push(selectedStep);
this.setState({
completedSteps: this.completedSteps
});
this.allRequiredStepsCompleted();
} else if (!value && this.completedSteps.indexOf(selectedStep) >= 0) {
this.completedSteps.splice(this.completedSteps.indexOf(selectedStep), 1);
this.setState({
completedSteps: this.completedSteps
});
}
};
this.stepEnabled = (value, step) => {
const {
enabledSteps
} = this.state;
const index = enabledSteps.indexOf(step);
if (value && index < 0) {
// enable step
enabledSteps.push(step);
} else if (!value && index >= 0) {
// disable step
enabledSteps.splice(index, 1);
}
this.setState({
enabledSteps
});
};
this.stepRequired = (value, step) => {
const {
requiredSteps
} = this.state;
if (value && requiredSteps.indexOf(step) < 0) {
requiredSteps.push(step);
} else if (requiredSteps.indexOf(step) >= 0) {
requiredSteps.splice(requiredSteps.indexOf(step), 1);
}
this.setState({
requiredSteps
});
};
this.previousStep = () => {
const {
currentStep
} = this.state;
this.toStep(currentStep - 1);
};
this.nextStep = () => {
const {
children,
numberOfSteps
} = this.props;
const {
currentStep
} = this.state;
let next = currentStep + 1;
for (; (numberOfSteps || Array.isArray(children) && children.length) > next; next += 1) {
if (children[next]) {
this.toStep(next);
return;
}
}
this.toStep(next);
};
this.toStep = step => {
const {
children,
numberOfSteps,
operationMode
} = this.props;
const {
currentStep,
enabledSteps,
requiredSteps
} = this.state;
if ((numberOfSteps || Array.isArray(children) && children.length) - 1 >= step) {
if (requiredSteps.indexOf(currentStep) < 0 || this.completedSteps.indexOf(currentStep) >= 0 || !(0, _setupWizardHelper.isDisabled)(enabledSteps, step)) {
if (operationMode === SetupWizard.operationMode.ONLY_CURRENT_STEP_ENABLED) {
this.setState({
enabledSteps: [step]
});
} else {
this.stepEnabled(true, step);
}
this.setState({
currentStep: step
});
} else {
this.notComplete();
}
} else {
this.ready();
}
};
this.resetToStep = step => {
let {
enabledSteps
} = this.state;
this.completedSteps = this.completedSteps.filter(s => !(step <= s && s < enabledSteps));
enabledSteps = enabledSteps.filter(s => s <= step);
if (!enabledSteps.includes(step)) {
enabledSteps.push(step);
}
this.setState({
enabledSteps,
currentStep: step,
completedSteps: this.completedSteps
});
};
this.ready = () => {
const {
ready
} = this.props;
const {
currentStep,
requiredSteps
} = this.state;
if (!(requiredSteps.indexOf(currentStep) >= 0 && this.completedSteps.indexOf(currentStep) === -1)) {
if (ready) {
ready();
}
} else {
this.notComplete();
}
};
this.allRequiredStepsCompleted = () => {
const {
allRequiredStepsCompleted
} = this.props;
if (allRequiredStepsCompleted) {
const {
requiredSteps
} = this.state;
if (requiredSteps.every(v => this.completedSteps.includes(v))) {
allRequiredStepsCompleted();
}
}
};
this.notComplete = () => {
const {
notComplete
} = this.props;
if (notComplete) {
notComplete();
}
};
const {
initialStep
} = this.props;
this.completedSteps = [-1]; // Used to fix state timing problem
this.state = {
currentStep: initialStep,
maxProgress: 0,
completedSteps: this.completedSteps,
requiredSteps: [],
enabledSteps: [0]
};
this.stepComplete = this.stepComplete.bind(this);
this.stepEnabled = this.stepEnabled.bind(this);
this.previousStep = this.previousStep.bind(this);
this.nextStep = this.nextStep.bind(this);
this.toStep = this.toStep.bind(this);
this.resetToStep = this.resetToStep.bind(this);
this.ready = this.ready.bind(this);
this.notComplete = this.notComplete.bind(this);
this.allRequiredStepsCompleted = this.allRequiredStepsCompleted.bind(this);
}
componentDidMount() {
const {
initialStep,
operationMode
} = this.props;
if (initialStep > 0) {
this.toStep(initialStep); // needed to enable all steps until the initial step
for (let i = 0; i <= initialStep; i += 1) {
this.stepEnabled(operationMode === SetupWizard.operationMode.DEFAULT ? true : operationMode === SetupWizard.operationMode.ONLY_CURRENT_STEP_ENABLED && i === initialStep, i);
if (i < initialStep) {
this.stepComplete(true, i);
}
}
}
}
/**
* Complete or uncomplete a step
* @param value: true/false to complete/uncomplete
* @param step: step that should be changed
*/
render() {
const {
style,
contentStyle,
title,
description,
children,
className,
disableShowStep
} = this.props;
const {
maxProgress,
currentStep,
completedSteps,
requiredSteps,
enabledSteps,
operationMode
} = this.state;
let visibleIndex = -1;
return /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: className
}, title && /*#__PURE__*/_react.default.createElement("h1", null, title), description &&
/*#__PURE__*/
// eslint-disable-next-line react/no-danger
_react.default.createElement("p", {
dangerouslySetInnerHTML: {
__html: description
}
}), /*#__PURE__*/_react.default.createElement(_setupWizardContext.default.Provider, {
value: {
maxProgress,
completedSteps,
requiredSteps,
currentStep,
contentStyle,
enabledSteps,
operationMode,
stepComplete: this.stepComplete,
stepEnabled: this.stepEnabled,
stepRequired: this.stepRequired,
previousStep: this.previousStep,
nextStep: this.nextStep,
toStep: this.toStep,
resetToStep: this.resetToStep,
notComplete: this.notComplete
}
}, children.map((child, index) => {
if (child && child.type === _SetupItem.default) {
if (child) {
visibleIndex += 1;
}
return /*#__PURE__*/_react.default.cloneElement(child, {
step: index,
showStep: child && !disableShowStep ? visibleIndex : null,
// eslint-disable-next-line react/no-array-index-key
key: index
});
}
return child;
})));
}
}
SetupWizard.operationMode = {
DEFAULT: 0,
ONLY_CURRENT_STEP_ENABLED: 1
};
SetupWizard.propTypes = {
/**
* An array of `SetupWizardItem` components.
*/
children: _propTypes.default.node,
/**
* A callback that is invoked after `nextStep` is called when the last step
* is active and all required steps are completed.
*/
ready: _propTypes.default.func,
/**
* A callback that is invoked after `nextStep` is called but some required
* steps are not completed.
*/
notComplete: _propTypes.default.func,
/**
* A classname string that will be applied to the container element.
*/
className: _propTypes.default.string,
/**
* A React style object that will be applied to the container element.
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/**
* A React style object that will be applied to the content elements.
*/
contentStyle: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/**
* The title of the wizard.
*/
title: _propTypes.default.string,
/**
* The description of the wizard. Can be a `string` or a `ReactNode`.
*/
description: _propTypes.default.node,
/**
* The number of steps in the wizard.
*/
numberOfSteps: _propTypes.default.number,
/**
* A callback that is invoked when all required steps have been completed.
*/
allRequiredStepsCompleted: _propTypes.default.func,
/**
* The initial step of the wizard.
*/
initialStep: _propTypes.default.number,
/**
* Removes the number that is displayed in front of the title.
*/
disableShowStep: _propTypes.default.bool,
/**
* Specifies the mode of the wizard. `0` is the regular behavior, `1` means
* that all steps except the current one will be disabled and the user
* cannot manually navigate between steps.
*/
operationMode: _propTypes.default.oneOf([0, 1])
};
SetupWizard.defaultProps = {
ready: null,
notComplete: null,
children: null,
style: null,
contentStyle: null,
title: null,
description: null,
className: null,
numberOfSteps: null,
allRequiredStepsCompleted: null,
initialStep: 0,
disableShowStep: false,
operationMode: SetupWizard.operationMode.DEFAULT
};
SetupWizard.displayName = 'SetupWizard';
var _default = SetupWizard;
exports.default = _default;
//# sourceMappingURL=SetupWizard.js.map