91 lines
1.9 KiB
JavaScript
91 lines
1.9 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
import { Container } from '../../react/base';
|
|
import { styleTypeToObject } from '../../styles';
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* Class name for the web platform, if any.
|
|
*/
|
|
className: string,
|
|
|
|
/**
|
|
* Color of the icon (if not provided by the style object).
|
|
*/
|
|
color?: string,
|
|
|
|
/**
|
|
* Id prop (mainly for autotests).
|
|
*/
|
|
id?: string,
|
|
|
|
/**
|
|
* Function to invoke on click.
|
|
*/
|
|
onClick?: Function,
|
|
|
|
/**
|
|
* The size of the icon (if not provided by the style object).
|
|
*/
|
|
size?: number | string,
|
|
|
|
/**
|
|
* The preloaded icon component to render.
|
|
*/
|
|
src: Function,
|
|
|
|
/**
|
|
* Style object to be applied.
|
|
*/
|
|
style?: Object
|
|
};
|
|
|
|
export const DEFAULT_COLOR = navigator.product === 'ReactNative' ? 'white' : undefined;
|
|
export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 24;
|
|
|
|
/**
|
|
* Implements an Icon component that takes a loaded SVG file as prop and renders it as an icon.
|
|
*
|
|
* @param {Props} props - The props of the component.
|
|
* @returns {Reactelement}
|
|
*/
|
|
export default function Icon(props: Props) {
|
|
const {
|
|
className,
|
|
color,
|
|
id,
|
|
onClick,
|
|
size,
|
|
src: IconComponent,
|
|
style
|
|
} = props;
|
|
|
|
const {
|
|
color: styleColor,
|
|
fontSize: styleSize,
|
|
...restStyle
|
|
} = styleTypeToObject(style ?? {});
|
|
const calculatedColor = color ?? styleColor ?? DEFAULT_COLOR;
|
|
const calculatedSize = size ?? styleSize ?? DEFAULT_SIZE;
|
|
|
|
return (
|
|
<Container
|
|
className = { `jitsi-icon ${className}` }
|
|
onClick = { onClick }
|
|
style = { restStyle }>
|
|
<IconComponent
|
|
fill = { calculatedColor }
|
|
height = { calculatedSize }
|
|
id = { id }
|
|
width = { calculatedSize } />
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
Icon.defaultProps = {
|
|
className: ''
|
|
};
|