UNPKG

react-native-inline-keyboard

Version:
3 lines (2 loc) 3.6 kB
import e from"react";import{TouchableOpacity as t,Text as n,StyleSheet as o,View as r}from"react-native";var s=function(n){var o,r;function s(){var e;return(e=n.apply(this,arguments)||this).state={focused:!1},e.onFocus=function(){e.setState({focused:!0})},e.onBlur=function(){e.setState({focused:!1})},e.onPress=function(t){"select"===t.eventType&&t.eventKeyAction&&e.props.onPress&&e.props.onPress(t)},e}return r=n,(o=s).prototype=Object.create(r.prototype),o.prototype.constructor=o,o.__proto__=r,s.prototype.render=function(){var n=this.props,o=n.style,r=n.focusStyles,s=void 0===r?{}:r,l=function(e,t){if(null==e)return{};var n,o,r={},s=Object.keys(e);for(o=0;o<s.length;o++)t.indexOf(n=s[o])>=0||(r[n]=e[n]);return r}(n,["style","focusStyles"]);return e.createElement(t,Object.assign({},l,{style:[o,this.state.focused?s:{}],onFocus:this.onFocus,onBlur:this.onBlur,onPress:this.onPress}))},s}(e.Component),l=function(t){return e.createElement(s,{style:t.letterButtonStyles,focusStyles:t.letterButtonFocusStyles,activeOpacity:1,onPress:t.onPress,testID:t.testID},e.createElement(n,{style:t.letterButtonTextStyles},t.children))},u={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","-","=","+","_","!","#","%","(",")"]}},a=o.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 function(t){var o=e.useState(!1),s=o[0],c=o[1],i=e.useState("uppercase"),p=i[0],y=i[1],f=t.onChange,m=t.value,d=t.showInput,b=void 0!==d&&d,g=t.letterContainerStyles,v=void 0===g?a.letterContainer:g,E=t.letterButtonStyles,S=void 0===E?a.letterButton:E,B=t.letterButtonFocusStyles,h=void 0===B?a.letterButtonFocus:B,C=t.letterButtonTextStyles,x=void 0===C?a.letterText:C,P=t.language,T=void 0===P?"EN":P,O="string"==typeof T?function(e){return void 0===e&&(e="EN"),u[e]?u[e]:u.EN}(T):T,j={letterButtonStyles:S,letterButtonFocusStyles:h,letterButtonTextStyles:x},k=function(){return"lowercase"===p?"uppercase":"lowercase"},D=function(e){return function(){f(""+m+e)}};return e.createElement(r,null,b&&e.createElement(r,{style:a.input},e.createElement(n,{style:a.inputText},m||"Type Something")),e.createElement(r,null,e.createElement(r,{style:v},O.symbols&&e.createElement(l,Object.assign({},j,{onPress:function(){c(!s)},testID:"symbols-button"}),"123"),e.createElement(l,Object.assign({},j,{onPress:function(){y(k())},testID:"text-transform-button"}),k().toUpperCase()),O.letters.map(function(t){return e.createElement(l,Object.assign({},j,{letterButtonTextStyles:[j.letterButtonTextStyles,{textTransform:p}],testID:"letter-"+t+"-"+p,key:t,onPress:D("uppercase"===p?t.toUpperCase():t.toLowerCase())}),t.toUpperCase())}),e.createElement(l,Object.assign({},j,{testID:"space-button",onPress:D(" ")}),"space".toUpperCase()),e.createElement(l,Object.assign({},j,{testID:"delete-button",onPress:function(){f(m.substring(0,m.length-1))}}),"backspace".toUpperCase()),e.createElement(l,Object.assign({},j,{onPress:function(){f("")}}),"clear".toUpperCase())),s&&O.symbols&&e.createElement(r,{style:v,testID:"symbols-container"},O.symbols.map(function(t){return e.createElement(l,Object.assign({},j,{testID:"symbol-"+t,key:t,onPress:D(t)}),t.toUpperCase())}))))} //# sourceMappingURL=react-native-inline-keyboard.module.js.map