61 lines
1.9 KiB
React
61 lines
1.9 KiB
React
import React from 'react';
|
|
|
|
const NBSP = String.fromCharCode(160);
|
|
|
|
const CorrespondentLinks = ({
|
|
correspondents,
|
|
activeCorrespondentIdSet,
|
|
onCorrespondentClick,
|
|
}) => {
|
|
if (!Array.isArray(correspondents) || correspondents.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const activeSet = activeCorrespondentIdSet || new Set();
|
|
const handleClick = (event, correspondent) => {
|
|
if (!onCorrespondentClick || correspondent.id == null) {
|
|
return;
|
|
}
|
|
event.stopPropagation();
|
|
onCorrespondentClick(correspondent.id);
|
|
};
|
|
|
|
return correspondents.map((correspondent, index) => {
|
|
const isActive = correspondent.id != null && activeSet.has(correspondent.id);
|
|
const hasHandler = Boolean(onCorrespondentClick) && correspondent.id != null;
|
|
const classNames = ['doc-correspondent-link'];
|
|
if (isActive) classNames.push('is-active');
|
|
if (!hasHandler) classNames.push('is-static');
|
|
const isLast = index === correspondents.length - 1;
|
|
const label = isLast ? `${correspondent.name}:${NBSP}` : correspondent.name;
|
|
|
|
return (
|
|
<React.Fragment
|
|
key={correspondent.key ?? correspondent.id ?? `${correspondent.name}-${index}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
className={classNames.join(' ')}
|
|
aria-disabled={hasHandler ? undefined : true}
|
|
onClick={(event) => handleClick(event, correspondent)}
|
|
onKeyDown={(event) => {
|
|
if (!hasHandler) {
|
|
return;
|
|
}
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handleClick(event, correspondent);
|
|
}
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
{isLast ? null : <span className="doc-correspondent-link__separator">, </span>}
|
|
</React.Fragment>
|
|
);
|
|
});
|
|
};
|
|
|
|
export default CorrespondentLinks;
|