scripts/apps/translations/directives/TranslationReactDropdown.ts
/* eslint-disable react/no-multi-comp */
import React from 'react';
/**
* @ngdoc directive
* @module superdesk.apps.translations
* @name TranslationReactDropdown
*
* @requires React
* @requires item
* @requires className
* @requires TranslationService
* @requires noLanguagesLabel
*
* @param {Object} [langugages] collection of languages
*
* @description Creates dropdown react element with list of available languages
*/
TranslationReactDropdown.$inject = ['item', 'className', 'TranslationService', 'noLanguagesLabel'];
export function TranslationReactDropdown(item, className, TranslationService, noLanguagesLabel) {
var languages = TranslationService.get() || {_items: []};
interface ITranslateBtnProps {
item: any;
language: any;
}
/*
* Creates specific language button in list
* @return {React} Language button
*/
class TranslateBtn extends React.Component<ITranslateBtnProps> {
constructor(props) {
super(props);
this.markTranslate = this.markTranslate.bind(this);
}
markTranslate(event) {
event.stopPropagation();
TranslationService.set(this.props.item, this.props.language);
}
render() {
var _item = this.props.item;
var language = this.props.language;
var isCurrentLang = _item.language === language.language;
if (!language.destination) {
return false;
}
return React.createElement(
'button', {
disabled: isCurrentLang,
onClick: this.markTranslate,
},
language.label,
);
}
}
/*
* Creates list element for specific language
* @return {React} Single list element
*/
var createTranslateItem = function(language) {
return React.createElement(
'li',
{key: 'language-' + language._id},
React.createElement(TranslateBtn, {item: item, language: language}),
);
};
/*
* If there are no languages, print none-langugage message
* @return {React} List element
*/
var noLanguage = function() {
return React.createElement(
'li',
{},
React.createElement(
'button',
{disabled: true},
noLanguagesLabel),
);
};
/*
* Creates list with languages
* @return {React} List element
*/
return React.createElement(
'ul',
{className: className},
languages._items.length ? languages._items.map(createTranslateItem) : React.createElement(noLanguage),
);
}