From 52b5a14386ede0cbcd86179887555de4b67f1bc2 Mon Sep 17 00:00:00 2001 From: Peder Johnsen Date: Mon, 14 May 2018 14:48:15 +0100 Subject: [PATCH] Temporary fix for pagination visibility check --- dist/components/category.js | 2 +- dist/components/picker/nimble-picker.js | 2 +- package.json | 2 +- src/components/category.js | 29 ++++++++++++++++++------- src/components/picker/nimble-picker.js | 14 ++++++++++-- 5 files changed, 36 insertions(+), 13 deletions(-) diff --git a/dist/components/category.js b/dist/components/category.js index eeceab41..fd2ef9be 100644 --- a/dist/components/category.js +++ b/dist/components/category.js @@ -1 +1 @@ -'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _extends2=require('../polyfills/extends');var _extends3=_interopRequireDefault(_extends2);var _objectGetPrototypeOf=require('../polyfills/objectGetPrototypeOf');var _objectGetPrototypeOf2=_interopRequireDefault(_objectGetPrototypeOf);var _classCallCheck2=require('babel-runtime/helpers/classCallCheck');var _classCallCheck3=_interopRequireDefault(_classCallCheck2);var _createClass2=require('../polyfills/createClass');var _createClass3=_interopRequireDefault(_createClass2);var _possibleConstructorReturn2=require('../polyfills/possibleConstructorReturn');var _possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2);var _inherits2=require('../polyfills/inherits');var _inherits3=_interopRequireDefault(_inherits2);var _react=require('react');var _react2=_interopRequireDefault(_react);var _propTypes=require('prop-types');var _propTypes2=_interopRequireDefault(_propTypes);var _reactNative=require('react-native');var _frequently=require('../utils/frequently');var _frequently2=_interopRequireDefault(_frequently);var _utils=require('../utils');var _=require('.');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}var styles=_reactNative.StyleSheet.create({category:{flexDirection:'column',alignItems:'center',justifyContent:'flex-start'},labelText:{fontSize:15,fontWeight:'bold'},emojisContainer:{flexDirection:'row',justifyContent:'flex-start',alignItems:'flex-start',flexWrap:'wrap'},notFound:{alignSelf:'center',flexDirection:'column',alignItems:'center',justifyContent:'center'}});var Category=function(_React$Component){(0,_inherits3.default)(Category,_React$Component);function Category(props){(0,_classCallCheck3.default)(this,Category);var _this=(0,_possibleConstructorReturn3.default)(this,(Category.__proto__||(0,_objectGetPrototypeOf2.default)(Category)).call(this,props));_initialiseProps.call(_this);_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,_createClass3.default)(Category,[{key:'componentDidMount',value:function componentDidMount(){this.minMargin=0;this.pagesOffsetLeft={};this.maxMargin={};}},{key:'shouldComponentUpdate',value:function shouldComponentUpdate(nextProps,nextState){var _props=this.props;var name=_props.name;var perLine=_props.perLine;var native=_props.native;var hasStickyPosition=_props.hasStickyPosition;var emojis=_props.emojis;var emojiProps=_props.emojiProps;var skin=emojiProps.skin;var size=emojiProps.size;var set=emojiProps.set;var nextPerLine=nextProps.perLine;var nextNative=nextProps.native;var nextHasStickyPosition=nextProps.hasStickyPosition;var nextEmojis=nextProps.emojis;var nextEmojiProps=nextProps.emojiProps;var nextSkin=nextEmojiProps.skin;var nextSize=nextEmojiProps.size;var nextSet=nextEmojiProps.set;var 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){for(var index in this.pages){var page=parseInt(index)+1;var pageWidth=this.maxMargin['page-'+index]||0;var pageLeft=this.pagesOffsetLeft['page-'+index]||this.left+index*pageWidth;this.active['page-'+index]=scrollLeft>=pageLeft-pageWidth&&scrollLeft<=pageLeft+pageWidth;}this.forceUpdate();}}},{key:'handleScroll',value:function handleScroll(scrollLeft){var maxMargin=this.getMaxMarginValue();this.calculateVisibility(scrollLeft);if(scrollLeft>=this.left&&scrollLeft0){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 _props3=this.props;var id=_props3.id;var name=_props3.name;var hasStickyPosition=_props3.hasStickyPosition;var emojiProps=_props3.emojiProps;var i18n=_props3.i18n;var perLine=_props3.perLine;var rows=_props3.rows;var emojis=this.getEmojis();var visible=this.state.visible;var emojiSize=emojiProps.size;var emojiMargin=emojiProps.margin;var emojiSizing=emojiSize+emojiMargin;var emojisListWidth=perLine*emojiSizing+emojiMargin;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-'+i];return _react2.default.createElement(_reactNative.View,{ref:_this3.setPagesRef.bind(_this3,i),onLayout:_this3.onLayout.bind(_this3,i),key:name+'_emojis_'+i,style:[styles.emojisContainer,{width:emojisListWidth,height:emojisListHeight,padding:emojiMargin/2}]},emojis.map(function(item,i){var emoji=_this3._getSanitizedData((0,_extends3.default)({emoji:item},emojiProps));return pageVisible?_react2.default.createElement(_.NimbleEmoji,(0,_extends3.default)({key:name+'_emoji_'+emoji.id,emoji:emoji,data:_this3.data},emojiProps)):null;}));}):_react2.default.createElement(_reactNative.View,{key:'notFound',style:[styles.notFound,{width:emojisListWidth,height:emojisListHeight,padding:emojiMargin/2}]},_react2.default.createElement(_reactNative.View,null,_react2.default.createElement(_.NimbleEmoji,(0,_extends3.default)({data:this.data},emojiProps,{emoji:'sleuth_or_spy',onPress:null,onLongPress:null}))),_react2.default.createElement(_reactNative.View,null,_react2.default.createElement(_reactNative.Text,{style:styles.labelText},i18n.notfound)))];}}]);return Category;}(_react2.default.Component);Category.defaultProps={emojis:[],hasStickyPosition:true};var _initialiseProps=function _initialiseProps(){var _this4=this;this.onLayout=function(index,event){var initialPosition=_this4.props.initialPosition;var _event$nativeEvent$la=event.nativeEvent.layout;var left=_event$nativeEvent$la.x;var width=_event$nativeEvent$la.width;if(index===0){_this4.left=left;_this4.width=width;}_this4.pagesOffsetLeft['page-'+index]=left;_this4.maxMargin['page-'+index]=width;};this._getSanitizedData=function(props){var emoji=props.emoji;var skin=props.skin;var set=props.set;return(0,_utils.getSanitizedData)(emoji,skin,set,_this4.data);};};exports.default=Category; \ No newline at end of file +'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _extends2=require('../polyfills/extends');var _extends3=_interopRequireDefault(_extends2);var _objectGetPrototypeOf=require('../polyfills/objectGetPrototypeOf');var _objectGetPrototypeOf2=_interopRequireDefault(_objectGetPrototypeOf);var _classCallCheck2=require('babel-runtime/helpers/classCallCheck');var _classCallCheck3=_interopRequireDefault(_classCallCheck2);var _createClass2=require('../polyfills/createClass');var _createClass3=_interopRequireDefault(_createClass2);var _possibleConstructorReturn2=require('../polyfills/possibleConstructorReturn');var _possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2);var _inherits2=require('../polyfills/inherits');var _inherits3=_interopRequireDefault(_inherits2);var _react=require('react');var _react2=_interopRequireDefault(_react);var _propTypes=require('prop-types');var _propTypes2=_interopRequireDefault(_propTypes);var _reactNative=require('react-native');var _frequently=require('../utils/frequently');var _frequently2=_interopRequireDefault(_frequently);var _utils=require('../utils');var _=require('.');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}var styles=_reactNative.StyleSheet.create({labelText:{fontSize:15,fontWeight:'bold'},emojisContainer:{flexDirection:'row',justifyContent:'flex-start',alignItems:'flex-start',flexWrap:'wrap'},notFound:{alignSelf:'center',flexDirection:'column',alignItems:'center',justifyContent:'center'}});var Category=function(_React$Component){(0,_inherits3.default)(Category,_React$Component);function Category(props){(0,_classCallCheck3.default)(this,Category);var _this=(0,_possibleConstructorReturn3.default)(this,(Category.__proto__||(0,_objectGetPrototypeOf2.default)(Category)).call(this,props));_initialiseProps.call(_this);_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,_createClass3.default)(Category,[{key:'componentDidMount',value:function componentDidMount(){this.minMargin=0;this.pagesOffsetLeft={};this.maxMargin={};}},{key:'shouldComponentUpdate',value:function shouldComponentUpdate(nextProps,nextState){var _props=this.props;var name=_props.name;var perLine=_props.perLine;var native=_props.native;var hasStickyPosition=_props.hasStickyPosition;var emojis=_props.emojis;var emojiProps=_props.emojiProps;var skin=emojiProps.skin;var size=emojiProps.size;var set=emojiProps.set;var nextPerLine=nextProps.perLine;var nextNative=nextProps.native;var nextHasStickyPosition=nextProps.hasStickyPosition;var nextEmojis=nextProps.emojis;var nextEmojiProps=nextProps.emojiProps;var nextSkin=nextEmojiProps.skin;var nextSize=nextEmojiProps.size;var nextSet=nextEmojiProps.set;var 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){for(var index in this.pages){var page=parseInt(index)+1;var pageWidth=this.maxMargin['page-'+index]||0;var pageLeft=this.pagesOffsetLeft['page-'+index]||this.left+index*pageWidth;this.active['page-'+index]=scrollLeft>=pageLeft-pageWidth&&scrollLeft<=pageLeft+pageWidth;}this.forceUpdate();}}},{key:'handleScroll',value:function handleScroll(scrollLeft){var maxMargin=this.getMaxMarginValue();this.calculateVisibility(scrollLeft);if(scrollLeft>=this.left&&scrollLeft0){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 _props3=this.props;var id=_props3.id;var name=_props3.name;var hasStickyPosition=_props3.hasStickyPosition;var emojiProps=_props3.emojiProps;var i18n=_props3.i18n;var perLine=_props3.perLine;var rows=_props3.rows;var emojis=this.getEmojis();var visible=this.state.visible;var emojiSize=emojiProps.size;var emojiMargin=emojiProps.margin;var emojiSizing=emojiSize+emojiMargin;var emojisListWidth=320;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-'+i];return _react2.default.createElement(_reactNative.View,{ref:_this3.setPagesRef.bind(_this3,i),onLayout:_this3.onLayout.bind(_this3,i),key:name+'_emojis_'+i,style:[styles.emojisContainer,{width:emojisListWidth,height:emojisListHeight,padding:emojiMargin/2,paddingLeft:6,paddingRight:6}]},emojis.map(function(item,i){var emoji=_this3._getSanitizedData((0,_extends3.default)({emoji:item},emojiProps));return pageVisible?_react2.default.createElement(_.NimbleEmoji,(0,_extends3.default)({key:name+'_emoji_'+emoji.id,emoji:emoji,data:_this3.data},emojiProps)):null;}));}):_react2.default.createElement(_reactNative.View,{key:'notFound',style:[styles.notFound,{width:emojisListWidth,height:emojisListHeight,padding:emojiMargin/2}]},_react2.default.createElement(_reactNative.View,null,_react2.default.createElement(_.NimbleEmoji,(0,_extends3.default)({data:this.data},emojiProps,{emoji:'sleuth_or_spy',onPress:null,onLongPress:null}))),_react2.default.createElement(_reactNative.View,null,_react2.default.createElement(_reactNative.Text,{style:styles.labelText},i18n.notfound)))];}}]);return Category;}(_react2.default.Component);Category.defaultProps={emojis:[],hasStickyPosition:true};var _initialiseProps=function _initialiseProps(){var _this4=this;this.onLayout=function(index,event){var _event$nativeEvent$la=event.nativeEvent.layout;var left=_event$nativeEvent$la.x;var width=_event$nativeEvent$la.width;if(index===0){_this4.left=left;_this4.width=width;}_this4.pagesOffsetLeft['page-'+index]=left;_this4.maxMargin['page-'+index]=width;};this._getSanitizedData=function(props){var emoji=props.emoji;var skin=props.skin;var set=props.set;return(0,_utils.getSanitizedData)(emoji,skin,set,_this4.data);};};exports.default=Category; \ No newline at end of file diff --git a/dist/components/picker/nimble-picker.js b/dist/components/picker/nimble-picker.js index 4e57b461..cbf0c1d4 100644 --- a/dist/components/picker/nimble-picker.js +++ b/dist/components/picker/nimble-picker.js @@ -1 +1 @@ -'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _extends2=require('../../polyfills/extends');var _extends3=_interopRequireDefault(_extends2);var _objectGetPrototypeOf=require('../../polyfills/objectGetPrototypeOf');var _objectGetPrototypeOf2=_interopRequireDefault(_objectGetPrototypeOf);var _classCallCheck2=require('babel-runtime/helpers/classCallCheck');var _classCallCheck3=_interopRequireDefault(_classCallCheck2);var _createClass2=require('../../polyfills/createClass');var _createClass3=_interopRequireDefault(_createClass2);var _possibleConstructorReturn2=require('../../polyfills/possibleConstructorReturn');var _possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2);var _inherits2=require('../../polyfills/inherits');var _inherits3=_interopRequireDefault(_inherits2);require('../../vendor/raf-polyfill');var _react=require('react');var _react2=_interopRequireDefault(_react);var _propTypes=require('prop-types');var _propTypes2=_interopRequireDefault(_propTypes);var _reactNative=require('react-native');var _store=require('../../utils/store');var _store2=_interopRequireDefault(_store);var _frequently=require('../../utils/frequently');var _frequently2=_interopRequireDefault(_frequently);var _utils=require('../../utils');var _data=require('../../utils/data');var _sharedProps=require('../../utils/shared-props');var _=require('..');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}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 styles=_reactNative.StyleSheet.create({emojiMartBackdrop:{zIndex:1,position:'absolute',top:0,right:0,bottom:0,left:0,backgroundColor:'rgba(0, 0, 0, 0.5)'},emojiMartPickerContainer:{flexDirection:'column',alignItems:'center',justifyContent:'center',position:'absolute',top:0,right:0,bottom:0,left:0},emojiMartPicker:{zIndex:2,flexShrink:0,flexDirection:'column',backgroundColor:'#eceff1'},emojiMartFullscreen:{top:0,right:0,bottom:0,left:0},emojiMartScroll:{flexShrink:0},emojiMartAnchors:{flexShrink:0,maxHeight:90}});var NimblePicker=function(_React$PureComponent){(0,_inherits3.default)(NimblePicker,_React$PureComponent);function NimblePicker(props){(0,_classCallCheck3.default)(this,NimblePicker);var _this=(0,_possibleConstructorReturn3.default)(this,(NimblePicker.__proto__||(0,_objectGetPrototypeOf2.default)(NimblePicker)).call(this,props));_this.onScrollViewLayout=function(event){_this.clientWidth=event.nativeEvent.layout.width;};_this.onScrollViewContentSizeChange=function(contentWidth){_this.scrollWidth=contentWidth;};_this.RECENT_CATEGORY={id:'recent',name:'Recent',emojis:null};_this.CUSTOM_CATEGORY={id:'custom',name:'Custom',emojis:[]};_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.state={skin:props.skin||_store2.default.get('skin')||props.defaultSkin,firstRender:true};_this.scrollViewScrollLeft=0;_this.categories=[];var allCategories=[].concat(_this.data.categories);if(props.custom.length>0){_this.CUSTOM_CATEGORY.emojis=props.custom.map(function(emoji){return(0,_extends3.default)({},emoji,{id:emoji.short_names[0],custom:true});});allCategories.push(_this.CUSTOM_CATEGORY);}_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-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-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(_this);_this.handleAnchorPress=_this.handleAnchorPress.bind(_this);_this.setSearchRef=_this.setSearchRef.bind(_this);_this.handleSearch=_this.handleSearch.bind(_this);_this.setScrollViewRef=_this.setScrollViewRef.bind(_this);_this.onScroll=_this.onScroll.bind(_this);_this.handleScroll=_this.handleScroll.bind(_this);_this.handleScrollPaint=_this.handleScrollPaint.bind(_this);_this.handleEmojiPress=_this.handleEmojiPress.bind(_this);_this.handleEmojiSelect=_this.handleEmojiSelect.bind(_this);_this.handleEmojiLongPress=_this.handleEmojiLongPress.bind(_this);_this.handleSkinChange=_this.handleSkinChange.bind(_this);return _this;}(0,_createClass3.default)(NimblePicker,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(props){if(props.skin){this.setState({skin:props.skin});}else if(props.defaultSkin&&!_store2.default.get('skin')){this.setState({skin:props.defaultSkin});}}},{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);}},{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)_frequently2.default.add(emoji);var component=this.categoryRefs['category-1'];if(component){var maxMargin=component.maxMargin;component.forceUpdate();}}},{key:'handleEmojiLongPress',value:function handleEmojiLongPress(emoji,e){this.props.onLongPress(emoji,e);_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;i0){_this.CUSTOM_CATEGORY.emojis=props.custom.map(function(emoji){return(0,_extends3.default)({},emoji,{id:emoji.short_names[0],custom:true});});allCategories.push(_this.CUSTOM_CATEGORY);}_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-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-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(_this);_this.handleAnchorPress=_this.handleAnchorPress.bind(_this);_this.setSearchRef=_this.setSearchRef.bind(_this);_this.handleSearch=_this.handleSearch.bind(_this);_this.setScrollViewRef=_this.setScrollViewRef.bind(_this);_this.onScroll=_this.onScroll.bind(_this);_this.handleScroll=_this.handleScroll.bind(_this);_this.handleScrollPaint=_this.handleScrollPaint.bind(_this);_this.handleEmojiPress=_this.handleEmojiPress.bind(_this);_this.handleEmojiSelect=_this.handleEmojiSelect.bind(_this);_this.handleEmojiLongPress=_this.handleEmojiLongPress.bind(_this);_this.handleSkinChange=_this.handleSkinChange.bind(_this);return _this;}(0,_createClass3.default)(NimblePicker,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(props){if(props.skin){this.setState({skin:props.skin});}else if(props.defaultSkin&&!_store2.default.get('skin')){this.setState({skin:props.defaultSkin});}}},{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);}},{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)_frequently2.default.add(emoji);var component=this.categoryRefs['category-1'];if(component){var maxMargin=component.maxMargin;component.forceUpdate();}}},{key:'handleEmojiLongPress',value:function handleEmojiLongPress(emoji,e){this.props.onLongPress(emoji,e);_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 { - const { initialPosition } = this.props const { x: left, width } = event.nativeEvent.layout if (index === 0) { @@ -242,7 +242,17 @@ export default class Category extends React.Component { const { size: emojiSize, margin: emojiMargin } = emojiProps const emojiSizing = emojiSize + emojiMargin - const emojisListWidth = perLine * emojiSizing + emojiMargin + // Wanted to use PixelRatio.roundToNearestPixel() here to accomodate + // multiple devices, however the values passed still gets modified.. + // TODO: If PixelRatio.roundToNearestPixel() starts working correctly, + // change hard value back to using PixelRatio.roundToNearestPixel() + // const emojisListWidth = PixelRatio.roundToNearestPixel( + // perLine * emojiSizing + emojiMargin + 2, + // ) + // const emojisListHeight = PixelRatio.roundToNearestPixel( + // rows * emojiSizing + emojiMargin, + // ) + const emojisListWidth = 320 const emojisListHeight = rows * emojiSizing + emojiMargin const paginatedEmojis = chunk(emojis, perLine * rows) @@ -265,6 +275,9 @@ export default class Category extends React.Component { width: emojisListWidth, height: emojisListHeight, padding: emojiMargin / 2, + // TODO: Remove once we can use PixelRatio.roundToNearestPixel() + paddingLeft: 6, + paddingRight: 6, }, ]} > diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index de4e67c5..efee5311 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -8,6 +8,7 @@ import { ScrollView, ToastAndroid, TouchableWithoutFeedback, + // PixelRatio, } from 'react-native' import store from '../../utils/store' @@ -445,7 +446,17 @@ export default class NimblePicker extends React.PureComponent { { skin } = this.state const emojiSizing = emojiSize + emojiMargin - const emojisListWidth = perLine * emojiSizing + emojiMargin + // Wanted to use PixelRatio.roundToNearestPixel() here to accomodate + // multiple devices, however the values passed still gets modified.. + // TODO: If 4.roundToNearestPixel() starts working correctly, + // change hard value back to using PixelRatio.roundToNearestPixel() + // const emojisListWidth = PixelRatio.roundToNearestPixel( + // perLine * emojiSizing + emojiMargin + 2, + // ) + // const emojisListHeight = PixelRatio.roundToNearestPixel( + // rows * emojiSizing + emojiMargin, + // ) + const emojisListWidth = 320 const emojisListHeight = rows * emojiSizing + emojiMargin return [ @@ -491,7 +502,6 @@ export default class NimblePicker extends React.PureComponent { onScroll={this.onScroll} horizontal pagingEnabled - showsHorizontalScrollIndicator={false} scrollEventThrottle={100} keyboardShouldPersistTaps="handled" >