phx-react
Version:
PHX REACT
56 lines • 5.64 kB
JavaScript
import { __spreadArray } from "tslib";
import React, { useState } from 'react';
import { classNames } from '../../types';
import { PHXCheckbox } from '../../Checkbox';
import { PHXDropdown } from '../../Dropdown';
import { PHXRadio } from '../../Radio';
function List(_a) {
var filteredItems = _a.filteredItems, dataSelected = _a.dataSelected, bulkActions = _a.bulkActions, itemFocusId = _a.itemFocusId, readonly = _a.readonly, shortcutAction = _a.shortcutAction, isOptionList = _a.isOptionList, defaultOptionActive = _a.defaultOptionActive, onClickItem = _a.onClickItem, setDataSelected = _a.setDataSelected, isBadge = _a.isBadge, onBulkActions = _a.onBulkActions, actionSelectAll = _a.actionSelectAll, checkRounded = _a.checkRounded;
var handleClick = function (item) {
if (onClickItem && !readonly) {
onClickItem(item);
}
else {
return;
}
};
var _b = useState(defaultOptionActive), currentItem = _b[0], setCurrentItem = _b[1];
var handleSelectOne = function (e, item, type) {
if (type === 'checkbox') {
var data = e.target.checked
? // @ts-ignore
__spreadArray(__spreadArray([], dataSelected, true), [item], false) : dataSelected.filter(function (p) { return p !== item; });
setDataSelected(data);
if (onBulkActions && !actionSelectAll) {
onBulkActions(data);
}
}
else {
setCurrentItem(item);
onBulkActions(item);
}
};
return (React.createElement(React.Fragment, null, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (item, index) { return (React.createElement("div", { key: index, "aria-hidden": true, className: classNames('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.includes(item) && 'bg-bgcl-50', readonly ? '' : 'hover:bg-bgcl-100 hover:cursor-pointer', itemFocusId && (item === null || item === void 0 ? void 0 : item.id) && itemFocusId === item.id ? 'bg-bgcl-100' : ''), onClick: function () { return handleClick(item); } }, onClickItem ? (React.createElement("div", { className: 'flex gap-x-1.5 items-center' },
(bulkActions || isOptionList) && (React.createElement("div", { "aria-hidden": true, onClick: function (e) { return e.stopPropagation(); } }, bulkActions ? (React.createElement(PHXCheckbox, { id: "checkbox-".concat(index), checked: dataSelected.includes(item), onChange: function (e) { return handleSelectOne(e, item, 'checkbox'); } })) : (React.createElement(PHXRadio, { id: "radio-".concat(index), checked: (currentItem === null || currentItem === void 0 ? void 0 : currentItem.id) === (item === null || item === void 0 ? void 0 : item.id), onChange: function (e) { return 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-8 w-8 rounded-lg mr-2', 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 ".concat(isBadge ? 'mt-1' : '', " font-normal text-gray-600") }, item.location)))),
shortcutAction && (React.createElement("div", { className: 'flex items-center', "aria-hidden": true, onClick: function (e) { return e.stopPropagation(); } },
React.createElement(PHXDropdown, { type: 'ellipsis-icon', origin: 'right', options: shortcutAction(item) }))))) : (React.createElement("label", { className: "".concat(readonly ? '' : 'hover:cursor-pointer') },
React.createElement("div", { className: 'flex gap-x-1.5 items-center' },
bulkActions && (React.createElement("div", { "aria-hidden": true, onClick: function (e) { return e.stopPropagation(); } },
React.createElement(PHXCheckbox, { id: "checkbox_".concat(index), checked: dataSelected.includes(item), onChange: function (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-8 w-8 rounded-lg mr-2', 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 ".concat(isBadge ? 'mt-1' : '', " font-normal text-gray-600") }, item.location)))),
shortcutAction && (React.createElement("div", { className: 'flex items-center', "aria-hidden": true, onClick: function (e) { return e.stopPropagation(); } },
React.createElement(PHXDropdown, { type: 'ellipsis-icon', origin: 'right', options: shortcutAction(item) })))))))); })));
}
export default List;
//# sourceMappingURL=list.js.map