mmp-common
Version:
A demonstration of creating a NPM library for TSG common components that supports different installation types.
54 lines • 2.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var mobx_1 = require("mobx");
var mobx_react_1 = require("mobx-react");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
exports.Dropzone = function (props) {
return React.createElement(DropzoneComponent, tslib_1.__assign({}, props));
};
var DropzoneComponent = (function (_super) {
tslib_1.__extends(DropzoneComponent, _super);
function DropzoneComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.blockEvent = function (event) {
event.preventDefault();
event.stopPropagation();
};
return _this;
}
Object.defineProperty(DropzoneComponent.prototype, "hideInput", {
get: function () {
return this.props.clickableElement !== null;
},
enumerable: true,
configurable: true
});
DropzoneComponent.prototype.renderInput = function () {
var _this = this;
return (React.createElement("input", { ref: function (chooser) { return (_this.fileChooser = chooser); }, className: "FileChooserInput " + (this.hideInput ? "Hidden" : ""), type: "file", accept: this.props.acceptedFileTypes, multiple: this.props.allowMultipleUploads, onChange: this.props.onFileChoice }));
};
DropzoneComponent.prototype.render = function () {
var _this = this;
return (React.createElement("div", { className: "Dropzone", onDragEnter: this.blockEvent, onDragOver: this.blockEvent, onDrop: this.props.onFileDrop },
this.renderInput(),
React.createElement(office_ui_fabric_react_1.Icon, { className: "UploadIcon", iconName: "CloudUpload" }),
React.createElement("div", { className: "InstructionText" },
"Drop file here or",
React.createElement("div", { className: "ClickableDiv", onClick: function () { return _this.fileChooser && _this.fileChooser.click(); } }, "browse computer")),
React.createElement("div", { className: "extraText" }, ".pptx or .ppt files accepted"),
React.createElement("div", { className: "filename" }, this.props.fileName && this.props.fileName)));
};
tslib_1.__decorate([
mobx_1.observable
], DropzoneComponent.prototype, "fileChooser", void 0);
tslib_1.__decorate([
mobx_1.computed
], DropzoneComponent.prototype, "hideInput", null);
DropzoneComponent = tslib_1.__decorate([
mobx_react_1.observer
], DropzoneComponent);
return DropzoneComponent;
}(React.Component));
//# sourceMappingURL=Dropzone.js.map