weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
182 lines (157 loc) • 6.89 kB
JavaScript
/* @jsx createElement */
;
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _rax = require('rax');
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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; }
var isWeb = (typeof navigator === 'undefined' ? 'undefined' : _typeof(navigator)) === 'object' && (navigator.appCodeName === 'Mozilla' || navigator.product === 'Gecko');
var WIDTH_ORIGINAL = 1;
var HEIGHT_ORIGINAL = 1;
/**
* Image
* @description 图片
*/
var Image = function (_Component) {
_inherits(Image, _Component);
function Image(props) {
_classCallCheck(this, Image);
var _this = _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).call(this, props));
_this.state = {
width: WIDTH_ORIGINAL,
height: HEIGHT_ORIGINAL
};
_this.load = _this.load.bind(_this);
return _this;
}
_createClass(Image, [{
key: 'convertToRem',
value: function convertToRem(num) {
var pxWidth = void 0;
if (isWeb) {
pxWidth = document.documentElement.clientWidth * devicePixelRatio;
} else {
pxWidth = WXEnvironment.deviceWidth;
}
return Math.round(num * 750 / pxWidth);
}
}, {
key: 'load',
value: function load(e) {
var width = void 0;
var height = void 0;
if (!isWeb) {
if (e.size && e.size.naturalWidth > 0 && e.size.naturalHeight > 0) {
width = this.convertToRem(e.size.naturalWidth);
height = this.convertToRem(e.size.naturalHeight);
}
} else if (e.target) {
width = this.convertToRem(e.target.naturalWidth);
height = this.convertToRem(e.target.naturalHeight);
e.size = {
naturalWidth: width,
naturalHeight: height
};
}
if (this.props.autoFit && width && height) {
this.setState({
width: width,
height: height
});
}
this.props.onLoad && this.props.onLoad(e);
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
style = _props.style,
autoFit = _props.autoFit,
src = _props.src,
_props$source = _props.source,
source = _props$source === undefined ? {} : _props$source,
resizeMode = _props.resizeMode,
onLoad = _props.onLoad,
onPress = _props.onPress,
onClick = _props.onClick,
others = _objectWithoutProperties(_props, ['style', 'autoFit', 'src', 'source', 'resizeMode', 'onLoad', 'onPress', 'onClick']);
var uri = source.uri,
_source$width = source.width,
sourceWidth = _source$width === undefined ? WIDTH_ORIGINAL : _source$width,
_source$height = source.height,
sourceHeight = _source$height === undefined ? HEIGHT_ORIGINAL : _source$height;
if (!src && !uri) {
return null;
}
var ImageElement = void 0;
if (isWeb) {
ImageElement = 'img';
} else {
ImageElement = 'image';
}
/**
* compatible with source props
*/
var nativeProps = _extends({
src: src || uri,
quality: 'original',
style: _extends({
width: autoFit ? this.state.width : sourceWidth,
height: autoFit ? this.state.height : sourceHeight
}, style),
onLoad: this.load
}, others);
if (onPress || onClick) {
nativeProps.onClick = onPress || onClick;
}
/**
* if flex is defined, delete width 1, height 1
*/
if (nativeProps.style.flex) {
if (nativeProps.style.width === WIDTH_ORIGINAL) {
delete nativeProps.style.width;
}
if (nativeProps.style.height === HEIGHT_ORIGINAL) {
delete nativeProps.style.height;
}
}
// for cover and contain
var propsResizeMode = resizeMode || nativeProps.style.resizeMode;
if (propsResizeMode) {
if (isWeb) {
delete nativeProps.style.flex;
nativeProps.style.width = nativeProps.style.width || '100%';
nativeProps.style.height = nativeProps.style.height || '100%';
nativeProps.style.objectFit = propsResizeMode;
} else {
nativeProps.resize = propsResizeMode;
nativeProps.style.resizeMode = propsResizeMode;
}
}
return (0, _rax.createElement)(ImageElement, nativeProps);
}
}]);
return Image;
}(_rax.Component);
Image.propTypes = {
/**
* 资源地址 source url
*/
src: _rax.PropTypes.string,
/**
* style 样式
*/
style: _rax.PropTypes.object
};
Image.defaultProps = {
style: {},
autoFit: false
};
exports.default = Image;
module.exports = exports['default'];