jiti-meet/react/features/desktop-picker/components/DesktopPickerPane.js

89 lines
2.2 KiB
JavaScript

/* @flow */
import Spinner from '@atlaskit/spinner';
import React, { Component } from 'react';
import DesktopSourcePreview from './DesktopSourcePreview';
/**
* The type of the React {@code Component} props of {@link DesktopPickerPane}.
*/
type Props = {
/**
* The handler to be invoked when a DesktopSourcePreview is clicked.
*/
onClick: Function,
/**
* The handler to be invoked when a DesktopSourcePreview is double clicked.
*/
onDoubleClick: Function,
/**
* The id of the DesktopCapturerSource that is currently selected.
*/
selectedSourceId: string,
/**
* An array of DesktopCapturerSources.
*/
sources: Array<Object>,
/**
* The source type of the DesktopCapturerSources to display.
*/
type: string
};
/**
* React component for showing a grid of DesktopSourcePreviews.
*
* @extends Component
*/
class DesktopPickerPane extends Component<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
onClick,
onDoubleClick,
selectedSourceId,
sources,
type
} = this.props;
const classNames
= `desktop-picker-pane default-scrollbar source-type-${type}`;
const previews
= sources
? sources.map(source => (
<DesktopSourcePreview
key = { source.id }
onClick = { onClick }
onDoubleClick = { onDoubleClick }
selected = { source.id === selectedSourceId }
source = { source }
type = { type } />))
: (
<div className = 'desktop-picker-pane-spinner'>
<Spinner
isCompleting = { false }
size = 'medium' />
</div>
);
return (
<div className = { classNames }>
{ previews }
</div>
);
}
}
export default DesktopPickerPane;