react-native-inline-keyboard/dist/react-native-inline-keyboard.modern.js

Inline keyboard for React Native TV Applications

import e from"react";import{TouchableOpacity as t,Text as s,StyleSheet as r,View as n}from"react-native";class o extends e.Component{constructor(){super(...arguments),this.state={focused:!1},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onPress=e=>{"select"===e.eventType&&e.eventKeyAction&&this.props.onPress&&this.props.onPress(e)}}render(){const s=this.props,{style:r,focusStyles:n={}}=s,o=function(e,t){if(null==e)return{};var s,r,n={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(s=o[r])>=0||(n[s]=e[s]);return n}(s,["style","focusStyles"]);return e.createElement(t,Object.assign({},o,{style:[r,this.state.focused?n:{}],onFocus:this.onFocus,onBlur:this.onBlur,onPress:this.onPress}))}}const l=({children:t,letterButtonStyles:r,letterButtonFocusStyles:n,letterButtonTextStyles:l,onPress:a,testID:c})=>e.createElement(o,{style:r,focusStyles:n,activeOpacity:1,onPress:a,testID:c},e.createElement(s,{style:l},t)),a={EN:{letters:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],symbols:["1","2","3","4","5","6","7","8","9","0","-","=","+","_","!","#","%","(",")"]}},c=r.create({input:{backgroundColor:"#e9e9e9",borderRadius:5,padding:10},inputText:{color:"black"},letterContainer:{flexDirection:"row",marginTop:5},letterButton:{padding:2,paddingLeft:4,paddingRight:4,borderRadius:5,backgroundColor:"transparent",marginRight:5},letterButtonFocus:{backgroundColor:"#e9e9e9"},letterText:{color:"black"}});export default t=>{const[r,o]=e.useState(!1),[u,i]=e.useState("uppercase"),{onChange:p,value:y,showInput:m=!1,letterContainerStyles:b=c.letterContainer,letterButtonStyles:g=c.letterButton,letterButtonFocusStyles:d=c.letterButtonFocus,letterButtonTextStyles:h=c.letterText,language:f="EN"}=t,E="string"==typeof f?function(e="EN"){return a[e]?a[e]:a.EN}(f):f,S={letterButtonStyles:g,letterButtonFocusStyles:d,letterButtonTextStyles:h},B=()=>"lowercase"===u?"uppercase":"lowercase",x=e=>()=>{p(`${y}${e}`)};return e.createElement(n,null,m&&e.createElement(n,{style:c.input},e.createElement(s,{style:c.inputText},y||"Type Something")),e.createElement(n,null,e.createElement(n,{style:b},E.symbols&&e.createElement(l,Object.assign({},S,{onPress:()=>{o(!r)},testID:"symbols-button"}),"123"),e.createElement(l,Object.assign({},S,{onPress:()=>{i(B())},testID:"text-transform-button"}),B().toUpperCase()),E.letters.map(t=>e.createElement(l,Object.assign({},S,{letterButtonTextStyles:[S.letterButtonTextStyles,{textTransform:u}],testID:`letter-${t}-${u}`,key:t,onPress:x("uppercase"===u?t.toUpperCase():t.toLowerCase())}),t.toUpperCase())),e.createElement(l,Object.assign({},S,{testID:"space-button",onPress:x(" ")}),"space".toUpperCase()),e.createElement(l,Object.assign({},S,{testID:"delete-button",onPress:()=>{p(y.substring(0,y.length-1))}}),"backspace".toUpperCase()),e.createElement(l,Object.assign({},S,{onPress:()=>{p("")}}),"clear".toUpperCase())),r&&E.symbols&&e.createElement(n,{style:b,testID:"symbols-container"},E.symbols.map(t=>e.createElement(l,Object.assign({},S,{testID:`symbol-${t}`,key:t,onPress:x(t)}),t.toUpperCase())))))};
//# sourceMappingURL=react-native-inline-keyboard.modern.js.map