react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
150 lines • 7.34 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_native_1 = require("react-native");
var react_redux_1 = require("react-redux");
var redux_1 = require("redux");
var enums_1 = require("src/utils/enums");
var __1 = require("../..");
var cameraUtils_1 = require("../../primitives/Camera/cameraUtils");
var NetworkImage_1 = require("../../primitives/NetworkImage/NetworkImage");
var navigation_1 = require("../../redux/reducers/navigation");
var addActionSheet_native_1 = require("../../utils/addActionSheet.native");
var styles = function () { return ({
addNewPhoto: {
tintColor: __1.appTheme.primaryColor,
width: 70,
height: 70,
},
loadingContainer: {
backgroundColor: '#fff',
opacity: 0.7,
position: 'absolute',
width: 70,
height: 70,
justifyContent: 'center',
alignItems: 'center',
}
}); };
var CImageUploadZone = /** @class */ (function (_super) {
__extends(CImageUploadZone, _super);
function CImageUploadZone() {
return _super !== null && _super.apply(this, arguments) || this;
}
CImageUploadZone.prototype.render = function () {
var _a = this.props, classes = _a.classes, uploadSuccess = _a.uploadSuccess, uploading = _a.uploading, dropzoneStyle = _a.dropzoneStyle, multiple = _a.multiple, photoPreview = _a.photoPreview, addPhotoIcon = _a.addPhotoIcon, connectedShowActionSheet = _a.connectedShowActionSheet;
var imageSource = photoPreview && !multiple ? { uri: photoPreview } : addPhotoIcon;
if (uploadSuccess === false && uploading === false) {
imageSource = addPhotoIcon;
}
return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: function () {
connectedShowActionSheet(enums_1.ACTION_SHEETS_IDS.IMAGE_CLICK);
} },
React.createElement(__1.View, null, photoPreview && photoPreview.startsWith('http') ?
//for now NetworkImage doesn't support local images as source, so we use the default Image component
React.createElement(NetworkImage_1.NetworkImage, { style: [
photoPreview && !multiple ? { width: 70, height: 70 } : classes.addNewPhoto,
dropzoneStyle
], resizeMode: 'cover', source: imageSource, icon: addPhotoIcon })
:
React.createElement(__1.Image, { style: [
photoPreview && !multiple
? { width: 70, height: 70, resizeMode: 'cover' }
: classes.addNewPhoto,
dropzoneStyle
], source: imageSource }))));
};
CImageUploadZone.actionSheetData = function (props) {
var _a;
return (_a = {},
_a[enums_1.ACTION_SHEETS_IDS.IMAGE_CLICK] = {
options: props.photoPreview && !props.multiple
? ['View', 'Album', 'Camera', 'Cancel'] // todo View throws error
: ['Album', 'Camera', 'Cancel'],
optionClick: function (index) {
if (!props.photoPreview || props.multiple) {
index++;
}
var options = {
width: 300,
height: 300,
cropping: false,
// includeBase64: true,
multiple: props.multiple,
maxFiles: 20,
};
switch (index) {
case 0:
props.pushScreen(props.navigation, null, navigation_1.routes.FULL_SCREEN_IMAGE, {
images: [{ url: props.photoPreview }],
index: index
});
break;
case 1:
// @ts-ignore
var ImagePicker_1 = Expo.ImagePicker;
cameraUtils_1.checkForCameraPermission('camera_roll', props.showAlert)
.then(function (success) {
if (success) {
ImagePicker_1.launchImageLibraryAsync(options)
.then(function (image) {
if (props.multiple) {
props.onDrop(image, []);
}
else {
props.onDrop([image], []);
}
})
.catch(function (e) { console.log('err', e); });
}
else {
}
})
.catch(function (e) { console.log('err', e); });
break;
case 2:
// @ts-ignore
var ImagePicker = Expo.ImagePicker;
cameraUtils_1.checkForCameraPermission('camera', props.showAlert)
.then(function (success) {
if (!success) {
return;
}
ImagePicker_1.launchCameraAsync(options)
.then(function (image) {
if (props.multiple) {
props.onDrop(image, []);
}
else {
props.onDrop([image], []);
}
})
.catch(function (e) {
});
});
break;
case 3:
break;
}
}
},
_a);
};
return CImageUploadZone;
}(React.PureComponent));
var componentName = 'ImageUploadZone';
exports.ImageUploadZone = redux_1.compose(react_redux_1.connect(function (state, ownProps) { return ({}); }, {
pushScreen: navigation_1.pushScreen,
showAlert: __1.showAlert,
}), addActionSheet_native_1.connectActionSheet, __1.createStyles(styles, componentName))(CImageUploadZone);
//# sourceMappingURL=ImageUploadZone.native.js.map