@talend/react-components
Version:
Set of react components.
241 lines (233 loc) • 9.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactI18next = require("react-i18next");
var _designSystem = require("@talend/design-system");
var _Icon = _interopRequireDefault(require("../Icon"));
var _CircularProgress = _interopRequireDefault(require("../CircularProgress"));
var _theme = require("../theme");
var _StepperComponentModule = _interopRequireDefault(require("./Stepper.component.module.scss"));
var _StepperTransition = require("./StepperTransition.component");
var _constants = _interopRequireDefault(require("../constants"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const getClass = (0, _theme.getTheme)(_StepperComponentModule.default);
const SHOW_COMPLETED_TRANSITION_TIMER = 1000;
const TRANSITION_STATE = {
STEPS: 'STEPS',
TRANSITION: 'TRANSITION',
CHILD: 'CHILD'
};
const LOADING_STEP_STATUSES = {
ABORTED: 'aborted',
PENDING: 'pending',
LOADING: 'loading',
SUCCESS: 'success',
FAILURE: 'failure'
};
/**
* This function tells if there is an error in the steps
* @param {array} steps array of steps
*/
const isErrorInSteps = steps => steps.some(step => step.status === LOADING_STEP_STATUSES.FAILURE);
const getStepInError = steps => steps.find(step => step.status === LOADING_STEP_STATUSES.FAILURE);
/**
* This function tells if all the steps are successful
* @param {array} steps array of steps
*/
const isAllSuccessful = steps => steps.every(step => step.status === LOADING_STEP_STATUSES.SUCCESS);
/**
* This function tells if the loading is done, by an error, a success ot not started
* @param {array} steps array of steps
*/
const isStepsLoading = steps => steps.length !== 0 && !isAllSuccessful(steps) && !isErrorInSteps(steps);
/**
* This function returns a label for some status
* @param {string} status the current step status
*/
function getStatusText(t, status) {
switch (status) {
case LOADING_STEP_STATUSES.ABORTED:
return t('ABORTED', {
defaultValue: ' (Aborted)'
});
case LOADING_STEP_STATUSES.PENDING:
return t('PENDING', {
defaultValue: ' (Pending)'
});
default:
return null;
}
}
/**
* This function returns an icon that represent the current step
* @param {string} status the current step status
*/
function getIconByStatus(status) {
const iconCLass = getClass(`stepper-icon-${status}`, 'stepper-icon');
switch (status) {
case LOADING_STEP_STATUSES.SUCCESS:
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: "talend-check",
className: iconCLass
});
case LOADING_STEP_STATUSES.ABORTED:
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: "talend-cross",
className: iconCLass
});
case LOADING_STEP_STATUSES.PENDING:
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: iconCLass,
children: "-"
});
case LOADING_STEP_STATUSES.FAILURE:
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: "talend-warning",
className: iconCLass
});
case LOADING_STEP_STATUSES.LOADING:
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
className: iconCLass
});
default:
return null;
}
}
function changeTransitionState(newTransitionState, setTransitionState, timer = 0) {
if (timer === 0) {
setTransitionState(newTransitionState);
} else {
setTimeout(() => {
setTransitionState(newTransitionState);
}, timer);
}
}
/**
* This function returns a rendered step
* @param {object} step the current loading step
* @param {number} index the index for the key
*/
function showStep(t, step, index, steps) {
const cssStep = getClass('stepper-step', `stepper-step-${step.status}`);
const a11y = {};
if ([LOADING_STEP_STATUSES.LOADING, LOADING_STEP_STATUSES.FAILURE].includes(step.status) || index === steps.length - 1 && step.status === LOADING_STEP_STATUSES.SUCCESS) {
a11y['aria-current'] = true;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
className: cssStep,
...a11y,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: getClass('stepper-step-infos'),
children: [getIconByStatus(step.status), step.label, getStatusText(t, step.status)]
}), step.message && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: getClass('stepper-step-message'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: getClass('stepper-step-message-label'),
children: step.message.label
}), step.message.description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
children: step.message.description
})]
})]
}, `step-${index}`);
}
/**
* This function generates a set transition state function
* @param {string} transition the transition state to set
* @param {number} timer the timer to set the transition
*/
function transition(transitionState, timer = 0) {
return setTransitionState => changeTransitionState(transitionState, setTransitionState, timer);
}
const transitionLoadingToEmpty = transition(TRANSITION_STATE.TRANSITION, SHOW_COMPLETED_TRANSITION_TIMER);
const transitionEmptyToChildren = transition(TRANSITION_STATE.CHILD, SHOW_COMPLETED_TRANSITION_TIMER + _StepperTransition.DEFAULT_TRANSITION_DURATION);
const transitionChildrenToEmpty = transition(TRANSITION_STATE.TRANSITION);
const transitionEmptyToLoading = transition(TRANSITION_STATE.STEPS, _StepperTransition.DEFAULT_TRANSITION_DURATION);
function Stepper({
steps,
title,
renderActions,
children
}) {
const {
t
} = (0, _reactI18next.useTranslation)(_constants.default);
const errorStep = getStepInError(steps);
const [transitionState, setTransitionState] = (0, _react.useState)(isStepsLoading(steps) || !children ? TRANSITION_STATE.STEPS : TRANSITION_STATE.CHILD);
(0, _react.useEffect)(() => {
const allSuccessful = isAllSuccessful(steps);
if (children && allSuccessful && (transitionState === TRANSITION_STATE.STEPS || transitionState === TRANSITION_STATE.TRANSITION)) {
transitionLoadingToEmpty(setTransitionState);
transitionEmptyToChildren(setTransitionState);
} else if (!allSuccessful && transitionState === TRANSITION_STATE.CHILD) {
transitionChildrenToEmpty(setTransitionState);
transitionEmptyToLoading(setTransitionState);
}
}, [steps]);
if (!!errorStep) {
var _errorStep$message;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: getClass('loading-content-steps', 'error'),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.StackVertical, {
gap: 0,
align: "center",
justify: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ErrorState, {
title: errorStep.label,
description: (_errorStep$message = errorStep.message) === null || _errorStep$message === void 0 ? void 0 : _errorStep$message.label
}), renderActions && renderActions(!!errorStep) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: renderActions(!!errorStep)
}) : null]
})
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperTransition.StepperTransition, {
active: transitionState === TRANSITION_STATE.CHILD,
children: children
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperTransition.StepperTransition, {
active: transitionState === TRANSITION_STATE.STEPS,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: getClass('stepper'),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: getClass('loading-content-steps'),
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
className: getClass('stepper-steps'),
children: steps.map((step, index, array) => showStep(t, step, index, array))
})]
})
})
})]
});
}
Stepper.displayName = 'Stepper';
Stepper.defaultProps = {
steps: []
};
Stepper.propTypes = {
title: _propTypes.default.string,
renderActions: _propTypes.default.func,
children: _propTypes.default.element,
steps: _propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.string,
status: _propTypes.default.oneOf(Object.values(LOADING_STEP_STATUSES)),
message: _propTypes.default.shape({
label: _propTypes.default.string,
description: _propTypes.default.string
})
}))
};
Stepper.SHOW_COMPLETED_TRANSITION_TIMER = SHOW_COMPLETED_TRANSITION_TIMER;
Stepper.LOADING_STEP_STATUSES = LOADING_STEP_STATUSES;
Stepper.isStepsLoading = isStepsLoading;
Stepper.isAllSuccessful = isAllSuccessful;
Stepper.isErrorInSteps = isErrorInSteps;
Stepper.Form = _designSystem.Stepper;
var _default = exports.default = Stepper;
//# sourceMappingURL=Stepper.component.js.map