scripts/extensions/annotationsLibrary/src/AnnotationsSelect.tsx
import * as React from 'react';
import {AnnotationSelectList} from './AnnotationSelectList';
import {AnnotationSelectSingleItem} from './AnnotationSelectSingleItem';
import {ISuperdesk, ICrudManager} from 'superdesk-api';
import {IKnowledgeBaseItem} from './interfaces';
interface IProps {
annotationText: string;
conceptItems: ICrudManager<IKnowledgeBaseItem>;
annotationTypeSelect: JSX.Element;
onCancel(): void;
onApplyAnnotation(html: string): void;
superdesk: ISuperdesk;
}
interface IState {
selected: IKnowledgeBaseItem | null;
}
export class AnnotationsSelect extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
selected: null,
};
}
render() {
const {gettext} = this.props.superdesk.localization;
const backButton = (
<div className="space-between" style={{marginBlockStart: 15}}>
<span />
<button
onClick={this.props.onCancel}
className="btn"
>
{gettext('Cancel')}
</button>
</div>
);
if (this.props.conceptItems._items == null) {
return null; // loading
}
if (this.props.conceptItems._meta.total < 1) {
return (
<div>
<p style={{marginBlockStart: 20}}>{gettext('No matches found in the library.')}</p>
{backButton}
</div>
);
}
if (this.state.selected != null) {
return (
<AnnotationSelectSingleItem
item={this.state.selected}
onBack={() => {
this.setState({selected: null});
}}
annotationTypeSelect={this.props.annotationTypeSelect}
onApplyAnnotation={this.props.onApplyAnnotation}
superdesk={this.props.superdesk}
/>
);
} else {
return (
<AnnotationSelectList
items={this.props.conceptItems._items}
onSelect={(item) => {
this.setState({selected: item});
}}
backButton={backButton}
onCancel={this.props.onCancel}
superdesk={this.props.superdesk}
/>
);
}
}
}