mmp-common
Version:
A demonstration of creating a NPM library for TSG common components that supports different installation types.
52 lines • 2.62 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from "react";
import { computed, observable } from "mobx";
import { observer } from "mobx-react";
import { Icon } from "office-ui-fabric-react";
export var 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(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([
observable
], DropzoneComponent.prototype, "fileChooser", void 0);
tslib_1.__decorate([
computed
], DropzoneComponent.prototype, "hideInput", null);
DropzoneComponent = tslib_1.__decorate([
observer
], DropzoneComponent);
return DropzoneComponent;
}(React.Component));
//# sourceMappingURL=Dropzone.js.map