emoji-mart-native
Version:
Customizable Slack-like emoji picker for React Native
1 lines • 17.5 kB
JavaScript
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;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 _skin=_interopRequireDefault(require("../../utils/skin"));var _frequently=_interopRequireDefault(require("../../utils/frequently"));var _utils=require("../../utils");var _data=require("../../utils/data");var _sharedProps=require("../../utils/shared-props");var _sharedDefaultProps=require("../../utils/shared-default-props");var _anchors=_interopRequireDefault(require("../anchors"));var _category=_interopRequireDefault(require("../category"));var _search=_interopRequireDefault(require("../search"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;})),keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){(0,_defineProperty2["default"])(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}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 I18N={search:'Search',notfound:'No Emoji Found',categories:{search:'Search Results',recent:'Frequently Used',people:'Smileys & People',nature:'Animals & Nature',foods:'Food & Drink',activity:'Activity',places:'Travel & Places',objects:'Objects',symbols:'Symbols',flags:'Flags',custom:'Custom'}};var categoryEmojis={recent:'clock3',people:'smiley',nature:'dog',foods:'taco',activity:'soccer',places:'rocket',objects:'bulb',symbols:'symbols',flags:'flag-wales',custom:'triangular_ruler'};var styles=_reactNative.StyleSheet.create({emojiMartPicker:{flexShrink:0,flexDirection:'column'},emojiMartPickerLight:{color:'#222427',backgroundColor:'#eceff1'},emojiMartPickerDark:{color:'#fff',backgroundColor:'#222'},emojiMartScroll:{flexShrink:0},emojiMartAnchors:{flexShrink:0,maxHeight:90}});var NimblePicker=function(_React$PureComponent){(0,_inherits2["default"])(NimblePicker,_React$PureComponent);var _super=_createSuper(NimblePicker);function NimblePicker(props){var _this;(0,_classCallCheck2["default"])(this,NimblePicker);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleAppearanceChange",function(preferences){var colorScheme=preferences.colorScheme;_this.setState({theme:colorScheme});});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"onScrollViewLayout",function(event){_this.clientWidth=event.nativeEvent.layout.width;});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"onScrollViewContentSizeChange",function(contentWidth){_this.scrollWidth=contentWidth;});_this.CUSTOM=[];_this.RECENT_CATEGORY={id:'recent',name:'Recent',emojis:null};_this.SEARCH_CATEGORY={id:'search',name:'Search',emojis:null,anchor:false};if(props.data.compressed){(0,_data.uncompress)(props.data);}_this.data=props.data;_this.i18n=(0,_utils.deepMerge)(I18N,props.i18n);_this.categoryEmojis=(0,_utils.deepMerge)(categoryEmojis,props.categoryEmojis);_this.state={firstRender:true};_this.scrollViewScrollLeft=0;_this.categories=[];var allCategories=[].concat(_this.data.categories);if(props.custom.length>0){var customCategories={};var customCategoriesCreated=0;props.custom.forEach(function(emoji){if(!customCategories[emoji.customCategory]){customCategories[emoji.customCategory]={id:emoji.customCategory?"custom-".concat(emoji.customCategory):'custom',name:emoji.customCategory||'Custom',emojis:[],anchor:customCategoriesCreated===0};customCategoriesCreated++;}var category=customCategories[emoji.customCategory];var customEmoji=_objectSpread({},emoji,{id:emoji.short_names[0],custom:true});category.emojis.push(customEmoji);_this.CUSTOM.push(customEmoji);});allCategories=allCategories.concat(Object.keys(customCategories).map(function(key){return customCategories[key];}));}_this.hideRecent=true;if(props.include!=undefined){allCategories.sort(function(a,b){if(props.include.indexOf(a.id)>props.include.indexOf(b.id)){return 1;}return-1;});}for(var categoryIndex=0;categoryIndex<allCategories.length;categoryIndex++){var category=allCategories[categoryIndex];var isIncluded=props.include&&props.include.length?props.include.indexOf(category.id)>-1:true;var isExcluded=props.exclude&&props.exclude.length?props.exclude.indexOf(category.id)>-1:false;if(!isIncluded||isExcluded){continue;}if(props.emojisToShowFilter){var newEmojis=[];var emojis=category.emojis;for(var emojiIndex=0;emojiIndex<emojis.length;emojiIndex++){var emoji=emojis[emojiIndex];if(props.emojisToShowFilter(_this.data.emojis[emoji]||emoji)){newEmojis.push(emoji);}}if(newEmojis.length){var newCategory={emojis:newEmojis,name:category.name,id:category.id};_this.categories.push(newCategory);}}else{_this.categories.push(category);}}var includeRecent=props.include&&props.include.length?props.include.indexOf(_this.RECENT_CATEGORY.id)>-1:true;var excludeRecent=props.exclude&&props.exclude.length?props.exclude.indexOf(_this.RECENT_CATEGORY.id)>-1:false;if(includeRecent&&!excludeRecent){_this.hideRecent=false;_this.categories.unshift(_this.RECENT_CATEGORY);}if(_this.categories[0]){_this.categories[0].first=true;}_this.categories.unshift(_this.SEARCH_CATEGORY);_this.setAnchorsRef=_this.setAnchorsRef.bind((0,_assertThisInitialized2["default"])(_this));_this.handleAnchorPress=_this.handleAnchorPress.bind((0,_assertThisInitialized2["default"])(_this));_this.setSearchRef=_this.setSearchRef.bind((0,_assertThisInitialized2["default"])(_this));_this.handleSearch=_this.handleSearch.bind((0,_assertThisInitialized2["default"])(_this));_this.setScrollViewRef=_this.setScrollViewRef.bind((0,_assertThisInitialized2["default"])(_this));_this.onScroll=_this.onScroll.bind((0,_assertThisInitialized2["default"])(_this));_this.handleScroll=_this.handleScroll.bind((0,_assertThisInitialized2["default"])(_this));_this.handleScrollPaint=_this.handleScrollPaint.bind((0,_assertThisInitialized2["default"])(_this));_this.handleEmojiPress=_this.handleEmojiPress.bind((0,_assertThisInitialized2["default"])(_this));_this.handleEmojiSelect=_this.handleEmojiSelect.bind((0,_assertThisInitialized2["default"])(_this));_this.handleEmojiLongPress=_this.handleEmojiLongPress.bind((0,_assertThisInitialized2["default"])(_this));_this.handleSkinChange=_this.handleSkinChange.bind((0,_assertThisInitialized2["default"])(_this));_this.handleAppearanceChange=_this.handleAppearanceChange.bind((0,_assertThisInitialized2["default"])(_this));return _this;}(0,_createClass2["default"])(NimblePicker,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;if(this.state.firstRender){this.firstRenderTimeout=setTimeout(function(){_this2.setState({firstRender:false});},60);}}},{key:"componentDidUpdate",value:function componentDidUpdate(){this.handleScroll();}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.SEARCH_CATEGORY.emojis=null;clearTimeout(this.leaveTimeout);clearTimeout(this.firstRenderTimeout);if(this.colorScheme&&_reactNative.Appearance){_reactNative.Appearance.removeChangeListener(this.handleAppearanceChange);}}},{key:"getPreferredTheme",value:function getPreferredTheme(){if(this.props.theme!='auto')return this.props.theme;if(this.state.theme)return this.state.theme;if(!this.colorScheme&&_reactNative.Appearance){this.colorScheme=_reactNative.Appearance.getColorScheme();_reactNative.Appearance.addChangeListener(this.handleAppearanceChange);}if(!this.colorScheme)return _sharedDefaultProps.PickerDefaultProps.theme;return this.colorScheme;}},{key:"handleEmojiPress",value:function handleEmojiPress(emoji,e){this.props.onPress(emoji,e);this.handleEmojiSelect(emoji);}},{key:"handleEmojiSelect",value:function handleEmojiSelect(emoji){this.props.onSelect(emoji);if(!this.hideRecent&&!this.props.recent)_frequently["default"].add(emoji);var component=this.categoryRefs['category-1'];if(component){var maxMargin=component.maxMargin;if(this.props.enableFrequentEmojiSort){component.forceUpdate();}}}},{key:"handleEmojiLongPress",value:function handleEmojiLongPress(emoji,e){this.props.onLongPress(emoji,e);if(_reactNative.Platform.OS==='android'){_reactNative.ToastAndroid.showWithGravityAndOffset(emoji.id,_reactNative.ToastAndroid.SHORT,_reactNative.ToastAndroid.BOTTOM,0,190);}}},{key:"onScroll",value:function onScroll(event){this.scrollViewScrollLeft=event.nativeEvent.contentOffset.x;this.handleScroll();}},{key:"handleScroll",value:function handleScroll(){if(!this.waitingForPaint){this.waitingForPaint=true;this.handleScrollPaint();}}},{key:"handleScrollPaint",value:function handleScrollPaint(){this.waitingForPaint=false;if(!this.scrollView||!this.props.showAnchors){return;}var activeCategory=null;var scrollLeft=this.scrollViewScrollLeft;if(this.SEARCH_CATEGORY.emojis){activeCategory=this.SEARCH_CATEGORY;var component=this.categoryRefs["category-0"];if(component)component.handleScroll(scrollLeft);}else{for(var i=0,l=this.categories.length;i<l;i++){var ii=this.categories.length-1-i,category=this.categories[ii],_component=this.categoryRefs["category-".concat(ii)];if(_component){var active=_component.handleScroll(scrollLeft);if(active&&!activeCategory){activeCategory=category;}}}}if(activeCategory){var anchors=this.anchors,_activeCategory=activeCategory,categoryName=_activeCategory.name;if(anchors.state.selected!=categoryName){anchors.onSelectAnchor(categoryName);}}this.scrollLeft=scrollLeft;}},{key:"handleSearch",value:function handleSearch(emojis){this.SEARCH_CATEGORY.emojis=emojis;for(var i=0,l=this.categories.length;i<l;i++){var component=this.categoryRefs["category-".concat(i)];if(component&&component.props.name!='Search'){var display=emojis?false:true;component.forceUpdate();component.updateDisplay(display);}}this.forceUpdate();if(emojis)this.scrollView.scrollTo({x:0,animated:false});this.handleScroll();}},{key:"handleAnchorPress",value:function handleAnchorPress(category,i){var component=this.categoryRefs["category-".concat(i)],scrollView=this.scrollView;var scrollToComponent=null;scrollToComponent=function scrollToComponent(){if(component){var left=component.left;if(category.first){left=0;}scrollView.scrollTo({x:left,animated:false});}};if(this.SEARCH_CATEGORY.emojis){this.handleSearch(null);this.search.clear();}setTimeout(scrollToComponent,0);}},{key:"handleSkinChange",value:function handleSkinChange(skin){var newState={skin:skin},onSkinChange=this.props.onSkinChange;this.setState(newState);_skin["default"].set(skin);onSkinChange(skin);}},{key:"getCategories",value:function getCategories(){return this.state.firstRender?this.categories.slice(0,3):this.categories;}},{key:"setAnchorsRef",value:function setAnchorsRef(c){this.anchors=c;}},{key:"setSearchRef",value:function setSearchRef(c){this.search=c;}},{key:"setScrollViewRef",value:function setScrollViewRef(c){this.scrollView=c;}},{key:"setCategoryRef",value:function setCategoryRef(name,c){if(!this.categoryRefs){this.categoryRefs={};}this.categoryRefs[name]=c;if(!this.categoryPages){this.categoryPages={};}this.categoryPages[name]=c?c.pages:{};}},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,perLine=_this$props.perLine,rows=_this$props.rows,pagesToEagerLoad=_this$props.pagesToEagerLoad,emojiSize=_this$props.emojiSize,emojiMargin=_this$props.emojiMargin,anchorSize=_this$props.anchorSize,set=_this$props.set,sheetSize=_this$props.sheetSize,sheetColumns=_this$props.sheetColumns,sheetRows=_this$props.sheetRows,style=_this$props.style,color=_this$props.color,_native=_this$props["native"],spriteSheetFn=_this$props.spriteSheetFn,emojiImageFn=_this$props.emojiImageFn,emojisToShowFilter=_this$props.emojisToShowFilter,showSkinTones=_this$props.showSkinTones,showAnchors=_this$props.showAnchors,showCloseButton=_this$props.showCloseButton,emojiTooltip=_this$props.emojiTooltip,include=_this$props.include,exclude=_this$props.exclude,recent=_this$props.recent,autoFocus=_this$props.autoFocus,useLocalImages=_this$props.useLocalImages,onPressClose=_this$props.onPressClose,notFound=_this$props.notFound,notFoundEmoji=_this$props.notFoundEmoji,skinEmoji=_this$props.skinEmoji,skinEmojiSize=_this$props.skinEmojiSize,fontSize=_this$props.fontSize;var emojiSizing=emojiSize+emojiMargin;var emojisListWidth=perLine*emojiSizing+emojiMargin+2;var emojisListHeight=rows*emojiSizing+emojiMargin;var theme=this.getPreferredTheme();var skin=this.props.skin||this.state.skin||_skin["default"].get()||this.props.defaultSkin;return _react["default"].createElement(_reactNative.View,{style:[styles.emojiMartPicker,theme==='light'?styles.emojiMartPickerLight:styles.emojiMartPickerDark,_objectSpread({},style),{width:emojisListWidth}]},_react["default"].createElement(_search["default"],{ref:this.setSearchRef,onSearch:this.handleSearch,data:this.data,i18n:this.i18n,emojisToShowFilter:emojisToShowFilter,include:include,exclude:exclude,custom:this.CUSTOM,autoFocus:autoFocus,onPressClose:onPressClose,showSkinTones:showSkinTones,skinsProps:{skin:skin,onChange:this.handleSkinChange,skinEmoji:skinEmoji,skinEmojiSize:skinEmojiSize},emojiProps:{"native":_native,skin:skin,size:28,set:set,forceSize:_native,emojiImageFn:emojiImageFn,useLocalImages:useLocalImages},showCloseButton:showCloseButton,theme:theme,fontSize:fontSize}),_react["default"].createElement(_reactNative.ScrollView,{ref:this.setScrollViewRef,onLayout:this.onScrollViewLayout,onContentSizeChange:this.onScrollViewContentSizeChange,style:[styles.emojiMartScroll,{width:emojisListWidth,height:emojisListHeight}],onScroll:this.onScroll,horizontal:true,pagingEnabled:true,scrollEventThrottle:100,keyboardShouldPersistTaps:"handled"},this.getCategories().map(function(category,i){return _react["default"].createElement(_category["default"],{ref:_this3.setCategoryRef.bind(_this3,"category-".concat(i)),key:category.name,id:category.id,name:category.name,emojis:category.emojis,perLine:perLine,rows:rows,pagesToEagerLoad:pagesToEagerLoad,"native":_native,data:_this3.data,i18n:_this3.i18n,recent:category.id==_this3.RECENT_CATEGORY.id?recent:undefined,custom:category.id==_this3.RECENT_CATEGORY.id?_this3.CUSTOM:undefined,initialPosition:_this3.scrollViewScrollLeft,emojiProps:{"native":_native,skin:skin,size:emojiSize,margin:emojiMargin,set:set,sheetSize:sheetSize,sheetColumns:sheetColumns,sheetRows:sheetRows,forceSize:_native,tooltip:emojiTooltip,spriteSheetFn:spriteSheetFn,emojiImageFn:emojiImageFn,useLocalImages:useLocalImages,onPress:_this3.handleEmojiPress,onLongPress:_this3.handleEmojiLongPress},notFound:notFound,notFoundEmoji:notFoundEmoji,theme:theme,fontSize:fontSize});})),showAnchors?_react["default"].createElement(_reactNative.View,{style:styles.emojiMartAnchors},_react["default"].createElement(_anchors["default"],{ref:this.setAnchorsRef,data:this.data,i18n:this.i18n,color:color,categories:this.categories,onAnchorPress:this.handleAnchorPress,categoryEmojis:this.categoryEmojis,emojiProps:{"native":_native,skin:skin,size:anchorSize,set:set,sheetSize:sheetSize,sheetColumns:sheetColumns,sheetRows:sheetRows,forceSize:_native,spriteSheetFn:spriteSheetFn,emojiImageFn:emojiImageFn,useLocalImages:useLocalImages},theme:theme})):null);}}]);return NimblePicker;}(_react["default"].PureComponent);exports["default"]=NimblePicker;(0,_defineProperty2["default"])(NimblePicker,"propTypes",_objectSpread({},_sharedProps.PickerPropTypes,{data:_propTypes["default"].object.isRequired}));(0,_defineProperty2["default"])(NimblePicker,"defaultProps",_objectSpread({},_sharedDefaultProps.PickerDefaultProps));