phx-react
Version:
PHX REACT
104 lines • 8.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXReportButtonTabV2 = exports.IconRightButton = exports.IconLeftButton = void 0;
const tslib_1 = require("tslib");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = tslib_1.__importStar(require("react"));
const PHXUrlApply_1 = tslib_1.__importDefault(require("../Func/PHXUrlApply/PHXUrlApply"));
const Skeleton_1 = require("../Skeleton");
const navigation_1 = require("next/navigation");
const IconLeftButton = ({ disabled, onClick }) => (react_1.default.createElement("a", { "aria-hidden": true, className: (0, classnames_1.default)('relative inline-flex h-[28px] w-[28px] items-center rounded-l-lg px-3 text-gray-900 transition-all', disabled
? 'cursor-default bg-gray-200'
: 'active:border-t-0.5 active:border-b-0.5 cursor-pointer active:bg-gray-100 active:shadow-[inset_0_1px_2px_rgba(0,0,0,0.25)]'), onClick: () => !disabled && onClick() },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: (0, classnames_1.default)('h-3 w-2.5', disabled ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleLeft })));
exports.IconLeftButton = IconLeftButton;
const IconRightButton = ({ disabled, onClick }) => (react_1.default.createElement("a", { "aria-hidden": true, className: (0, classnames_1.default)('relative inline-flex h-[28px] w-[28px] items-center rounded-r-lg px-3 text-gray-900 transition-all', disabled
? 'cursor-default bg-gray-200'
: 'active:border-t-0.5 active:border-b-0.5 cursor-pointer active:bg-gray-100 active:shadow-[inset_0_1px_2px_rgba(0,0,0,0.25)]'), onClick: () => !disabled && onClick() },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: (0, classnames_1.default)('h-3 w-2.5', disabled ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleRight })));
exports.IconRightButton = IconRightButton;
const PHXReportButtonTabV2 = ({ activeTab, className = '', configUrlApply, loading = false, onChange, tabs, minWidth = 180, }) => {
const scrollRef = (0, react_1.useRef)(null);
const containerRef = (0, react_1.useRef)(null);
const [canScrollLeft, setCanScrollLeft] = (0, react_1.useState)(false);
const [canScrollRight, setCanScrollRight] = (0, react_1.useState)(false);
const [isHovering, setIsHovering] = (0, react_1.useState)(false); // Theo dõi hover
const router = (0, navigation_1.useRouter)();
const searchParams = (0, navigation_1.useSearchParams)();
const getConfigUrlApply = () => {
if (configUrlApply) {
return {
searchParams: (configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.searchParams) || searchParams,
router: (configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) || router,
replaceUrl: configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.replaceUrl,
};
}
return;
};
const updateConfigUrlApply = getConfigUrlApply();
const updateScroll = () => {
const el = scrollRef.current;
if (!el)
return;
const hasLeft = el.scrollLeft > 5;
const hasRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 5;
setCanScrollLeft(hasLeft);
setCanScrollRight(hasRight);
};
(0, react_1.useEffect)(() => {
updateScroll();
const el = scrollRef.current;
if (!el)
return;
const handleScroll = () => updateScroll();
el.addEventListener('scroll', handleScroll);
// Cập nhật lại khi resize (responsive)
window.addEventListener('resize', updateScroll);
return () => {
el.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', updateScroll);
};
}, [tabs]);
const handleClick = (item) => {
if (item.disabledActionClick)
return;
onChange(item.value);
if (updateConfigUrlApply && item.key) {
(0, PHXUrlApply_1.default)(item.key, item.value, item.listKeyReset || [], updateConfigUrlApply);
}
};
const scrollBy = (px) => {
var _a;
(_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: px, behavior: 'smooth' });
};
return (react_1.default.createElement("div", { className: `relative w-full pb-4 ${className} ` },
react_1.default.createElement("div", { ref: containerRef, className: 'group relative flex items-center overflow-hidden rounded-xl bg-white shadow-[0rem_.3125rem_.3125rem_-0.15625rem_rgba(0,0,0,0.03),_0rem_.1875rem_.1875rem_-0.09375rem_rgba(0,0,0,0.02),_0rem_.125rem_.125rem_-0.0625rem_rgba(0,0,0,0.02),_0rem_.0625rem_.0625rem_-0.03125rem_rgba(0,0,0,0.03),_0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,0.04),_0rem_0rem_0rem_.0625rem_rgba(0,0,0,0.06)]', onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) },
react_1.default.createElement("div", { className: 'relative flex-1 overflow-hidden' },
react_1.default.createElement("div", { ref: scrollRef, className: 'no-scrollbar flex gap-0', onScroll: updateScroll, style: {
overflowX: 'auto',
scrollBehavior: 'smooth',
scrollbarWidth: 'none',
msOverflowStyle: 'none',
} }, tabs.map((item, index) => (react_1.default.createElement("div", { key: item.value, className: 'flex w-full items-center gap-y-3' },
loading ? (react_1.default.createElement(Skeleton_1.PHXSkeleton, { className: `min-w-[${minWidth}px] h-[56px] w-full`, size: 'small', type: 'only-report_v2' })) : (react_1.default.createElement("div", { className: 'w-full p-2' },
react_1.default.createElement("div", { className: `
flex h-[56px] w-full flex-shrink-0 flex-col justify-center rounded-xl px-3 transition-all
${item.disabledActionClick ? 'cursor-default' : 'cursor-pointer'}
${activeTab === item.value ? 'bg-gray-100' : item.disabledActionClick ? '' : 'hover:bg-gray-50'}
`, onClick: () => handleClick(item), style: { minWidth: `${minWidth}px` } },
react_1.default.createElement("div", { className: 'flex w-full items-center justify-between' },
react_1.default.createElement("p", { className: 'text-[13px] text-gray-500' }, item.name),
item.icon && react_1.default.createElement("span", { className: 'ml-2 flex items-center justify-center' }, item.icon.icon)),
react_1.default.createElement("p", { className: 'text-[13px] font-semibold text-black' }, item.count)))),
index < tabs.length - 1 && react_1.default.createElement("div", { className: 'h-[72px] w-[1px] flex-shrink-0 bg-gray-200' })))))),
react_1.default.createElement("div", { className: (0, classnames_1.default)('absolute right-2 top-1/2 flex -translate-y-1/2 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-lg transition-all duration-300', 'pointer-events-auto', isHovering && (canScrollLeft || canScrollRight)
? 'translate-x-0 opacity-100'
: 'pointer-events-none translate-x-4 opacity-0'), style: { height: 28 } },
react_1.default.createElement(exports.IconLeftButton, { disabled: !canScrollLeft, onClick: () => scrollBy(-300) }),
react_1.default.createElement("div", { className: 'h-[28px] w-[1px] flex-shrink-0 bg-gray-200' }),
react_1.default.createElement(exports.IconRightButton, { disabled: !canScrollRight, onClick: () => scrollBy(300) })))));
};
exports.PHXReportButtonTabV2 = PHXReportButtonTabV2;
//# sourceMappingURL=ReportButtonV2.js.map