phx-react
Version:
PHX REACT
66 lines • 8.51 kB
JavaScript
import React, { useState } from 'react';
import { classNames } from '../../types';
import { PHXCheckbox } from '../../Checkbox';
import { PHXDropdown } from '../../Dropdown';
import { PHXRadio } from '../../Radio';
import PHXToggle from '../../PHXToggle/Toggle';
import { PHXButton } from '../../Button';
import { PHXBadge } from '../../Badge';
function List({ filteredItems, dataSelected, bulkActions, itemFocusId, readonly, shortcutAction, isOptionList, defaultOptionActive, onClickItem, setDataSelected, isBadge, onBulkActions, actionSelectAll, checkRounded, className, isApplyClassnameList, }) {
const handleClick = (item) => {
if (onClickItem && !readonly) {
onClickItem(item);
}
else {
return;
}
};
const [currentItem, setCurrentItem] = useState(defaultOptionActive);
const handleSelectOne = (e, item, type) => {
if (type === 'checkbox') {
const data = e.target.checked
? // @ts-ignore
[...dataSelected, item]
: dataSelected.filter((p) => p.id !== item.id);
setDataSelected(data);
if (onBulkActions && !actionSelectAll) {
onBulkActions(data);
}
}
else {
setCurrentItem(item);
onBulkActions(item);
}
};
return (React.createElement("div", { className: classNames(className && isApplyClassnameList ? className : '') }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, index) => {
var _a, _b;
return (React.createElement("div", { key: index, "aria-hidden": true, className: classNames(`${onClickItem ? 'p-3' : ''}`, index < filteredItems.length - 1 && 'border-b', index === 0 && !checkRounded && 'rounded-t-lg', index === filteredItems.length - 1 && dataSelected.length === 0 && 'rounded-b-lg', dataSelected.some((p) => p.id === item.id) && 'bg-gray-50', readonly ? '' : 'hover:cursor-pointer hover:bg-gray-50', itemFocusId && (item === null || item === void 0 ? void 0 : item.id) && itemFocusId === item.id ? 'bg-bgcl-100' : '', (item.renderRight || item.badge) && 'flex justify-between', bulkActions && 'hover:bg-gray-50'), onClick: () => handleClick(item) },
onClickItem ? (React.createElement("div", { className: 'flex gap-x-1.5 items-center' },
(bulkActions || isOptionList) && (React.createElement("div", { "aria-hidden": true, onClick: (e) => e.stopPropagation() }, bulkActions ? (React.createElement(PHXCheckbox, { id: `checkbox-${index}`, checked: dataSelected.some((p) => p.id === item.id), onChange: (e) => handleSelectOne(e, item, 'checkbox') })) : (React.createElement(PHXRadio, { id: `radio-${index}`, checked: (currentItem === null || currentItem === void 0 ? void 0 : currentItem.id) === (item === null || item === void 0 ? void 0 : item.id), onChange: (e) => handleSelectOne(e, item, 'radio') })))),
React.createElement("div", { className: 'flex-1 flex gap-x-1.5 items-center' },
(item === null || item === void 0 ? void 0 : item.avatar) && (React.createElement("img", { alt: 'avatar', className: `h-10 w-10 rounded-full mr-2 object-cover ${item === null || item === void 0 ? void 0 : item.avatarClassname}`, src: item.avatar })),
React.createElement("div", { className: 'flex flex-col gap-y-0.5' },
(item === null || item === void 0 ? void 0 : item.name) &&
(!readonly ? (React.createElement("p", { className: 'text-xs font-medium text-gray-900' }, item.name)) : (React.createElement("label", { htmlFor: bulkActions ? `checkbox-${index}` : `radio-${index}`, className: classNames('text-xs font-medium text-gray-900', bulkActions || isOptionList ? 'hover:cursor-pointer' : '') }, item.name))),
(item === null || item === void 0 ? void 0 : item.location) && (React.createElement("p", { className: `text-xs ${isBadge ? 'mt-1' : ''} font-normal text-gray-600` }, item.location)))),
((_a = item === null || item === void 0 ? void 0 : item.toggle) === null || _a === void 0 ? void 0 : _a.enable) ? (React.createElement(PHXToggle, { active: item.toggle.active, onChange: (active) => item.toggle.onChange(active) })) : (React.createElement(React.Fragment, null, (shortcutAction || (item === null || item === void 0 ? void 0 : item.actions)) && (React.createElement("div", { className: 'flex items-center', "aria-hidden": true, onClick: (e) => e.stopPropagation() }, (item === null || item === void 0 ? void 0 : item.isPlainAction) ? (React.createElement(React.Fragment, null, (item === null || item === void 0 ? void 0 : item.actions) && (item === null || item === void 0 ? void 0 : item.actions.length) > 0 && (React.createElement(React.Fragment, null, item.actions.map((item, index) => (React.createElement(PHXButton, { className: 'text-xs', key: index, plain: true, size: 'small' }, item.content))))))) : (React.createElement(PHXDropdown, { type: 'ellipsis-icon', origin: 'right', options: (item === null || item === void 0 ? void 0 : item.actions) || (shortcutAction === null || shortcutAction === void 0 ? void 0 : shortcutAction(item)) })))))))) : (React.createElement("label", { className: classNames(readonly ? '' : 'hover:cursor-pointer', bulkActions && 'hover:cursor-pointer hover:bg-gray-50'), onClick: (e) => {
if (item.hideShortcutAction) {
e.preventDefault();
}
} },
React.createElement("div", { className: 'flex items-center gap-x-1.5 p-3' },
bulkActions && (React.createElement("div", { "aria-hidden": true, onClick: (e) => e.stopPropagation() },
React.createElement(PHXCheckbox, { id: `checkbox_${index}`, checked: dataSelected.some((it) => it.id === item.id), onChange: (e) => {
handleSelectOne(e, item, 'checkbox');
} }))),
React.createElement("div", { className: 'flex-1 flex gap-x-1.5 items-center' },
(item === null || item === void 0 ? void 0 : item.avatar) && (React.createElement("img", { alt: 'avatar', className: `h-10 w-10 rounded-full mr-2 ${item === null || item === void 0 ? void 0 : item.avatarClassname}`, src: item.avatar })),
React.createElement("div", { className: 'flex flex-col gap-y-0.5' },
(item === null || item === void 0 ? void 0 : item.name) && React.createElement("p", { className: 'text-xs font-medium text-gray-900' }, item.name),
(item === null || item === void 0 ? void 0 : item.location) && (React.createElement("p", { className: `text-xs ${isBadge ? 'mt-1' : ''} font-normal text-gray-600` }, item.location)))),
((_b = item === null || item === void 0 ? void 0 : item.toggle) === null || _b === void 0 ? void 0 : _b.enable) ? (React.createElement(PHXToggle, { active: item.toggle.active, onChange: (active) => item.toggle.onChange(active) })) : (React.createElement(React.Fragment, null, (shortcutAction || (item === null || item === void 0 ? void 0 : item.actions)) && !(item === null || item === void 0 ? void 0 : item.hideShortcutAction) && (React.createElement("div", { className: 'flex items-center', "aria-hidden": true, onClick: (e) => e.stopPropagation() }, (item === null || item === void 0 ? void 0 : item.isPlainAction) ? (React.createElement(React.Fragment, null, (item === null || item === void 0 ? void 0 : item.actions) && (item === null || item === void 0 ? void 0 : item.actions.length) > 0 && (React.createElement(React.Fragment, null, item.actions.map((item, index) => (React.createElement(PHXButton, { key: index, plain: true, size: 'small' }, item.content))))))) : (React.createElement(PHXDropdown, { type: 'ellipsis-icon', origin: 'right', options: (item === null || item === void 0 ? void 0 : item.actions) || (shortcutAction === null || shortcutAction === void 0 ? void 0 : shortcutAction(item)) }))))))))),
(item.renderRight || item.badge) && (React.createElement("div", { className: classNames('shrink-0 ml-2 mr-3 mt-3', item.rightClassName) }, item.renderRight ? (item.renderRight) : (React.createElement(PHXBadge, { className: `h-fit ${item.badge.className}`, text: item.badge.text, type: item.badge.type }))))));
})));
}
export default List;
//# sourceMappingURL=list.js.map