nuke-components - npm Package Compare versions

Comparing version 0.2.17 to 0.2.18

docs/image.md

@@ -14,38 +14,77 @@ # 图片
 import { View, Text,Image} from 'nuke-components';
-import Modal from 'nuke-modal';
+import BizPage from 'nuke-biz-page';
 
+let base64Pic="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABQCAMAAABrs8qCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI2Mzc2NTc5RjcxMDExRTY4MkQ2QUU4RjExRkRDQ0IyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI2Mzc2NTdBRjcxMDExRTY4MkQ2QUU4RjExRkRDQ0IyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjYzNzY1NzdGNzEwMTFFNjgyRDZBRThGMTFGRENDQjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjYzNzY1NzhGNzEwMTFFNjgyRDZBRThGMTFGRENDQjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YXdEAAAAAMFBMVEWsrKx6enqK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";
 
-let App = class NukeDemoIndex extends Component {
+class ImageDemo extends Component {
     constructor() {
         super();
-        this.state={
-            s1:{
-                width:120,
-                height:120
-            }
+        this.state={ data: [
+            {desc:'base64',src:base64Pic,width:'100rem',height:'100rem'},
+            {desc:'normal',src:'http://img.alicdn.com/tps/TB1SrmcOVXXXXXFXpXXXXXXXXXX-520-280.jpg',width:'100rem',height:'100rem'},
+        ]
         }
     }
-    onLoad=(e)=>{
-        Modal.alert('e info:'+JSON.stringify(e))
-        if(e.size){
+    imageArrLoadHandler=(index,e)=>{
+        if(!e.size) return;
+        console.log('onload',index,e.size.naturalWidth,e.size.naturalHeight);
 
+        let newData = Object.assign([],this.state.data);
 
-            this.setState({s1:{
-                width:e.size.naturalWidth,
-                height:e.size.naturalHeight
-            }})
+        // < 600 取原始宽高, > 600 以 600 为基准
+        if(e.size.naturalWidth < 600){
+            newData[index].width = e.size.naturalWidth+'rem';
+            newData[index].height = e.size.naturalHeight+'rem'
+        }else{
+            newData[index].width = '600rem';
+            newData[index].height = (600 * e.size.naturalHeight/e.size.naturalWidth).toFixed() + 'rem';
         }
+
+        this.setState({ data : newData })
     }
-    render() {
+
+    render(){
+        let data = this.state.data;
         return (
-            <View style={{height:'200rem'}}>
-                <Image source={{uri: 'https://gd2.alicdn.com/imgextra/i2/413996455/TB2tNcJbd0opuFjSZFxXXaDNVXa_!!413996455.jpg'}} style={{width:this.state.s1.width,height:this.state.s1.height}}  onLoad={this.onLoad.bind(this)}/>
-                <Text>{JSON.stringify(this.state.s1)}</Text>
-            </View>
+            <BizPage title="Image">
+                {
+                    data.map((item,index)=>{
+                        return (
+
+                            <View style={styles.itemWrapper}>
+                                <BizPage.Intro main="Normal" sub={item.desc}></BizPage.Intro>
+                                <View style={styles.item}>
+                                    <Image ref="testimage" source={{uri: item.src}}  style={[styles.img,{quality:'original',width:item.width,height:item.height}]} onLoad={(e)=>{this.imageArrLoadHandler(index,e)}} />
+                                </View>
+                            <Text style={styles.label}>上图的实际展示尺寸：{item.width} x {item.height}</Text>
+                        </View>)
+                    })
+                }
+            </BizPage>
         )
     }
 }
+const styles={
+    itemWrapper:{
+        margin:'30rem',
+    },
+    label:{
+        fontSize:'28rem'
+    },
+    item:{
+        marginTop:'30rem',
+        marginBottom:'30rem',
+        borderColor:'#dddddd',
+        borderWidth:'1rem',
+        borderStyle:'dashed',
+        height:'300rem',
+        justifyContent:'center',
+        alignItems:'center',
+    },
+    img:{
 
-render(<App/>);
+    }
+}
+render(<ImageDemo />);
 
 ````

docs/scrollview.md

@@ -19,3 +19,3 @@ # 滚动视图
 let arr=[
-    {key:'A',bg:'#1aad19',color:'#ffffff'},
+    {key:'A',bg:'#1170bc',color:'#ffffff'},
     {key:'B',bg:'#3089dc',color:'#ffffff'},
@@ -32,5 +32,5 @@ {key:'C',bg:'#f1f1f1',color:'#3d4145'}
             doms.push(<View style={[styles.item,{backgroundColor:item.bg}]}>
-                        <Text style={{color:item.color}}>{item.key}</Text>
-                    </View>
-                );
+                    <Text style={{color:item.color}}>{item.key}</Text>
+                </View>
+            );
         });
@@ -37,0 +37,0 @@

docs/text.md

@@ -14,4 +14,14 @@ # 文字
 import { View, Text} from 'nuke-components';
+import BizPage from 'nuke-biz-page';
 
+const FontSizeArr=[
+    {name:'FootNote',size:10},
+    {name:'Caption',size:12},
+    {name:'Body',size:14},
+    {name:'SubHead',size:16},
+    {name:'HeadLine',size:18},
+    {name:'Display',size:28}
 
+    
+]
 
@@ -22,15 +32,75 @@ let App = class NukeDemoIndex extends Component {
     }
-
     render() {
         return (
-            <View style={{backgroundColor:'grey',height:'200rem',justifyContent:'center',alignItems:'center'}}>
-                <Text style={{color:'#ffffff'}}>Hello, Nuke</Text>
-
-            </View>
+            <BizPage title="Text">
+                <BizPage.Intro main="Normal"></BizPage.Intro>
+                {
+                    FontSizeArr.map((item,index)=>{
+                        return (
+                            <View style={styles.textLine}>
+                                <View style={styles.label}>
+                                    <Text style={styles.labelText}>{item.name}</Text>
+                                </View>
+                                <View style={styles.result}>
+                                    <Text style={[styles.resultText,{fontSize : item.size * 2 + 'rem'}]}>常规 {item.size*2} rem</Text>
+                                </View>
+                            </View>
+                        )
+                    })
+                }
+                <BizPage.Intro main="固定字号" sub="仅native生效"></BizPage.Intro>
+                <View style={styles.textLine}>
+                    <View style={styles.label}>
+                        <Text style={styles.labelText}>14wx</Text>
+                    </View>
+                    <View style={styles.result}>
+                        <Text style={[styles.resultText,{fontSize : '14wx'}]}>14wx</Text>
+                    </View>
+                </View>
+                <View style={styles.textLine}>
+                    <View style={styles.label}>
+                        <Text style={styles.labelText}>16wx</Text>
+                    </View>
+                    <View style={styles.result}>
+                        <Text style={[styles.resultText,{fontSize : '16wx'}]}>16wx</Text>
+                    </View>
+                </View>
+                <View style={styles.textLine}>
+                    <View style={styles.label}>
+                        <Text style={styles.labelText}>20wx</Text>
+                    </View>
+                    <View style={styles.result}>
+                        <Text style={[styles.resultText,{fontSize : '20wx'}]}>20wx</Text>
+                    </View>
+                </View>
+            </BizPage>
         )
     }
 }
+const styles={
+    textLine:{
+        justifyContent:'center',
+        alignItems:'center',
+        paddingLeft:'40rem',
+        paddingRight:'40rem',
+        marginTop:'40rem',
+        flexDirection:'row'
+    },
+    label:{
+        width:'150rem',
+    },
+    labelText:{
+        color:'#ea118d',
+        fontSize:'20rem'
+    },
+    result:{
+        flex:1
+    },
+    resultText:{
+        color:'#333940',
+    }
 
+}
 render(<App/>);
 
 ````

docs/textinput.md

@@ -5,3 +5,3 @@ # 输入框
 
-不包含任何样式预定义。
+注意：不包含任何样式预定义。
 
@@ -14,5 +14,5 @@ ---
 import { View, Text, TextInput,TouchableHighlight } from 'nuke-components';
+import BizPage from 'nuke-biz-page';
 
 
-
 let App = class Page extends Component {
@@ -22,9 +22,2 @@ constructor(props){
     }
-    focus = (e)=>{
-        
-        this.refs.input.focus();
-    }
-    blur = (e)=>{
-        this.refs.input.blur();
-    }
     change=(e)=>{
@@ -35,139 +28,68 @@ console.log('输入框的值--->',e.target.value || e.value);
         return (
-            <View>
-                <TextInput ref="input" onChange={this.change}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-                <View style={{flexDirection:'row',marginBottom:'20rem',justifyContent:'space-around'}}>
-                    <TouchableHighlight style={{backgroundColor:'#3089dc',width:'300rem',height:'60rem',justifyContent:'center',alignItems:'center'}} onPress={this.focus}>
-                        <Text style={{color:'#ffffff'}}>让 input 获得焦点</Text>
-                    </TouchableHighlight>
-                    <TouchableHighlight style={{backgroundColor:'#3089dc',width:'300rem',height:'60rem',justifyContent:'center',alignItems:'center'}} onPress={this.blur}>
-                        <Text style={{color:'#ffffff'}}>让 input 失去焦点</Text>
-                    </TouchableHighlight>
+            <BizPage title="TextInput">
+                <BizPage.Intro main="输入框" sub="单行"></BizPage.Intro>
+                <View style={styles.singleWrap}>
+                    <TextInput ref="input" onChange={this.change} style={styles.single}/>
                 </View>
-                <TextInput
-                    placeholder="试email"
-                    type="email"
-                    onFocus={() => console.log('onFocus')}
-                    onBlur={() => console.log('onBlur')}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-                <TextInput
-                    placeholder="password"
-                    type="password"
-                    onFocus={() => console.log('onFocus')}
-                    onBlur={() => console.log('onBlur')}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-                <TextInput
-                    placeholder="url"
-                    type="url"
-                    onFocus={() => console.log('onFocus')}
-                    onBlur={() => console.log('onBlur')}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-                <TextInput
-                    placeholder="tel"
-                    type="tel"
-                    onFocus={() => console.log('onFocus')}
-                    onBlur={() => console.log('onBlur')}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-                <TextInput
-                    placeholder="date"
-                    type="date"
-                    onFocus={() => console.log('onFocus')}
-                    onBlur={() => console.log('onBlur')}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-                <TextInput
-                    placeholder="time"
-                    type="time"
-                    onFocus={() => console.log('onFocus')}
-                    onBlur={() => console.log('onBlur')}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-                <TextInput
-                    keyboardType="numeric"
-                    onFocus={() => console.log('onFocus')}
-                    onBlur={() => console.log('onBlur')}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-                <Text>最长输入3个</Text>
-                <TextInput
-                    keyboardType="numeric"
-                    onFocus={() => console.log('onFocus')}
-                    onBlur={() => console.log('onBlur')}
-                    maxLength={3}
-                    style={{
-                        width: '750rem',
-                        marginBottom:'50rem',
-                        height: '80rem',
-                        borderWidth:'1rem',
-                        borderStyle:'solid',
-                        borderColor:'#cccccc'
-                    }}
-                />
-            </View>
+                <BizPage.Intro sub="多行"></BizPage.Intro>
+                <View style={styles.singleWrap}>
+                    <TextInput placeholder="提示" multiple ref="input" onChange={this.change} style={styles.multiple}/>
+                </View>
+                <BizPage.Intro main="各种键盘类型" sub="email"></BizPage.Intro>
+                <View style={styles.singleWrap}>
+                    <TextInput placeholder="email" type="email" style={styles.single} />
+                </View>
+                <BizPage.Intro sub="password"></BizPage.Intro>
+                <View style={styles.singleWrap}>
+                    <TextInput placeholder="password" type="password" style={styles.single} />
+                </View>
+                <BizPage.Intro sub="url"></BizPage.Intro>
+                <View style={styles.singleWrap}>
+                    <TextInput placeholder="url" type="url" style={styles.single} />
+                </View>
+                <BizPage.Intro sub="tel"></BizPage.Intro>
+                <View style={styles.singleWrap}>
+                    <TextInput placeholder="tel" type="tel" style={styles.single} />
+                </View>
+                <BizPage.Intro sub="date"></BizPage.Intro>
+                <View style={styles.singleWrap}>
+                    <TextInput placeholder="date" type="date" style={styles.single} />
+                </View>
+                <BizPage.Intro sub="time"></BizPage.Intro>
+                <View style={styles.singleWrap}>
+                    <TextInput placeholder="time" type="time" style={styles.single} />
+                </View>
+                
+            </BizPage>
         );
     }
 }
+
+const styles={
+    singleWrap:{
+        marginTop:'20rem',
+        justifyContent:'center',
+        alignItems:'center',
+        marginBottom:'20rem',
+    },
+    single:{
+        width: '670rem',
+        height: '80rem',
+        borderWidth:'1rem',
+        borderStyle:'solid',
+        borderColor:'#cccccc',
+        backgroundColor:'#ffffff'
+    },
+    multiple:{
+        width: '670rem',
+        height: '300rem',
+        borderWidth:'1rem',
+        borderStyle:'solid',
+        borderColor:'#cccccc',
+        backgroundColor:'#ffffff'
+    }
+}
+
 render(<App/>);
 
 ````

docs/touchablehighlight.md

@@ -14,23 +14,59 @@ # TouchableHighlight
 import { View, Text, TouchableHighlight } from 'nuke-components';
+import BizPage from 'nuke-biz-page';
 
-
-
-let App = class NukeDemoIndex extends Component {
+class App extends Component {
     constructor() {
         super();
+        this.state = {
+            count : 0
+        }
     }
-    press(e){
-        console.log('hi')
+    press = (e) =>{
+        this.setState({
+            count: this.state.count+1
+        })
     }
     render() {
         return (
-            <TouchableHighlight onPress={this.press.bind(this)}>
-                <View style={{backgroundColor:'#3089dc',height:'30rem',justifyContent:'center',alignItems:'center'}}>
-                    <Text style={{color:'#ffffff'}}>点击</Text>
-
+            <BizPage title="TouchableHighlight">
+                <BizPage.Intro main="Normal"></BizPage.Intro>
+                <View style={styles.result}>
+                    {this.state.count ? <Text style={styles.resultText}>点击 {this.state.count} 次</Text> :null}
                 </View>
-            </TouchableHighlight>
+                <View style={styles.btns}>
+                    <TouchableHighlight style={styles.touch} activeStyle={{backgroundColor:'#1170bc'}} onPress={this.press.bind(this)}>
+                        <Text onPress={this.press.bind(this)} style={styles.touchText}>点击</Text>
+                    </TouchableHighlight>
+                </View>
+                
+            </BizPage>
         )
     }
 }
+const styles = {
+    result : {
+        height:'480rem',
+        margin:'30rem',
+        padding:'10rem',
+        backgroundColor:'#ffffff',
+        justifyContent:'center',
+        alignItems:'center'
+    },
+    resultText : {
+        fontSize:'28rem'
+    },
+    btns:{
+        margin:'30rem',
+    },
+    touch:{
+        backgroundColor:'#3089dc',
+        height:'56rem',
+        justifyContent:'center',
+        alignItems:'center'
+    },
+    touchText:{
+        color:'#ffffff',
+        fontSize:'28rem'
+    }
+}
 
@@ -37,0 +73,0 @@ render(<App/>);

docs/video.md

@@ -14,5 +14,5 @@ # Video
 import { View, Text, Video } from 'nuke-components';
+import BizPage from 'nuke-biz-page';
 
 
-
 let App = class NukeDemoIndex extends Component {
@@ -25,6 +25,9 @@ constructor() {
         return (
-            <View style={{backgroundColor:'grey',height:'200rem',justifyContent:'center',alignItems:'center'}}>
-                <Video autoPlay src="http://cloud.video.taobao.com/play/u/2046440196/p/1/e/6/t/1/50106183.mp4" />
+            <BizPage title="Video">
+                <BizPage.Intro main="Normal"></BizPage.Intro>
+                <View style={{justifyContent:'center',alignItems:'center'}}>
+                    <Video style={{width:'600rem',height:'800rem'}} src="http://cloud.video.taobao.com/play/u/2046440196/p/1/e/6/t/1/50106183.mp4" />
 
-            </View>
+                </View>
+            </BizPage>
         )
@@ -31,0 +34,0 @@ }

docs/view.md

@@ -29,3 +29,3 @@ # View Demo
                 <Grid style={styles.gridWrap}>
-                    <Col style={[styles.col,{backgroundColor:'#1aad19'}]}><Text style={styles.text}>A</Text></Col>
+                    <Col style={[styles.col,{backgroundColor:'#1170bc'}]}><Text style={styles.text}>A</Text></Col>
                     <Col style={[styles.col,{backgroundColor:'#3089dc'}]}><Text style={styles.text}>B</Text></Col>
@@ -36,3 +36,3 @@ <Col style={[styles.col,{backgroundColor:'#f1f1f1'}]}><Text style={[styles.text,{color:'#3d4145'}]}>C</Text></Col>
                 <View style={styles.columnWrap}>
-                    <View style={[styles.row,{backgroundColor:'#1aad19'}]}><Text style={styles.text}>A</Text></View>
+                    <View style={[styles.row,{backgroundColor:'#1170bc'}]}><Text style={styles.text}>A</Text></View>
                     <View style={[styles.row,{backgroundColor:'#3089dc'}]}><Text style={styles.text}>B</Text></View>
@@ -39,0 +39,0 @@ </View>

HISTORY.md

 # Changelog 
 
 
+## 0.2.18 / 2017-03-30 
+
+  * [[711ac93](http://gitlab.alibaba-inc.com/nuke/components/commit/711ac93fdb6a2b112f9c04bf8f3ef2c30cfe6ca4)] - `docs` update all components demos 
+
 ## 0.2.17 / 2017-03-29 
@@ -5,0 +9,0 @@

lib/image.js

@@ -5,3 +5,3 @@ /* @jsx createElement */
 Object.defineProperty(exports, "__esModule", {
-  value: true
+	value: true
 });
@@ -34,69 +34,83 @@
 var Image = function (_Component) {
-  _inherits(Image, _Component);
+	_inherits(Image, _Component);
 
-  function Image() {
-    _classCallCheck(this, Image);
+	function Image(props) {
+		_classCallCheck(this, Image);
 
-    return _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).apply(this, arguments));
-  }
+		var _this = _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).call(this, props));
 
-  _createClass(Image, [{
-    key: 'render',
-    value: function render() {
-      var nativeProps = _extends({}, this.props);
-      var source = nativeProps.source;
+		_this.load = function (e) {
+			if (_nukeEnv.isWeex) {} else {
+				if (e.target) {
+					e.size = {
+						naturalWidth: e.target.naturalWidth,
+						naturalHeight: e.target.naturalHeight
+					};
+				}
+			}
+			_this.props.onLoad && _this.props.onLoad(e);
+		};
 
-      // Source must a object
-      if (source && source.uri) {
-        var width = source.width,
-            height = source.height,
-            uri = source.uri,
-            bigSizeUri = source.bigSizeUri;
+		return _this;
+	}
 
-        nativeProps.style = _extends({
-          width: width || 0,
-          height: height || 0
-        }, nativeProps.style);
-        nativeProps.src = uri;
+	_createClass(Image, [{
+		key: 'render',
+		value: function render() {
+			var nativeProps = _extends({}, this.props);
+			var source = nativeProps.source;
 
-        delete nativeProps.source;
+			// Source must a object
+			if (source && source.uri) {
+				var width = source.width,
+				    height = source.height,
+				    uri = source.uri,
+				    bigSizeUri = source.bigSizeUri;
 
-        var ImageElement = void 0;
-        if (_nukeEnv.isWeex) {
-          ImageElement = 'image';
-        } else {
-          ImageElement = 'img';
-        }
+				nativeProps.style = _extends({
+					width: width || 0,
+					height: height || 0
+				}, nativeProps.style);
+				nativeProps.src = uri;
 
-        // for cover and contain
-        var propsResizeMode = nativeProps.resizeMode || nativeProps.style.resizeMode;
-        if (propsResizeMode) {
-          if (_nukeEnv.isWeex) {
-            nativeProps.resize = propsResizeMode;
-            nativeProps.style.resizeMode = propsResizeMode;
-          } else {
-            nativeProps.style.objectFit = propsResizeMode;
-          }
-        }
+				delete nativeProps.source;
 
-        if (nativeProps.children) {
-          var imageProps = _extends({}, nativeProps, {
-            style: _extends({}, nativeProps.style, styles.absoluteImage)
-          });
+				var ImageElement = void 0;
+				if (_nukeEnv.isWeex) {
+					ImageElement = 'image';
+				} else {
+					ImageElement = 'img';
+				}
 
-          return (0, _rax.createElement)(
-            _view2.default,
-            { style: nativeProps.style },
-            (0, _rax.createElement)(ImageElement, imageProps),
-            this.props.children
-          );
-        } else {
-          return (0, _rax.createElement)(ImageElement, nativeProps);
-        }
-      }
-      return null;
-    }
-  }]);
+				// for cover and contain
+				var propsResizeMode = nativeProps.resizeMode || nativeProps.style.resizeMode;
+				if (propsResizeMode) {
+					if (_nukeEnv.isWeex) {
+						nativeProps.resize = propsResizeMode;
+						nativeProps.style.resizeMode = propsResizeMode;
+					} else {
+						nativeProps.style.objectFit = propsResizeMode;
+					}
+				}
 
-  return Image;
+				if (nativeProps.children) {
+					var imageProps = _extends({}, nativeProps, {
+						style: _extends({}, nativeProps.style, styles.absoluteImage)
+					});
+
+					return (0, _rax.createElement)(
+						_view2.default,
+						{ style: nativeProps.style },
+						(0, _rax.createElement)(ImageElement, imageProps),
+						this.props.children
+					);
+				} else {
+					return (0, _rax.createElement)(ImageElement, _extends({}, nativeProps, { onLoad: this.load }));
+				}
+			}
+			return null;
+		}
+	}]);
+
+	return Image;
 }(_rax.Component);
@@ -108,9 +122,9 @@
 var styles = {
-  absoluteImage: {
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    position: 'absolute'
-  }
+	absoluteImage: {
+		left: 0,
+		right: 0,
+		top: 0,
+		bottom: 0,
+		position: 'absolute'
+	}
 };
@@ -117,0 +131,0 @@

lib/video.js

@@ -6,3 +6,3 @@ /* @jsx createElement */
 Object.defineProperty(exports, "__esModule", {
-  value: true
+	value: true
 });
@@ -25,45 +25,41 @@
 var Video = function (_Component) {
-  _inherits(Video, _Component);
+	_inherits(Video, _Component);
 
-  function Video() {
-    _classCallCheck(this, Video);
+	function Video() {
+		_classCallCheck(this, Video);
 
-    return _possibleConstructorReturn(this, (Video.__proto__ || Object.getPrototypeOf(Video)).apply(this, arguments));
-  }
+		return _possibleConstructorReturn(this, (Video.__proto__ || Object.getPrototypeOf(Video)).apply(this, arguments));
+	}
 
-  _createClass(Video, [{
-    key: 'render',
-    value: function render() {
-      var props = this.props;
-      var autoPlay = props.autoPlay;
-      var src = props.src;
-      var id = props.id;
+	_createClass(Video, [{
+		key: 'render',
+		value: function render() {
+			var props = this.props;
 
-      if (_nukeEnv.isWeex) {
-        return (0, _rax.createElement)('video', props);
-      } else {
+			if (_nukeEnv.isWeex) {
+				return (0, _rax.createElement)('video', props);
+			} else {
+				var nativeProps = _extends({}, props, {
+					controls: true
+				});
 
-        var _props = _extends({}, this.props, {
-          id: id,
-          controls: true
-        });
+				delete nativeProps.autoPlay;
+				delete nativeProps.src;
 
-        if (autoPlay) {
-          _props.autoPlay = autoPlay;
-        }
+				if (props.autoPlay) {
+					nativeProps.autoPlay = props.autoPlay;
+				}
+				var src = props.src;
 
-        delete _props.src;
+				return (0, _rax.createElement)(
+					'video',
+					_extends({}, nativeProps, {
+						'webkit-playsinline': true }),
+					(0, _rax.createElement)('source', { src: src })
+				);
+			}
+		}
+	}]);
 
-        return (0, _rax.createElement)(
-          'video',
-          _extends({}, _props, {
-            'webkit-playsinline': true
-          }),
-          (0, _rax.createElement)('source', { src: src })
-        );
-      }
-    }
-  }]);
-
-  return Video;
+	return Video;
 }(_rax.Component);
@@ -70,0 +66,0 @@

package.json

 {
   "name": "nuke-components",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "nuke原件库",
@@ -5,0 +5,0 @@ "main": "lib/index",

src/image.js

@@ -10,76 +10,91 @@ /* @jsx createElement */
 class Image extends Component {
-  static resizeMode = ImageResizeMode;
+	static resizeMode = ImageResizeMode;
+	constructor(props) {
+		super(props);
+	}
+	load=(e)=>{
+		if(isWeex){
 
-  render() {
-    let nativeProps = {...this.props};
-    let source = nativeProps.source;
+		}else{
+			if(e.target){
+				e.size = {
+					naturalWidth: e.target.naturalWidth,
+					naturalHeight: e.target.naturalHeight,
+				}
+			}
+		}
+		this.props.onLoad && this.props.onLoad(e);
+	}
+	render() {
+		let nativeProps = {...this.props};
+		let source = nativeProps.source;
 
-    // Source must a object
-    if (source && source.uri) {
+		// Source must a object
+		if (source && source.uri) {
 
-      let {width, height, uri, bigSizeUri} = source;
-      nativeProps.style = {
-        ...{
-          width: width || 0,
-          height: height || 0,
-        },
-        ...nativeProps.style
-      };
-      nativeProps.src = uri;
+			let {width, height, uri, bigSizeUri} = source;
+			nativeProps.style = {
+				...{
+					width: width || 0,
+					height: height || 0,
+				},
+				...nativeProps.style
+			};
+			nativeProps.src = uri;
 
-      delete nativeProps.source;
+			delete nativeProps.source;
 
-      let ImageElement;
-      if (isWeex) {
-        ImageElement = 'image';
-      } else {
-        ImageElement = 'img';
-      }
+			let ImageElement;
+			if (isWeex) {
+				ImageElement = 'image';
+			} else {
+				ImageElement = 'img';
+			}
 
-      // for cover and contain
-      let propsResizeMode = nativeProps.resizeMode || nativeProps.style.resizeMode;
-      if (propsResizeMode) {
-        if (isWeex) {
-          nativeProps.resize = propsResizeMode;
-          nativeProps.style.resizeMode = propsResizeMode;
-        } else {
-          nativeProps.style.objectFit = propsResizeMode;
-        }
-      }
+			// for cover and contain
+			let propsResizeMode = nativeProps.resizeMode || nativeProps.style.resizeMode;
+			if (propsResizeMode) {
+				if (isWeex) {
+					nativeProps.resize = propsResizeMode;
+					nativeProps.style.resizeMode = propsResizeMode;
+				} else {
+					nativeProps.style.objectFit = propsResizeMode;
+				}
+			}
 
-      if (nativeProps.children) {
-        var imageProps = {
-          ...nativeProps,
-          ...{
-            style: {
-              ...nativeProps.style,
-              ...styles.absoluteImage,
-            }
-          }
-        };
+			if (nativeProps.children) {
+				var imageProps = {
+					...nativeProps,
+					...{
+						style: {
+							...nativeProps.style,
+							...styles.absoluteImage,
+						}
+					}
+				};
 
-        return (
-          <View style={nativeProps.style}>
-            <ImageElement {...imageProps} />
-            {this.props.children}
-          </View>
-        );
-      } else {
-        return <ImageElement {...nativeProps}/>;
-      }
-    }
-    return null;
-  }
+				return (
+					<View style={nativeProps.style}>
+						<ImageElement {...imageProps} />
+						{this.props.children}
+					</View>
+				);
+			} else {
+				return <ImageElement {...nativeProps} onLoad={this.load}/>;
+			}
+		}
+		return null;
+	}
 }
 
 var styles = {
-  absoluteImage: {
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    position: 'absolute'
-  }
+	absoluteImage: {
+		left: 0,
+		right: 0,
+		top: 0,
+		bottom: 0,
+		position: 'absolute'
+	}
 };
 
 export default Image;

src/video.js

@@ -9,36 +9,31 @@ /* @jsx createElement */
 class Video extends Component {
-  render() {
-    let props = this.props;
-    let autoPlay = props.autoPlay;
-    let src = props.src;
-    let id = props.id;
+	render() {
+		let props = this.props;
 
-    if (isWeex) {
-      return <video {...props} />;
-    } else {
+		if (isWeex) {
+			return <video {...props} />;
+		} else {
+			let nativeProps = {
+				...props,
+				controls: true,
+			};
 
-      let props = {
-        ...this.props,
-        ...{
-          id: id,
-          controls: true
-        }
-      };
+			delete nativeProps.autoPlay;
+			delete nativeProps.src;
 
-      if (autoPlay) {
-        props.autoPlay = autoPlay;
-      }
+			if (props.autoPlay) {
+				nativeProps.autoPlay = props.autoPlay;
+			}
+			let src = props.src;
 
-      delete props.src;
-
-      return <video
-          {...props}
-          webkit-playsinline
-        >
-        <source src={src} />
-      </video>;
-    }
-  }
+			return <video
+				{...nativeProps}
+				webkit-playsinline>
+				<source src={src} />
+			</video>;
+		}
+	}
 }
 
 export default Video;
+

No alert changes

Improved metrics

Total package byte prevSize

122089

increased by4.68%

Lines of code

2207

increased by0.87%

No dependency changes