phx-uikit 1.0.0

package/dist/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,101 @@
+"use strict";
+exports.__esModule = true;
+exports.PHXSkeleton = void 0;
+var tslib_1 = require("tslib");
+var Card_1 = require("../Card/Card");
+var react_1 = tslib_1.__importDefault(require("react"));
+var types_1 = require("../types");
+function PHXSkeleton(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? 'extra-large' : _b, _c = _a.type, type = _c === void 0 ? 'default' : _c, filterQty = _a.filterQty, reportQty = _a.reportQty;
+    var skeletonClass = (0, types_1.classNames)(
+    // @ts-ignore
+    size === 'small' && 'mx-auto md:w-5/6 xl:w-1/2', size === 'medium' && 'mx-auto md:w-5/6 lg:w-3/4', size === 'large' && 'mx-auto md:w-md lg:w-11/12', size === 'extra-large' && 'mx-auto w-full');
+    var Skeleton = function () { return (react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
+        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
+            react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
+            react_1["default"].createElement("div", { className: 'space-y-3' },
+                react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
+                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }))))); };
+    var SkeletonReport = function () { return (react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
+        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
+            react_1["default"].createElement("div", { className: 'space-y-3' },
+                react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
+                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
+                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }))))); };
+    var SkeletonReportOnly = function () { return (react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
+        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
+            react_1["default"].createElement("div", { className: 'space-y-2.5' },
+                react_1["default"].createElement("div", { className: 'h-2 w-3/4 rounded bg-gray-200' }),
+                react_1["default"].createElement("div", { className: 'h-7 w-1/4 rounded bg-gray-200' }))))); };
+    // const TableLoad = () => {
+    //   return type !== 'table' ? <div className='h-3 w-1/4 rounded bg-gray-200' /> : null
+    // }
+    return (react_1["default"].createElement(react_1["default"].Fragment, null, type === 'single' || type === 'only-header' || type === 'only-report' ? (react_1["default"].createElement(react_1["default"].Fragment, null,
+        type === 'single' && (react_1["default"].createElement("div", { className: "flex animate-pulse space-x-4 ".concat(className) },
+            react_1["default"].createElement("div", { className: 'h-3 w-full rounded bg-gray-300' }))),
+        type === 'only-header' && react_1["default"].createElement("div", { className: "h-7 rounded bg-gray-200 ".concat(className) }),
+        type === 'only-report' && (react_1["default"].createElement("div", { className: className },
+            react_1["default"].createElement(Card_1.PHXCard, null,
+                react_1["default"].createElement(SkeletonReportOnly, null)))))) : (react_1["default"].createElement("div", { className: "".concat(className, " ").concat(skeletonClass) },
+        type !== 'table' ? (react_1["default"].createElement("div", { className: 'mb-7 flex animate-pulse space-x-4' },
+            react_1["default"].createElement("div", { className: 'h-7 w-1/6 rounded bg-gray-200' }))) : null,
+        react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'default' ||
+                type === 'table' ||
+                type === 'page' ||
+                type === 'page-with-table' ||
+                type === 'page-table-with-report' ||
+                type === 'page-table-report-filter' ||
+                type === 'page-table-filter'
+                ? ''
+                : 'grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-4') },
+            react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'default' ? '' : 'grid grid-cols-1 gap-4 lg:col-span-2') },
+                (type === 'page-table-report-filter' || type === 'page-table-filter') && (react_1["default"].createElement("div", { className: 'flex gap-x-3' }, tslib_1.__spreadArray([], Array(filterQty), true).map(function (_, index) { return (react_1["default"].createElement("div", { key: index, className: 'h-7 w-20 rounded bg-gray-200 animate-pulse' })); }))),
+                (type === 'page-table-with-report' || type === 'page-table-report-filter') && (react_1["default"].createElement(react_1["default"].Fragment, null, tslib_1.__spreadArray([], Array(reportQty), true).map(function (_, index) { return (react_1["default"].createElement(Card_1.PHXCard, { key: index },
+                    react_1["default"].createElement(SkeletonReport, null))); }))),
+                react_1["default"].createElement(Card_1.PHXCard, null,
+                    react_1["default"].createElement(Skeleton, null),
+                    type === 'page' || type === 'page-col' ? null : (react_1["default"].createElement(react_1["default"].Fragment, null,
+                        react_1["default"].createElement(Skeleton, null),
+                        react_1["default"].createElement(Skeleton, null))),
+                    (type === 'table' ||
+                        type === 'page-with-table' ||
+                        type === 'page-table-with-report' ||
+                        type === 'page-table-report-filter' ||
+                        type === 'page-table-filter') && (react_1["default"].createElement(react_1["default"].Fragment, null,
+                        react_1["default"].createElement(Skeleton, null),
+                        react_1["default"].createElement(Skeleton, null),
+                        react_1["default"].createElement(Skeleton, null),
+                        react_1["default"].createElement(Skeleton, null)))),
+                type === 'page' || type === 'page-col' ? (react_1["default"].createElement(react_1["default"].Fragment, null,
+                    react_1["default"].createElement(Card_1.PHXCard, null,
+                        react_1["default"].createElement(Skeleton, null)),
+                    react_1["default"].createElement(Card_1.PHXCard, null,
+                        react_1["default"].createElement(Skeleton, null)))) : null),
+            type === 'col' || type === 'page-col' ? (react_1["default"].createElement("div", { className: 'grid grid-cols-1 gap-4' },
+                react_1["default"].createElement(Card_1.PHXCard, null,
+                    react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
+                        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                            react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
+                            react_1["default"].createElement("div", { className: 'space-y-3' },
+                                react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' }),
+                                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
+                                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }))))),
+                type === 'page-col' && (react_1["default"].createElement(Card_1.PHXCard, null,
+                    react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
+                        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                            react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
+                            react_1["default"].createElement("div", { className: 'space-y-3' },
+                                react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
+                                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' })))))))) : null)))));
+}
+exports.PHXSkeleton = PHXSkeleton;
+//# sourceMappingURL=Skeleton.js.map

package/dist/cjs/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './Skeleton';

package/dist/cjs/components/Skeleton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Skeleton"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/index.ts"],"names":[],"mappings":";;;AAAA,qDAA0B"}

