63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
import React from "react";
|
|
|
|
import Avatar from "@appserver/components/avatar";
|
|
import Text from "@appserver/components/text";
|
|
import Checkbox from "@appserver/components/checkbox";
|
|
|
|
const Group = ({ data, style, index }) => {
|
|
const { groupList, isMultiSelect, onGroupClick } = data;
|
|
|
|
const { label, avatarUrl, total, selectedCount } = groupList[index];
|
|
|
|
const isIndeterminate = selectedCount > 0 && selectedCount !== total;
|
|
|
|
const isChecked = total !== 0 && total === selectedCount;
|
|
|
|
let groupLabel = label;
|
|
|
|
if (isMultiSelect && selectedCount > 0) {
|
|
groupLabel = `${label} (${selectedCount})`;
|
|
}
|
|
|
|
const onGroupClickAction = React.useCallback(() => {
|
|
onGroupClick && onGroupClick(index);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
style={style}
|
|
className="row-option"
|
|
name={`selector-row-option-${index}`}
|
|
onClick={onGroupClickAction}
|
|
>
|
|
<div className="option-info">
|
|
<Avatar
|
|
className="option-avatar"
|
|
role="user"
|
|
size="min"
|
|
source={avatarUrl}
|
|
userName={label}
|
|
/>
|
|
<Text
|
|
className="option-text option-text__group"
|
|
truncate={true}
|
|
noSelect={true}
|
|
fontSize="14px"
|
|
>
|
|
{groupLabel}
|
|
</Text>
|
|
</div>
|
|
{isMultiSelect && (
|
|
<Checkbox
|
|
value={`${index}`}
|
|
isChecked={isChecked}
|
|
isIndeterminate={isIndeterminate}
|
|
className="option-checkbox"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(Group);
|