phx-react
Version:
PHX REACT
200 lines • 15.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXDropdown = PHXDropdown;
const tslib_1 = require("tslib");
/* eslint-disable react/prop-types */
const react_1 = require("@headlessui/react");
const solid_1 = require("@heroicons/react/20/solid");
const OutlineIcons = tslib_1.__importStar(require("@heroicons/react/24/outline"));
const SolidIcons = tslib_1.__importStar(require("@heroicons/react/24/solid"));
const react_2 = tslib_1.__importStar(require("react"));
const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
const types_1 = require("../types");
const Calendar_1 = tslib_1.__importDefault(require("../DatePicker/components/Calendar"));
const Loading_1 = require("../Loading");
const PHXUrlApply_1 = tslib_1.__importDefault(require("../Func/PHXUrlApply/PHXUrlApply"));
function PHXDropdown({ buttonContent, className, defaultDate, disabledDate, endDisabled, loading, max, min, onChangeDate, optionTitle, options, origin = 'left', soft = false, startDisabled, type = 'default', widthContent, isFullContentOption = false, disabled = false, configUrlApply, onlyResetValueUrl = false, }) {
const [portalElement, setPortalElement] = (0, react_2.useState)(null);
const [realOrigin, setRealOrigin] = (0, react_2.useState)(origin !== null && origin !== void 0 ? origin : 'left');
const menuButtonRef = (0, react_2.useRef)(null);
const scrollContainerRef = (0, react_2.useRef)(null);
const handleCloseRef = (0, react_2.useRef)();
function getDropdownButtonClass({ type, soft, disabled, open, loading, }) {
const base = 'w-full group relative isolate flex items-center justify-center overflow-hidden rounded-lg transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)]';
if (disabled || loading) {
return (0, types_1.classNames)(base, type === 'primary'
? 'relative bg-[#303030] px-2.5 py-1.5 text-xs font-normal text-white opacity-30 cursor-not-allowed shadow-sm'
: type === 'danger'
? 'relative bg-red-700 px-2.5 py-1.5 text-xs font-normal text-white opacity-30 cursor-not-allowed shadow-sm'
: 'relative bg-indigo-50 px-2.5 py-[5px] text-xs font-normal text-gray-400 cursor-not-allowed');
}
if (soft) {
return (0, types_1.classNames)(base, 'bg-indigo-50 px-2.5 py-1.5 text-xs font-normal text-gray-700 shadow-sm hover:bg-indigo-100 active:pb-[0.3rem] active:pt-[0.45rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', open && '!bg-indigo-100 shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
}
switch (type) {
case 'icon-only':
return (0, types_1.classNames)(base, 'flex items-center rounded-full text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100');
case 'soft-small':
return (0, types_1.classNames)(base, 'bg-gray-200 px-2 py-1 text-xs hover:bg-gray-300 active:pb-[0.2rem] active:pt-[0.35rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', open && '!bg-gray-300 shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
case 'ellipsis-icon':
return (0, types_1.classNames)(base, 'flex items-center');
case 'default':
case 'date-picker':
default:
return (0, types_1.classNames)(base, 'bg-white hover:bg-[#fafafa] transition-all px-2.5 py-[5px] text-xs font-normal text-gray-900 shadow-[inset_0_0_0_1px_#e3e3e3] active:bg-[#f7f7f7] active:shadow-[inset_0_2px_1px_0_#1a1a1a33,inset_-1px_0_1px_0_#1a1a1a1f,inset_1px_0_1px_0_#1a1a1a1f] md:shadow-[inset_0_-1px_0_0_#b5b5b5,inset_0_0_0_1px_#0000001a,inset_0_0.5px_0_1.5px_#fff] group', open &&
'bg-[#f7f7f7] !shadow-[inset_0_2px_1px_0_#1a1a1a33,inset_-1px_0_1px_0_#1a1a1a1f,inset_1px_0_1px_0_#1a1a1a1f]');
case 'primary':
return (0, types_1.classNames)(base, 'bg-[#303030] px-2.5 py-1.5 text-xs font-normal text-white shadow-sm !shadow-[inset_0_-1px_0_1px_rgba(0,0,0,0.8),inset_0_0_0_1px_rgba(48,48,48,1),inset_0_0.5px_0_1.5px_rgba(255,255,255,0.25)] hover:bg-[#1A1A1A] hover:text-gray-200 active:bg-[#1A1A1A] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', open && '!bg-[#1A1A1A] !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
case 'danger':
return (0, types_1.classNames)(base, 'border border-gray-300 bg-red-700 px-2.5 py-1.5 text-xs font-normal text-white shadow-sm hover:border-gray-400 active:border-b-gray-100 active:bg-red-400 active:pb-[0.3rem] active:pt-[0.45rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', open && '!border-b-gray-300 bg-red-700 !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
}
}
const calculatePosition = () => {
if (menuButtonRef.current && portalElement) {
const buttonRect = menuButtonRef.current.getBoundingClientRect();
portalElement.style.position = 'absolute';
const dropdownHeight = portalElement.offsetHeight || 240;
const viewportHeight = window.innerHeight;
const spaceBottom = viewportHeight - buttonRect.bottom;
const spaceTop = buttonRect.top;
let nextOrigin = origin;
// Kiểm tra nếu dropdown position bottom quá gần cuối màn hình sẽ tự chuyển position lên top tránh bị màn hình che
if ((origin === 'left' || origin === 'right') && spaceBottom < dropdownHeight && spaceTop > dropdownHeight) {
nextOrigin = origin === 'left' ? 'top-left' : 'top-right';
}
setRealOrigin(nextOrigin);
switch (nextOrigin) {
case 'left':
portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
portalElement.style.left = `${buttonRect.left + window.scrollX}px`;
break;
case 'right':
portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
portalElement.style.right = `${window.innerWidth - buttonRect.right}px`;
break;
case 'top-left':
portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
portalElement.style.bottom = `${window.innerHeight - buttonRect.top}px`;
portalElement.style.left = `${buttonRect.left + window.scrollX}px`;
break;
case 'top-right':
portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
portalElement.style.bottom = `${window.innerHeight - buttonRect.top}px`;
portalElement.style.right = `${window.innerWidth - buttonRect.right}px`;
break;
default:
portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
portalElement.style.left = `${buttonRect.left + window.scrollX}px`;
}
}
};
const handleClick = (item) => {
if (item.disabled)
return;
if (item === null || item === void 0 ? void 0 : item.onClick) {
item.onClick();
}
(0, PHXUrlApply_1.default)(item.key, item.id, item.listKeyReset, configUrlApply, onlyResetValueUrl);
};
(0, react_2.useEffect)(() => {
const element = document.createElement('div');
document.body.appendChild(element);
setPortalElement(element);
return () => {
document.body.removeChild(element);
};
}, []);
(0, react_2.useEffect)(() => {
// Tìm phần tử cha có scroll
const findScrollContainer = (element) => {
while (element) {
const { overflowY } = window.getComputedStyle(element);
if (overflowY === 'scroll' || overflowY === 'auto') {
return element;
}
element = element.parentElement;
}
return null;
};
if (menuButtonRef.current) {
scrollContainerRef.current = findScrollContainer(menuButtonRef.current);
}
}, []);
(0, react_2.useEffect)(() => {
if (portalElement) {
calculatePosition();
}
}, [portalElement]);
(0, react_2.useEffect)(() => {
const handleScrollAndResize = (event) => {
calculatePosition();
const isScrollInsideDropdown = event.target instanceof Node && (portalElement === null || portalElement === void 0 ? void 0 : portalElement.contains(event.target));
if (!isScrollInsideDropdown && (handleCloseRef === null || handleCloseRef === void 0 ? void 0 : handleCloseRef.current)) {
handleCloseRef.current();
}
};
window.addEventListener('scroll', handleScrollAndResize, true);
window.addEventListener('resize', handleScrollAndResize);
if (scrollContainerRef.current) {
scrollContainerRef.current.addEventListener('scroll', handleScrollAndResize);
}
return () => {
window.removeEventListener('scroll', handleScrollAndResize, true);
window.removeEventListener('resize', handleScrollAndResize);
if (scrollContainerRef.current) {
scrollContainerRef.current.removeEventListener('scroll', handleScrollAndResize);
}
};
}, [portalElement]);
const Icon = ({ active, item }) => {
if (item.iconComponent) {
return item.iconComponent;
}
if (item.icon) {
// @ts-ignore
const Icon = item.iconOutline ? OutlineIcons[item.icon] : SolidIcons[item.icon];
return react_2.default.createElement(Icon, { className: (0, types_1.classNames)('h-4 w-4', active && 'font-semibold') });
}
return null;
};
const renderMenuItems = () => (react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
react_2.default.createElement(react_1.Menu.Items, { className: (0, types_1.classNames)(realOrigin === 'left' && 'left-0 origin-top-left', realOrigin === 'right' && 'right-0 origin-top-right', realOrigin === 'top-left' && 'bottom-8 left-0', realOrigin === 'top-right' && 'bottom-8 right-0', type === 'date-picker' ? '' : 'border px-1', 'absolute z-50 mt-1.5 max-h-96 min-w-[7.2rem] overflow-y-auto overscroll-contain whitespace-nowrap rounded-lg bg-white shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none') }, type === 'date-picker' ? (react_2.default.createElement(Calendar_1.default, { defaultDate: defaultDate, disabledDate: disabledDate, endDisabled: endDisabled, max: max, min: min, onChangeDate: onChangeDate, startDisabled: startDisabled })) : (react_2.default.createElement(react_2.default.Fragment, null,
optionTitle && react_2.default.createElement("p", { className: 'px-2.5 pb-1 pt-2 text-xs font-semibold' }, optionTitle),
react_2.default.createElement("div", { className: 'py-1' }, options === null || options === void 0 ? void 0 : options.map((item) => {
const iconEsixt = !!(item.icon || item.iconComponent);
return (react_2.default.createElement(react_1.Menu.Item, { key: item.content }, ({ active }) => (react_2.default.createElement("div", { className: (0, types_1.classNames)(item.disabled ? 'cursor-not-allowed !text-gray-400' : 'cursor-pointer', active && !item.disabled
? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900'
: 'text-gray-700', 'block px-2.5 py-2 text-xs', item.active &&
!item.destructive &&
!item.disabled &&
'rounded-lg bg-gray-200 font-semibold text-gray-900', item.destructive && !item.active && !item.disabled && 'text-red-800 hover:bg-red-100', item.destructive &&
item.active &&
!item.disabled &&
'rounded-lg bg-red-200 font-semibold text-red-800'), onClick: () => {
handleClick(item);
} },
react_2.default.createElement("div", { className: (0, types_1.classNames)(iconEsixt && 'flex items-center gap-x-2') },
iconEsixt && react_2.default.createElement(Icon, { active: item.active, item: item }),
react_2.default.createElement("p", { className: `${widthContent} overflow-ellipsis break-words ${isFullContentOption ? 'whitespace-normal' : ''}` }, item.content))))));
})))))));
return (react_2.default.createElement("div", { className: (0, types_1.classNames)('relative max-w-full md:max-w-fit', type === 'ellipsis-icon' && 'flex items-center') },
react_2.default.createElement(react_1.Menu, { as: 'div', className: (0, types_1.classNames)('relative inline-block w-full text-left', className && `${className}`, type === 'ellipsis-icon' && 'flex items-center') }, ({ close, open }) => {
open && calculatePosition();
handleCloseRef.current = close;
return (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement("div", null,
react_2.default.createElement(react_1.Menu.Button, { disabled: disabled, ref: menuButtonRef, className: getDropdownButtonClass({ type, soft, disabled, open, loading }) },
react_2.default.createElement("div", { className: (0, types_1.classNames)(['default', 'date-picker', 'soft-small', 'primary', 'danger'].includes(type) &&
`flex items-center justify-between gap-x-1 md:justify-center`, type === 'ellipsis-icon' && 'flex items-center', 'block transition-transform group-active:translate-y-[1px]') },
react_2.default.createElement("p", { className: (0, types_1.classNames)('max-w-[120px] text-xxs font-medium truncate sm:max-w-full', ['primary', 'danger'].includes(type) ? 'text-white' : 'text-[#303030]', disabled && 'text-gray-400', type === 'icon-only' && 'sr-only') }, buttonContent),
['default', 'date-picker', 'soft-small', 'primary', 'danger'].includes(type) &&
(open && origin === 'top-left' ? (react_2.default.createElement(solid_1.ChevronUpIcon, { "aria-hidden": 'true', className: 'mt-0.5 h-4 w-4' })) : (react_2.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": 'true', className: 'mt-0.5 h-4 w-4' }))),
type === 'icon-only' && react_2.default.createElement(solid_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'w-4 h-4' }),
type === 'ellipsis-icon' && (react_2.default.createElement("div", { className: `rounded-lg p-1 hover:bg-gray-300 ${open ? 'bg-gray-200' : ''}` },
react_2.default.createElement(solid_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'w-4 h-4' })))))),
portalElement ? react_dom_1.default.createPortal(renderMenuItems(), portalElement) : null));
}),
loading && (react_2.default.createElement("div", { className: 'absolute left-[1px] top-[1px] flex h-[calc(100%-2px)] w-[calc(100%-2px)] items-center justify-center rounded-lg bg-gray-300' },
react_2.default.createElement(Loading_1.PHXSpinner, { className: 'h-[16px] w-[16px] text-white' })))));
}
//# sourceMappingURL=Dropdown.js.map