package/dist/cjs/components/Step/Step.d.ts

@@ -0,0 +1,26 @@
+import { UseFormRegisterReturn } from 'react-hook-form';
+import React, { ReactNode } from 'react';
+import { FooterBarProps } from '../FormWrap';
+export interface StepProps {
+    className?: string;
+    register?: UseFormRegisterReturn;
+    steps?: Array<{
+        step: number;
+        title: string;
+        status?: 'current' | 'complete' | 'upcoming';
+        component: ReactNode;
+    }>;
+    nextLabel: string;
+    backLabel: string;
+    formMode: 'addNew' | 'edit' | 'readOnly';
+    onSubmit: any;
+    size?: FooterBarProps['size'];
+    title: FooterBarProps['title'];
+    triggerStep?: Array<{
+        step: number;
+        onNext?: any;
+        onBack?: any;
+        isPass: boolean;
+    }>;
+}
+export declare const PHXStep: React.FC<StepProps>;

package/dist/cjs/components/Step/Step.js

@@ -0,0 +1,102 @@
+"use strict";
+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

package/dist/cjs/components/Step/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../../src/components/Step/Step.tsx"],"names":[],"mappings":";;;;AACA,qDAA6D;AAC7D,mDAAqD;AACrD,gCAAiC;AA0B1B,IAAM,OAAO,GAAwB,UAAC,EAQjC;;QAPV,SAAS,eAAA,EACT,KAAK,WAAA,EACL,SAAS,eAAA,EACT,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,WAAW,iBAAA;IAEL,IAAA,KAAgC,IAAA,gBAAQ,EAAC,CAAC,CAAC,EAA1C,WAAW,QAAA,EAAE,cAAc,QAAe,CAAA;IAC3C,IAAA,KAA4B,IAAA,gBAAQ,EAAqB,EAAE,CAAC,EAA3D,SAAS,QAAA,EAAE,YAAY,QAAoC,CAAA;IAClE,IAAM,iBAAiB,GAAG,UAAC,QAAa;;QACtC,IAAM,UAAU,GACd,CAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAC,UAAC,SAAS,IAAK,OAAA,SAAS,CAAC,IAAI,KAAK,WAAW,EAA9B,CAA8B,CAAC,0CAAE,MAAM;aACxE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAC,UAAC,SAAS,IAAK,OAAA,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,EAAhC,CAAgC,CAAC,0CAAE,MAAM,CAAA,CAAA;QAC5E,IAAI,CAAC,UAAU;YAAE,OAAM;QACvB,IAAI,QAAQ,CAAC,IAAI,GAAG,WAAW,EAAE;YAC/B,cAAc,EAAE,CAAA;SACjB;aAAM;YACL,cAAc,CAAC,QAAQ,CAAC,CAAA;SACzB;IACH,CAAC,CAAA;IACD,IAAM,cAAc,GAAG,UAAC,QAAc;;QACpC,IAAM,gBAAgB,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAC,UAAC,IAAS,IAAK,OAAA,IAAI,CAAC,IAAI,KAAK,WAAW,EAAzB,CAAyB,CAAC,0CAAE,MAAM,CAAA;QAC5F,IAAI,gBAAgB,IAAI,QAAQ,KAAK,UAAU;YAAE,gBAAgB,EAAE,CAAA;QACnE,IAAI,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE;YAC7B,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;SAC9B;aAAM;YACL,cAAc,CAAC,UAAC,WAAW,IAAK,OAAA,WAAW,GAAG,CAAC,EAAf,CAAe,CAAC,CAAA;SACjD;IACH,CAAC,CAAA;IACD,IAAM,cAAc,GAAG;;QACrB,IAAM,gBAAgB,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAC,UAAC,IAAS,IAAK,OAAA,IAAI,CAAC,IAAI,KAAK,WAAW,EAAzB,CAAyB,CAAC,0CAAE,MAAM,CAAA;QAC5F,IAAI,gBAAgB,IAAI,QAAQ,KAAK,UAAU;YAAE,gBAAgB,EAAE,CAAA;QACnE,IAAI,WAAW,MAAK,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAA,EAAE;YACrC,QAAQ,EAAE,CAAA;YACV,OAAM;SACP;aAAM;YACL,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC,UAAC,IAAI;gBACtB,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU;oBAAE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;gBACxF,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;oBAAE,IAAI,CAAC,MAAM,GAAG,UAAU,CAAA;YACzD,CAAC,CAAC,CAAA;SACH;QACD,cAAc,CAAC,UAAC,WAAW,IAAK,OAAA,WAAW,GAAG,CAAC,EAAf,CAAe,CAAC,CAAA;IAClD,CAAC,CAAA;IACD,IAAA,iBAAS,EAAC;QACR,IAAI,KAAK,EAAE;YACT,IAAI,OAAO,GAAuB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;gBACvD,IAAI,KAAK,KAAK,CAAC,EAAE;oBACf,6CACK,IAAI,KACP,MAAM,EAAE,SAAS,IAClB;iBACF;qBAAM;oBACL,6CACK,IAAI,KACP,MAAM,EAAE,UAAU,IACnB;iBACF;YACH,CAAC,CAAC,CAAA;YACF,IAAI,QAAQ,KAAK,QAAQ;gBAAE,OAAO,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,uCAAM,IAAI,KAAE,MAAM,EAAE,UAAU,IAAG,EAAjC,CAAiC,CAAC,CAAA;YAC5F,YAAY,CAAC,OAAO,CAAC,CAAA;SACtB;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL,0CAAK,SAAS,EAAE,SAAS;QACvB,iCAAC,cAAO,IACN,mBAAmB,EAAE;gBACnB,OAAO,EAAE,WAAW,MAAK,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAA,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;gBAClG,MAAM,EAAE,KAAK;gBACb,OAAO,EAAE,cAAc;gBACvB,QAAQ,EAAE,CAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAC,UAAC,SAAS,IAAK,OAAA,SAAS,CAAC,IAAI,KAAK,WAAW,EAA9B,CAA8B,CAAC,0CAAE,MAAM,MAAK,KAAK;aAC7F,EACD,sBAAsB,EAAE,CAAC,EAAE,OAAO,EAAE,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;YAElG,wDAAgB,UAAU;gBACxB,yCAAI,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,kFAAkF,IACzG,SAAS;oBACR,SAAS,CAAC,GAAG,CAAC,UAAC,QAAQ,EAAE,OAAO,IAAK,OAAA,CACnC,yCAAI,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,2CAA2C;wBACrE,6CAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAM,OAAA,iBAAiB,CAAC,QAAQ,CAAC,EAA3B,CAA2B;4BAC7D,QAAQ,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CAChC,0CAAK,SAAS,EAAC,gCAAgC;gCAC7C,2CAAM,SAAS,EAAC,iDAAiD;oCAC/D,2CAAM,SAAS,EAAC,+GAA+G;wCAC7H,iCAAC,iBAAS,IAAC,SAAS,EAAC,oBAAoB,iBAAa,MAAM,GAAG,CAC1D;oCACP,2CAAM,SAAS,EAAC,wCAAwC,IAAE,QAAQ,CAAC,KAAK,CAAQ,CAC3E,CACH,CACP,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAClC,0CAAK,SAAS,EAAC,iDAAiD,kBAAc,MAAM;gCAClF,2CAAM,SAAS,EAAC,kGAAkG;oCAChH,2CAAM,SAAS,EAAC,iBAAiB,IAAE,QAAQ,CAAC,IAAI,CAAQ,CACnD;gCACP,2CAAM,SAAS,EAAC,0CAA0C,IAAE,QAAQ,CAAC,KAAK,CAAQ,CAC9E,CACP,CAAC,CAAC,CAAC,CACF,0CAAK,SAAS,EAAC,yBAAyB;gCACtC,2CAAM,SAAS,EAAC,iDAAiD;oCAC/D,2CAAM,SAAS,EAAC,4HAA4H;wCAC1I,2CAAM,SAAS,EAAC,yCAAyC,IAAE,QAAQ,CAAC,IAAI,CAAQ,CAC3E;oCACP,2CAAM,SAAS,EAAC,kEAAkE,IAC/E,QAAQ,CAAC,KAAK,CACV,CACF,CACH,CACP;4BACA,OAAO,KAAK,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,CACnC;gCAEE,0CAAK,SAAS,EAAC,mDAAmD,iBAAa,MAAM;oCACnF,0CACE,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,mBAAmB,EAAC,MAAM;wCAE1B,2CACE,CAAC,EAAC,kBAAkB,EACpB,YAAY,EAAC,oBAAoB,EACjC,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,GACtB,CACE,CACF,CACL,CACJ,CAAC,CAAC,CAAC,IAAI,CACD,CACN,CACN,EArDoC,CAqDpC,CAAC,CACD,CACD,EACL,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,IAAI,KAAK,WAAW,EAAzB,CAAyB,CAAC;eAAE,SAAS,CACxD,CACN,CACP,CAAA;AACH,CAAC,CAAA;AA1IY,QAAA,OAAO,WA0InB"}

