@alifd/next
Version:
A configurable component library for web built on React.
281 lines (227 loc) • 8.81 kB
JavaScript
'use strict';
exports.__esModule = true;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp, _initialiseProps;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _zhCn = require('../locale/zh-cn.js');
var _zhCn2 = _interopRequireDefault(_zhCn);
var _util = require('../util');
var _base = require('./base');
var _base2 = _interopRequireDefault(_base);
var _list = require('./list');
var _list2 = _interopRequireDefault(_list);
var _upload = require('./upload');
var _upload2 = _interopRequireDefault(_upload);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Upload.Card
* @description 继承 Upload 的 API，除非特别说明
*/
var Card = (_temp = _class = function (_Base) {
(0, _inherits3.default)(Card, _Base);
function Card(props) {
(0, _classCallCheck3.default)(this, Card);
var _this = (0, _possibleConstructorReturn3.default)(this, _Base.call(this, props));
_initialiseProps.call(_this);
var value = void 0;
/* istanbul ignore else */
if ('value' in props) {
value = props.value;
} else {
value = props.defaultValue;
}
_this.state = {
value: !Array.isArray(value) ? [] : value,
uploaderRef: _this.uploaderRef
};
return _this;
}
Card.prototype.componentDidMount = function componentDidMount() {
this.updateUploaderRef(this.uploaderRef);
};
Card.prototype.componentDidUpdate = function componentDidUpdate() {
var uploaderRef = this.state.uploaderRef;
if (!uploaderRef && this.uploaderRef) {
this.updateUploaderRef(this.uploaderRef);
}
};
Card.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
var isUploading = prevState.uploaderRef && prevState.uploaderRef.isUploading();
if ('value' in nextProps && nextProps.value !== prevState.value && !isUploading) {
return {
value: !Array.isArray(nextProps.value) ? [] : [].concat(nextProps.value)
};
}
return null;
};
Card.prototype.isUploading = function isUploading() {
return this.uploaderRef.isUploading();
};
Card.prototype.saveRef = function saveRef(ref) {
this.saveUploaderRef(ref);
};
Card.prototype.updateUploaderRef = function updateUploaderRef(uploaderRef) {
this.setState({ uploaderRef: uploaderRef });
};
Card.prototype.render = function render() {
var _classNames,
_this2 = this;
var _props = this.props,
action = _props.action,
disabled = _props.disabled,
prefix = _props.prefix,
locale = _props.locale,
className = _props.className,
style = _props.style,
limit = _props.limit,
onPreview = _props.onPreview,
onRemove = _props.onRemove,
onCancel = _props.onCancel,
timeout = _props.timeout,
isPreview = _props.isPreview,
renderPreview = _props.renderPreview,
itemRender = _props.itemRender,
reUpload = _props.reUpload,
showDownload = _props.showDownload;
var isExceedLimit = this.state.value.length >= limit;
var uploadButtonCls = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'upload-list-item'] = true, _classNames[prefix + 'hidden'] = isExceedLimit, _classNames));
var children = this.props.children || locale.card.addPhoto;
var onRemoveFunc = disabled ? _util.func.prevent : onRemove;
var othersForList = _util.obj.pickOthers(Card.propTypes, this.props);
var othersForUpload = _util.obj.pickOthers(_list2.default.propTypes, othersForList);
if (isPreview) {
if (typeof renderPreview === 'function') {
var _classNames2;
var previewCls = (0, _classnames2.default)((_classNames2 = {}, _classNames2[prefix + 'form-preview'] = true, _classNames2[className] = !!className, _classNames2));
return _react2.default.createElement(
'div',
{ style: style, className: previewCls },
renderPreview(this.state.value, this.props)
);
}
}
return _react2.default.createElement(
_list2.default,
(0, _extends3.default)({
className: className,
style: style,
listType: 'card',
closable: true,
locale: locale,
value: this.state.value,
onRemove: onRemoveFunc,
onCancel: onCancel,
onPreview: onPreview,
itemRender: itemRender,
isPreview: isPreview,
uploader: this.uploaderRef,
reUpload: reUpload,
showDownload: showDownload
}, othersForList),
_react2.default.createElement(
_upload2.default,
(0, _extends3.default)({}, othersForUpload, {
shape: 'card',
prefix: prefix,
disabled: disabled,
action: action,
timeout: timeout,
isPreview: isPreview,
value: this.state.value,
onProgress: this.onProgress,
onChange: this.onChange,
ref: function ref(_ref) {
return _this2.saveRef(_ref);
},
className: uploadButtonCls
}),
children
)
);
};
return Card;
}(_base2.default), _class.displayName = 'Card', _class.propTypes = {
prefix: _propTypes2.default.string,
locale: _propTypes2.default.object,
children: _propTypes2.default.object,
value: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object]),
defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object]),
/**
* 点击图片回调
*/
onPreview: _propTypes2.default.func,
/**
* 改变时候的回调
*/
onChange: _propTypes2.default.func,
/**
* 点击移除的回调
*/
onRemove: _propTypes2.default.func,
/**
* 取消上传的回调
*/
onCancel: _propTypes2.default.func,
/**
* 自定义成功和失败的列表渲染方式
* @param {File} file 文件对象
* @param {Object} obj {remove: 删除回调}
* @retuns {ReactNode} React元素
* @version 1.21
*/
itemRender: _propTypes2.default.func,
/**
* 选择新文件上传并替换
* @version 1.24
*/
reUpload: _propTypes2.default.bool,
/**
* 展示下载按钮
* @version 1.24
*/
showDownload: _propTypes2.default.bool,
/**
* 上传中
*/
onProgress: _propTypes2.default.func,
isPreview: _propTypes2.default.bool,
renderPreview: _propTypes2.default.func
}, _class.defaultProps = {
prefix: 'next-',
locale: _zhCn2.default.Upload,
showDownload: true,
onChange: _util.func.noop,
onPreview: _util.func.noop,
onProgress: _util.func.noop
}, _initialiseProps = function _initialiseProps() {
var _this3 = this;
this.onProgress = function (value, targetItem) {
_this3.setState({
value: value
});
_this3.props.onProgress(value, targetItem);
};
this.onChange = function (value, file) {
if (!('value' in _this3.props)) {
_this3.setState({
value: value
});
}
_this3.props.onChange(value, file);
};
}, _temp);
exports.default = (0, _reactLifecyclesCompat.polyfill)(Card);
module.exports = exports['default'];