phx-react
Version:
PHX REACT
173 lines • 12.9 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXFormStep = void 0;
var tslib_1 = require("tslib");
var solid_1 = require("@heroicons/react/24/solid");
var react_1 = tslib_1.__importStar(require("react"));
var react_hook_form_1 = require("react-hook-form");
var FormWrap_1 = require("../FormWrap");
var Card_1 = require("../Card");
var PHXFormStep = function (_a) {
var _b;
var backLabel = _a.backLabel, backRout = _a.backRout, className = _a.className, formMode = _a.formMode, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, nextLabel = _a.nextLabel, onSubmit = _a.onSubmit, _d = _a.size, size = _d === void 0 ? 'large' : _d, steps = _a.steps, title = _a.title, triggerStep = _a.triggerStep, _e = _a.deleted, deleted = _e === void 0 ? false : _e, onDelete = _a.onDelete;
var _f = (0, react_1.useState)(1), currentStep = _f[0], setCurrentStep = _f[1];
var _g = (0, react_1.useState)([]), listSteps = _g[0], setListSteps = _g[1];
var form = (0, react_hook_form_1.useForm)();
function findNextStepCurrent(item) {
return item.step === currentStep + 1 && item.status !== 'complete';
}
var nextStep = function (data, stepItem) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var isPass, funcCallNextStep, satusCurrentStep, error_1;
var _a, _b;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0:
_c.trys.push([0, 3, , 4]);
isPass = true;
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;
satusCurrentStep = (_b = listSteps === null || listSteps === void 0 ? void 0 : listSteps.find(function (item) { return item.step === currentStep; })) === null || _b === void 0 ? void 0 : _b.status;
if (!funcCallNextStep) return [3 /*break*/, 2];
return [4 /*yield*/, funcCallNextStep(data, satusCurrentStep)];
case 1:
isPass = _c.sent();
_c.label = 2;
case 2:
// Dựa vào giá trị của hàm triggerStep trả về để quyết định xem Step có pass hay không
if (!isPass)
return [2 /*return*/];
if (currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length)) {
onSubmit(data);
return [2 /*return*/];
}
listSteps === null || listSteps === void 0 ? void 0 : listSteps.forEach(function (item) {
if (findNextStepCurrent(item)) {
// Cập nhật trạng thái cho thằng step tiếp theo
item.status = 'current';
}
if (item.step === currentStep)
item.status = 'complete';
});
// Kiểm tra xem có thằng StepItem truyền đến không và Step đó phải khác upcoming thì mới cho truyển đến Step đó
if (stepItem && stepItem.step && stepItem.status !== 'upcoming') {
setCurrentStep(stepItem.step);
}
else {
setCurrentStep(function (currentStep) { return currentStep + 1; });
}
return [3 /*break*/, 4];
case 3:
error_1 = _c.sent();
console.error;
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
// Tạo một hàm trung gian để xử lý việc gọi hàm nextStep với tham số bổ sung.
var handleNextStepWithParam = function (stepItem) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var onSubmitWithParam;
return tslib_1.__generator(this, function (_a) {
onSubmitWithParam = form.handleSubmit(function (data) { return nextStep(data, stepItem); });
onSubmitWithParam();
return [2 /*return*/];
});
}); };
var handleBackStep = function (stepItem) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var funcCallBackStep;
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
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')) return [3 /*break*/, 2];
return [4 /*yield*/, funcCallBackStep()];
case 1:
_b.sent();
_b.label = 2;
case 2:
if (stepItem && stepItem.step) {
setCurrentStep(stepItem.step);
}
else {
setCurrentStep(function (currentStep) { return currentStep - 1; });
}
return [2 /*return*/];
}
});
}); };
var handleNextStep = function () {
setCurrentStep(function (currentStep) { return currentStep + 1; });
};
var handleFindSubmitText = function (formMode) {
switch (formMode) {
case 'addNew':
return 'Thêm mới';
case 'edit':
return 'Cập nhật';
case 'readOnly':
return '';
default:
return 'Submit';
}
};
(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(react_hook_form_1.FormProvider, tslib_1.__assign({}, form),
react_1["default"].createElement(FormWrap_1.PHXFormWrap, { className: 'w-full', footerAction: deleted, onCancel: backRout, onSubmit: formMode === 'readOnly' ? form.handleSubmit(handleNextStep) : form.handleSubmit(nextStep), size: size, title: title, deleted: deleted, onlyDelete: deleted, onDelete: onDelete },
react_1["default"].createElement(Card_1.PHXCard, { primaryFooterAction: {
content: currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) ? handleFindSubmitText(formMode) : nextLabel,
// content: currentStep === listSteps?.length ? (formMode !== 'readOnly' ? 'Submit' : '') : nextLabel,
submit: true,
loading: isLoading
}, secondaryFooterActions: [
{
content: currentStep !== 1 ? backLabel : '',
onClick: handleBackStep
},
] },
react_1["default"].createElement("nav", { "aria-label": 'Progress' },
react_1["default"].createElement("ol", { className: 'divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0', role: 'list' }, 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", { disabled: stepItem.step === currentStep, onClick: function () {
return stepItem.step < currentStep || formMode === 'readOnly'
? handleBackStep(stepItem)
: handleNextStepWithParam(stepItem);
}, type: 'button' },
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-500 group-hover:bg-indigo-700 ".concat(stepItem.step === currentStep && 'bg-indigo-800') },
react_1["default"].createElement(solid_1.CheckIcon, { "aria-hidden": 'true', className: 'h-6 w-6 text-white' })),
react_1["default"].createElement("span", { className: 'ml-4 text-sm font-medium text-gray-900' }, stepItem.title),
stepItem.required && (react_1["default"].createElement("span", { className: 'ml-1 text-xs font-medium text-red-500' }, "(*)"))))) : stepItem.status === 'current' ? (react_1["default"].createElement("div", { "aria-current": 'step', 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-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),
stepItem.required && (react_1["default"].createElement("span", { className: 'ml-1 text-xs font-medium text-red-500' }, "(*)")))) : (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),
stepItem.required && (react_1["default"].createElement("span", { className: 'ml-1 text-xs font-medium text-red-500' }, "(*)"))))),
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", { "aria-hidden": 'true', className: 'absolute right-0 top-0 hidden h-full w-5 md:block' },
react_1["default"].createElement("svg", { className: 'h-full w-full text-gray-300', fill: 'none', preserveAspectRatio: 'none', viewBox: '0 0 22 80' },
react_1["default"].createElement("path", { d: 'M0 -2L20 40L0 82', stroke: 'currentcolor', strokeLinejoin: 'round', vectorEffect: 'non-scaling-stroke' }))))) : null))); }))),
react_1["default"].createElement("div", { className: 'pt-3' }, (_b = listSteps === null || listSteps === void 0 ? void 0 : listSteps.find(function (item) { return item.step === currentStep; })) === null || _b === void 0 ? void 0 : _b.component))))));
};
exports.PHXFormStep = PHXFormStep;
//# sourceMappingURL=FormStep.js.map