@ozen-ui/kit
Version:
React component library
33 lines (32 loc) • 2.04 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useRef } from 'react';
import { CheckIcon } from '@ozen-ui/icons';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn } from '../../../../utils/classname';
import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
import { DATA_LIST_BASE_ITEM_DISPLAY_NAME } from '../../../DataListBase';
import { useAsDataListBaseItem } from '../../../DataListBase/hooks';
import { ListCardItem, ListCardItemControlIcon } from '../../../ListCardItem';
export var cnDataListCardItem = cn('DataListCardItem');
export var DataListCardItem = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'DataListCardItem',
});
var children = props.children, listId = props.listId, disabledProp = props.disabled, as = props.as, className = props.className, onClickProp = props.onClick, other = __rest(props, ["children", "listId", "disabled", "as", "className", "onClick"]);
var internalRef = useRef(null);
var _a = useAsDataListBaseItem({
ref: internalRef,
optionId: listId,
disabled: disabledProp,
}), focused = _a.focused, selected = _a.selected, onClick = _a.onClick, disabled = _a.disabled;
return (React.createElement(ListCardItem, __assign({ ref: useMultiRef([ref, internalRef]), role: "option", className: cnDataListCardItem({
focused: focused,
selected: selected,
}, [className]), as: as, "aria-selected": selected, "aria-disabled": disabled, onClick: function (event) {
onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(event);
onClick(event);
}, control: selected && (React.createElement(ListCardItemControlIcon, { className: cnDataListCardItem('CheckIcon'), icon: CheckIcon })) }, other), children));
});
DataListCardItem.displayName = DATA_LIST_BASE_ITEM_DISPLAY_NAME;