[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
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
type Props = {
|
import AbstractCircularLabel, {
|
||||||
|
type Props as AbstractProps
|
||||||
|
} from './AbstractCircularLabel';
|
||||||
|
|
||||||
/**
|
type Props = AbstractProps & {
|
||||||
* The children to be displayed within {@code CircularLabel}.
|
|
||||||
*/
|
|
||||||
children: React$Node,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Additional CSS class names to add to the root of {@code CircularLabel}.
|
* Additional CSS class names to add to the root of {@code CircularLabel}.
|
||||||
|
@ -26,7 +25,7 @@ type Props = {
|
||||||
*
|
*
|
||||||
* @extends Component
|
* @extends Component
|
||||||
*/
|
*/
|
||||||
export default class CircularLabel extends Component<Props> {
|
export default class CircularLabel extends AbstractCircularLabel<Props> {
|
||||||
/**
|
/**
|
||||||
* Default values for {@code CircularLabel} component's properties.
|
* Default values for {@code CircularLabel} component's properties.
|
||||||
*
|
*
|
||||||
|
@ -44,16 +43,16 @@ export default class CircularLabel extends Component<Props> {
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
children,
|
|
||||||
className,
|
className,
|
||||||
id
|
id,
|
||||||
|
label
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className = { `circular-label ${className}` }
|
className = { `circular-label ${className}` }
|
||||||
id = { id }>
|
id = { id }>
|
||||||
{ children }
|
{ label }
|
||||||
</div>
|
</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>
|
? <div>
|
||||||
{ this.props.t(messageKey) }
|
{ this.props.t(messageKey) }
|
||||||
</div>
|
</div>
|
||||||
: <CircularLabel className = { circularLabelClass }>
|
: <CircularLabel
|
||||||
{ this.props.t(circularLabelKey) }
|
className = { circularLabelClass }
|
||||||
</CircularLabel> }
|
label = { this.props.t(circularLabelKey) } /> }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -109,9 +109,8 @@ export class VideoQualityLabel extends Component {
|
||||||
position = { 'left' }>
|
position = { 'left' }>
|
||||||
<CircularLabel
|
<CircularLabel
|
||||||
className = { className }
|
className = { className }
|
||||||
id = 'videoResolutionLabel'>
|
id = 'videoResolutionLabel'
|
||||||
{ labelContent }
|
label = { labelContent } />
|
||||||
</CircularLabel>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue