[RN] Implement web's CircularLabel component for mobile
This commit is contained in:
parent
5579464951
commit
9eb9306e87
|
@ -0,0 +1,17 @@
|
|||
// @flow
|
||||
import { Component } from 'react';
|
||||
|
||||
export type Props = {
|
||||
|
||||
/**
|
||||
* String that will be rendered as the label itself.
|
||||
*/
|
||||
label: string
|
||||
};
|
||||
|
||||
/**
|
||||
* Abstract class for the {@code CircularLabel} component.
|
||||
*/
|
||||
export default class AbstractCircularLabel<P: Props> extends Component<P> {
|
||||
|
||||
}
|
|
@ -0,0 +1,44 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
|
||||
import { combineStyles, type StyleType } from '../../styles';
|
||||
|
||||
import AbstractCircularLabel, {
|
||||
type Props as AbstractProps
|
||||
} from './AbstractCircularLabel';
|
||||
import styles from './styles';
|
||||
|
||||
type Props = AbstractProps & {
|
||||
|
||||
/**
|
||||
* Style of the label.
|
||||
*/
|
||||
style?: ?StyleType
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders a circular indicator to be used for status icons, such as recording
|
||||
* on, audio-only conference, video quality and similar.
|
||||
*/
|
||||
export default class CircularLabel extends AbstractCircularLabel<Props> {
|
||||
/**
|
||||
* Implements React {@link Component}'s render.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
render() {
|
||||
const { label, style } = this.props;
|
||||
|
||||
return (
|
||||
<View
|
||||
style = {
|
||||
combineStyles(styles.indicatorContainer, style)
|
||||
}>
|
||||
<Text style = { styles.indicatorText }>
|
||||
{ label }
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,13 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
type Props = {
|
||||
import AbstractCircularLabel, {
|
||||
type Props as AbstractProps
|
||||
} from './AbstractCircularLabel';
|
||||
|
||||
/**
|
||||
* The children to be displayed within {@code CircularLabel}.
|
||||
*/
|
||||
children: React$Node,
|
||||
type Props = AbstractProps & {
|
||||
|
||||
/**
|
||||
* Additional CSS class names to add to the root of {@code CircularLabel}.
|
||||
|
@ -26,7 +25,7 @@ type Props = {
|
|||
*
|
||||
* @extends Component
|
||||
*/
|
||||
export default class CircularLabel extends Component<Props> {
|
||||
export default class CircularLabel extends AbstractCircularLabel<Props> {
|
||||
/**
|
||||
* Default values for {@code CircularLabel} component's properties.
|
||||
*
|
||||
|
@ -44,16 +43,16 @@ export default class CircularLabel extends Component<Props> {
|
|||
*/
|
||||
render() {
|
||||
const {
|
||||
children,
|
||||
className,
|
||||
id
|
||||
id,
|
||||
label
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className = { `circular-label ${className}` }
|
||||
id = { id }>
|
||||
{ children }
|
||||
{ label }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,30 @@
|
|||
// @flow
|
||||
|
||||
import { ColorPalette, createStyleSheet } from '../../styles';
|
||||
|
||||
/**
|
||||
* The styles of the native base/label feature.
|
||||
*/
|
||||
export default createStyleSheet({
|
||||
|
||||
/**
|
||||
* The outermost view.
|
||||
*/
|
||||
indicatorContainer: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#808080',
|
||||
borderRadius: 18,
|
||||
borderWidth: 0,
|
||||
flex: 0,
|
||||
height: 36,
|
||||
justifyContent: 'center',
|
||||
margin: 5,
|
||||
opacity: 0.6,
|
||||
width: 36
|
||||
},
|
||||
|
||||
indicatorText: {
|
||||
color: ColorPalette.white,
|
||||
fontSize: 12
|
||||
}
|
||||
});
|
|
@ -189,9 +189,9 @@ class RecordingLabel extends Component<Props, State> {
|
|||
? <div>
|
||||
{ this.props.t(messageKey) }
|
||||
</div>
|
||||
: <CircularLabel className = { circularLabelClass }>
|
||||
{ this.props.t(circularLabelKey) }
|
||||
</CircularLabel> }
|
||||
: <CircularLabel
|
||||
className = { circularLabelClass }
|
||||
label = { this.props.t(circularLabelKey) } /> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -109,9 +109,8 @@ export class VideoQualityLabel extends Component {
|
|||
position = { 'left' }>
|
||||
<CircularLabel
|
||||
className = { className }
|
||||
id = 'videoResolutionLabel'>
|
||||
{ labelContent }
|
||||
</CircularLabel>
|
||||
id = 'videoResolutionLabel'
|
||||
label = { labelContent } />
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue