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