phx-react
Version:
PHX REACT
87 lines • 8.02 kB
JavaScript
import React, { useState } from 'react';
import { Fragment } from 'react';
import { Menu, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { classNames } from '../types';
import { PHXIcons } from '../../assets/icon';
import Image from 'next/image';
function SelectedAction({ selectedBtn, selectedPeople, slectedTitle = 'bản ghi', toggleAll, }) {
const [isActionOver, setIsActionOver] = useState({
index: 0,
isOver: false,
});
const iconAction = (icon) => {
switch (icon) {
case 'check-circle':
return {
icon: PHXIcons.TABLE_CHECK_CIRCLE,
icon_hover: PHXIcons.TABLE_CHECK_CIRCLE_HOVER,
icon_mobile: PHXIcons.TABLE_CHECK_CIRCLE_MOBILE,
};
case 'close-circle':
return {
icon: PHXIcons.TABBLE_CLOSE_CIRCLE,
icon_hover: PHXIcons.TABLE_CLOSE_CIRCLE_HOVER,
icon_mobile: PHXIcons.TABLE_CLOSE_CIRCLE_MOBILE,
};
case 'open-eye':
return {
icon: PHXIcons.TABLE_OPEN_EYE_ICON,
icon_hover: PHXIcons.TABLE_OPEN_EYE_HOVER,
icon_mobile: PHXIcons.TABLE_OPEN_EYE_MOBILE,
};
case 'close-eye':
return {
icon: PHXIcons.TABLE_CLOSE_EYE_ICON,
icon_hover: PHXIcons.TABLE_CLOSE_EYE_HOVER,
icon_mobile: PHXIcons.TABLE_CLOSE_EYE_MOBILE,
};
case 'lock-close':
return {
icon: PHXIcons.TABLE_LOCK_CLOSE_ICON,
icon_hover: PHXIcons.TABLE_LOCK_CLOSE_HOVER,
icon_mobile: PHXIcons.TABLE_LOCK_CLOSE_MOBILE,
};
default:
return {
icon: PHXIcons.TABLE_DEFAULT_LABEL,
icon_hover: PHXIcons.TABLE_DEFAULT_LABEL_HOVER,
icon_mobile: PHXIcons.TABLE_DEFAULT_LABEL_MOBILE,
};
}
};
return (React.createElement("div", { "aria-live": 'assertive', className: 'pointer-events-none absolute inset-0 flex items-center sm:items-start sm:px-4 sm:py-6' },
React.createElement("div", { className: 'fixed bottom-10 left-0 z-[50] mr-8 flex w-full flex-col items-center' },
React.createElement(Transition, { as: Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-300 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', show: selectedPeople.length > 0 },
React.createElement("div", { className: 'pointer-events-auto flex items-center gap-x-10 rounded-xl bg-indigo-800 p-2.5 text-[12px] sm:min-w-[30rem] sm:justify-between sm:gap-x-20 sm:text-xs' },
React.createElement("button", { className: 'flex items-center gap-x-2 rounded-lg border border-gray-600 p-1.5 text-white hover:bg-white hover:bg-opacity-10', onClick: toggleAll, type: 'button' },
React.createElement("p", { className: 'font-normal' }, selectedPeople === null || selectedPeople === void 0 ? void 0 :
selectedPeople.length,
" ",
slectedTitle,
" \u0111\u00E3 ch\u1ECDn"),
React.createElement(XMarkIcon, { className: 'mt-0.5 h-4 w-4' })),
React.createElement("div", { className: 'hidden items-center gap-x-1 text-gray-300 sm:flex' }, selectedBtn.map((item, index) => (React.createElement("button", { key: index + 1, className: classNames('flex gap-x-1 rounded-lg px-2.5 py-1.5 hover:bg-white hover:bg-opacity-10 hover:text-white', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: () => item.onClick(selectedPeople), onMouseOut: () => setIsActionOver({ index, isOver: false }), onMouseOver: () => setIsActionOver({ index, isOver: true }), type: 'button' },
React.createElement(Image, { alt: '', height: 16, src: isActionOver.index === index && isActionOver.isOver
? iconAction(item === null || item === void 0 ? void 0 : item.icon).icon_hover
: iconAction(item === null || item === void 0 ? void 0 : item.icon).icon, width: 16 }),
React.createElement("p", null, item.content))))),
selectedBtn.length <= 1 && (React.createElement("div", { className: 'flex items-center gap-x-1 text-gray-300 sm:hidden' }, selectedBtn.map((item, index) => (React.createElement("button", { key: index + 1, className: classNames('flex gap-x-1 rounded-lg px-2.5 py-1.5 hover:bg-white hover:bg-opacity-10 hover:text-white', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: () => item.onClick(selectedPeople), type: 'button' },
React.createElement(Image, { alt: '', height: 16, src: iconAction(item === null || item === void 0 ? void 0 : item.icon).icon, width: 16 }),
React.createElement("p", null, item.content)))))),
selectedBtn.length > 1 && (React.createElement("div", { className: 'flex items-center gap-x-1 sm:hidden' },
React.createElement(Menu, { as: 'div', className: 'relative inline-block text-left' }, ({ open }) => (React.createElement("div", null,
React.createElement(Menu.Button, null,
React.createElement("div", { className: 'flex gap-x-1 rounded-lg px-2.5 py-1.5 text-gray-300 hover:bg-white hover:bg-opacity-10 hover:text-white' },
React.createElement("p", null, "Xem th\u00EAm"),
open ? (React.createElement(Image, { alt: '', height: 16, src: PHXIcons.TABLE_ARROW_DOWN, width: 16 })) : (React.createElement(Image, { alt: '', height: 16, src: PHXIcons.TABLE_ARROW_UP, width: 16 })))),
React.createElement(Transition, { as: 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.createElement(Menu.Items, { className: classNames('absolute bottom-11 right-0 z-[50] min-w-[5.2rem] whitespace-nowrap rounded-lg border bg-white px-3 py-1 shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none') },
React.createElement(React.Fragment, null,
React.createElement("div", { className: 'py-1' }, selectedBtn.map((item, index) => (React.createElement(Menu.Item, { key: index },
React.createElement("button", { key: index + 1, className: classNames('flex gap-x-1 rounded-lg py-1.5 hover:bg-white hover:bg-opacity-10', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: () => item.onClick(selectedPeople), type: 'button' },
React.createElement(Image, { alt: '', className: 'h-[16px] max-w-[16px]', height: 16, src: iconAction(item === null || item === void 0 ? void 0 : item.icon).icon_mobile, width: 16 }),
React.createElement("p", null, item.content)))))))))))))))))));
}
export default SelectedAction;
//# sourceMappingURL=SelectedAction.js.map