emoji-mart-native/dist/components/anchors.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 _nimbleEmoji=_interopRequireDefault(require("./emoji/nimble-emoji"));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({anchors:{borderTopWidth:1,flexDirection:'row',justifyContent:'space-between'},anchorsLight:{borderTopColor:'#f6f7f8',backgroundColor:'#e4e7e9'},anchorsDark:{borderTopColor:'#090807',backgroundColor:'#1b1816'},anchor:{flex:1,paddingTop:12.5,paddingBottom:12.5,paddingLeft:18,paddingRight:18,overflow:'hidden'},anchorBar:{position:'absolute',bottom:-2,left:0,right:0,height:2},anchorBarSelected:{bottom:0}});var Anchors=function(_React$PureComponent){(0,_inherits2["default"])(Anchors,_React$PureComponent);var _super=_createSuper(Anchors);function Anchors(props){var _this;(0,_classCallCheck2["default"])(this,Anchors);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"onAnchorsScrollViewLayout",function(event){_this.clientWidth=event.nativeEvent.layout.width;});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"onAnchorLayout",function(index,event){var categories=_this.props.categories;var _event$nativeEvent$la=event.nativeEvent.layout,left=_event$nativeEvent$la.x,width=_event$nativeEvent$la.width;var category=categories[index];_this.anchorsOffset[category.name]=left;_this.anchorsWidth[category.name]=width;});var defaultCategory=props.categories.filter(function(category){return category.first;})[0];_this.data=props.data;_this.state={selected:defaultCategory.name};_this.setScrollViewRef=_this.setScrollViewRef.bind((0,_assertThisInitialized2["default"])(_this));return _this;}(0,_createClass2["default"])(Anchors,[{key:"componentDidMount",value:function componentDidMount(){this.anchorsOffset={};this.anchorsWidth={};}},{key:"onSelectAnchor",value:function onSelectAnchor(categoryName){var _this2=this;this.setState({selected:categoryName},function(){var selected=_this2.state.selected;var contentOffset=0;if(_this2.clientWidth){var anchorOffset=_this2.anchorsOffset[selected];var anchorWidth=_this2.anchorsWidth[selected];var anchorHalfWidth=anchorWidth/2;var clientCenter=_this2.clientWidth/2;var scrollStart=clientCenter-anchorHalfWidth;if(anchorOffset>scrollStart){contentOffset=anchorOffset-scrollStart;}}_this2.scrollView.scrollTo({x:contentOffset,animated:true});});}},{key:"handlePress",value:function handlePress(index){var _this$props=this.props,categories=_this$props.categories,onAnchorPress=_this$props.onAnchorPress;onAnchorPress(categories[index],index);}},{key:"setScrollViewRef",value:function setScrollViewRef(c){this.scrollView=c;}},{key:"render",value:function render(){var _this3=this;var _this$props2=this.props,categories=_this$props2.categories,color=_this$props2.color,i18n=_this$props2.i18n,emojiProps=_this$props2.emojiProps,categoryEmojis=_this$props2.categoryEmojis,theme=_this$props2.theme,selected=this.state.selected;return _react["default"].createElement(_reactNative.ScrollView,{ref:this.setScrollViewRef,horizontal:true,showsHorizontalScrollIndicator:false,keyboardShouldPersistTaps:"handled",onLayout:this.onAnchorsScrollViewLayout},_react["default"].createElement(_reactNative.View,{style:[styles.anchors,theme==='light'?styles.anchorsLight:styles.anchorsDark]},categories.map(function(category,i){var id=category.id,name=category.name,anchor=category.anchor,isSelected=name==selected;if(anchor===false){return null;}var categoryEmojiId=id.startsWith('custom-')?'custom':id;return _react["default"].createElement(_reactNative.TouchableWithoutFeedback,{key:id,"data-index":i,onPress:_this3.handlePress.bind(_this3,i),onLayout:_this3.onAnchorLayout.bind(_this3,i)},_react["default"].createElement(_reactNative.View,{style:[styles.anchor,isSelected?styles.anchorSelected:null]},_react["default"].createElement(_nimbleEmoji["default"],(0,_extends2["default"])({emoji:categoryEmojis[categoryEmojiId],data:_this3.data},emojiProps,{onPress:_this3.handlePress.bind(_this3,i)})),_react["default"].createElement(_reactNative.View,{style:[styles.anchorBar,isSelected?styles.anchorBarSelected:null,{backgroundColor:color}]})));})));}}]);return Anchors;}(_react["default"].PureComponent);exports["default"]=Anchors;Anchors.propTypes={categories:_propTypes["default"].array,onAnchorPress:_propTypes["default"].func,emojiProps:_propTypes["default"].object.isRequired,categoryEmojis:_propTypes["default"].object.isRequired,theme:_propTypes["default"].oneOf(['light','dark'])};Anchors.defaultProps={categories:[],onAnchorPress:function onAnchorPress(){},theme:'light'};