import React from 'react';
import PropTypes from 'prop-types';
import ResolutionItem from "./resolution-item";
const ResolutionMenu = (props) => {
const {items, selectedItem, onItemSelected, onBlur} = props;
const getSelectedOrientation = (item, selectedItem) => {
if (!selectedItem) return '';
if (item.value === selectedItem.value && item.text === selectedItem.text) {
return selectedItem.orientation;
} else {
return '';
}
};
return (
<div className="resolution-menu" tabIndex="0" onBlur={onBlur}>
{
items.map((item, index) => (
<ResolutionItem key={index}
item={item}
selectedOrientation={getSelectedOrientation(item, selectedItem)}
onSelected={onItemSelected}
/>
))
}
</div>
);
};
ResolutionMenu.propTypes = {
items: PropTypes.array.isRequired,
selectedItem: PropTypes.object,
selectedOrientation: PropTypes.string,
onItemSelected: PropTypes.func,
onBlur: PropTypes.func
};
export default ResolutionMenu; |