scripts/core/ArticlesListV2MultiSelect.tsx
import React from 'react';
import {IArticle} from 'superdesk-api';
import {IMultiSelectOptions} from './MultiSelectHoc';
import {SelectBoxWithoutMutation} from 'apps/search/components/SelectBox';
import {TypeIcon} from 'apps/search/components';
import {OrderedMap} from 'immutable';
import {generateTrackByIdentifier} from 'apps/search/services/SearchService';
interface IProps {
item: IArticle;
allItems: OrderedMap<string, IArticle>;
options: IMultiSelectOptions<IArticle>;
}
/**
* This component is meant to work with IMultiSelectNew interface.
* Multi-selection in angular based lists works differently and uses ILegacyMultiSelect interface.
*/
export class MultiSelect extends React.Component<IProps> {
render() {
const {item, allItems, options} = this.props;
const checkbox = (
<SelectBoxWithoutMutation
item={item}
onSelect={(selected: boolean, multiSelectMode: boolean) => {
if (multiSelectMode) {
const lastMultiselected = options.selected.last();
const itemsSeq = allItems.valueSeq();
const lastSelectedIndex = itemsSeq.indexOf(lastMultiselected);
const currentIndex = itemsSeq.indexOf(item);
const from = Math.min(lastSelectedIndex, currentIndex);
const to = Math.max(lastSelectedIndex, currentIndex) + 1;
options.selectMultiple(
allItems.slice(from, to).toOrderedMap(),
);
} else {
options.toggle(item);
}
}}
selected={options.selected.has(generateTrackByIdentifier(item))}
className="hover-AB--B"
data-test-id="multi-select-checkbox"
/>
);
return (
<div
className="list-field type-icon"
data-test-id="item-type-and-multi-select"
>
{
options.selected.has(generateTrackByIdentifier(item))
? checkbox
: (
<div className="hover-AB">
<div className="hover-AB--A" style={{display: 'flex'}}>
<TypeIcon
type={item.type}
highlight={item.highlight}
/>
</div>
{checkbox}
</div>
)
}
</div>
);
}
}