emoji-mart-native/dist/components/category.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 _frequently=_interopRequireDefault(require("../utils/frequently"));var _utils=require("../utils");var _nimbleEmoji=_interopRequireDefault(require("./emoji/nimble-emoji"));var _notFound=_interopRequireDefault(require("./not-found"));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 styles=_reactNative.StyleSheet.create({emojisContainer:{flexDirection:'row',justifyContent:'flex-start',alignItems:'flex-start',flexWrap:'wrap'}});var Category=function(_React$Component){(0,_inherits2["default"])(Category,_React$Component);var _super=_createSuper(Category);function Category(_props){var _this;(0,_classCallCheck2["default"])(this,Category);_this=_super.call(this,_props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"onLayout",function(index,event){var _event$nativeEvent$la=event.nativeEvent.layout,left=_event$nativeEvent$la.x,width=_event$nativeEvent$la.width;if(index===0){_this.left=left;_this.width=width;}_this.pagesOffsetLeft["page-".concat(index)]=left;_this.maxMargin["page-".concat(index)]=width;});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"_getSanitizedData",function(props){var emoji=props.emoji,skin=props.skin,set=props.set;return(0,_utils.getSanitizedData)(emoji,skin,set,_this.data);});_this.data=_props.data;_this.active={};if(_props.name=='Recent'||_props.name=='Smileys & People'){_this.active['page-0']=true;}if(_props.name=='Search'){_this.active['page-0']=true;_this.active['page-1']=true;}_this.state={visible:true};return _this;}(0,_createClass2["default"])(Category,[{key:"componentDidMount",value:function componentDidMount(){this.minMargin=0;this.pagesOffsetLeft={};this.maxMargin={};}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){var _this$props=this.props,name=_this$props.name,perLine=_this$props.perLine,_native=_this$props["native"],hasStickyPosition=_this$props.hasStickyPosition,emojis=_this$props.emojis,emojiProps=_this$props.emojiProps,skin=emojiProps.skin,size=emojiProps.size,set=emojiProps.set,nextPerLine=nextProps.perLine,nextNative=nextProps["native"],nextHasStickyPosition=nextProps.hasStickyPosition,nextEmojis=nextProps.emojis,nextEmojiProps=nextProps.emojiProps,nextSkin=nextEmojiProps.skin,nextSize=nextEmojiProps.size,nextSet=nextEmojiProps.set,shouldUpdate=false;if(name=='Recent'&&perLine!=nextPerLine){shouldUpdate=true;}if(name=='Search'){shouldUpdate=!(emojis==nextEmojis);}if(skin!=nextSkin||size!=nextSize||_native!=nextNative||set!=nextSet||hasStickyPosition!=nextHasStickyPosition){shouldUpdate=true;}return shouldUpdate;}},{key:"getMaxMarginValue",value:function getMaxMarginValue(){var maxMargin=this.left;for(var key in this.maxMargin){if(this.maxMargin.hasOwnProperty(key))maxMargin+=this.maxMargin[key];}return maxMargin;}},{key:"calculateVisibility",value:function calculateVisibility(scrollLeft){if(this.pages&&typeof this.left==='number'&&scrollLeft%this.width===0){var pagesToEagerLoad=this.props.pagesToEagerLoad;for(var index in this.pages){var page=parseInt(index)+1;var pageWidth=this.maxMargin["page-".concat(index)]||0;var pageLeft=this.pagesOffsetLeft["page-".concat(index)]||this.left+index*pageWidth;var pageEagerLoadWidth=pageWidth*pagesToEagerLoad;this.active["page-".concat(index)]=scrollLeft>=pageLeft-pageEagerLoadWidth&&scrollLeft<=pageLeft+pageEagerLoadWidth;}this.forceUpdate();}}},{key:"handleScroll",value:function handleScroll(scrollLeft){var maxMargin=this.getMaxMarginValue();this.calculateVisibility(scrollLeft);var bleed=this.width/2;var thisLeftWithBleed=this.left-bleed;if(scrollLeft>=thisLeftWithBleed&&scrollLeft<=maxMargin){return true;}return;}},{key:"getEmojis",value:function getEmojis(){var _this2=this;var _this$props2=this.props,name=_this$props2.name,emojis=_this$props2.emojis,recent=_this$props2.recent,perLine=_this$props2.perLine,emojiProps=_this$props2.emojiProps;if(name=='Recent'){var custom=this.props.custom;var frequentlyUsed=recent||_frequently["default"].get(perLine);if(frequentlyUsed.length){emojis=frequentlyUsed.map(function(id){var emoji=custom.filter(function(e){return e.id===id;})[0];if(emoji){return emoji;}return id;}).filter(function(id){return!!(0,_utils.getData)(id,null,null,_this2.data);});}if(emojis.length===0&&frequentlyUsed.length>0){return null;}}if(emojis){emojis=emojis.slice(0);}return emojis;}},{key:"updateDisplay",value:function updateDisplay(visible){var emojis=this.getEmojis();if(!emojis){return;}this.setState({visible:visible});}},{key:"setPagesRef",value:function setPagesRef(index,c){if(!this.pages){this.pages={};}this.pages[index]=c;}},{key:"render",value:function render(){var _this3=this;var _this$props3=this.props,id=_this$props3.id,name=_this$props3.name,hasStickyPosition=_this$props3.hasStickyPosition,emojiProps=_this$props3.emojiProps,i18n=_this$props3.i18n,perLine=_this$props3.perLine,rows=_this$props3.rows,pagesToEagerLoad=_this$props3.pagesToEagerLoad,notFound=_this$props3.notFound,notFoundEmoji=_this$props3.notFoundEmoji,theme=_this$props3.theme,fontSize=_this$props3.fontSize,emojis=this.getEmojis(),visible=this.state.visible;var emojiSize=emojiProps.size,emojiMargin=emojiProps.margin;var emojiSizing=emojiSize+emojiMargin;var emojisListWidth=perLine*emojiSizing+emojiMargin+2;var emojisListHeight=rows*emojiSizing+emojiMargin;var paginatedEmojis=(0,_utils.chunk)(emojis,perLine*rows);return!emojis||!visible?null:[emojis.length?paginatedEmojis.map(function(emojis,i){var pageVisible=_this3.active["page-".concat(i)];return _react["default"].createElement(_reactNative.View,{ref:_this3.setPagesRef.bind(_this3,i),onLayout:_this3.onLayout.bind(_this3,i),key:"".concat(name,"_emojis_").concat(i),style:[styles.emojisContainer,{width:emojisListWidth,height:emojisListHeight,padding:emojiMargin/2}]},emojis.map(function(item,i){var emoji=_this3._getSanitizedData(_objectSpread({emoji:item},emojiProps));return pageVisible?_react["default"].createElement(_nimbleEmoji["default"],(0,_extends2["default"])({key:"".concat(name,"_emoji_").concat(emoji.id),emoji:emoji,data:_this3.data},emojiProps)):null;}));}):_react["default"].createElement(_notFound["default"],{style:{width:emojisListWidth,height:emojisListHeight,padding:emojiMargin/2},key:"notFound",i18n:i18n,notFound:notFound,notFoundEmoji:notFoundEmoji,data:this.data,emojiProps:emojiProps,theme:theme,fontSize:fontSize})];}}]);return Category;}(_react["default"].Component);exports["default"]=Category;(0,_defineProperty2["default"])(Category,"propTypes",{emojis:_propTypes["default"].array,hasStickyPosition:_propTypes["default"].bool,name:_propTypes["default"].string.isRequired,"native":_propTypes["default"].bool.isRequired,perLine:_propTypes["default"].number.isRequired,emojiProps:_propTypes["default"].object.isRequired,recent:_propTypes["default"].arrayOf(_propTypes["default"].string),notFound:_propTypes["default"].func,notFoundEmoji:_propTypes["default"].string.isRequired,theme:_propTypes["default"].oneOf(['light','dark']),fontSize:_propTypes["default"].number});(0,_defineProperty2["default"])(Category,"defaultProps",{emojis:[],hasStickyPosition:true,theme:'light',fontSize:15});