[RN] Implement web's CircularLabel component for mobile

This commit is contained in:
Bettenbuk Zoltan 2018-05-22 21:44:40 +02:00 committed by Saúl Ibarra Corretgé
parent 5579464951
commit 9eb9306e87
6 changed files with 105 additions and 16 deletions

View File

@ -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> {
}

View File

@ -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>
);
}
}

View File

@ -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>
);
}

View File

@ -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
}
});

View File

@ -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>
);
}

View File

@ -109,9 +109,8 @@ export class VideoQualityLabel extends Component {
position = { 'left' }>
<CircularLabel
className = { className }
id = 'videoResolutionLabel'>
{ labelContent }
</CircularLabel>
id = 'videoResolutionLabel'
label = { labelContent } />
</Tooltip>
);
}