65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import classnames from 'classnames';
|
|
import React from 'react';
|
|
import ChannelThumbnail from 'component/channelThumbnail';
|
|
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
|
|
import ChannelTitle from 'component/channelTitle';
|
|
import Icon from 'component/common/icon';
|
|
|
|
type Props = {
|
|
selectedChannelUrl: string, // currently selected channel
|
|
channels: ?Array<ChannelClaim>,
|
|
onChannelSelect: (url: string) => void,
|
|
};
|
|
|
|
type ListItemProps = {
|
|
uri: string,
|
|
isSelected?: boolean,
|
|
};
|
|
|
|
function ChannelListItem(props: ListItemProps) {
|
|
const { uri, isSelected = false } = props;
|
|
|
|
return (
|
|
<div className={classnames('channel__list-item', { 'channel__list-item--selected': isSelected })}>
|
|
<ChannelThumbnail uri={uri} />
|
|
<ChannelTitle uri={uri} />
|
|
{isSelected && <Icon icon={ICONS.DOWN} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChannelSelector(props: Props) {
|
|
const { channels, selectedChannelUrl, onChannelSelect } = props;
|
|
|
|
if (!channels || !selectedChannelUrl) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Menu>
|
|
<MenuButton className="">
|
|
<ChannelListItem uri={selectedChannelUrl} isSelected />
|
|
</MenuButton>
|
|
<MenuList className="menu__list channel__list">
|
|
{channels &&
|
|
channels.map(channel => (
|
|
<MenuItem
|
|
key={channel.canonical_url}
|
|
onSelect={() => {
|
|
if (selectedChannelUrl !== channel.canonical_url) {
|
|
onChannelSelect(channel.canonical_url);
|
|
}
|
|
}}
|
|
>
|
|
<ChannelListItem uri={channel.canonical_url} />
|
|
</MenuItem>
|
|
))}
|
|
</MenuList>
|
|
</Menu>
|
|
);
|
|
}
|
|
|
|
export default ChannelSelector;
|