UNPKG

react-native-vector-icons

Version:

Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.

1 lines 7.68 kB
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=createToolbarAndroidComponent;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectSpread2=_interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _isEqual=_interopRequireDefault(require("lodash/isEqual"));var _pick=_interopRequireDefault(require("lodash/pick"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("./react-native");var _jsxFileName="/home/travis/build/oblador/react-native-vector-icons/lib/toolbar-android.js";var ICON_PROP_NAMES=['iconSize','iconColor','titleColor'];var LOGO_ICON_PROP_NAMES=ICON_PROP_NAMES.concat(['logoName']);var NAV_ICON_PROP_NAMES=ICON_PROP_NAMES.concat(['navIconName']);var OVERFLOW_ICON_PROP_NAMES=ICON_PROP_NAMES.concat(['overflowIconName']);var ACTIONS_PROP_NAMES=ICON_PROP_NAMES.concat(['actions']);var arePropsEqual=function arePropsEqual(keys){return function(prevProps,nextProps){return(0,_isEqual.default)((0,_pick.default)(prevProps,keys),(0,_pick.default)(nextProps,keys));};};var areLogoIconPropsEqual=arePropsEqual(LOGO_ICON_PROP_NAMES);var areNavIconPropsEqual=arePropsEqual(NAV_ICON_PROP_NAMES);var areOverflowIconPropsEqual=arePropsEqual(OVERFLOW_ICON_PROP_NAMES);var areActionPropsEqual=arePropsEqual(ACTIONS_PROP_NAMES);function createToolbarAndroidComponent(IconNamePropType,getImageSource){var _class,_temp;return _temp=_class=function(_PureComponent){(0,_inherits2.default)(IconToolbarAndroid,_PureComponent);function IconToolbarAndroid(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,IconToolbarAndroid);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(IconToolbarAndroid)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={logo:undefined,navIcon:undefined,overflowIcon:undefined,actions:undefined};return _this;}(0,_createClass2.default)(IconToolbarAndroid,[{key:"componentDidMount",value:function componentDidMount(){this.updateLogoIconSource();this.updateNavIconSource();this.updateOverflowIconSource();this.updateActionIconSources();}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(!areLogoIconPropsEqual(prevProps,this.props)){this.updateLogoIconSource();}if(!areNavIconPropsEqual(prevProps,this.props)){this.updateNavIconSource();}if(!areOverflowIconPropsEqual(prevProps,this.props)){this.updateOverflowIconSource();}if(!areActionPropsEqual(prevProps,this.props)){this.updateActionIconSources();}}},{key:"updateLogoIconSource",value:function updateLogoIconSource(){var _this$props,logoName,iconSize,iconColor,titleColor,logo;return _regenerator.default.async(function updateLogoIconSource$(_context){while(1){switch(_context.prev=_context.next){case 0:_this$props=this.props,logoName=_this$props.logoName,iconSize=_this$props.iconSize,iconColor=_this$props.iconColor,titleColor=_this$props.titleColor;if(!logoName){_context.next=8;break;}_context.next=4;return _regenerator.default.awrap(getImageSource(logoName,iconSize,iconColor||titleColor));case 4:logo=_context.sent;this.setState({logo:logo});_context.next=9;break;case 8:if(this.state.logo){this.setState({logo:undefined});}case 9:case"end":return _context.stop();}}},null,this);}},{key:"updateNavIconSource",value:function updateNavIconSource(){var _this$props2,navIconName,iconSize,iconColor,titleColor,navIcon;return _regenerator.default.async(function updateNavIconSource$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_this$props2=this.props,navIconName=_this$props2.navIconName,iconSize=_this$props2.iconSize,iconColor=_this$props2.iconColor,titleColor=_this$props2.titleColor;if(!navIconName){_context2.next=8;break;}_context2.next=4;return _regenerator.default.awrap(getImageSource(navIconName,iconSize,iconColor||titleColor));case 4:navIcon=_context2.sent;this.setState({navIcon:navIcon});_context2.next=9;break;case 8:if(this.state.navIcon){this.setState({navIcon:undefined});}case 9:case"end":return _context2.stop();}}},null,this);}},{key:"updateOverflowIconSource",value:function updateOverflowIconSource(){var _this$props3,overflowIconName,iconSize,iconColor,titleColor,overflowIcon;return _regenerator.default.async(function updateOverflowIconSource$(_context3){while(1){switch(_context3.prev=_context3.next){case 0:_this$props3=this.props,overflowIconName=_this$props3.overflowIconName,iconSize=_this$props3.iconSize,iconColor=_this$props3.iconColor,titleColor=_this$props3.titleColor;if(!overflowIconName){_context3.next=8;break;}_context3.next=4;return _regenerator.default.awrap(getImageSource(overflowIconName,iconSize,iconColor||titleColor));case 4:overflowIcon=_context3.sent;this.setState({overflowIcon:overflowIcon});_context3.next=9;break;case 8:if(this.state.overflowIcon){this.setState({overflowIcon:undefined});}case 9:case"end":return _context3.stop();}}},null,this);}},{key:"updateActionIconSources",value:function updateActionIconSources(){var _this$props4,actions,iconSize,iconColor,titleColor,updatedActions;return _regenerator.default.async(function updateActionIconSources$(_context4){while(1){switch(_context4.prev=_context4.next){case 0:_this$props4=this.props,actions=_this$props4.actions,iconSize=_this$props4.iconSize,iconColor=_this$props4.iconColor,titleColor=_this$props4.titleColor;_context4.next=3;return _regenerator.default.awrap(Promise.all((actions||[]).map(function(action){if(action.iconName){return getImageSource(action.iconName,action.iconSize||iconSize,action.iconColor||iconColor||titleColor).then(function(icon){return(0,_objectSpread2.default)({},action,{icon:icon});});}return Promise.resolve(action);})));case 3:updatedActions=_context4.sent;this.setState({actions:updatedActions});case 5:case"end":return _context4.stop();}}},null,this);}},{key:"render",value:function render(){return _react.default.createElement(_reactNative.ToolbarAndroid,(0,_extends2.default)({},this.props,this.state,{__source:{fileName:_jsxFileName,lineNumber:142}}));}}]);return IconToolbarAndroid;}(_react.PureComponent),_class.propTypes={logoName:IconNamePropType,navIconName:IconNamePropType,overflowIconName:IconNamePropType,actions:_propTypes.default.arrayOf(_propTypes.default.shape({title:_propTypes.default.string.isRequired,iconName:IconNamePropType,iconSize:_propTypes.default.number,iconColor:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number]),show:_propTypes.default.oneOf(['always','ifRoom','never']),showWithText:_propTypes.default.bool})),iconSize:_propTypes.default.number,iconColor:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number]),titleColor:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number])},_class.defaultProps={iconSize:24},_temp;}