1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp, _initialiseProps;
|
7 |
|
8 | import React from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import classNames from 'classnames';
|
11 | import { polyfill } from 'react-lifecycles-compat';
|
12 |
|
13 | import zhCN from '../locale/zh-cn.js';
|
14 | import { func, obj } from '../util';
|
15 | import Base from './base';
|
16 | import List from './list';
|
17 | import Upload from './upload';
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | var Card = (_temp = _class = function (_Base) {
|
24 | _inherits(Card, _Base);
|
25 |
|
26 | function Card(props) {
|
27 | _classCallCheck(this, Card);
|
28 |
|
29 | var _this = _possibleConstructorReturn(this, _Base.call(this, props));
|
30 |
|
31 | _initialiseProps.call(_this);
|
32 |
|
33 | var value = void 0;
|
34 |
|
35 | if ('value' in props) {
|
36 | value = props.value;
|
37 | } else {
|
38 | value = props.defaultValue;
|
39 | }
|
40 |
|
41 | _this.state = {
|
42 | value: !Array.isArray(value) ? [] : value,
|
43 | uploaderRef: _this.uploaderRef
|
44 | };
|
45 | return _this;
|
46 | }
|
47 |
|
48 | Card.prototype.componentDidMount = function componentDidMount() {
|
49 | this.updateUploaderRef(this.uploaderRef);
|
50 | };
|
51 |
|
52 | Card.prototype.componentDidUpdate = function componentDidUpdate() {
|
53 | var uploaderRef = this.state.uploaderRef;
|
54 |
|
55 | if (!uploaderRef && this.uploaderRef) {
|
56 | this.updateUploaderRef(this.uploaderRef);
|
57 | }
|
58 | };
|
59 |
|
60 | Card.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
61 | var isUploading = prevState.uploaderRef && prevState.uploaderRef.isUploading();
|
62 | if ('value' in nextProps && nextProps.value !== prevState.value && !isUploading) {
|
63 | return {
|
64 | value: !Array.isArray(nextProps.value) ? [] : [].concat(nextProps.value)
|
65 | };
|
66 | }
|
67 |
|
68 | return null;
|
69 | };
|
70 |
|
71 | Card.prototype.isUploading = function isUploading() {
|
72 | return this.uploaderRef.isUploading();
|
73 | };
|
74 |
|
75 | Card.prototype.saveRef = function saveRef(ref) {
|
76 | this.saveUploaderRef(ref);
|
77 | };
|
78 |
|
79 | Card.prototype.updateUploaderRef = function updateUploaderRef(uploaderRef) {
|
80 | this.setState({ uploaderRef: uploaderRef });
|
81 | };
|
82 |
|
83 | Card.prototype.render = function render() {
|
84 | var _classNames,
|
85 | _this2 = this;
|
86 |
|
87 | var _props = this.props,
|
88 | action = _props.action,
|
89 | disabled = _props.disabled,
|
90 | prefix = _props.prefix,
|
91 | locale = _props.locale,
|
92 | className = _props.className,
|
93 | style = _props.style,
|
94 | limit = _props.limit,
|
95 | onPreview = _props.onPreview,
|
96 | onRemove = _props.onRemove,
|
97 | onCancel = _props.onCancel,
|
98 | timeout = _props.timeout,
|
99 | isPreview = _props.isPreview,
|
100 | renderPreview = _props.renderPreview,
|
101 | itemRender = _props.itemRender,
|
102 | reUpload = _props.reUpload,
|
103 | showDownload = _props.showDownload;
|
104 |
|
105 |
|
106 | var isExceedLimit = this.state.value.length >= limit;
|
107 | var uploadButtonCls = classNames((_classNames = {}, _classNames[prefix + 'upload-list-item'] = true, _classNames[prefix + 'hidden'] = isExceedLimit, _classNames));
|
108 |
|
109 | var children = this.props.children || locale.card.addPhoto;
|
110 |
|
111 | var onRemoveFunc = disabled ? func.prevent : onRemove;
|
112 | var othersForList = obj.pickOthers(Card.propTypes, this.props);
|
113 | var othersForUpload = obj.pickOthers(List.propTypes, othersForList);
|
114 |
|
115 | if (isPreview) {
|
116 | if (typeof renderPreview === 'function') {
|
117 | var _classNames2;
|
118 |
|
119 | var previewCls = classNames((_classNames2 = {}, _classNames2[prefix + 'form-preview'] = true, _classNames2[className] = !!className, _classNames2));
|
120 | return React.createElement(
|
121 | 'div',
|
122 | { style: style, className: previewCls },
|
123 | renderPreview(this.state.value, this.props)
|
124 | );
|
125 | }
|
126 | }
|
127 |
|
128 | return React.createElement(
|
129 | List,
|
130 | _extends({
|
131 | className: className,
|
132 | style: style,
|
133 | listType: 'card',
|
134 | closable: true,
|
135 | locale: locale,
|
136 | value: this.state.value,
|
137 | onRemove: onRemoveFunc,
|
138 | onCancel: onCancel,
|
139 | onPreview: onPreview,
|
140 | itemRender: itemRender,
|
141 | isPreview: isPreview,
|
142 | uploader: this.uploaderRef,
|
143 | reUpload: reUpload,
|
144 | showDownload: showDownload
|
145 | }, othersForList),
|
146 | React.createElement(
|
147 | Upload,
|
148 | _extends({}, othersForUpload, {
|
149 | shape: 'card',
|
150 | prefix: prefix,
|
151 | disabled: disabled,
|
152 | action: action,
|
153 | timeout: timeout,
|
154 | isPreview: isPreview,
|
155 | value: this.state.value,
|
156 | onProgress: this.onProgress,
|
157 | onChange: this.onChange,
|
158 | ref: function ref(_ref) {
|
159 | return _this2.saveRef(_ref);
|
160 | },
|
161 | className: uploadButtonCls
|
162 | }),
|
163 | children
|
164 | )
|
165 | );
|
166 | };
|
167 |
|
168 | return Card;
|
169 | }(Base), _class.displayName = 'Card', _class.propTypes = {
|
170 | prefix: PropTypes.string,
|
171 | locale: PropTypes.object,
|
172 | children: PropTypes.object,
|
173 | value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
174 | defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
175 | |
176 |
|
177 |
|
178 | onPreview: PropTypes.func,
|
179 | |
180 |
|
181 |
|
182 | onChange: PropTypes.func,
|
183 | |
184 |
|
185 |
|
186 | onRemove: PropTypes.func,
|
187 | |
188 |
|
189 |
|
190 | onCancel: PropTypes.func,
|
191 | |
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 | itemRender: PropTypes.func,
|
199 | |
200 |
|
201 |
|
202 |
|
203 | reUpload: PropTypes.bool,
|
204 | |
205 |
|
206 |
|
207 |
|
208 | showDownload: PropTypes.bool,
|
209 | |
210 |
|
211 |
|
212 | onProgress: PropTypes.func,
|
213 | isPreview: PropTypes.bool,
|
214 | renderPreview: PropTypes.func
|
215 | }, _class.defaultProps = {
|
216 | prefix: 'next-',
|
217 | locale: zhCN.Upload,
|
218 | showDownload: true,
|
219 | onChange: func.noop,
|
220 | onPreview: func.noop,
|
221 | onProgress: func.noop
|
222 | }, _initialiseProps = function _initialiseProps() {
|
223 | var _this3 = this;
|
224 |
|
225 | this.onProgress = function (value, targetItem) {
|
226 | _this3.setState({
|
227 | value: value
|
228 | });
|
229 |
|
230 | _this3.props.onProgress(value, targetItem);
|
231 | };
|
232 |
|
233 | this.onChange = function (value, file) {
|
234 | if (!('value' in _this3.props)) {
|
235 | _this3.setState({
|
236 | value: value
|
237 | });
|
238 | }
|
239 | _this3.props.onChange(value, file);
|
240 | };
|
241 | }, _temp);
|
242 |
|
243 |
|
244 | export default polyfill(Card); |
\ | No newline at end of file |