react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
89 lines • 3.86 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 __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ReactDropzone = require("react-dropzone");
var react_i18next_1 = require("react-i18next");
var redux_1 = require("redux");
var __1 = require("../..");
var __2 = require("../../");
var web_1 = require("../../utils/web");
var styles = function () { return ({
helperContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
},
addPhoto: {
color: __1.appTheme.primaryColor,
},
deletePhoto: {
color: __1.appTheme.primaryColor,
position: 'absolute',
right: 0,
top: 0,
marginTop: 4,
marginRight: 4,
width: 32,
height: 32,
backgroundColor: 'rgba(0, 0, 0, 0.66)',
borderRadius: 20,
padding: 4,
},
image: {
backgroundSize: 'cover',
position: 'absolute',
maxHeight: '100%',
maxWidth: '100%',
margin: 'auto',
top: 0,
bottom: 0,
left: 0,
right: 0,
boxSizing: 'border-box',
},
}); };
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, removePhoto = _a.removePhoto, dropzoneStyle = _a.dropzoneStyle, multiple = _a.multiple, photoPreview = _a.photoPreview, s3Url = _a.s3Url, disableClick = _a.disableClick, onDrop = _a.onDrop, accept = _a.accept, t = _a.t, addPhotoIcon = _a.addPhotoIcon, removePhotoIcon = _a.removePhotoIcon, Dropzone = ReactDropzone;
// react-dropzone's typescript definitions seem to be broken
// https://github.com/react-dropzone/react-dropzone/issues/509#issuecomment-341902236
return (React.createElement(Dropzone, __assign({}, web_1.getStyleProps(dropzoneStyle), { disableClick: disableClick, onDrop: onDrop, accept: accept, multiple: multiple }),
photoPreview
? React.createElement(__2.Image, { style: classes.image, source: { uri: photoPreview }, s3Url: s3Url, openOnClick: true })
: React.createElement(__2.View, { style: classes.helperContainer },
React.createElement(__2.Image, { style: classes.addPhoto, source: addPhotoIcon }),
React.createElement(__2.Text, null, t(__1.UPLOAD_PHOTO_HELPER))),
photoPreview &&
React.createElement(__2.Image, { style: classes.deletePhoto, source: removePhotoIcon, onPress: function () {
removePhoto();
} })));
};
return CImageUploadZone;
}(React.PureComponent));
var componentName = 'ImageUploadZone';
exports.ImageUploadZone = redux_1.compose(react_i18next_1.translate(), __2.createStyles(styles, componentName))(CImageUploadZone);
//# sourceMappingURL=ImageUploadZone.js.map