dash-core-components
Version:
Core component suite for Dash
97 lines (96 loc) • 4.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
var _Upload = require("../components/Upload.react");
var _LoadingElement = _interopRequireDefault(require("../utils/LoadingElement"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
class Upload extends _react.Component {
constructor() {
super();
this.onDrop = this.onDrop.bind(this);
}
onDrop(files) {
var _this$props = this.props,
multiple = _this$props.multiple,
setProps = _this$props.setProps;
var newProps = {
contents: [],
filename: [],
last_modified: []
};
files.forEach(file => {
var reader = new FileReader();
reader.onload = () => {
/*
* I'm not sure if reader.onload will be executed in order.
* For example, if the 1st file is larger than the 2nd one,
* the 2nd file might load first.
*/
newProps.contents.push(reader.result);
newProps.filename.push(file.name);
// eslint-disable-next-line no-magic-numbers
newProps.last_modified.push(file.lastModified / 1000);
if (newProps.contents.length === files.length) {
if (multiple) {
setProps(newProps);
} else {
setProps({
contents: newProps.contents[0],
filename: newProps.filename[0],
last_modified: newProps.last_modified[0]
});
}
}
};
reader.readAsDataURL(file);
});
}
render() {
var _this$props2 = this.props,
id = _this$props2.id,
children = _this$props2.children,
accept = _this$props2.accept,
disabled = _this$props2.disabled,
disable_click = _this$props2.disable_click,
max_size = _this$props2.max_size,
min_size = _this$props2.min_size,
multiple = _this$props2.multiple,
className = _this$props2.className,
className_active = _this$props2.className_active,
className_reject = _this$props2.className_reject,
className_disabled = _this$props2.className_disabled,
style = _this$props2.style,
style_active = _this$props2.style_active,
style_reject = _this$props2.style_reject,
style_disabled = _this$props2.style_disabled;
var activeStyle = className_active ? undefined : style_active;
var disabledStyle = className_disabled ? undefined : style_disabled;
var rejectStyle = className_reject ? undefined : style_reject;
return /*#__PURE__*/_react.default.createElement(_LoadingElement.default, {
id: id
}, /*#__PURE__*/_react.default.createElement(_reactDropzone.default, {
onDrop: this.onDrop,
accept: accept,
disabled: disabled,
disableClick: disable_click,
maxSize: max_size === -1 ? Infinity : max_size,
minSize: min_size,
multiple: multiple,
className: className,
activeClassName: className_active,
rejectClassName: className_reject,
disabledClassName: className_disabled,
style: style,
activeStyle: activeStyle,
rejectStyle: rejectStyle,
disabledStyle: disabledStyle
}, children));
}
}
exports.default = Upload;
Upload.propTypes = _Upload.propTypes;