rn-verto-typescript/lib/components/Button.js

Verto Free Switch with React Native Type Script

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ToolboxImage_enum_1 = require("../enums/ToolboxImage.enum");
const width = 48;
const height = 48;
const buttonWidth = 48;
const buttonHeight = 48;
const iconWidth = 20;
const iconHeight = 20;
const Button = (props) => {
    const getImage = () => {
        switch (props.fileIndex) {
            case ToolboxImage_enum_1.ToolboxImage.Audio:
                return <react_native_1.Image resizeMode={'contain'} style={styles(props).icon} source={require('../assets/images/ic_audio_black.png')}/>;
            case ToolboxImage_enum_1.ToolboxImage.NoAudio:
                return <react_native_1.Image resizeMode={'contain'} style={styles(props).icon} source={require('../assets/images/ic_no_audio_black.png')}/>;
            case ToolboxImage_enum_1.ToolboxImage.Video:
                return <react_native_1.Image resizeMode={'contain'} style={styles(props).icon} source={require('../assets/images/ic_video_black.png')}/>;
            case ToolboxImage_enum_1.ToolboxImage.NoVideo:
                return <react_native_1.Image resizeMode={'contain'} style={styles(props).icon} source={require('../assets/images/ic_no_video_black.png')}/>;
            case ToolboxImage_enum_1.ToolboxImage.Hangup:
                return <react_native_1.Image resizeMode={'contain'} style={styles(props).icon} source={require('../assets/images/ic_hangup.png')}/>;
        }
    };
    return (<react_native_1.View style={[styles(props).container, props.style]}>
            <react_native_1.TouchableOpacity style={styles(props).button} onPress={props.onPress} activeOpacity={0.6}>
                {getImage()}
            </react_native_1.TouchableOpacity>
        </react_native_1.View>);
};
const styles = (props) => react_native_1.StyleSheet.create({
    container: {
        alignItems: 'center',
        borderRadius: 1000,
        borderWidth: 5 / react_native_1.PixelRatio.get(),
        borderColor: props.backgroundColor ? props.backgroundColor : 'white',
        width: props.width ? props.width : width,
        height: props.height ? props.height : height
    },
    button: {
        width: props.width ? props.width : width,
        height: props.height ? props.height : height,
        borderRadius: 1000,
        justifyContent: 'center',
        backgroundColor: props.backgroundColor ? props.backgroundColor : 'white',
        borderColor: props.backgroundColor ? props.backgroundColor : 'white'
    },
    icon: {
        width: props.iconWidth ? props.iconWidth : iconWidth,
        height: props.iconHeight ? props.iconHeight : iconHeight,
        backgroundColor: 'transparent',
        alignSelf: 'center'
    },
});
exports.default = Button;