phx-react/dist/cjs/components/ActivityHistory/ActivityHistory.js

PHX REACT

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PHXActivityHistory;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
function PHXActivityHistory({ loading = false, title = 'Lịch sử hoạt động', data = [], generateChildren, bgColor = 'bg-white', emptyText = 'Chưa có lịch sử hoạt động.', enableHTML = false, }) {
    const childrenDefault = (history) => {
        if (enableHTML) {
            return (react_1.default.createElement("div", { className: 'flex w-full justify-between text-xs' },
                react_1.default.createElement("div", { className: 'pr-2 leading-5', dangerouslySetInnerHTML: { __html: history.description || '' } }),
                react_1.default.createElement("span", { className: 'shrink-0 ' }, history.created_at)));
        }
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("span", { className: 'text-xs text-gray-600 font-[450]' }, history.description),
            react_1.default.createElement("p", { className: 'text-xs  text-gray-600 font-[450]' }, history.created_at)));
    };
    const renderChildren = (history) => {
        return generateChildren ? generateChildren(history) : childrenDefault(history);
    };
    return (react_1.default.createElement("div", { className: ' px-3  relative w-full overflow-hidden' },
        react_1.default.createElement("p", { className: 'text-sm font-[650]' }, title),
        loading ? (react_1.default.createElement("div", { className: 'space-y-4 mt-4' },
            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' })))),
            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' })))),
            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' })))))) : (react_1.default.createElement(react_1.default.Fragment, null, data.length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { className: ' absolute bg-[#CCCCCC] top-[1.3rem] left-[1.17rem] h-full w-[0.5px]' }),
            react_1.default.createElement("div", { className: ` absolute  h-[80px] w-4 left-[1rem] -bottom-20  ${bgColor}` }),
            data.map((item, index) => {
                return (react_1.default.createElement("div", { key: index, className: 'w-full pl-8 pt-4' },
                    react_1.default.createElement("p", { className: 'text-[12px] font-normal text-[#616161] pb-3' }, item.date),
                    react_1.default.createElement("div", { className: ' space-y-5 relative' }, item.childs.map((history, historyIndex) => {
                        return (react_1.default.createElement("div", { key: historyIndex, className: 'w-full  items-start flex justify-between gap-x-6 relative' },
                            react_1.default.createElement("div", { className: ' absolute -left-[2.05rem]  ' },
                                react_1.default.createElement("img", { className: 'w-[16px] h-[16px]', src: 'https://sisv2-cdn.phx-smartschool.com/store/product/4-23-2025/84089cd5-7468-4093-a7df-65123cb4704a-Frame-354557.png' })),
                            renderChildren(history)));
                    }))));
            }))) : (react_1.default.createElement("p", { className: 'text-xs text-gray-600 font-normal mt-2' }, emptyText))))));
}
//# sourceMappingURL=ActivityHistory.js.map