wiz-frameworks
Version:
wizlong react framework
315 lines (269 loc) • 15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.isIE = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _dva = require('dva');
require('antd/lib/style/themes/default.less');
require('antd/dist/antd.css');
var _tool = require('../../tool');
var _index = require('./index');
var _index2 = _interopRequireDefault(_index);
var _WizContainer2 = require('../WizContainer');
var _utils = require('../../utils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* AvatarUpload
* @description 头像上传 专门用于上传头像
* @author mll
* @date 2020-04-20
*/
var WizIcon = _tool.component_tool.WizIcon,
WizCropperModal = _tool.component_tool.WizCropperModal,
WizSpin = _tool.component_tool.WizSpin;
var transformFile = _tool.utils_tool.transformFile;
var isIE = exports.isIE = function isIE() {
return !!window.ActiveXObject || "ActiveXObject" in window;
};
var WizAvatarUpload = function (_WizContainer) {
_inherits(WizAvatarUpload, _WizContainer);
function WizAvatarUpload(props) {
_classCallCheck(this, WizAvatarUpload);
var _this = _possibleConstructorReturn(this, (WizAvatarUpload.__proto__ || Object.getPrototypeOf(WizAvatarUpload)).call(this, props));
_this.componentName = 'WizAvatarUpload';
_this._loadImage = function (file) {
if (!file['fileId']) {
return;
}
_this.setState({
getFileLoading: true
}, function () {
//this.getFileByIds(file['fileId'], (data) => {
// if (data && data.length) {
// let _data = data[0]
// let _file = ossFileUtils.getOssFile(
// _data.fileId,
// _data.fileOriginalName,
// _data.fileMimeType,
// _data.fileSize,
// _data.fileUri,
// )
// this.setState({
// getFileLoading: false,
// imageUrl: _file['thumbUrl']
// })
// }
//})
_this.setState({
getFileLoading: false,
imageUrl: window.location.origin + '/link/link-server/' + file['fileId']
});
_this.timer = setTimeout(function () {
var getFileLoading = _this.state.getFileLoading;
if (getFileLoading) {
_this.setState({ getFileLoading: false });
}
clearTimeout(_this.timer);
}, 4000);
});
};
_this.propsAndStateOnChange = {
value: _this._value.bind(_this)
};
_this.handleChange = function (files) {
var file = files[files.length - 1];
var onChange = _this.props.onChange;
if (file.status === 'uploading') {
_this.setState({ loading: true, imageUrl: undefined });
return;
}
if (file.status === 'done') {
_this.setState({
imageUrl: file['thumbUrl'],
loading: false
});
}
onChange && onChange([file]);
};
_this._beforeUpload = function (file, startUpload, removeFile) {
var _this$props = _this.props,
beforeUpload = _this$props.beforeUpload,
aspectRatio = _this$props.aspectRatio,
_this$props$cropper = _this$props.cropper,
cropper = _this$props$cropper === undefined ? {} : _this$props$cropper,
unCropper = _this$props.unCropper;
var flag = true;
if (beforeUpload) {
flag = beforeUpload(file);
}
if (flag) {
if (unCropper) {
startUpload && startUpload(file);
} else {
transformFile.fileToBase64(file, function (base64) {
_this.setState({
visible: true,
loading: true,
cropperModal: {
modalProps: {
title: '裁剪图片',
visible: true,
onOk: function onOk(e) {
_this.setState({ visible: false }, function () {
startUpload && startUpload(e['file']);
});
},
onCancel: function onCancel() {
_this.setState({ visible: false, loading: false }, function () {
//removeFile && removeFile(file)
});
}
},
cropperProps: _extends({
aspectRatio: aspectRatio,
fileName: file['name'],
style: { height: 400, width: '100%' },
file: file,
src: base64,
cropBoxResizable: false
}, cropper(file))
}
});
});
}
}
return false;
};
_this.state = {
getFileLoading: false
};
return _this;
}
_createClass(WizAvatarUpload, [{
key: '_componentWillMount',
value: function _componentWillMount() {
var _this2 = this;
var value = this.props.value;
if (value && value.length) {
var file = value[0];
if (file['thumbUrl']) {
this.setState({
imageUrl: file['thumbUrl']
});
}if (file['fileId']) {
this.setState({
getFileLoading: true
}, function () {
_this2._loadImage(file);
});
}
}
}
}, {
key: 'getFileByIds',
/**
* 根据fileId获取文件内容
*/
value: function getFileByIds(fileIds, callback) {
this.doAction({
path: 'upload/getFileInfo',
payload: {
params: { fileIds: fileIds },
success: function success(e) {
callback && callback(e);
}
}
});
}
}, {
key: '_value',
value: function _value(nextProps, nextState) {
if (!nextProps['value'] || !nextProps['value']['length']) {
nextState['imageUrl'] = undefined;
} else {
if (nextProps['value'][0]['thumbUrl']) {
nextState['imageUrl'] = nextProps['value'][0]['thumbUrl'];
} else {
this._loadImage(nextProps['value'][0]);
}
}
return true;
}
}, {
key: '_render',
value: function _render() {
if (isIE()) return null;
var getFileLoading = this.state.getFileLoading;
var _props$showImgStyle = this.props.showImgStyle,
showImgStyle = _props$showImgStyle === undefined ? {} : _props$showImgStyle;
if (getFileLoading) {
return _react2['default'].createElement(WizSpin, { spinning: getFileLoading, tip: '\u56FE\u7247\u52A0\u8F7D\u4E2D' });
} else {
var children = this.props.children;
var uploadButton = _react2['default'].createElement(
'div',
null,
_react2['default'].createElement(WizIcon, { type: this.state.loading ? 'loading' : 'plus' }),
_react2['default'].createElement(
'div',
{ className: 'ant-upload-text' },
'\u9009\u62E9\u56FE\u7247'
)
);
var _state = this.state,
imageUrl = _state.imageUrl,
visible = _state.visible,
cropperModal = _state.cropperModal;
var modal = visible ? _react2['default'].createElement(WizCropperModal, cropperModal) : null;
var v = _react2['default'].createElement(
_react2['default'].Fragment,
null,
imageUrl ? _react2['default'].createElement('img', { src: imageUrl, alt: 'avatar', style: _extends({ width: '100%' }, showImgStyle) }) : uploadButton,
' '
);
if (children) {
v = children;
}
return _react2['default'].createElement(
_react2['default'].Fragment,
null,
_react2['default'].createElement(
_index2['default'],
_extends({
accept: '.jpg, .jpeg, .png',
uploadType: 'system',
name: 'avatar',
listType: 'picture-card',
className: 'avatar-uploader',
showUploadList: false
}, this.props, {
onChange: this.handleChange,
beforeUpload: this._beforeUpload
}),
v
),
modal
);
}
}
}]);
return WizAvatarUpload;
}(_WizContainer2.WizContainer);
WizAvatarUpload.defaultProps = {
unCropper: false, //不需要裁剪
aspectRatio: 1, //裁剪比例
cropper: function cropper(file) {
return {};
} //裁剪组件的参数 入参会回传file对象
};
var mapStateToProps = function mapStateToProps(state, ownProps) {
return {};
};
var options = { withRef: true };
exports['default'] = (0, _dva.connect)(mapStateToProps, null, null, options)(WizAvatarUpload);