zan-upload
Advanced tools
Comparing version 5.3.6 to 5.3.7
@@ -21,5 +21,5 @@ 'use strict'; | ||
var _select = require('zent/lib/select'); | ||
var _tree = require('zent/lib/tree'); | ||
var _select2 = _interopRequireDefault(_select); | ||
var _tree2 = _interopRequireDefault(_tree); | ||
@@ -38,2 +38,6 @@ var _searchInput = require('zent/lib/search-input'); | ||
var _classnames = require('classnames'); | ||
var _classnames2 = _interopRequireDefault(_classnames); | ||
var _local_storage = require('zan-utils/browser/local_storage'); | ||
@@ -69,3 +73,3 @@ | ||
var IMAGE_PAGE_SIZE = 21; // 图片每页数量 | ||
var IMAGE_PAGE_SIZE = 15; // 图片每页数量 | ||
var VOICE_PAGE_SIZE = 10; // 音频每页数量 | ||
@@ -103,2 +107,9 @@ | ||
_this.setCategoryId = function (id) { | ||
return function () { | ||
_this.state.categoryId = id; | ||
_this.getMediaList(); | ||
}; | ||
}; | ||
_this.handleSearchChange = function (evt) { | ||
@@ -191,26 +202,64 @@ _this.setState({ | ||
}, { | ||
key: 'setCategoryId', | ||
value: function setCategoryId(evt, data) { | ||
this.state.categoryId = data.id; | ||
this.getMediaList(); | ||
} | ||
}, { | ||
key: 'renderCategoryRegion', | ||
value: function renderCategoryRegion() { | ||
var _this4 = this; | ||
var _state = this.state, | ||
categoryList = _state.categoryList, | ||
categoryId = _state.categoryId, | ||
keyword = _state.keyword; | ||
categoryId = _state.categoryId; | ||
var customRender = function customRender(data) { | ||
return _react2['default'].createElement( | ||
'div', | ||
{ | ||
className: (0, _classnames2['default'])({ | ||
'category-item': true, | ||
'category-active': categoryId === data.id | ||
}, 'clearfix'), | ||
onClick: _this4.setCategoryId(data.id) | ||
}, | ||
_react2['default'].createElement( | ||
'span', | ||
{ className: 'pull-left' }, | ||
data.name | ||
), | ||
_react2['default'].createElement( | ||
'span', | ||
{ className: 'category-item-count pull-right' }, | ||
data.count | ||
) | ||
); | ||
}; | ||
return _react2['default'].createElement( | ||
'div', | ||
{ className: 'category-list-region' }, | ||
_react2['default'].createElement(_select2['default'], { | ||
data: categoryList, | ||
value: categoryId, | ||
optionValue: 'id', | ||
optionText: 'name', | ||
onChange: this.setCategoryId.bind(this) | ||
}), | ||
{ className: 'category-list-region pull-left' }, | ||
_react2['default'].createElement(_tree2['default'], { data: categoryList, expandAll: true, render: customRender }) | ||
); | ||
} | ||
}, { | ||
key: 'renderToolBar', | ||
value: function renderToolBar() { | ||
var _state2 = this.state, | ||
keyword = _state2.keyword, | ||
categoryList = _state2.categoryList; | ||
var onShowUpload = this.props.onShowUpload; | ||
return _react2['default'].createElement( | ||
'div', | ||
{ className: 'upload-tool-bar clearfix' }, | ||
_react2['default'].createElement( | ||
_button2['default'], | ||
{ | ||
className: 'pull-left', | ||
onClick: function onClick() { | ||
return onShowUpload(true, categoryList); | ||
}, | ||
type: 'primary' | ||
}, | ||
'\u4E0A\u4F20\u56FE\u7247' | ||
), | ||
_react2['default'].createElement(_searchInput2['default'], { | ||
className: 'pull-right', | ||
value: keyword, | ||
@@ -226,7 +275,7 @@ onChange: this.handleSearchChange, | ||
var options = this.props.options; | ||
var _state2 = this.state, | ||
mediaList = _state2.mediaList, | ||
count = _state2.count, | ||
currPageNo = _state2.currPageNo, | ||
selectedItems = _state2.selectedItems; | ||
var _state3 = this.state, | ||
mediaList = _state3.mediaList, | ||
count = _state3.count, | ||
currPageNo = _state3.currPageNo, | ||
selectedItems = _state3.selectedItems; | ||
@@ -238,3 +287,3 @@ | ||
'div', | ||
{ className: 'attachment-list-region' }, | ||
{ className: 'attachment-list-region pull-right' }, | ||
options.type === 'voice' ? _react2['default'].createElement(_VoiceList2['default'], { | ||
@@ -292,5 +341,5 @@ data: mediaList, | ||
var options = this.props.options; | ||
var _state3 = this.state, | ||
mediaList = _state3.mediaList, | ||
selectedItems = _state3.selectedItems; | ||
var _state4 = this.state, | ||
mediaList = _state4.mediaList, | ||
selectedItems = _state4.selectedItems; | ||
@@ -347,5 +396,6 @@ var maxAmount = options.maxAmount; | ||
null, | ||
this.renderToolBar(), | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefix + '-materials' }, | ||
{ className: prefix + '-materials clearfix' }, | ||
!options.categoryId && this.renderCategoryRegion(), | ||
@@ -352,0 +402,0 @@ this.renderMediaRegion() |
@@ -24,2 +24,4 @@ 'use strict'; | ||
var uploadfile = function uploadfile(options, file, token) { | ||
var uploadOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; | ||
var formData = new FormData(); | ||
@@ -30,2 +32,5 @@ | ||
formData.append('file', file); | ||
if (uploadOptions.categoryId) { | ||
formData.append('x:categoryId', uploadOptions.categoryId); | ||
} | ||
@@ -89,3 +94,3 @@ return (0, _zanPcAjax2['default'])({ | ||
}(index) | ||
}), files[index], token).then(function (file) { | ||
}), files[index], token, uploadOptions).then(function (file) { | ||
file = file.data; | ||
@@ -92,0 +97,0 @@ file = (0, _utils.responseParse)(file); |
@@ -35,2 +35,6 @@ 'use strict'; | ||
var _icon = require('zent/lib/icon'); | ||
var _icon2 = _interopRequireDefault(_icon); | ||
var _zanPcAjax = require('zan-pc-ajax'); | ||
@@ -52,2 +56,6 @@ | ||
var _Clipping = require('./components/Clipping'); | ||
var _Clipping2 = _interopRequireDefault(_Clipping); | ||
var _utils = require('./utils'); | ||
@@ -84,2 +92,3 @@ | ||
_this.handleFetch = function (networkUrl) { | ||
var categoryId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2; | ||
var _this$props = _this.props, | ||
@@ -97,3 +106,3 @@ kdtId = _this$props.kdtId, | ||
kdt_id: kdtId, | ||
categoryId: 2, | ||
categoryId: categoryId, | ||
scope: scope | ||
@@ -140,3 +149,4 @@ }; | ||
visible: false, | ||
activeId: props.materials ? 'materials' : 'upload' | ||
activeId: props.materials ? 'materials' : 'upload', | ||
showLocalUpload: false | ||
}; | ||
@@ -147,2 +157,3 @@ _this.typeName = props.type === 'voice' ? '语音' : '图片'; | ||
_this.closePopup = _this.closePopup.bind(_this); | ||
_this.setShowLocalUpload = _this.setShowLocalUpload.bind(_this); | ||
return _this; | ||
@@ -191,3 +202,4 @@ } | ||
onUpload: _ProcessUpload2['default'].bind(this, uploadOptions), | ||
onFetch: this.handleFetch | ||
onFetch: this.handleFetch, | ||
categoryList: this.categoryList | ||
}, uploadOptions)); | ||
@@ -207,3 +219,6 @@ } | ||
materials = _props.materials, | ||
uploadOptions = _objectWithoutProperties(_props, ['trigger', 'prefix', 'className', 'triggerClassName', 'tips', 'children', 'triggerInline', 'materials']); | ||
clipping = _props.clipping, | ||
clippingUrl = _props.clippingUrl, | ||
clippingTitle = _props.clippingTitle, | ||
uploadOptions = _objectWithoutProperties(_props, ['trigger', 'prefix', 'className', 'triggerClassName', 'tips', 'children', 'triggerInline', 'materials', 'clipping', 'clippingUrl', 'clippingTitle']); | ||
@@ -223,2 +238,3 @@ var _state = this.state, | ||
var dialogClassName = (0, _classnames2['default'])([prefix + '-upload', className]); | ||
var clippingClassName = (0, _classnames2['default'])([prefix + '-clipping', className]); | ||
@@ -250,6 +266,21 @@ className = (0, _classnames2['default'])([dialogClassName, { | ||
), | ||
_react2['default'].createElement( | ||
clipping ? _react2['default'].createElement( | ||
_dialog2['default'], | ||
{ | ||
title: clippingTitle, | ||
visible: visible, | ||
className: clippingClassName, | ||
onClose: this.closePopup, | ||
maskClosable: false, | ||
style: { maxWidth: 'none' } | ||
}, | ||
_react2['default'].createElement(_Clipping2['default'], { | ||
prefix: prefix + '-upload', | ||
url: clippingUrl, | ||
uploadOptions: uploadOptions | ||
}) | ||
) : _react2['default'].createElement( | ||
_dialog2['default'], | ||
{ | ||
visible: visible, | ||
className: dialogClassName, | ||
@@ -266,8 +297,3 @@ onClose: this.closePopup, | ||
}, | ||
materials && this.renderMaterialsPopup(uploadOptions), | ||
_react2['default'].createElement( | ||
TabPanel, | ||
{ tab: '\u672C\u5730\u4E0A\u4F20', id: 'upload' }, | ||
this.renderUploadComponent(uploadOptions) | ||
) | ||
materials && this.renderMaterialsPopup(uploadOptions) | ||
) | ||
@@ -277,3 +303,15 @@ ) | ||
} | ||
}, { | ||
key: 'setShowLocalUpload', | ||
value: function setShowLocalUpload(showLocalUpload) { | ||
var categoryList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; | ||
if (categoryList.length > 0) { | ||
this.categoryList = categoryList; | ||
} | ||
this.setState({ | ||
showLocalUpload: showLocalUpload | ||
}); | ||
} | ||
/** | ||
@@ -286,6 +324,36 @@ * 显示素材银行弹框 | ||
value: function renderMaterialsPopup(options) { | ||
var _this3 = this; | ||
var _props2 = this.props, | ||
prefix = _props2.prefix, | ||
className = _props2.className; | ||
var showLocalUpload = this.state.showLocalUpload; | ||
if (showLocalUpload) { | ||
var nav = _react2['default'].createElement( | ||
'span', | ||
null, | ||
_react2['default'].createElement( | ||
'span', | ||
{ | ||
className: 'return-materials', | ||
onClick: function onClick() { | ||
return _this3.setShowLocalUpload(false); | ||
} | ||
}, | ||
_react2['default'].createElement(_icon2['default'], { className: 'left-icon', type: 'right' }), | ||
' ', | ||
'\u6211\u7684' + this.typeName | ||
), | ||
' ', | ||
'/ \u672C\u5730\u4E0A\u4F20' | ||
); | ||
return _react2['default'].createElement( | ||
TabPanel, | ||
{ tab: nav, id: 'materials' }, | ||
this.renderUploadComponent(options) | ||
); | ||
} | ||
return _react2['default'].createElement( | ||
@@ -297,2 +365,3 @@ TabPanel, | ||
options: options, | ||
onShowUpload: this.setShowLocalUpload, | ||
className: className, | ||
@@ -324,2 +393,5 @@ showUploadPopup: this.showUpload | ||
* @property {Boolean} [materials=false] 是否支持素材银行 | ||
* @property {Boolean} [clipping=false] 是否支持裁剪功能 | ||
* @property {String} [clippingUrl=''] 裁剪功能默认展示预览图片 | ||
* @property {String} [clippingTitle=''] 裁剪Dialog标题 | ||
* @property {Function} [onSuccess=noop] 上传成功回调 | ||
@@ -339,6 +411,9 @@ * @property {Function} [onError=noop] 上传失败回调 | ||
maxSize: 1 * 1024 * 1024, | ||
maxAmount: 0, | ||
maxAmount: 15, | ||
tips: '', | ||
localOnly: false, | ||
materials: false, | ||
clipping: false, | ||
clippingUrl: '', | ||
clippingTitle: '上传Logo', | ||
type: 'image', | ||
@@ -345,0 +420,0 @@ auto: false, |
{ | ||
"name": "zan-upload", | ||
"version": "5.3.6", | ||
"version": "5.3.7", | ||
"description": "这是一个React组件", | ||
@@ -26,2 +26,3 @@ "main": "./lib/index.js", | ||
"object-assign": "^4.1.0", | ||
"react-rnd": "7.1.5", | ||
"zan-pc-ajax": "^4.1.2", | ||
@@ -28,0 +29,0 @@ "zan-utils": "^1.0.3" |
@@ -251,2 +251,34 @@ ## zan-upload | ||
:::demo 裁剪功能上传Logo | ||
```js | ||
import Upload from 'zan-upload'; | ||
class Simple extends React.Component { | ||
uploadSuccess(data) { | ||
console.log(data); // eslint-disable-line | ||
} | ||
uploadError(data) { | ||
console.log(data); | ||
} | ||
render() { | ||
return <Upload | ||
clipping | ||
clippingUrl="https://img.yzcdn.cn/upload_files/2016/09/28/FskX-jOAV47z3QSPEJcwmgic5j8t.jpg" | ||
tips="建议尺寸:640 x 640 像素。" | ||
onSuccess={this.uploadSuccess} | ||
onError={this.uploadError} | ||
tokenUrl="https://materials.youzan.com/shop/pubImgUploadToken.json" /> | ||
} | ||
} | ||
ReactDOM.render( | ||
<Simple /> | ||
, mountNode | ||
); | ||
``` | ||
::: | ||
### API | ||
@@ -285,2 +317,5 @@ | ||
| triggerClassName | 重写trigger样式 | string | `'rc-upload-trigger'` | 否 | | ||
| clipping | 是否支持裁剪功能 | boolean | `false` | 否 | | ||
| clippingUrl | 裁剪功能默认展示预览图片 | string | `''` | 否 | | ||
| clippingTitle | 裁剪Dialog标题 | string | `''` | 否 | | ||
@@ -354,1 +389,6 @@ ### 更新日志 | ||
- 修复上传错误信息获取不正确的问题 | ||
#### 5.3.7 | ||
- 支持图片裁剪上传Logo功能 | ||
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
1288667
14
35506
392
1
0
5
+ Addedreact-rnd@7.1.5
+ Addedjs-tokens@4.0.0(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addedprop-types@15.8.1(transitive)
+ Addedre-resizable@4.11.0(transitive)
+ Addedreact-draggable@3.3.2(transitive)
+ Addedreact-is@16.13.1(transitive)
+ Addedreact-rnd@7.1.5(transitive)