package/dist/cjs/components/Step/index.d.ts

@@ -0,0 +1 @@
+export * from './Step';

package/dist/cjs/components/Step/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Step"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Step/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Step/index.tsx"],"names":[],"mappings":";;;AAAA,iDAAsB"}

package/dist/cjs/components/Table/ColumnInRowTable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ColumnInRowTable: ({ value, itemBody }: any) => React.JSX.Element;
+export default ColumnInRowTable;

package/dist/cjs/components/Table/ColumnInRowTable.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var ColumnInRowTable = function (_a) {
+    var value = _a.value, itemBody = _a.itemBody;
+    console.log('value:', value);
+    console.log('item body', itemBody);
+    return react_1["default"].createElement("div", null, "12");
+};
+exports["default"] = ColumnInRowTable;
+//# sourceMappingURL=ColumnInRowTable.js.map

package/dist/cjs/components/Table/ColumnInRowTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnInRowTable.js","sourceRoot":"","sources":["../../../../src/components/Table/ColumnInRowTable.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,IAAM,gBAAgB,GAAG,UAAC,EAAwB;QAAtB,KAAK,WAAA,EAAE,QAAQ,cAAA;IACzC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAC5B,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;IAClC,OAAO,mDAAa,CAAA;AACtB,CAAC,CAAA;AACD,qBAAe,gBAAgB,CAAA"}

