phx-react
Version:
PHX REACT
69 lines • 9.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const types_1 = require("../../types");
const Checkbox_1 = require("../../Checkbox");
const Dropdown_1 = require("../../Dropdown");
const Radio_1 = require("../../Radio");
const Toggle_1 = tslib_1.__importDefault(require("../../PHXToggle/Toggle"));
const Button_1 = require("../../Button");
const Badge_1 = require("../../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] = (0, react_1.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_1.default.createElement("div", { className: (0, types_1.classNames)(className && isApplyClassnameList ? className : '') }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, index) => {
var _a, _b;
return (react_1.default.createElement("div", { key: index, "aria-hidden": true, className: (0, types_1.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_1.default.createElement("div", { className: 'flex gap-x-1.5 items-center' },
(bulkActions || isOptionList) && (react_1.default.createElement("div", { "aria-hidden": true, onClick: (e) => e.stopPropagation() }, bulkActions ? (react_1.default.createElement(Checkbox_1.PHXCheckbox, { id: `checkbox-${index}`, checked: dataSelected.some((p) => p.id === item.id), onChange: (e) => handleSelectOne(e, item, 'checkbox') })) : (react_1.default.createElement(Radio_1.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_1.default.createElement("div", { className: 'flex-1 flex gap-x-1.5 items-center' },
(item === null || item === void 0 ? void 0 : item.avatar) && (react_1.default.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_1.default.createElement("div", { className: 'flex flex-col gap-y-0.5' },
(item === null || item === void 0 ? void 0 : item.name) &&
(!readonly ? (react_1.default.createElement("p", { className: 'text-xs font-medium text-gray-900' }, item.name)) : (react_1.default.createElement("label", { htmlFor: bulkActions ? `checkbox-${index}` : `radio-${index}`, className: (0, types_1.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_1.default.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_1.default.createElement(Toggle_1.default, { active: item.toggle.active, onChange: (active) => item.toggle.onChange(active) })) : (react_1.default.createElement(react_1.default.Fragment, null, (shortcutAction || (item === null || item === void 0 ? void 0 : item.actions)) && (react_1.default.createElement("div", { className: 'flex items-center', "aria-hidden": true, onClick: (e) => e.stopPropagation() }, (item === null || item === void 0 ? void 0 : item.isPlainAction) ? (react_1.default.createElement(react_1.default.Fragment, null, (item === null || item === void 0 ? void 0 : item.actions) && (item === null || item === void 0 ? void 0 : item.actions.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null, item.actions.map((item, index) => (react_1.default.createElement(Button_1.PHXButton, { className: 'text-xs', key: index, plain: true, size: 'small' }, item.content))))))) : (react_1.default.createElement(Dropdown_1.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_1.default.createElement("label", { className: (0, types_1.classNames)(readonly ? '' : 'hover:cursor-pointer', bulkActions && 'hover:cursor-pointer hover:bg-gray-50'), onClick: (e) => {
if (item.hideShortcutAction) {
e.preventDefault();
}
} },
react_1.default.createElement("div", { className: 'flex items-center gap-x-1.5 p-3' },
bulkActions && (react_1.default.createElement("div", { "aria-hidden": true, onClick: (e) => e.stopPropagation() },
react_1.default.createElement(Checkbox_1.PHXCheckbox, { id: `checkbox_${index}`, checked: dataSelected.some((it) => it.id === item.id), onChange: (e) => {
handleSelectOne(e, item, 'checkbox');
} }))),
react_1.default.createElement("div", { className: 'flex-1 flex gap-x-1.5 items-center' },
(item === null || item === void 0 ? void 0 : item.avatar) && (react_1.default.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_1.default.createElement("div", { className: 'flex flex-col gap-y-0.5' },
(item === null || item === void 0 ? void 0 : item.name) && react_1.default.createElement("p", { className: 'text-xs font-medium text-gray-900' }, item.name),
(item === null || item === void 0 ? void 0 : item.location) && (react_1.default.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_1.default.createElement(Toggle_1.default, { active: item.toggle.active, onChange: (active) => item.toggle.onChange(active) })) : (react_1.default.createElement(react_1.default.Fragment, null, (shortcutAction || (item === null || item === void 0 ? void 0 : item.actions)) && !(item === null || item === void 0 ? void 0 : item.hideShortcutAction) && (react_1.default.createElement("div", { className: 'flex items-center', "aria-hidden": true, onClick: (e) => e.stopPropagation() }, (item === null || item === void 0 ? void 0 : item.isPlainAction) ? (react_1.default.createElement(react_1.default.Fragment, null, (item === null || item === void 0 ? void 0 : item.actions) && (item === null || item === void 0 ? void 0 : item.actions.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null, item.actions.map((item, index) => (react_1.default.createElement(Button_1.PHXButton, { key: index, plain: true, size: 'small' }, item.content))))))) : (react_1.default.createElement(Dropdown_1.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_1.default.createElement("div", { className: (0, types_1.classNames)('shrink-0 ml-2 mr-3 mt-3', item.rightClassName) }, item.renderRight ? (item.renderRight) : (react_1.default.createElement(Badge_1.PHXBadge, { className: `h-fit ${item.badge.className}`, text: item.badge.text, type: item.badge.type }))))));
})));
}
exports.default = List;
//# sourceMappingURL=list.js.map