@devloops/react-native-variant
Version:
react-native material ui library
2 lines • 6.63 kB
JavaScript
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/devloops/Desktop/reactNative/reactNativeMUI/src/Components/Chip.tsx";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(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=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){_defineProperty(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}import React,{useRef,useEffect,useState}from'react';import Text from'./Core/Typography';import{StyleSheet,View,ImageBackground,Animated,Easing}from'react-native';import Color from'color';import Ripple from'./Core/Ripple';import Icon from'./Core/Icon';import{useAnimation}from'../Helpers/Hooks';import{useTheme}from'../Theming';var AnimatedBaseIcon=Animated.createAnimatedComponent(Icon);var Chip=function Chip(_ref){var icon=_ref.icon,label=_ref.label,avatarSource=_ref.avatarSource,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'outlined':_ref$variant,color=_ref.color,_ref$selectedIcon=_ref.selectedIcon,selectedIcon=_ref$selectedIcon===void 0?'check':_ref$selectedIcon,_ref$elevation=_ref.elevation,elevation=_ref$elevation===void 0?2:_ref$elevation,selectedColor=_ref.selectedColor,isSelected=_ref.isSelected,onSelect=_ref.onSelect,action=_ref.action,theme=_ref.theme,props=_objectWithoutProperties(_ref,["icon","label","avatarSource","variant","color","selectedIcon","elevation","selectedColor","isSelected","onSelect","action","theme"]);theme=useTheme(theme);color=color||theme.color.primary;selectedColor=color||theme.color.primary;var animated=useAnimation({type:'timing',toValue:isSelected===undefined&&icon?20:isSelected?20:1,initialValue:0,easing:Easing.linear,duration:200});var textColor=color&&isSelected?color:theme.color.text,activeBG=Color(selectedColor).alpha(0.15).toString(),bg=Color('white').darken(0.15).toString(),colorAnimate=isSelected===undefined?textColor:animated.interpolate({inputRange:[0,20],outputRange:[textColor,selectedColor]});return React.createElement(View,{style:{marginRight:8,borderRadius:30,overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:73}},React.createElement(Ripple,_extends({rippleColor:selectedColor,style:[style.container,{marginRight:0}],onPress:onSelect?function(){return onSelect(!isSelected);}:undefined},props,{__source:{fileName:_jsxFileName,lineNumber:74}}),React.createElement(Animated.View,{style:[style.root,variant==='outlined'?_objectSpread({},style.outlined,{borderColor:colorAnimate}):_objectSpread({},style.flat,{backgroundColor:isSelected===undefined?bg:animated.interpolate({inputRange:[0,20],outputRange:[bg,activeBG]}),elevation:elevation})],__source:{fileName:_jsxFileName,lineNumber:79}},icon||selectedIcon?React.createElement(AnimatedIcon,{name:selectedIcon||icon,size:animated,color:colorAnimate,style:{marginLeft:animated.interpolate({inputRange:[0,20],outputRange:[0,4]})},__source:{fileName:_jsxFileName,lineNumber:97}}):avatarSource?React.createElement(AvatarImage,{avatarSource:avatarSource,isSelected:isSelected,__source:{fileName:_jsxFileName,lineNumber:109}}):null,React.createElement(View,{style:style.text,__source:{fileName:_jsxFileName,lineNumber:111}},React.createElement(Text,{color:colorAnimate.toString(),animated:true,variant:"subtitle1",__source:{fileName:_jsxFileName,lineNumber:112}},label)),isSelected===undefined&&action&&action({role:'chip',onPress:function onPress(){alert('test');},backgroundColor:Color(textColor).isDark()?Color(textColor).alpha(0.6).toString():textColor,color:Color(textColor).isDark()?'white':'#555',rippleStyle:{marginRight:4},size:14}))));};var AvatarImage=function AvatarImage(_ref2){var avatarSource=_ref2.avatarSource,isSelected=_ref2.isSelected;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isLoad=_useState2[0],setIsLoad=_useState2[1];var translate=useRef(new Animated.Value(-30)).current;var selected=useRef(new Animated.Value(0)).current;useEffect(function(){if(isLoad)Animated.timing(translate,{toValue:0,duration:200,easing:Easing.linear}).start();},[isLoad]);useEffect(function(){Animated.timing(selected,{toValue:0,duration:200,easing:Easing.linear}).start();},[isSelected]);return React.createElement(Animated.View,{style:[isLoad?style.thumbnailWrapper:{width:0,height:0,overflow:'hidden'},{transform:[{translateX:translate}]}],__source:{fileName:_jsxFileName,lineNumber:163}},React.createElement(ImageBackground,{onLoadEnd:function onLoadEnd(){return setIsLoad(true);},source:avatarSource,style:style.thumbnail,__source:{fileName:_jsxFileName,lineNumber:172}},React.createElement(Animated.View,{style:[StyleSheet.absoluteFillObject,{backgroundColor:'rgba(0,0,0,.24)',justifyContent:'center',alignItems:'center',transform:[{translateX:translate}]}],__source:{fileName:_jsxFileName,lineNumber:176}},React.createElement(Icon,{name:"check",color:"white",size:20,style:{marginTop:4,marginLeft:4},__source:{fileName:_jsxFileName,lineNumber:186}}))));};var AnimatedIcon=function AnimatedIcon(_ref3){var name=_ref3.name,color=_ref3.color,props=_objectWithoutProperties(_ref3,["name","color"]);return React.createElement(AnimatedBaseIcon,_extends({name:name,color:color},props,{__source:{fileName:_jsxFileName,lineNumber:199}}));};var style=StyleSheet.create({container:{flexDirection:'row',flexWrap:'wrap',marginRight:8,borderRadius:30},root:{flexDirection:'row',borderRadius:50,padding:4,alignContent:'center',alignItems:'center',minHeight:32},outlined:{borderWidth:StyleSheet.hairlineWidth,borderStyle:'solid',borderColor:'#777'},action:{marginVertical:0,marginHorizontal:0,paddingVertical:0,paddingHorizontal:0},flat:{borderWidth:0,borderColor:'transparent'},thumbnailWrapper:{marginRight:0,borderRadius:24},thumbnail:{overflow:'hidden',margin:4,marginRight:0,width:24,borderRadius:24,height:24},text:{marginHorizontal:8,marginBottom:2}});export default Chip;
//# sourceMappingURL=Chip.js.map