46 lines
934 B
JavaScript
46 lines
934 B
JavaScript
|
// @flow
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import { Icon, IconMeter } from '../../../../base/icons';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Own class name for the component.
|
||
|
|
*/
|
||
|
|
className: string,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Flag indicating whether the component is greyed out/disabled.
|
||
|
|
*/
|
||
|
|
isDisabled?: boolean,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The level of the meter.
|
||
|
|
* Should be between 0 and 7 as per the used SVG.
|
||
|
|
*/
|
||
|
|
level: number,
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* React {@code Component} representing an audio level meter.
|
||
|
|
*
|
||
|
|
* @returns { ReactElement}
|
||
|
|
*/
|
||
|
|
export default function({ className, isDisabled, level }: Props) {
|
||
|
|
let ownClassName;
|
||
|
|
|
||
|
|
if (level > -1) {
|
||
|
|
ownClassName = `metr metr-l-${level}`;
|
||
|
|
} else {
|
||
|
|
ownClassName = `metr ${isDisabled ? 'metr--disabled' : ''}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Icon
|
||
|
|
className = { `${ownClassName} ${className}` }
|
||
|
|
size = { 12 }
|
||
|
|
src = { IconMeter } />
|
||
|
|
);
|
||
|
|
}
|