antd-mobile
Version:
基于 React 的移动设计规范实现
240 lines (227 loc) • 9.9 kB
JavaScript
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
/* tslint:disable:no-bitwise */
import React from 'react';
import classNames from 'classnames';
import WingBlank from '../wing-blank';
import Flex from '../flex';
import Toast from '../toast';
import Touchable from 'rc-touchable';
var Item = Flex.Item;
function noop() {}
var ImagePicker = function (_React$Component) {
_inherits(ImagePicker, _React$Component);
function ImagePicker() {
_classCallCheck(this, ImagePicker);
// http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side
var _this = _possibleConstructorReturn(this, (ImagePicker.__proto__ || Object.getPrototypeOf(ImagePicker)).apply(this, arguments));
_this.getOrientation = function (file, callback) {
var reader = new FileReader();
reader.onload = function (e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) !== 0xFFD8) {
return callback(-2);
}
var length = view.byteLength;
var offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker === 0xFFE1) {
var tmp = view.getUint32(offset += 2, false);
if (tmp !== 0x45786966) {
return callback(-1);
}
var little = view.getUint16(offset += 6, false) === 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++) {
if (view.getUint16(offset + i * 12, little) === 0x0112) {
return callback(view.getUint16(offset + i * 12 + 8, little));
}
}
} else if ((marker & 0xFF00) !== 0xFF00) {
break;
} else {
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
};
_this.getRotation = function () {
var orientation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
var imgRotation = 0;
switch (orientation) {
case 3:
imgRotation = 180;
break;
case 6:
imgRotation = 90;
break;
case 8:
imgRotation = 270;
break;
default:
}
return imgRotation;
};
_this.removeImage = function (index) {
var newImages = [];
var _this$props$files = _this.props.files,
files = _this$props$files === undefined ? [] : _this$props$files;
files.forEach(function (image, idx) {
if (index !== idx) {
newImages.push(image);
}
});
if (_this.props.onChange) {
_this.props.onChange(newImages, 'remove', index);
}
};
_this.addImage = function (imgItem) {
var _this$props$files2 = _this.props.files,
files = _this$props$files2 === undefined ? [] : _this$props$files2;
var newImages = files.concat(imgItem);
if (_this.props.onChange) {
_this.props.onChange(newImages, 'add');
}
};
_this.onImageClick = function (index) {
if (_this.props.onImageClick) {
_this.props.onImageClick(index, _this.props.files);
}
};
_this.onFileChange = function () {
var fileSelectorEl = _this.refs.fileSelectorInput;
if (fileSelectorEl.files && fileSelectorEl.files.length) {
var file = fileSelectorEl.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result;
if (!dataURL) {
Toast.fail('图片获取失败');
return;
}
var orientation = 1;
_this.getOrientation(file, function (res) {
// -2: not jpeg , -1: not defined
if (res > 0) {
orientation = res;
}
_this.addImage({
url: dataURL,
orientation: orientation,
file: file
});
fileSelectorEl.value = '';
});
};
reader.readAsDataURL(file);
}
};
return _this;
}
_createClass(ImagePicker, [{
key: 'render',
value: function render() {
var _classNames,
_this2 = this;
var _props = this.props,
prefixCls = _props.prefixCls,
style = _props.style,
className = _props.className,
_props$files = _props.files,
files = _props$files === undefined ? [] : _props$files,
selectable = _props.selectable,
onAddImageClick = _props.onAddImageClick;
var imgItemList = [];
var wrapCls = classNames((_classNames = {}, _defineProperty(_classNames, '' + prefixCls, true), _defineProperty(_classNames, className, className), _classNames));
files.forEach(function (image, index) {
var imgStyle = {
backgroundImage: 'url(' + image.url + ')',
transform: 'rotate(' + _this2.getRotation(image.orientation) + 'deg)'
};
imgItemList.push(React.createElement(
Item,
{ key: 'item-' + index },
React.createElement(
'div',
{ key: index, className: prefixCls + '-item' },
React.createElement('div', { className: prefixCls + '-item-remove', role: 'button', 'aria-label': 'Click and Remove this image', onClick: function onClick() {
_this2.removeImage(index);
} }),
React.createElement('div', { className: prefixCls + '-item-content', role: 'button', 'aria-label': 'Image can be clicked', onClick: function onClick() {
_this2.onImageClick(index);
}, style: imgStyle })
)
));
});
var selectEl = React.createElement(
Touchable,
{ activeClassName: prefixCls + '-upload-btn-active', key: 'select' },
React.createElement(
Item,
null,
React.createElement(
'div',
{ className: prefixCls + '-item ' + prefixCls + '-upload-btn', onClick: onAddImageClick, role: 'button', 'aria-label': 'Choose and add image' },
React.createElement('input', { ref: 'fileSelectorInput', type: 'file', accept: 'image/jpg,image/jpeg,image/png,image/gif', onChange: function onChange() {
_this2.onFileChange();
} })
)
)
);
var allEl = selectable ? imgItemList.concat([selectEl]) : imgItemList;
var length = allEl.length;
if (length !== 0 && length % 4 !== 0) {
var blankCount = 4 - length % 4;
var fillBlankEl = [];
for (var i = 0; i < blankCount; i++) {
fillBlankEl.push(React.createElement(Item, { key: 'blank-' + i }));
}
allEl = allEl.concat(fillBlankEl);
}
var flexEl = [];
for (var _i = 0; _i < allEl.length / 4; _i++) {
var rowEl = allEl.slice(_i * 4, _i * 4 + 4);
flexEl.push(rowEl);
}
var renderEl = flexEl.map(function (item, index) {
return React.createElement(
Flex,
{ key: 'flex-' + index },
item
);
});
return React.createElement(
'div',
{ className: wrapCls, style: style },
React.createElement(
'div',
{ className: prefixCls + '-list', role: 'group' },
React.createElement(
WingBlank,
{ size: 'md' },
renderEl
)
)
);
}
}]);
return ImagePicker;
}(React.Component);
export default ImagePicker;
ImagePicker.defaultProps = {
prefixCls: 'am-image-picker',
files: [],
onChange: noop,
onImageClick: noop,
onAddImageClick: noop,
selectable: true
};