native-forms-test/Forms/components/Toast/Toast.js

Build your own forms, surveys and polls for your React Native apps.

var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:!0}),exports.Toast=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_theme=require("../../theme"),_icons=require("../../assets/icons"),callAll=function(){for(var a=arguments.length,b=Array(a),c=0;c<a;c++)b[c]=arguments[c];return function(){for(var a=arguments.length,c=Array(a),d=0;d<a;d++)c[d]=arguments[d];return b.forEach(function(a){return a&&a.apply(void 0,c)})}},Toast=function(a){var b=a.children,c=a.variant,d=a.onClose,e=a.action,f=a.removable,g=a.id,h=a.duration,i=(0,_react.useMemo)(function(){return new _reactNative.Animated.Value(0)},[]),j=(0,_react.useMemo)(function(){return new _reactNative.Animated.Value(-100)},[]);(0,_react.useEffect)(function(){_reactNative.Animated.parallel([_reactNative.Animated.timing(i,{toValue:1,duration:300,easing:_reactNative.Easing.out(_reactNative.Easing.quad),useNativeDriver:!0}),_reactNative.Animated.timing(j,{toValue:0,duration:300,easing:_reactNative.Easing.out(_reactNative.Easing.quad),useNativeDriver:!0})]).start()},[i,j]);(0,_react.useEffect)(function(){h&&setTimeout(d,h)});var k={};return k.backgroundColor="success"===c?_theme.colors.toastSuccess:"warning"===c?_theme.colors.toastWarning:"error"===c?_theme.colors.toastError:"info"===c?_theme.colors.toastInfo:_theme.colors.white,_react.default.createElement(_reactNative.Animated.View,{style:[k,styles.container,{opacity:i,transform:[{translateY:j}]}],id:g},_react.default.createElement(_reactNative.View,{style:styles.icon},_react.default.createElement(_icons.ToastError,{size:20})),_react.default.createElement(_reactNative.Text,{style:styles.toastContent},b),(e||f)&&_react.default.createElement(_reactNative.View,{style:styles.toastAction},e&&e.label&&e.handler&&_react.default.createElement(_reactNative.TouchableOpacity,{style:styles.customAction,onPress:function onActionClick(a){return a&&a.closeOnClick&&d?callAll(a.handler,d):e.handler}(e)},e.label),f&&_react.default.createElement(_reactNative.TouchableOpacity,{"aria-label":"Close toast",style:styles.close,onPress:d},_react.default.createElement(_icons.CloseIcon,{size:18,white:!0}))))};exports.Toast=Toast;var styles=_reactNative.StyleSheet.create({container:{display:"flex",flexDirection:"row",alignItems:"flex-start",width:320,paddingVertical:10,paddingHorizontal:12,borderRadius:6},close:{display:"flex",alignItems:"center",marginLeft:16},toastAction:{marginLeft:"auto",display:"flex",alignItems:"center"},customAction:{color:_theme.colors.white,backgroundColor:"transparent",marginLeft:16,fontWeight:"bold",padding:0,lineHeight:20},toastContent:{color:_theme.colors.white,fontSize:15,fontWeight:"bold"},icon:{paddingRight:12,display:"flex",alignItems:"center"}});