@assetcrush/react-native-sdk
Version:
A simple react native library to resize image on fly
1 lines • 6.44 kB
JavaScript
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _extends3=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _ErrorRender=require("../components/ErrorRender");var _key=require("./key");var _excluded=["reloadIcon","spinnerIcon","spinnerColor","hideSpinner","onError","onLoad","acEnv"];var _this=this,_jsxFileName="/home/runner/work/react-native-sdk/react-native-sdk/example/lib/ImageCrush.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ImageCrush=function ImageCrush(_ref){var _props$source;var reloadIcon=_ref.reloadIcon,spinnerIcon=_ref.spinnerIcon,_ref$spinnerColor=_ref.spinnerColor,spinnerColor=_ref$spinnerColor===void 0?"gray":_ref$spinnerColor,_ref$hideSpinner=_ref.hideSpinner,hideSpinner=_ref$hideSpinner===void 0?false:_ref$hideSpinner,_ref$onError=_ref.onError,onError=_ref$onError===void 0?function(){return null;}:_ref$onError,_ref$onLoad=_ref.onLoad,onLoad=_ref$onLoad===void 0?function(){return null;}:_ref$onLoad,_ref$acEnv=_ref.acEnv,acEnv=_ref$acEnv===void 0?"production":_ref$acEnv,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),width=_useState2[0],setWidth=_useState2[1];var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2.default)(_useState3,2),height=_useState4[0],setheight=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isError=_useState6[0],setIsError=_useState6[1];var _useState7=(0,_react.useState)(true),_useState8=(0,_slicedToArray2.default)(_useState7,2),isLoading=_useState8[0],setIsLoading=_useState8[1];var _useState9=(0,_react.useState)(0),_useState10=(0,_slicedToArray2.default)(_useState9,2),componentKey=_useState10[0],setComponentKey=_useState10[1];var handler=(0,_react.useRef)();var handleError=function handleError(e){onError(e);setIsError(true);setIsLoading(false);};var handleOnLoad=function handleOnLoad(e){onLoad();setIsError(false);setIsLoading(false);};var handleRetry=function handleRetry(){setComponentKey(componentKey+1);setIsLoading(true);};var _onLayout=(0,_react.useCallback)(function(e){var _e$nativeEvent,_e$nativeEvent$layout,_e$nativeEvent2,_e$nativeEvent2$layou;var layoutWidth=(e==null?void 0:(_e$nativeEvent=e.nativeEvent)==null?void 0:(_e$nativeEvent$layout=_e$nativeEvent.layout)==null?void 0:_e$nativeEvent$layout.width)||0;var layoutHeight=(e==null?void 0:(_e$nativeEvent2=e.nativeEvent)==null?void 0:(_e$nativeEvent2$layou=_e$nativeEvent2.layout)==null?void 0:_e$nativeEvent2$layou.height)||0;clearTimeout(handler.current);handler.current=setTimeout(function(){props==null?void 0:props.onLayout==null?void 0:props.onLayout(e);setWidth(width===0?layoutWidth:width>layoutWidth?layoutWidth:width);setheight(height===0?layoutHeight:height>layoutHeight?layoutHeight:height);},300);},[setWidth,setheight]);var newSource=undefined;var key=(0,_key.getKey)()?(0,_key.getKey)():__DEV__==="development"?'test-key':'';if(__DEV__==="development"&&!(0,_key.getKey)()){console.log(' Key is not present, please go to console.assetcrush.com and sign up to get one.');}if((_props$source=props.source)!=null&&_props$source.uri){var _props$source2,_extends2,_props$source3;newSource=(0,_extends3.default)({},props.source,{headers:(0,_extends3.default)({},((_props$source2=props.source)==null?void 0:_props$source2.headers)||{},(_extends2={},(0,_defineProperty2.default)(_extends2,'assetcrush-key',key),(0,_defineProperty2.default)(_extends2,"ac-env",acEnv),_extends2)),uri:width&&height&&(_props$source3=props.source)!=null&&_props$source3.uri?"https://service.assetcrush.com?width="+width+"&height="+height+"&original_uri="+encodeURIComponent(props.source.uri):undefined});}return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.Image,(0,_extends3.default)({},props,{onLayout:_onLayout,source:newSource||props.source,key:componentKey,onError:handleError,onLoad:handleOnLoad,__self:_this,__source:{fileName:_jsxFileName,lineNumber:90,columnNumber:7}})),isLoading&&!hideSpinner&&_react.default.createElement(_reactNative.View,{style:{position:"absolute",alignSelf:"center"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:9}},spinnerIcon||_react.default.createElement(_reactNative.ActivityIndicator,{color:spinnerColor,size:width>100?"large":"small",__self:_this,__source:{fileName:_jsxFileName,lineNumber:101,columnNumber:13}})),isError&&_react.default.createElement(_reactNative.View,{style:{position:"absolute",alignSelf:"center"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:106,columnNumber:9}},_react.default.createElement(_ErrorRender.ErrorRender,{width:width,height:height,icon:reloadIcon,handleRetry:handleRetry,__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,columnNumber:11}})));};ImageCrush.propTypes=_reactNative.ImagePropTypes;var _default=(0,_react.memo)(ImageCrush);exports.default=_default;