scripts/apps/search/components/SelectBox.tsx
/* eslint-disable react/no-multi-comp */
import React from 'react';
import {isCheckAllowed} from '../helpers';
import {gettext} from 'core/utils';
import {IArticle} from 'superdesk-api';
interface IPropsSelectBox {
item: IArticle;
onMultiSelect(
item: IArticle,
value: boolean,
multiSelectMode: boolean,
): void;
}
export class SelectBox extends React.Component<IPropsSelectBox> {
render() {
if (this.props.item.selected) {
this.props.item.selected = isCheckAllowed(this.props.item);
}
return (
<SelectBoxWithoutMutation
item={this.props.item}
selected={this.props.item.selected === true}
onSelect={(selected, multiSelectMode) => {
this.props.onMultiSelect(this.props.item, selected, multiSelectMode);
}}
data-test-id="multi-select-checkbox"
/>
);
}
}
interface IPropsSelectBoxWithoutMutation {
item: IArticle;
selected: boolean;
onSelect(selected: boolean, multiSelectMode: boolean): void;
className?: string;
'data-test-id'?: string;
}
export class SelectBoxWithoutMutation extends React.PureComponent<IPropsSelectBoxWithoutMutation> {
constructor(props: IPropsSelectBoxWithoutMutation) {
super(props);
this.toggle = this.toggle.bind(this);
}
toggle(event) {
if (isCheckAllowed(this.props.item)) {
const selected = !this.props.selected;
const multiSelect = event.shiftKey;
this.props.onSelect(selected, multiSelect);
}
}
render() {
return (
<button
title={isCheckAllowed(this.props.item) ? null : gettext('selection not allowed')}
onClick={this.toggle}
className={this.props.className}
role="checkbox"
aria-checked={this.props.selected}
aria-label={gettext('bulk actions')}
data-test-id={this.props['data-test-id']}
>
<span className={'sd-checkbox' + (this.props.selected ? ' checked' : '')} />
</button>
);
}
}