antd
Version:
An enterprise-class UI design language and React-based implementation
343 lines (298 loc) • 13.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var React = _interopRequireWildcard(_react);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _rcUpload = require('rc-upload');
var _rcUpload2 = _interopRequireDefault(_rcUpload);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _uniqBy = require('lodash/uniqBy');
var _uniqBy2 = _interopRequireDefault(_uniqBy);
var _LocaleReceiver = require('../locale-provider/LocaleReceiver');
var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);
var _default = require('../locale-provider/default');
var _default2 = _interopRequireDefault(_default);
var _UploadList = require('./UploadList');
var _UploadList2 = _interopRequireDefault(_UploadList);
var _utils = require('./utils');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var Upload = function (_React$Component) {
(0, _inherits3['default'])(Upload, _React$Component);
function Upload(props) {
(0, _classCallCheck3['default'])(this, Upload);
var _this = (0, _possibleConstructorReturn3['default'])(this, (Upload.__proto__ || Object.getPrototypeOf(Upload)).call(this, props));
_this.onStart = function (file) {
var targetItem = void 0;
var nextFileList = _this.state.fileList.concat();
targetItem = (0, _utils.fileToObject)(file);
targetItem.status = 'uploading';
nextFileList.push(targetItem);
_this.onChange({
file: targetItem,
fileList: nextFileList
});
// fix ie progress
if (!window.FormData) {
_this.autoUpdateProgress(0, targetItem);
}
};
_this.onSuccess = function (response, file) {
_this.clearProgressTimer();
try {
if (typeof response === 'string') {
response = JSON.parse(response);
}
} catch (e) {/* do nothing */
}
var fileList = _this.state.fileList;
var targetItem = (0, _utils.getFileItem)(file, fileList);
// removed
if (!targetItem) {
return;
}
targetItem.status = 'done';
targetItem.response = response;
_this.onChange({
file: (0, _extends3['default'])({}, targetItem),
fileList: fileList
});
};
_this.onProgress = function (e, file) {
var fileList = _this.state.fileList;
var targetItem = (0, _utils.getFileItem)(file, fileList);
// removed
if (!targetItem) {
return;
}
targetItem.percent = e.percent;
_this.onChange({
event: e,
file: (0, _extends3['default'])({}, targetItem),
fileList: _this.state.fileList
});
};
_this.onError = function (error, response, file) {
_this.clearProgressTimer();
var fileList = _this.state.fileList;
var targetItem = (0, _utils.getFileItem)(file, fileList);
// removed
if (!targetItem) {
return;
}
targetItem.error = error;
targetItem.response = response;
targetItem.status = 'error';
_this.onChange({
file: (0, _extends3['default'])({}, targetItem),
fileList: fileList
});
};
_this.handleManualRemove = function (file) {
_this.upload.abort(file);
file.status = 'removed'; // eslint-disable-line
_this.handleRemove(file);
};
_this.onChange = function (info) {
if (!('fileList' in _this.props)) {
_this.setState({ fileList: info.fileList });
}
var onChange = _this.props.onChange;
if (onChange) {
onChange(info);
}
};
_this.onFileDrop = function (e) {
_this.setState({
dragState: e.type
});
};
_this.beforeUpload = function (file, fileList) {
if (!_this.props.beforeUpload) {
return true;
}
var result = _this.props.beforeUpload(file, fileList);
if (result === false) {
_this.onChange({
file: file,
fileList: (0, _uniqBy2['default'])(_this.state.fileList.concat(fileList.map(_utils.fileToObject)), function (item) {
return item.uid;
})
});
return false;
} else if (result && result.then) {
return result;
}
return true;
};
_this.saveUpload = function (node) {
_this.upload = node;
};
_this.renderUploadList = function (locale) {
var _this$props = _this.props,
showUploadList = _this$props.showUploadList,
listType = _this$props.listType,
onPreview = _this$props.onPreview;
var showRemoveIcon = showUploadList.showRemoveIcon,
showPreviewIcon = showUploadList.showPreviewIcon;
return React.createElement(_UploadList2['default'], { listType: listType, items: _this.state.fileList, onPreview: onPreview, onRemove: _this.handleManualRemove, showRemoveIcon: showRemoveIcon, showPreviewIcon: showPreviewIcon, locale: (0, _extends3['default'])({}, locale, _this.props.locale) });
};
_this.state = {
fileList: props.fileList || props.defaultFileList || [],
dragState: 'drop'
};
return _this;
}
(0, _createClass3['default'])(Upload, [{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.clearProgressTimer();
}
}, {
key: 'autoUpdateProgress',
value: function autoUpdateProgress(_, file) {
var _this2 = this;
var getPercent = (0, _utils.genPercentAdd)();
var curPercent = 0;
this.clearProgressTimer();
this.progressTimer = setInterval(function () {
curPercent = getPercent(curPercent);
_this2.onProgress({
percent: curPercent * 100
}, file);
}, 200);
}
}, {
key: 'handleRemove',
value: function handleRemove(file) {
var _this3 = this;
var onRemove = this.props.onRemove;
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(function (ret) {
// Prevent removing file
if (ret === false) {
return;
}
var removedFileList = (0, _utils.removeFileItem)(file, _this3.state.fileList);
if (removedFileList) {
_this3.onChange({
file: file,
fileList: removedFileList
});
}
});
}
}, {
key: 'clearProgressTimer',
value: function clearProgressTimer() {
clearInterval(this.progressTimer);
}
}, {
key: 'render',
value: function render() {
var _classNames2;
var _props = this.props,
_props$prefixCls = _props.prefixCls,
prefixCls = _props$prefixCls === undefined ? '' : _props$prefixCls,
className = _props.className,
showUploadList = _props.showUploadList,
listType = _props.listType,
type = _props.type,
disabled = _props.disabled,
children = _props.children;
var rcUploadProps = (0, _extends3['default'])({ onStart: this.onStart, onError: this.onError, onProgress: this.onProgress, onSuccess: this.onSuccess }, this.props, { beforeUpload: this.beforeUpload });
delete rcUploadProps.className;
var uploadList = showUploadList ? React.createElement(
_LocaleReceiver2['default'],
{ componentName: 'Upload', defaultLocale: _default2['default'].Upload },
this.renderUploadList
) : null;
if (type === 'drag') {
var _classNames;
var dragCls = (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-drag', true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-drag-uploading', this.state.fileList.some(function (file) {
return file.status === 'uploading';
})), (0, _defineProperty3['default'])(_classNames, prefixCls + '-drag-hover', this.state.dragState === 'dragover'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), _classNames));
return React.createElement(
'span',
{ className: className },
React.createElement(
'div',
{ className: dragCls, onDrop: this.onFileDrop, onDragOver: this.onFileDrop, onDragLeave: this.onFileDrop },
React.createElement(
_rcUpload2['default'],
(0, _extends3['default'])({}, rcUploadProps, { ref: this.saveUpload, className: prefixCls + '-btn' }),
React.createElement(
'div',
{ className: prefixCls + '-drag-container' },
children
)
)
),
uploadList
);
}
var uploadButtonCls = (0, _classnames2['default'])(prefixCls, (_classNames2 = {}, (0, _defineProperty3['default'])(_classNames2, prefixCls + '-select', true), (0, _defineProperty3['default'])(_classNames2, prefixCls + '-select-' + listType, true), (0, _defineProperty3['default'])(_classNames2, prefixCls + '-disabled', disabled), _classNames2));
var uploadButton = React.createElement(
'div',
{ className: uploadButtonCls, style: { display: children ? '' : 'none' } },
React.createElement(_rcUpload2['default'], (0, _extends3['default'])({}, rcUploadProps, { ref: this.saveUpload }))
);
if (listType === 'picture-card') {
return React.createElement(
'span',
{ className: className },
uploadList,
uploadButton
);
}
return React.createElement(
'span',
{ className: className },
uploadButton,
uploadList
);
}
}], [{
key: 'getDerivedStateFromProps',
value: function getDerivedStateFromProps(nextProps) {
if ('fileList' in nextProps) {
return {
fileList: nextProps.fileList || []
};
}
return null;
}
}]);
return Upload;
}(React.Component);
Upload.defaultProps = {
prefixCls: 'ant-upload',
type: 'select',
multiple: false,
action: '',
data: {},
accept: '',
beforeUpload: _utils.T,
showUploadList: true,
listType: 'text',
className: '',
disabled: false,
supportServerRender: true
};
(0, _reactLifecyclesCompat.polyfill)(Upload);
exports['default'] = Upload;
module.exports = exports['default'];