65 lines
1.5 KiB
JavaScript
65 lines
1.5 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
import { Icon, IconCheck, IconExclamationSolid } from '../../../../base/icons';
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of {@link AudioSettingsEntry}.
|
|
*/
|
|
export type Props = {
|
|
|
|
/**
|
|
* The text for this component.
|
|
*/
|
|
children: React$Node,
|
|
|
|
/**
|
|
* Flag indicating an error.
|
|
*/
|
|
hasError?: boolean,
|
|
|
|
/**
|
|
* The id for the label, that contains the item text.
|
|
*/
|
|
labelId?: string,
|
|
|
|
/**
|
|
* Flag indicating the selection state.
|
|
*/
|
|
isSelected: boolean,
|
|
};
|
|
|
|
/**
|
|
* React {@code Component} representing an entry for the audio settings.
|
|
*
|
|
* @returns { ReactElement}
|
|
*/
|
|
export default function AudioSettingsEntry(
|
|
{ children, hasError, labelId, isSelected }: Props) {
|
|
|
|
const className = `audio-preview-entry ${isSelected
|
|
? 'audio-preview-entry--selected' : ''}`;
|
|
|
|
return (
|
|
<div className = { className }>
|
|
{isSelected && (
|
|
<Icon
|
|
className = 'audio-preview-icon audio-preview-icon--check'
|
|
color = '#1C2025'
|
|
size = { 14 }
|
|
src = { IconCheck } />
|
|
)}
|
|
<span
|
|
className = 'audio-preview-entry-text'
|
|
id = { labelId }>
|
|
{children}
|
|
</span>
|
|
{hasError && <Icon
|
|
className = 'audio-preview-icon audio-preview-icon--exclamation'
|
|
size = { 16 }
|
|
src = { IconExclamationSolid } />}
|
|
</div>
|
|
);
|
|
}
|