custom-app
Version:
ITIMS��Ʒ�鿪��ר��React���,�Dz��ý��ּ�dhcc-app���������
352 lines (309 loc) • 11.5 kB
JavaScript
'use strict';
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 _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _uid = require('./uid');
var _uid2 = _interopRequireDefault(_uid);
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/* eslint react/sort-comp:0 */
var IFRAME_STYLE = {
position: 'absolute',
top: 0,
opacity: 0,
filter: 'alpha(opacity=0)',
left: 0,
zIndex: 9999
};
// diferent from AjaxUpload, can only upload on at one time, serial seriously
var IframeUploader = function (_Component) {
(0, _inherits3['default'])(IframeUploader, _Component);
function IframeUploader() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3['default'])(this, IframeUploader);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = IframeUploader.__proto__ || Object.getPrototypeOf(IframeUploader)).call.apply(_ref, [this].concat(args))), _this), _this.state = { uploading: false }, _this.file = {}, _this.onLoad = function () {
if (!_this.state.uploading) {
return;
}
var _this2 = _this,
props = _this2.props,
file = _this2.file;
var response = void 0;
try {
var doc = _this.getIframeDocument();
var script = doc.getElementsByTagName('script')[0];
if (script && script.parentNode === doc.body) {
doc.body.removeChild(script);
}
response = doc.body.innerHTML;
props.onSuccess(response, file);
} catch (err) {
(0, _warning2['default'])(false, 'cross domain error for Upload. Maybe server should return document.domain script. see Note from https://github.com/react-component/upload');
response = 'cross-domain';
props.onError(err, null, file);
}
_this.endUpload();
}, _this.onChange = function () {
var target = _this.getFormInputNode();
// ie8/9 don't support FileList Object
// http://stackoverflow.com/questions/12830058/ie8-input-type-file-get-files
var file = _this.file = {
uid: (0, _uid2['default'])(),
name: target.value && target.value.substring(target.value.lastIndexOf('\\') + 1, target.value.length)
};
_this.startUpload();
var _this3 = _this,
props = _this3.props;
if (!props.beforeUpload) {
return _this.post(file);
}
var before = props.beforeUpload(file);
if (before && before.then) {
before.then(function () {
_this.post(file);
}, function () {
_this.endUpload();
});
} else if (before !== false) {
_this.post(file);
} else {
_this.endUpload();
}
}, _this.saveIframe = function (node) {
_this.iframe = node;
}, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
}
(0, _createClass3['default'])(IframeUploader, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.updateIframeWH();
this.initIframe();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.updateIframeWH();
}
}, {
key: 'getIframeNode',
value: function getIframeNode() {
return this.iframe;
}
}, {
key: 'getIframeDocument',
value: function getIframeDocument() {
return this.getIframeNode().contentDocument;
}
}, {
key: 'getFormNode',
value: function getFormNode() {
return this.getIframeDocument().getElementById('form');
}
}, {
key: 'getFormInputNode',
value: function getFormInputNode() {
return this.getIframeDocument().getElementById('input');
}
}, {
key: 'getFormDataNode',
value: function getFormDataNode() {
return this.getIframeDocument().getElementById('data');
}
}, {
key: 'getFileForMultiple',
value: function getFileForMultiple(file) {
return this.props.multiple ? [file] : file;
}
}, {
key: 'getIframeHTML',
value: function getIframeHTML(domain) {
var domainScript = '';
var domainInput = '';
if (domain) {
var script = 'script';
domainScript = '<' + script + '>document.domain="' + domain + '";</' + script + '>';
domainInput = '<input name="_documentDomain" value="' + domain + '" />';
}
return '\n <!DOCTYPE html>\n <html>\n <head>\n <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n <style>\n body,html {padding:0;margin:0;border:0;overflow:hidden;}\n </style>\n ' + domainScript + '\n </head>\n <body>\n <form method="post"\n encType="multipart/form-data"\n action="" id="form"\n style="display:block;height:9999px;position:relative;overflow:hidden;">\n <input id="input" type="file"\n name="' + this.props.name + '"\n style="position:absolute;top:0;right:0;height:9999px;font-size:9999px;cursor:pointer;"/>\n ' + domainInput + '\n <span id="data"></span>\n </form>\n </body>\n </html>\n ';
}
}, {
key: 'initIframeSrc',
value: function initIframeSrc() {
if (this.domain) {
this.getIframeNode().src = 'javascript:void((function(){\n var d = document;\n d.open();\n d.domain=\'' + this.domain + '\';\n d.write(\'\');\n d.close();\n })())';
}
}
}, {
key: 'initIframe',
value: function initIframe() {
var iframeNode = this.getIframeNode();
var win = iframeNode.contentWindow;
var doc = void 0;
this.domain = this.domain || '';
this.initIframeSrc();
try {
doc = win.document;
} catch (e) {
this.domain = document.domain;
this.initIframeSrc();
win = iframeNode.contentWindow;
doc = win.document;
}
doc.open('text/html', 'replace');
doc.write(this.getIframeHTML(this.domain));
doc.close();
this.getFormInputNode().onchange = this.onChange;
}
}, {
key: 'endUpload',
value: function endUpload() {
if (this.state.uploading) {
this.file = {};
// hack avoid batch
this.state.uploading = false;
this.setState({
uploading: false
});
this.initIframe();
}
}
}, {
key: 'startUpload',
value: function startUpload() {
if (!this.state.uploading) {
this.state.uploading = true;
this.setState({
uploading: true
});
}
}
}, {
key: 'updateIframeWH',
value: function updateIframeWH() {
var rootNode = _reactDom2['default'].findDOMNode(this);
var iframeNode = this.getIframeNode();
iframeNode.style.height = rootNode.offsetHeight + 'px';
iframeNode.style.width = rootNode.offsetWidth + 'px';
}
}, {
key: 'abort',
value: function abort(file) {
if (file) {
var uid = file;
if (file && file.uid) {
uid = file.uid;
}
if (uid === this.file.uid) {
this.endUpload();
}
} else {
this.endUpload();
}
}
}, {
key: 'post',
value: function post(file) {
var _this4 = this;
var formNode = this.getFormNode();
var dataSpan = this.getFormDataNode();
var data = this.props.data;
var onStart = this.props.onStart;
if (typeof data === 'function') {
data = data(file);
}
var inputs = document.createDocumentFragment();
for (var key in data) {
if (data.hasOwnProperty(key)) {
var input = document.createElement('input');
input.setAttribute('name', key);
input.value = data[key];
inputs.appendChild(input);
}
}
dataSpan.appendChild(inputs);
new Promise(function (resolve) {
var action = _this4.props.action;
if (typeof action === 'function') {
return resolve(action(file));
}
resolve(action);
}).then(function (action) {
formNode.setAttribute('action', action);
formNode.submit();
dataSpan.innerHTML = '';
onStart(file);
});
}
}, {
key: 'render',
value: function render() {
var _classNames;
var _props = this.props,
Tag = _props.component,
disabled = _props.disabled,
className = _props.className,
prefixCls = _props.prefixCls,
children = _props.children,
style = _props.style;
var iframeStyle = (0, _extends3['default'])({}, IFRAME_STYLE, {
display: this.state.uploading || disabled ? 'none' : ''
});
var cls = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls, true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, className, className), _classNames));
return _react2['default'].createElement(
Tag,
{
className: cls,
style: (0, _extends3['default'])({ position: 'relative', zIndex: 0 }, style)
},
_react2['default'].createElement('iframe', {
ref: this.saveIframe,
onLoad: this.onLoad,
style: iframeStyle
}),
children
);
}
}]);
return IframeUploader;
}(_react.Component);
IframeUploader.propTypes = {
component: _propTypes2['default'].string,
style: _propTypes2['default'].object,
disabled: _propTypes2['default'].bool,
prefixCls: _propTypes2['default'].string,
className: _propTypes2['default'].string,
accept: _propTypes2['default'].string,
onStart: _propTypes2['default'].func,
multiple: _propTypes2['default'].bool,
children: _propTypes2['default'].any,
data: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].func]),
action: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func]),
name: _propTypes2['default'].string
};
exports['default'] = IframeUploader;
module.exports = exports['default'];