@raona/components/dist/components/FilePicker.js

React components used at Raona to work with SPFx

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("react");
var Bind_1 = require("@raona/sp/dist/decorators/Bind");
var Style_1 = require("@raona/sp/dist/functions/Style");
var FilePicker = /** @class */ (function (_super) {
    __extends(FilePicker, _super);
    function FilePicker(props, context) {
        var _this = _super.call(this, props, context) || this;
        _this.state = {
            isDragging: false,
        };
        return _this;
    }
    FilePicker.prototype.onDragOver = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                event.preventDefault();
                return [2 /*return*/];
            });
        });
    };
    FilePicker.prototype.onDragEnter = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                this.setState({ isDragging: true });
                return [2 /*return*/];
            });
        });
    };
    FilePicker.prototype.onDragLeave = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                this.setState({ isDragging: false });
                return [2 /*return*/];
            });
        });
    };
    FilePicker.prototype.onDrop = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            var _a, _b;
            return __generator(this, function (_c) {
                switch (_c.label) {
                    case 0:
                        event.preventDefault();
                        this.setState({ isDragging: false });
                        _b = (_a = this.props).onFilesChange;
                        return [4 /*yield*/, this.parseFiles(event.dataTransfer.files)];
                    case 1:
                        _b.apply(_a, [_c.sent()]);
                        return [2 /*return*/];
                }
            });
        });
    };
    FilePicker.prototype.onFileSelect = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            var _a, _b;
            return __generator(this, function (_c) {
                switch (_c.label) {
                    case 0:
                        event.preventDefault();
                        _b = (_a = this.props).onFilesChange;
                        return [4 /*yield*/, this.parseFiles(event.target.files)];
                    case 1:
                        _b.apply(_a, [_c.sent()]);
                        return [2 /*return*/];
                }
            });
        });
    };
    FilePicker.prototype.parseFiles = function (files) {
        return __awaiter(this, void 0, void 0, function () {
            var promises, length, _loop_1, i;
            return __generator(this, function (_a) {
                promises = [];
                length = this.props.multiple === false ? 1 : files.length;
                _loop_1 = function (i) {
                    promises.push(new Promise(function (resolve, reject) {
                        var f = files.item(i);
                        if (f) {
                            var reader_1 = new FileReader();
                            reader_1.readAsArrayBuffer(f);
                            // TODO: add more fields
                            reader_1.onload = function (ev) { return resolve({
                                name: f.name,
                                data: reader_1.result,
                                size: f.size,
                                type: f.type,
                                lastModified: f.lastModified
                            }); };
                        }
                    }));
                };
                for (i = 0; i < length; i++) {
                    _loop_1(i);
                }
                return [2 /*return*/, Promise.all(promises)];
            });
        });
    };
    FilePicker.prototype.parseAllowedFileTypes = function () {
        var allowedFileTypes = this.props.allowedFileTypes;
        return (allowedFileTypes || []).map(function (ft) {
            ft = ft.trim();
            // is mime type (images/*, application/json, etc.) or already an extension with the dot
            if (ft.indexOf('/') >= 0 || ft[0] === '.')
                return ft;
            return "." + ft;
        }).join(',');
    };
    FilePicker.prototype.render = function () {
        var _a;
        var _b = this.props, displayText = _b.displayText, files = _b.files, multiple = _b.multiple, className = _b.className, fileListClassName = _b.fileListClassName, fileListItemClassName = _b.fileListItemClassName, renderFileList = _b.renderFileList, dragClassName = _b.dragClassName, inputName = _b.inputName, handleBlur = _b.handleBlur;
        var isDragging = this.state.isDragging;
        var filesList = files && (renderFileList ? renderFileList(files) : (React.createElement("ul", { className: fileListClassName }, files.map(function (f, index) { return (React.createElement("li", { className: fileListItemClassName, key: index }, f.name)); }))));
        return (React.createElement(react_1.Fragment, null,
            React.createElement("label", { onDragEnter: this.onDragEnter, onDragOver: this.onDragOver, onDrop: this.onDrop, onDragLeave: this.onDragLeave, className: Style_1.Style.classNames((_a = {},
                    _a[className] = true,
                    _a[dragClassName] = isDragging,
                    _a)) },
                displayText,
                React.createElement("input", { type: "file", name: inputName, hidden: true, multiple: multiple, onBlur: handleBlur, onChange: this.onFileSelect, accept: this.parseAllowedFileTypes() })),
            filesList));
    };
    FilePicker.defaultProps = {
        multiple: true,
        allowedFileTypes: ['images/*'],
    };
    __decorate([
        Bind_1.Bind()
    ], FilePicker.prototype, "onDragOver", null);
    __decorate([
        Bind_1.Bind()
    ], FilePicker.prototype, "onDragEnter", null);
    __decorate([
        Bind_1.Bind()
    ], FilePicker.prototype, "onDragLeave", null);
    __decorate([
        Bind_1.Bind()
    ], FilePicker.prototype, "onDrop", null);
    __decorate([
        Bind_1.Bind()
    ], FilePicker.prototype, "onFileSelect", null);
    return FilePicker;
}(react_1.Component));
exports.FilePicker = FilePicker;