emoji-mart-native/dist/components/skins.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 _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));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 _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");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({skinSwatches:{paddingTop:2,paddingBottom:2,borderWidth:1,borderRadius:14,flexDirection:'row',alignItems:'center',justifyContent:'center'},skinSwatchesLight:{borderColor:'#d9d9d9'},skinSwatchesDark:{borderColor:'#3f3f3f'},skinSwatch:{paddingLeft:2,paddingRight:2},skin:{flexDirection:'row',alignItems:'center',justifyContent:'center'},skinSelected:{backgroundColor:'rgba(255, 255, 255, 0.75)'},skinTone1:{backgroundColor:'#ffc93a'},skinTone2:{backgroundColor:'#fadcbc'},skinTone3:{backgroundColor:'#e0bb95'},skinTone4:{backgroundColor:'#bf8f68'},skinTone5:{backgroundColor:'#9b643d'},skinTone6:{backgroundColor:'#594539'}});var Skins=function(_React$PureComponent){(0,_inherits2["default"])(Skins,_React$PureComponent);var _super=_createSuper(Skins);function Skins(props){var _this;(0,_classCallCheck2["default"])(this,Skins);_this=_super.call(this,props);_this.state={opened:false};return _this;}(0,_createClass2["default"])(Skins,[{key:"handlePress",value:function handlePress(skin){var onChange=this.props.onChange;if(!this.state.opened){this.setState({opened:true});}else{this.setState({opened:false});if(skin!=this.props.skin){onChange(skin);}}}},{key:"render",value:function render(){var _this$props=this.props,skin=_this$props.skin,theme=_this$props.theme,iconSize=_this$props.iconSize;var opened=this.state.opened;var skinToneNodes=[];var skinSize=Math.round(iconSize*0.6666666666666666);var skinSelectedSize=skinSize/2;for(var skinTone=1;skinTone<=6;skinTone++){var selected=skinTone===skin;if(selected||opened){skinToneNodes.push(_react["default"].createElement(_reactNative.View,{key:"skin-tone-".concat(skinTone),style:[styles.skinSwatch]},_react["default"].createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.handlePress.bind(this,skinTone),style:[styles.skin,styles["skinTone".concat(skinTone)]]},_react["default"].createElement(_reactNative.View,{style:[styles.skin,{width:skinSize,height:skinSize,borderRadius:skinSize/2},styles["skinTone".concat(skinTone)]]},selected&&opened?_react["default"].createElement(_reactNative.View,{style:[styles.skinSelected,{width:skinSelectedSize,height:skinSelectedSize,borderRadius:skinSelectedSize/2}]}):null))));}}return _react["default"].createElement(_reactNative.View,{style:[styles.skinSwatches,theme==='light'?styles.skinSwatchesLight:styles.skinSwatchesDark]},skinToneNodes);}}]);return Skins;}(_react["default"].PureComponent);exports["default"]=Skins;Skins.propTypes={onChange:_propTypes["default"].func,skin:_propTypes["default"].number.isRequired,theme:_propTypes["default"].oneOf(['light','dark'])};Skins.defaultProps={onChange:function onChange(){},theme:'light'};