zent
Version:
一套前端设计语言和基于React的实现
68 lines (67 loc) • 2.95 kB
JavaScript
import { __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { PureComponent, createRef } from 'react';
import FileInput from './FileInput';
import Notify from '../../notify';
import { formatFileSize } from '../utils/format-file-size';
import { execPromiseQueue } from '../../utils/promise-queue';
var AbstractTrigger = (function (_super) {
__extends(AbstractTrigger, _super);
function AbstractTrigger() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.fileInputRef = createRef();
_this.clickFileInput = function () {
_this.fileInputRef.current && _this.fileInputRef.current.open();
};
_this.onClickTrigger = function () {
var _a = _this.props, remainAmount = _a.remainAmount, i18n = _a.i18n;
if (remainAmount <= 0) {
Notify.error(i18n.limit);
}
else {
_this.clickFileInput();
}
};
_this.onInputChange = function (files) {
var _a = _this.props, maxSize = _a.maxSize, remainAmount = _a.remainAmount;
var overMaxAmount = files.length > remainAmount;
if (overMaxAmount) {
return _this.onOverMaxAmount();
}
var overMaxSizeFiles = files.filter(function (file) { return file.size > maxSize; });
if (overMaxSizeFiles.length) {
return _this.onOverMaxSize(overMaxSizeFiles);
}
execPromiseQueue(files, function (file) { return _this.props.onAddFile(file); });
};
_this.onTriggerDragOver = function (e) {
e.preventDefault();
};
_this.onTriggerDrop = function (e) {
var disabled = _this.props.disabled;
e.preventDefault();
if (e.dataTransfer.files && !disabled) {
var files = Array.from(e.dataTransfer.files);
_this.onInputChange(files);
}
};
return _this;
}
AbstractTrigger.prototype.onOverMaxAmount = function () {
var maxAmount = this.props.maxAmount;
this.props.onError('overMaxAmount', { maxAmount: maxAmount });
};
AbstractTrigger.prototype.onOverMaxSize = function (_files) {
var maxSize = this.props.maxSize;
this.props.onError('overMaxSize', {
maxSize: maxSize,
formattedMaxSize: formatFileSize(maxSize),
});
};
AbstractTrigger.prototype.renderFileInput = function () {
var _a = this.props, accept = _a.accept, multiple = _a.multiple, disabled = _a.disabled, remainAmount = _a.remainAmount;
return (_jsx(FileInput, { ref: this.fileInputRef, accept: accept, disabled: disabled, onChange: this.onInputChange, multiple: multiple, remainAmount: remainAmount }, void 0));
};
return AbstractTrigger;
}(PureComponent));
export default AbstractTrigger;