phx-react
Version:
PHX REACT
102 lines • 8.19 kB
JavaScript
;
exports.__esModule = true;
exports.PHXStep = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var solid_1 = require("@heroicons/react/24/solid");
var Card_1 = require("../Card");
var PHXStep = function (_a) {
var _b, _c;
var className = _a.className, steps = _a.steps, nextLabel = _a.nextLabel, backLabel = _a.backLabel, formMode = _a.formMode, onSubmit = _a.onSubmit, triggerStep = _a.triggerStep;
var _d = (0, react_1.useState)(1), currentStep = _d[0], setCurrentStep = _d[1];
var _e = (0, react_1.useState)([]), listSteps = _e[0], setListSteps = _e[1];
var handleClickToStep = function (stepItem) {
var _a, _b;
var isNextStep = ((_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find(function (itemChild) { return itemChild.step === currentStep; })) === null || _a === void 0 ? void 0 : _a.isPass) ||
((_b = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find(function (itemChild) { return itemChild.step === stepItem.step; })) === null || _b === void 0 ? void 0 : _b.isPass);
if (!isNextStep)
return;
if (stepItem.step > currentStep) {
handleNextStep();
}
else {
handleBackStep(stepItem);
}
};
var handleBackStep = function (stepItem) {
var _a;
var funcCallBackStep = (_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find(function (func) { return func.step === currentStep; })) === null || _a === void 0 ? void 0 : _a.onBack;
if (funcCallBackStep && formMode !== 'readOnly')
funcCallBackStep();
if (stepItem && stepItem.step) {
setCurrentStep(stepItem.step);
}
else {
setCurrentStep(function (currentStep) { return currentStep - 1; });
}
};
var handleNextStep = function () {
var _a;
var funcCallNextStep = (_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find(function (func) { return func.step === currentStep; })) === null || _a === void 0 ? void 0 : _a.onNext;
if (funcCallNextStep && formMode !== 'readOnly')
funcCallNextStep();
if (currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length)) {
onSubmit();
return;
}
else {
listSteps === null || listSteps === void 0 ? void 0 : listSteps.forEach(function (item) {
if (item.step === currentStep + 1 && item.status !== 'complete')
item.status = 'current';
if (item.step === currentStep)
item.status = 'complete';
});
}
setCurrentStep(function (currentStep) { return currentStep + 1; });
};
(0, react_1.useEffect)(function () {
if (steps) {
var listNew = steps === null || steps === void 0 ? void 0 : steps.map(function (item, index) {
if (index === 0) {
return tslib_1.__assign(tslib_1.__assign({}, item), { status: 'current' });
}
else {
return tslib_1.__assign(tslib_1.__assign({}, item), { status: 'upcoming' });
}
});
if (formMode !== 'addNew')
listNew = steps === null || steps === void 0 ? void 0 : steps.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), { status: 'complete' })); });
setListSteps(listNew);
}
}, []);
return (react_1["default"].createElement("div", { className: className },
react_1["default"].createElement(Card_1.PHXCard, { primaryFooterAction: {
content: currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) ? (formMode !== 'readOnly' ? 'Submit' : '') : nextLabel,
submit: false,
onClick: handleNextStep,
disabled: ((_b = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find(function (stepChild) { return stepChild.step === currentStep; })) === null || _b === void 0 ? void 0 : _b.isPass) === false
}, secondaryFooterActions: [{ content: currentStep !== 1 ? backLabel : '', onClick: handleBackStep }] },
react_1["default"].createElement("nav", { "aria-label": 'Progress' },
react_1["default"].createElement("ol", { role: 'list', className: 'divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0' }, listSteps &&
listSteps.map(function (stepItem, stepIdx) { return (react_1["default"].createElement("li", { key: stepIdx, className: 'relative cursor-pointer md:flex md:flex-1' },
react_1["default"].createElement("button", { type: 'button', onClick: function () { return handleClickToStep(stepItem); } },
stepItem.status === 'complete' ? (react_1["default"].createElement("div", { className: 'group flex w-full items-center' },
react_1["default"].createElement("span", { className: 'flex items-center px-6 py-3 text-sm font-medium' },
react_1["default"].createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800' },
react_1["default"].createElement(solid_1.CheckIcon, { className: 'h-6 w-6 text-white', "aria-hidden": 'true' })),
react_1["default"].createElement("span", { className: 'ml-4 text-sm font-medium text-gray-900' }, stepItem.title)))) : stepItem.status === 'current' ? (react_1["default"].createElement("div", { className: 'flex items-center px-6 py-3 text-sm font-medium', "aria-current": 'step' },
react_1["default"].createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-indigo-600' },
react_1["default"].createElement("span", { className: 'text-indigo-600' }, stepItem.step)),
react_1["default"].createElement("span", { className: 'ml-4 text-sm font-medium text-indigo-600' }, stepItem.title))) : (react_1["default"].createElement("div", { className: 'group flex items-center' },
react_1["default"].createElement("span", { className: 'flex items-center px-6 py-3 text-sm font-medium' },
react_1["default"].createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400' },
react_1["default"].createElement("span", { className: 'text-gray-500 group-hover:text-gray-900' }, stepItem.step)),
react_1["default"].createElement("span", { className: 'ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900' }, stepItem.title)))),
stepIdx !== (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) - 1 ? (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: 'absolute right-0 top-0 hidden h-full w-5 md:block', "aria-hidden": 'true' },
react_1["default"].createElement("svg", { className: 'h-full w-full text-gray-300', viewBox: '0 0 22 80', fill: 'none', preserveAspectRatio: 'none' },
react_1["default"].createElement("path", { d: 'M0 -2L20 40L0 82', vectorEffect: 'non-scaling-stroke', stroke: 'currentcolor', strokeLinejoin: 'round' }))))) : null))); }))), (_c = listSteps === null || listSteps === void 0 ? void 0 : listSteps.find(function (item) { return item.step === currentStep; })) === null || _c === void 0 ? void 0 :
_c.component)));
};
exports.PHXStep = PHXStep;
//# sourceMappingURL=Step.js.map