phx-react
Version:
PHX REACT
97 lines • 7.3 kB
JavaScript
import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import React, { useRef, useState, useEffect } from 'react';
import PHXUrlApply from '../Func/PHXUrlApply/PHXUrlApply';
import { PHXSkeleton } from '../Skeleton';
import { useRouter, useSearchParams } from 'next/navigation';
export const IconLeftButton = ({ disabled, onClick }) => (React.createElement("a", { "aria-hidden": true, className: classNames('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.createElement(FontAwesomeIcon, { className: classNames('h-3 w-2.5', disabled ? 'text-gray-300' : 'text-gray-900'), icon: faAngleLeft })));
export const IconRightButton = ({ disabled, onClick }) => (React.createElement("a", { "aria-hidden": true, className: classNames('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.createElement(FontAwesomeIcon, { className: classNames('h-3 w-2.5', disabled ? 'text-gray-300' : 'text-gray-900'), icon: faAngleRight })));
export const PHXReportButtonTabV2 = ({ activeTab, className = '', configUrlApply, loading = false, onChange, tabs, minWidth = 180, }) => {
const scrollRef = useRef(null);
const containerRef = useRef(null);
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
const [isHovering, setIsHovering] = useState(false); // Theo dõi hover
const router = useRouter();
const searchParams = 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);
};
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) {
PHXUrlApply(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.createElement("div", { className: `relative w-full pb-4 ${className} ` },
React.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.createElement("div", { className: 'relative flex-1 overflow-hidden' },
React.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.createElement("div", { key: item.value, className: 'flex w-full items-center gap-y-3' },
loading ? (React.createElement(PHXSkeleton, { className: `min-w-[${minWidth}px] h-[56px] w-full`, size: 'small', type: 'only-report_v2' })) : (React.createElement("div", { className: 'w-full p-2' },
React.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.createElement("div", { className: 'flex w-full items-center justify-between' },
React.createElement("p", { className: 'text-[13px] text-gray-500' }, item.name),
item.icon && React.createElement("span", { className: 'ml-2 flex items-center justify-center' }, item.icon.icon)),
React.createElement("p", { className: 'text-[13px] font-semibold text-black' }, item.count)))),
index < tabs.length - 1 && React.createElement("div", { className: 'h-[72px] w-[1px] flex-shrink-0 bg-gray-200' })))))),
React.createElement("div", { className: classNames('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.createElement(IconLeftButton, { disabled: !canScrollLeft, onClick: () => scrollBy(-300) }),
React.createElement("div", { className: 'h-[28px] w-[1px] flex-shrink-0 bg-gray-200' }),
React.createElement(IconRightButton, { disabled: !canScrollRight, onClick: () => scrollBy(300) })))));
};
//# sourceMappingURL=ReportButtonV2.js.map