package/dist/cjs/components/Table/EmptyRecord.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function EmptyRecord(): React.JSX.Element;

package/dist/cjs/components/Table/EmptyRecord.js

@@ -0,0 +1,17 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+function EmptyRecord() {
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement("div", { className: 'bg-white shadow sm:rounded-lg' },
+            react_1["default"].createElement("div", { className: 'flex flex-col' },
+                react_1["default"].createElement("div", { className: 'min-w-full px-6 py-2 pb-20 pt-20 align-middle md:px-6 md:pr-0 lg:px-8' },
+                    react_1["default"].createElement("div", { className: 'px-4 py-5 sm:p-6' },
+                        react_1["default"].createElement("div", { className: 'text-center' },
+                            react_1["default"].createElement("svg", { "aria-hidden": 'true', className: 'mx-auto h-12 w-12 text-gray-400', fill: 'none', stroke: 'currentColor', viewBox: '0 0 48 48', xmlns: 'http://www.w3.org/2000/svg' },
+                                react_1["default"].createElement("path", { d: 'M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2 })),
+                            react_1["default"].createElement("h3", { className: 'mt-2 text-sm font-medium text-gray-900' }, "D\u1EEF li\u1EC7u \u0111ang tr\u1ED1ng"))))))));
+}
+exports["default"] = EmptyRecord;
+//# sourceMappingURL=EmptyRecord.js.map

package/dist/cjs/components/Table/EmptyRecord.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyRecord.js","sourceRoot":"","sources":["../../../../src/components/Table/EmptyRecord.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,SAAwB,WAAW;IACjC,OAAO,CACL;QACE,0CAAK,SAAS,EAAC,+BAA+B;YAC5C,0CAAK,SAAS,EAAC,eAAe;gBAC5B,0CAAK,SAAS,EAAC,uEAAuE;oBACpF,0CAAK,SAAS,EAAC,kBAAkB;wBAC/B,0CAAK,SAAS,EAAC,aAAa;4BAC1B,yDACc,MAAM,EAClB,SAAS,EAAC,iCAAiC,EAC3C,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;gCAElC,2CACE,CAAC,EAAC,mNAAmN,EACrN,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,GACd,CACE;4BACN,yCAAI,SAAS,EAAC,wCAAwC,6CAAwB,CAC1E,CACF,CACF,CACF,CACF,CACL,CACJ,CAAA;AACH,CAAC;AA/BD,iCA+BC"}

package/dist/cjs/components/Table/EmptySearchResult.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+export default function EmptySearchResult({ className }: Props): React.JSX.Element;
+export {};

package/dist/cjs/components/Table/EmptySearchResult.js

@@ -0,0 +1,17 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+function EmptySearchResult(_a) {
+    var className = _a.className;
+    return (react_1["default"].createElement("div", { className: "-mx-4 -my-2 sm:-mx-6 lg:-mx-8 ".concat(className) },
+        react_1["default"].createElement("div", { className: 'flex h-60 min-w-full items-center justify-center py-2 align-middle md:px-6 md:pr-0 lg:px-8' },
+            react_1["default"].createElement("div", { className: 'bg-white px-4 py-5 sm:p-6' },
+                react_1["default"].createElement("div", { className: 'text-center' },
+                    react_1["default"].createElement("svg", { className: 'mx-auto h-14 w-14 text-gray-400', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
+                        react_1["default"].createElement("path", { d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })),
+                    react_1["default"].createElement("h3", { className: 'text-md mt-2 font-medium text-gray-900' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"),
+                    react_1["default"].createElement("p", { className: 'text-md mt-1 text-gray-500' }, "H\u00E3y th\u1EED thay \u0111\u1ED5i c\u00FA ph\u00E1p t\u00ECm ki\u1EBFm"))))));
+}
+exports["default"] = EmptySearchResult;
+//# sourceMappingURL=EmptySearchResult.js.map

package/dist/cjs/components/Table/EmptySearchResult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptySearchResult.js","sourceRoot":"","sources":["../../../../src/components/Table/EmptySearchResult.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAMzB,SAAwB,iBAAiB,CAAC,EAAoB;QAAlB,SAAS,eAAA;IACnD,OAAO,CACL,0CAAK,SAAS,EAAE,wCAAiC,SAAS,CAAE;QAC1D,0CAAK,SAAS,EAAC,4FAA4F;YACzG,0CAAK,SAAS,EAAC,2BAA2B;gBACxC,0CAAK,SAAS,EAAC,aAAa;oBAC1B,0CACE,SAAS,EAAC,iCAAiC,EAC3C,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;wBAElC,2CACE,CAAC,EAAC,6CAA6C,EAC/C,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,GACf,CACE;oBACN,yCAAI,SAAS,EAAC,wCAAwC,2CAAsB;oBAC5E,wCAAG,SAAS,EAAC,4BAA4B,gFAAsC,CAC3E,CACF,CACF,CACF,CACP,CAAA;AACH,CAAC;AA3BD,uCA2BC"}

package/dist/cjs/components/Table/PaginaitonSelected.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function PaginationSelected({ rowQuantity, setIsChangeRowQty, setRowQuantity }: any): React.JSX.Element;
+export default PaginationSelected;

package/dist/cjs/components/Table/PaginaitonSelected.js

@@ -0,0 +1,22 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Dropdown_1 = require("../Dropdown");
+var optionNumber = [150, 125, 100, 75, 50, 25, 10];
+function PaginationSelected(_a) {
+    var rowQuantity = _a.rowQuantity, setIsChangeRowQty = _a.setIsChangeRowQty, setRowQuantity = _a.setRowQuantity;
+    var options = optionNumber.map(function (item) { return ({
+        content: item + '',
+        active: rowQuantity === item,
+        onClick: function () {
+            setRowQuantity(item);
+            setIsChangeRowQty(true);
+        }
+    }); });
+    return (react_1["default"].createElement("div", { className: 'flex items-center gap-x-1' },
+        react_1["default"].createElement(Dropdown_1.PHXDropdown, { buttonContent: "".concat(rowQuantity), options: options, origin: 'top-left', type: 'soft-small' }),
+        react_1["default"].createElement("p", { className: 'text-xs' }, "b\u1EA3n ghi/trang")));
+}
+exports["default"] = PaginationSelected;
+//# sourceMappingURL=PaginaitonSelected.js.map

package/dist/cjs/components/Table/PaginaitonSelected.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginaitonSelected.js","sourceRoot":"","sources":["../../../../src/components/Table/PaginaitonSelected.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AACzB,wCAAyC;AAEzC,IAAM,YAAY,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;AAEpD,SAAS,kBAAkB,CAAC,EAAuD;QAArD,WAAW,iBAAA,EAAE,iBAAiB,uBAAA,EAAE,cAAc,oBAAA;IAC1E,IAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CAAC;QAC/C,OAAO,EAAE,IAAI,GAAG,EAAE;QAClB,MAAM,EAAE,WAAW,KAAK,IAAI;QAC5B,OAAO,EAAE;YACP,cAAc,CAAC,IAAI,CAAC,CAAA;YACpB,iBAAiB,CAAC,IAAI,CAAC,CAAA;QACzB,CAAC;KACF,CAAC,EAP8C,CAO9C,CAAC,CAAA;IAEH,OAAO,CACL,0CAAK,SAAS,EAAC,2BAA2B;QACxC,iCAAC,sBAAW,IAAC,aAAa,EAAE,UAAG,WAAW,CAAE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAC,UAAU,EAAC,IAAI,EAAC,YAAY,GAAG;QACtG,wCAAG,SAAS,EAAC,SAAS,yBAAkB,CACpC,CACP,CAAA;AACH,CAAC;AAED,qBAAe,kBAAkB,CAAA"}

package/dist/cjs/components/Table/Pagination.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Pagination: ({ currentPage, handleChangePage, totalPages, pagination, rowQuantity, count }: any) => React.JSX.Element;
+export default Pagination;

package/dist/cjs/components/Table/Pagination.js

@@ -0,0 +1,54 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+var react_1 = tslib_1.__importDefault(require("react"));
+function classNames() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes.filter(Boolean).join(' ');
+}
+var Pagination = function (_a) {
+    var currentPage = _a.currentPage, handleChangePage = _a.handleChangePage, totalPages = _a.totalPages, pagination = _a.pagination, rowQuantity = _a.rowQuantity, count = _a.count;
+    var pages = [];
+    for (var i = 1; i <= totalPages; i++) {
+        pages.push(i);
+    }
+    var handleClickPage = function (page) {
+        handleChangePage(page);
+    };
+    var disableNextPage = currentPage === totalPages;
+    var disablePrevPage = currentPage === 1;
+    var PreviousPage = function () { return (react_1["default"].createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex bg-[#ebebeb] rounded-tl-lg pb-1 pt-0.5 rounded-bl-lg items-center px-3 text-gray-900 focus:z-20 focus:outline-offset-0 min-h-[1.75rem]', !disablePrevPage ? 'hover:bg-[#d4d4d4]' : '', !disablePrevPage
+            ? 'active:bg-[#ccc] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:pt-[0.2rem] active:pb-[0.2rem]'
+            : '', !disablePrevPage ? 'cursor-pointer' : ''), onClick: function () { return handleClickPage(currentPage - 1); } },
+        react_1["default"].createElement("p", null,
+            react_1["default"].createElement("span", { className: 'sr-only' }, "Previous"),
+            react_1["default"].createElement(react_fontawesome_1.FontAwesomeIcon, { className: classNames('w-2.5 h-3', disablePrevPage ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleLeft })))); };
+    var NextPage = function () { return (react_1["default"].createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex rounded-tr-lg bg-[#ebebeb] pb-1 pt-0.5 rounded-br-lg items-center rounded-r-md px-3 text-gray-900 focus:z-20 focus:outline-offset-0 min-h-[1.75rem]', !disableNextPage ? 'hover:bg-[#d4d4d4]' : '', !disableNextPage
+            ? 'active:bg-[#ccc] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:pt-[0.01rem] active:pb-[0.03rem]'
+            : '', !disableNextPage ? 'cursor-pointer' : ''), onClick: function () { return handleClickPage(currentPage + 1); } },
+        react_1["default"].createElement("p", null,
+            react_1["default"].createElement("span", { className: 'sr-only' }, "Next"),
+            react_1["default"].createElement(react_fontawesome_1.FontAwesomeIcon, { className: classNames('w-2.5 h-3', disableNextPage ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleRight })))); };
+    var startIndex = pagination * rowQuantity + 1;
+    var endIndex = pagination * rowQuantity + rowQuantity;
+    return (react_1["default"].createElement("div", { className: 'flex items-center gap-x-3' },
+        react_1["default"].createElement("p", { className: 'hidden text-xs sm:block' },
+            "Hi\u1EC3n th\u1ECB ",
+            startIndex,
+            " - ",
+            endIndex >= count ? count : endIndex,
+            " tr\u00EAn ",
+            count,
+            " b\u1EA3n ghi"),
+        react_1["default"].createElement("div", { className: 'isolate inline-flex -space-x-px rounded-md bg-white shadow-sm' },
+            react_1["default"].createElement("div", { className: 'mr-1' },
+                react_1["default"].createElement(PreviousPage, null)),
+            react_1["default"].createElement(NextPage, null))));
+};
+exports["default"] = Pagination;
+//# sourceMappingURL=Pagination.js.map

package/dist/cjs/components/Table/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../src/components/Table/Pagination.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Table/RowTable.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ *
+ * @param bodyIndex
+ * @param item
+ * @param thBody eg: ["id", "admissions_code", "student_name", "created_at"]
+ * @param thBodyFilter
+ * @param selectedPeople
+ * @param brSetSelectedPeople
+ * @constructor
+ */
+export declare const RowTable: ({ bodyIndex, brSetSelectedPeople, itemBody, selectedAllPeople, selectedPeople, thBody, thBodyComponent, thBodyFilter, onChange, directDetail, numericalOrder, }: any) => React.JSX.Element;

package/dist/cjs/components/Table/RowTable.js

@@ -0,0 +1,117 @@
+"use strict";
+exports.__esModule = true;
+exports.RowTable = void 0;
+var tslib_1 = require("tslib");
+/* eslint-disable prettier/prettier */
+var react_1 = tslib_1.__importDefault(require("react"));
+function classNames() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes.filter(Boolean).join(' ');
+}
+/**
+ *
+ * @param bodyIndex
+ * @param item
+ * @param thBody eg: ["id", "admissions_code", "student_name", "created_at"]
+ * @param thBodyFilter
+ * @param selectedPeople
+ * @param brSetSelectedPeople
+ * @constructor
+ */
+var RowTable = function (_a) {
+    var bodyIndex = _a.bodyIndex, brSetSelectedPeople = _a.brSetSelectedPeople, itemBody = _a.itemBody, // Là bản ghi record từng hàng
+    selectedAllPeople = _a.selectedAllPeople, selectedPeople = _a.selectedPeople, thBody = _a.thBody, thBodyComponent = _a.thBodyComponent, thBodyFilter = _a.thBodyFilter, onChange = _a.onChange, directDetail = _a.directDetail, numericalOrder = _a.numericalOrder;
+    function renderInclude(person) {
+        // @ts-ignore
+        return selectedPeople.includes(person);
+    }
+    /**
+     * Kiểm tra có phải đang lấy dữ liệu bên trong 1 object khác hay không
+     * @param value
+     */
+    var nestedSplit = function (value) { return value.split('.'); };
+    var dataNestedSplit = nestedSplit(thBody[bodyIndex]);
+    /**
+     * Lấy value bên trong 1 object khác, hoặc lấy giá trị theo index mặc định
+     * ví dụ: customer.name hoặc customer.address.name
+     */
+    var renderValue = function () {
+        var _a, _b, _c, _d, _e, _f;
+        var splitSize = dataNestedSplit.length;
+        var value = '';
+        switch (splitSize) {
+            case 1:
+                value = itemBody[thBody[bodyIndex]]; // itemBody[0], itemBody[1], itemBody[2], lấy value theo index của object javascript
+                break;
+            case 2:
+                value = (_a = itemBody[dataNestedSplit[0]]) === null || _a === void 0 ? void 0 : _a[dataNestedSplit[1]];
+                break;
+            case 3:
+                value = (_c = (_b = itemBody[dataNestedSplit[0]]) === null || _b === void 0 ? void 0 : _b[dataNestedSplit[1]]) === null || _c === void 0 ? void 0 : _c[dataNestedSplit[2]];
+                break;
+            case 4:
+                value = (_f = (_e = (_d = itemBody[dataNestedSplit[0]]) === null || _d === void 0 ? void 0 : _d[dataNestedSplit[1]]) === null || _e === void 0 ? void 0 : _e[dataNestedSplit[2]]) === null || _f === void 0 ? void 0 : _f[dataNestedSplit[3]];
+                break;
+            default:
+                break;
+        }
+        return {
+            value: thBodyFilter ? thBodyFilter(value) : value,
+            thBodyKey: thBody[bodyIndex]
+        };
+    };
+    var _b = renderValue(), thBodyKey = _b.thBodyKey, value = _b.value;
+    // Body component là 1 function hoặc là 1 value, nó sẽ là 1 function để callback ra ngoài để customize lại lớp render
+    // thBodyComponent = value
+    // thBodyComponent[thBodyKey]  = function(param1, param2)
+    var isFunctionRender = thBodyComponent ? thBodyComponent[thBodyKey] : undefined;
+    var renderKey = function () { return itemBody[thBody[bodyIndex]]; };
+    /**
+     * Kiểu render theo function đươợc truyền từ prod vào
+     * @param funcCallback
+     * @param value
+     * @param itemBody
+     */
+    var isRenderColumnInRow = function (funcCallback, _a) {
+        var value = _a.value, itemBody = _a.itemBody;
+        var isArray = Array.isArray(value);
+        if (!isArray) {
+            var result = funcCallback(value, itemBody);
+            return react_1["default"].createElement("td", { className: 'whitespace-nowrap pl-8 text-xs text-gray-900' }, result);
+        }
+        // Nếu là kiểu mảng thì return luôn function, vì trong function xử lý mảng bên ngoài phải trả về list <td>
+        return funcCallback(value, itemBody);
+    };
+    var handleChange = function (e) {
+        brSetSelectedPeople(e.target.checked
+            ? // @ts-ignore
+             tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedPeople, true), [itemBody], false) : selectedPeople.filter(function (p) { return p !== itemBody; }));
+        if (onChange)
+            onChange(e.target.checked
+                ? // @ts-ignore
+                 tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedPeople, true), [itemBody], false) : selectedPeople.filter(function (p) { return p !== itemBody; }));
+    };
+    var handleDirectDetail = function (e, item) {
+        if (directDetail && directDetail.enable) {
+            e.stopPropagation();
+            directDetail.onClick(item);
+        }
+        else {
+            return;
+        }
+    };
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        bodyIndex === 0 && selectedAllPeople && selectedAllPeople.enable ? (react_1["default"].createElement("td", { className: 'relative w-16 px-8' },
+            (itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school)
+                ? !(itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school)
+                : renderInclude(itemBody) && react_1["default"].createElement("div", { className: 'absolute inset-y-0 left-0 w-0.5 bg-indigo-600' }),
+            react_1["default"].createElement("input", { checked: (itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school) ? false : renderInclude(itemBody), className: "".concat((itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school) ? 'hidden' : '', " absolute left-4 -mt-2 block h-4 w-4 rounded border-[0.5px] border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent sm:left-6"), disabled: itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school, onChange: function (e) { return handleChange(e); }, onClick: function (e) { return e.stopPropagation(); }, type: 'checkbox', value: renderKey() }))) : (react_1["default"].createElement(react_1["default"].Fragment, null)),
+        bodyIndex === 0 && numericalOrder && numericalOrder.enable && (react_1["default"].createElement("td", { className: 'w-[10ch] whitespace-nowrap rounded-lg pl-8 text-xs text-gray-900' }, numericalOrder.order)),
+        bodyIndex === 1 ? (react_1["default"].createElement("td", { className: classNames('w-12 whitespace-nowrap px-6 py-3 pr-3 text-xs font-medium text-gray-900 sm:w-16 sm:px-8 rounded-lg', selectedAllPeople && selectedAllPeople.enable ? 'px-3' : 'px-8', renderInclude(itemBody) ? 'text-indigo-600' : 'text-gray-900', directDetail && directDetail.enable ? 'hover:underline cursor-pointer' : ''), onClick: function (e) { return handleDirectDetail(e, itemBody); } }, isFunctionRender ? isFunctionRender(value, itemBody) : value)) : (react_1["default"].createElement(react_1["default"].Fragment, null)),
+        bodyIndex > 1 ? (isFunctionRender ? (isRenderColumnInRow(isFunctionRender, { value: value, itemBody: itemBody })) : (react_1["default"].createElement("td", { className: 'whitespace-nowrap pl-8 text-xs text-gray-900 rounded-lg' }, value))) : (react_1["default"].createElement(react_1["default"].Fragment, null))));
+};
+exports.RowTable = RowTable;
+//# sourceMappingURL=RowTable.js.map