centro-ui/components/text-input/keyboard.js

[](https://badge.fury.io/js/centro-ui)

import React from 'react';
import { View, VrButton, StyleSheet, Text } from 'react-vr';
import KeyboardButton from './keyboard-button';

import layout from './keyboard-layout';

const styles = StyleSheet.create({
    container : {
    },
    numbers : {
    },
    row1 : {
    },
    row2 : {
    },
    row3 : {
    },
    bottom : {

    },
    row: {
        flexDirection: 'row'
    }
})


class Keyboard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cursorPosition: 0,
            textString: '',
            isShiftSelected: false,
            isSymbolSelected: false
        }
    }

    handleAllValues(value) {
        this.props.handleAllLetters(value);
    }

    handleDelete() {
        this.props.handleDelete();
    }

    handleShift() {
        this.setState({
            isShiftSelected: !this.state.isShiftSelected
        });
    }

    handleSymbolSelector() {
        this.setState({
            isSymbolSelected: !this.state.isSymbolSelected,
            isShiftSelected: false
        });
    }

    handleBack() {
        this.props.handleBack();
    }

    handleForward() {
        this.props.handleForward();
    }

    handleSpacebar() {
        this.props.handleSpace();
    }

    handleSubmit() {
        this.props.handleSubmit();
    }

    getLayout () {
        if(this.state.isSymbolSelected) return layout.symbol.layout;
        else {
            if(! this.state.isShiftSelected) return layout.alphabet.layout; else {
                return layout.alphabet.layout.map(keyRow => keyRow.map(key => key.toUpperCase()));
            }
        }
    }

    render() {
        let layoutArray = this.getLayout();
        numberArray = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
        return (
            <View>
                <View style={styles.row}>
                    {numberArray.map((number) => <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} key={number} this={this} value={number} clickHandler={this.handleAllValues.bind(this)} isDisabled={false}/> )}
                    <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} value={'Delete'} clickHandler={this.handleDelete.bind(this)} isDisabled={false} />
                </View>
                <View style={styles.row}>
                    {layoutArray[0].map((value) => <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} key={value} value={value} clickHandler={this.handleAllValues.bind(this)} isDisabled={false}/> )}
                </View>
                <View style={styles.row}>
                    {layoutArray[1].map((value) => <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} key={value} value={value} clickHandler={this.handleAllValues.bind(this)} isDisabled={false}/> )}
                </View>
                <View style={styles.row}>
                    <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} value={'Shift'} clickHandler={this.handleShift.bind(this)} isDisabled={this.state.isSymbolSelected}/>
                    {layoutArray[2].map((value) => <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} key={value} value={value} clickHandler={this.handleAllValues.bind(this)} isDisabled={false}/> )}
                    <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} value={this.state.isSymbolSelected ? layout.alphabet.displayValue : layout.symbol.displayValue} clickHandler={this.handleSymbolSelector.bind(this)} isDisabled={false} />
                </View>
                <View style={styles.row}>
                    <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} value={'<-'} clickHandler={this.handleBack.bind(this)} isDisabled={false} />
                    <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} value={'->'} clickHandler={this.handleForward.bind(this)} isDisabled={false} />
                    <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} value={'                                                         '} style={{width: '0.8'}} clickHandler={this.handleAllValues.bind(this)} isDisabled={false} />
                    <KeyboardButton keyboardOnHover={this.props.keyboardOnHover} keyboardColor={this.props.keyboardColor} value={'Submit'} clickHandler={this.handleSubmit.bind(this)} isDisabled={false} />
                </View>
            </View>
        );
    }
}

export default Keyboard;