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.83 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_i18next_1 = require("react-i18next");
var react_redux_1 = require("react-redux");
var redux_1 = require("redux");
var __1 = require("../..");
var s3upload_1 = require("../../redux/reducers/s3upload");
var ImageUploadZone_1 = require("../ImageUploadZone/ImageUploadZone");
var common_1 = require("./common");
var uploadUtils_1 = require("./uploadUtils");
var ACCEPTED_MIMES = 'image/png, image/jpg, image/jpeg';
var styles = function () {
var _a, _b;
return ({
container: {
flexDirection: 'column',
},
component: (_a = {
position: 'relative'
},
_a[__1.web] = {
width: 200,
height: 200,
},
_a[__1.all] = {
width: 140,
height: 140,
},
_a),
dropzone: (_b = {
width: '100%',
height: '100%'
},
_b[__1.web] = {
borderWidth: 2,
borderColor: 'rgb(102, 102, 102)',
borderStyle: 'dashed',
borderRadius: 5,
boxSizing: 'border-box',
},
_b),
});
};
var CS3PhotoInputComponent = /** @class */ (function (_super) {
__extends(CS3PhotoInputComponent, _super);
function CS3PhotoInputComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
// static alertsData = ( props: AllProps ) => ( {
// [DIALOG_IDS.FILE_IS_NOT_IMAGE]: {
// title: ERROR,
// body: FILE_IS_NOT_IMAGE
// },
// [DIALOG_IDS.PERMISSION_DENIED_CAMERA]: {
// body: CAMERA_PERMISSION_IS_DENIED,
// cancelButton: {},
// okButton: {
// onPress: () => {
// goToSettings( props );
// }
// }
// },
// [DIALOG_IDS.PERMISSION_DENIED_ALBUM]: {
// body: PHOTO_PERMISSION_IS_DENIED,
// cancelButton: {},
// okButton: {
// onPress: () => {
// goToSettings( props );
// }
// }
// },
// } );
CS3PhotoInputComponent.prototype.componentWillReceiveProps = function (nextProps) {
if (this.props.uploadingPhotoToS3 && !nextProps.uploadingPhotoToS3) {
var url = '';
if (nextProps.uploadingPhotoToS3Success) {
url = nextProps.s3Url ? nextProps.s3Url : '';
}
this.props.onChange && this.props.onChange(url, url);
}
else if (!this.props.photoPreview && nextProps.photoPreview) {
var photoPreview = nextProps.photoPreview;
this.props.onChange && this.props.onChange(photoPreview, photoPreview);
}
};
CS3PhotoInputComponent.prototype.componentWillUnmount = function () {
var _a = this.props, removePhoto = _a.removePhoto, field = _a.field;
removePhoto(field);
};
CS3PhotoInputComponent.prototype.render = function () {
var _this = this;
var _a = this.props, title = _a.title, field = _a.field, error = _a.error, multiple = _a.multiple, classes = _a.classes, componentStyle = _a.componentStyle, containerStyle = _a.containerStyle, uploadingPhotoToS3 = _a.uploadingPhotoToS3, uploadingPhotoToS3Success = _a.uploadingPhotoToS3Success, additionalOnDrop = _a.additionalOnDrop, removePhoto = _a.removePhoto, value = _a.value, t = _a.t, addPhotoIcon = _a.addPhotoIcon, removePhotoIcon = _a.removePhotoIcon, isError = !!error || (uploadingPhotoToS3Success === false && uploadingPhotoToS3 === false);
multiple = !!multiple; // multiple is optional so we are setting undefined as false
return (React.createElement(__1.View, { style: [classes.container].concat((containerStyle || [])) },
!multiple && !!title &&
React.createElement(__1.Text, { style: [classes.baseLabelText, isError && classes.baseLabelErrorText] }, t(title)),
React.createElement(__1.View, { style: [classes.component, componentStyle] },
React.createElement(ImageUploadZone_1.ImageUploadZone, { disableClick: !!value, dropzoneStyle: classes.dropzone, onDrop: function (acceptedFiles, rejectedFiles) {
uploadUtils_1.onDrop(acceptedFiles, rejectedFiles, _this.props);
additionalOnDrop && additionalOnDrop(acceptedFiles, rejectedFiles);
}, photoPreview: common_1.getImageUrl(value), s3Url: common_1.getImageUrl(value), accept: ACCEPTED_MIMES, multiple: __1.isWeb ? false : multiple, removePhoto: function () {
removePhoto(field);
_this.props.onChange && _this.props.onChange('');
}, uploading: uploadingPhotoToS3, uploadSuccess: uploadingPhotoToS3Success, addPhotoIcon: addPhotoIcon, removePhotoIcon: removePhotoIcon }),
uploadingPhotoToS3 &&
React.createElement(__1.View, { style: {
backgroundColor: '#fff',
opacity: 0.7,
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
} },
React.createElement(__1.CircularProgressComponent, null))),
!multiple && error &&
React.createElement(__1.Text, { style: classes.baseErrorText }, error),
!multiple && uploadingPhotoToS3Success === false && uploadingPhotoToS3 === false &&
React.createElement(__1.Text, { style: classes.baseErrorText }, t(__1.UPLOAD_FAILED)),
React.createElement(__1.Alert, { alertId: __1.FILE_IS_NOT_IMAGE, leftButtonText: "OK" }),
React.createElement(__1.Alert, { alertId: __1.CAMERA_PERMISSION_IS_DENIED, leftButtonText: "OK" }),
React.createElement(__1.Alert, { alertId: __1.PHOTO_PERMISSION_IS_DENIED, leftButtonText: "OK" }),
React.createElement(__1.Alert, { alertId: __1.PHOTO_INCORRECT_RATIO, leftButtonText: "OK" }),
React.createElement(__1.Alert, { alertId: __1.PHOTO_INCORRECT_SIZE, leftButtonText: "OK" })));
};
return CS3PhotoInputComponent;
}(React.Component));
var componentName = 'S3PhotoInputComponent';
exports.S3PhotoInputComponent = redux_1.compose(react_redux_1.connect(function (state, ownProps) { return ({
uploadingPhotoToS3: __1.getNestedField(state.s3upload, [ownProps.field, 'uploading']),
uploadingPhotoToS3Success: __1.getNestedField(state.s3upload, [ownProps.field, 'uploadSuccess']),
photoPreview: __1.getNestedField(state.s3upload, [ownProps.field, 'preview']),
s3Url: __1.getNestedField(state.s3upload, [ownProps.field, 's3Key']),
}); }, {
postPhotoToS3: s3upload_1.postPhotoToS3,
removePhoto: s3upload_1.removePhoto,
showAlert: __1.showAlert,
}), __1.createStyles(styles, componentName), react_i18next_1.translate())(CS3PhotoInputComponent);
//# sourceMappingURL=S3PhotoInputComponent.js.map