emoji-mart-native/dist/components/search.js

Customizable Slack-like emoji picker for React Native

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _nimbleEmojiIndex=_interopRequireDefault(require("../utils/emoji-index/nimble-emoji-index"));var _skins=_interopRequireDefault(require("./skins"));var _skinsEmoji=_interopRequireDefault(require("./skins-emoji"));var _touchable=_interopRequireDefault(require("./common/touchable"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2["default"])(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var arrowBackIconLight=require('../assets/arrow-back.png');var arrowBackIconDark=require('../assets/arrow-back-dark.png');var clearIconLight=require('../assets/clear-icon.png');var clearIconDark=require('../assets/clear-icon-dark.png');var styles=_reactNative.StyleSheet.create({searchContainer:{paddingLeft:10,paddingRight:10,paddingTop:2,paddingBottom:2,minHeight:52,flexDirection:'row',justifyContent:'center',alignItems:'center',borderBottomWidth:1},searchContainerLight:{backgroundColor:'#eceff1',borderBottomColor:'#e0e0e0'},searchContainerDark:{backgroundColor:'#13100e',borderBottomColor:'#1f1f1f'},searchInput:{flex:1},searchInputLight:{color:'#414141'},searchInputDark:{color:'#bebebe'},closeButton:{borderRadius:500,margin:10,padding:2},closeButtonIcon:{marginTop:2,marginLeft:2,height:24,width:24}});var Search=function(_React$PureComponent){(0,_inherits2["default"])(Search,_React$PureComponent);var _super=_createSuper(Search);function Search(props){var _this;(0,_classCallCheck2["default"])(this,Search);_this=_super.call(this,props);_this.state={searchTerm:''};_this.data=props.data;_this.emojiIndex=new _nimbleEmojiIndex["default"](_this.data);_this.setRef=_this.setRef.bind((0,_assertThisInitialized2["default"])(_this));_this.handleChange=_this.handleChange.bind((0,_assertThisInitialized2["default"])(_this));_this.pressCancel=_this.pressCancel.bind((0,_assertThisInitialized2["default"])(_this));return _this;}(0,_createClass2["default"])(Search,[{key:"handleChange",value:function handleChange(value){this.setState({searchTerm:value});this.props.onSearch(this.emojiIndex.search(value,{emojisToShowFilter:this.props.emojisToShowFilter,maxResults:this.props.maxResults,include:this.props.include,exclude:this.props.exclude,custom:this.props.custom}));}},{key:"pressCancel",value:function pressCancel(){this.props.onSearch(null);this.clear();}},{key:"setRef",value:function setRef(c){this.input=c;}},{key:"clear",value:function clear(){this.setState({searchTerm:''});}},{key:"render",value:function render(){var _this$props=this.props,i18n=_this$props.i18n,autoFocus=_this$props.autoFocus,onPressClose=_this$props.onPressClose,skinsProps=_this$props.skinsProps,showSkinTones=_this$props.showSkinTones,showCloseButton=_this$props.showCloseButton,emojiProps=_this$props.emojiProps,theme=_this$props.theme,fontSize=_this$props.fontSize;var iconSize=Math.round(fontSize*1.6);var searchTerm=this.state.searchTerm;var background;if(_reactNative.Platform.OS==='android'){if(_reactNative.Platform.Version>=21){background=_reactNative.TouchableNativeFeedback.SelectableBackgroundBorderless();}else{background=_reactNative.TouchableNativeFeedback.SelectableBackground();}}var searchContainerWithCloseButtonStyle={paddingLeft:5};return _react["default"].createElement(_reactNative.View,{style:[styles.searchContainer,theme==='light'?styles.searchContainerLight:styles.searchContainerDark,showCloseButton?searchContainerWithCloseButtonStyle:null]},showCloseButton?_react["default"].createElement(_touchable["default"],{onPress:onPressClose,background:_reactNative.Platform.OS==='android'?background:null,style:[styles.closeButton]},_react["default"].createElement(_reactNative.Image,{style:[styles.closeButtonIcon,{width:iconSize,height:iconSize}],source:theme==='light'?arrowBackIconLight:arrowBackIconDark})):null,_react["default"].createElement(_reactNative.TextInput,{style:[styles.searchInput,theme==='light'?styles.searchInputLight:styles.searchInputDark,{fontSize:fontSize}],placeholderTextColor:theme==='light'?'#878787':'#787878',ref:this.setRef,value:searchTerm,onChangeText:this.handleChange,placeholder:i18n.search,autoFocus:autoFocus,underlineColorAndroid:"transparent"}),searchTerm.length>0?_react["default"].createElement(_touchable["default"],{onPress:this.pressCancel,background:_reactNative.Platform.OS==='android'?background:null,style:[styles.closeButton]},_react["default"].createElement(_reactNative.Image,{style:[styles.closeButtonIcon,{width:iconSize,height:iconSize}],source:theme==='light'?clearIconLight:clearIconDark})):null,showSkinTones&&_react["default"].createElement(_reactNative.View,null,skinsProps.skinEmoji?_react["default"].createElement(_skinsEmoji["default"],(0,_extends2["default"])({emojiProps:emojiProps,data:this.data},skinsProps)):_react["default"].createElement(_skins["default"],(0,_extends2["default"])({theme:theme,iconSize:iconSize},skinsProps))));}}]);return Search;}(_react["default"].PureComponent);exports["default"]=Search;(0,_defineProperty2["default"])(Search,"propTypes",{onSearch:_propTypes["default"].func,onPressClose:_propTypes["default"].func,maxResults:_propTypes["default"].number,emojisToShowFilter:_propTypes["default"].func,autoFocus:_propTypes["default"].bool,showSkinTones:_propTypes["default"].bool,skinsProps:_propTypes["default"].object.isRequired,emojiProps:_propTypes["default"].object.isRequired,theme:_propTypes["default"].oneOf(['light','dark']),fontSize:_propTypes["default"].number});(0,_defineProperty2["default"])(Search,"defaultProps",{onSearch:function onSearch(){},onPressClose:function onPressClose(){},maxResults:75,emojisToShowFilter:null,autoFocus:false,showSkinTones:true,theme:'light',fontSize:15});