nuke-components - npm Package Compare versions

Comparing version 0.2.19 to 0.2.20

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.20 / 2017-04-01 
+
+  * [[1455356](http://gitlab.alibaba-inc.com/nuke/components/commit/1455356eb8b538f5a49ac892df53acd59844bcde)] - `fix` ios10.3白屏问题 
+
 ## 0.2.19 / 2017-04-01 
@@ -5,0 +9,0 @@

lib/index.js

@@ -63,8 +63,4 @@ 'use strict';
   RefreshControl: _refreshControl2.default,
-  TouchableHighlight: _touchableHighlight2.default,
-  TouchableOpacity: _touchableHighlight2.default,
-  TouchableWithoutFeedback: _touchableHighlight2.default,
-  TouchableNativeFeedback: _touchableHighlight2.default,
-  throttle: _throttle2.default
+  TouchableHighlight: _touchableHighlight2.default
 };
 module.exports = exports['default'];

lib/recycler-view.js

@@ -145,4 +145,5 @@ 'use strict';
                 var cells = children.map(function (child, index) {
+                    var ref = 'cell' + index;
+
                     if (child) {
-                        var ref = 'cell' + index;
                         if (props._autoWrapCell && child.type != _refreshControl2.default) {
@@ -164,3 +165,3 @@ if (child.key) return (0, _rax.createElement)(
                     } else {
-                        return null;
+                        return (0, _rax.createElement)(Cell, { ref: ref });
                     }
@@ -167,0 +168,0 @@ });

lib/text.js

@@ -1,9 +0,9 @@
-/* @jsx createElement */
-
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+	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; }; }();
@@ -13,3 +13,3 @@
 
-var _nukeEnv = require('nuke-env');
+var _universalEnv = require('universal-env');
 
@@ -23,42 +23,95 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 var Text = function (_Component) {
-  _inherits(Text, _Component);
+	_inherits(Text, _Component);
 
-  function Text() {
-    _classCallCheck(this, Text);
+	function Text() {
+		_classCallCheck(this, Text);
 
-    return _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).apply(this, arguments));
-  }
+		return _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).apply(this, arguments));
+	}
 
-  _createClass(Text, [{
-    key: 'render',
-    value: function render() {
-      var props = this.props;
-      var string = void 0;
+	_createClass(Text, [{
+		key: 'getChildContext',
+		value: function getChildContext() {
+			return {
+				isInAParentText: true
+			};
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var props = this.props;
+			var nativeProps = _extends({}, props, {
+				style: props.style || {}
+			});
 
-      if (props.children != null) {
-        if (!Array.isArray(props.children)) {
-          string = props.children.toString();
-        } else {
-          string = props.children.join('');
-        }
-      } else {
-        string = '';
-      }
+			var textString = '';
+			if (props.children != null) {
+				if (!Array.isArray(props.children)) {
+					textString = props.children.toString();
+				} else {
+					textString = props.children.join('');
+				}
+			}
 
-      if (_nukeEnv.isWeex) {
-        return (0, _rax.createElement)('text', { style: props.style, value: string });
-      } else {
-        return (0, _rax.createElement)(
-          'span',
-          props,
-          string
-        );
-      }
-    }
-  }]);
+			if (props.onPress || props.onClick) {
+				nativeProps.onClick = props.onPress;
+			}
 
-  return Text;
+			if (_universalEnv.isWeex) {
+				if (props.numberOfLines) {
+					nativeProps.style.lines = props.numberOfLines;
+				}
+
+				nativeProps.value = textString;
+
+				return _rax.createElement('text', nativeProps);
+			} else {
+				var styleProps = _extends({}, styles.initialWeb, nativeProps.style);
+				var numberOfLines = props.numberOfLines;
+				if (numberOfLines) {
+					if (parseInt(numberOfLines) === 1) {
+						styleProps.whiteSpace = 'nowrap';
+					} else {
+						styleProps.display = '-webkit-box';
+						styleProps.webkitBoxOrient = 'vertical';
+						styleProps.webkitLineClamp = String(numberOfLines);
+					}
+
+					styleProps.overflow = 'hidden';
+				}
+
+				return _rax.createElement(
+					'span',
+					_extends({}, nativeProps, { style: styleProps }),
+					textString
+				);
+			}
+		}
+	}]);
+
+	return Text;
 }(_rax.Component);
 
+Text.contextTypes = {
+	isInAParentText: _rax.PropTypes.bool
+};
+Text.childContextTypes = {
+	isInAParentText: _rax.PropTypes.bool
+};
+
+
+var styles = {
+	initialWeb: {
+		border: '0 solid black',
+		position: 'relative',
+		boxSizing: 'border-box',
+		display: 'block',
+		flexDirection: 'column',
+		alignContent: 'flex-start',
+		flexShrink: 0,
+		fontSize: '32ren'
+	}
+};
+
 exports.default = Text;
 module.exports = exports['default'];

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.19",
+  "version": "0.2.20",
   "description": "nuke原件库",
@@ -5,0 +5,0 @@ "main": "lib/index",

src/index.js

@@ -22,7 +22,3 @@ import View from './view';
   RefreshControl: RefreshControl,
-  TouchableHighlight: TouchableHighlight,
-  TouchableOpacity: TouchableHighlight,
-  TouchableWithoutFeedback: TouchableHighlight,
-  TouchableNativeFeedback: TouchableHighlight,
-  throttle: throttle
+  TouchableHighlight: TouchableHighlight
 }

src/recycler-view.js

@@ -87,4 +87,5 @@ /* @jsx createElement */
             let cells = children.map((child, index) => {
+                const ref = 'cell' + index;
+
                 if (child) {
-                    const ref = 'cell' + index;
                     if (props._autoWrapCell && child.type != RefreshControl) {
@@ -100,3 +101,3 @@ if(child.key)
                 } else {
-                    return null;
+                    return <Cell ref={ref} />;
                 }
@@ -103,0 +104,0 @@ });

src/text.js

@@ -1,31 +0,86 @@
-/* @jsx createElement */
+import {Component, createElement, PropTypes} from 'rax';
+import {isWeex} from 'universal-env';
 
-'use strict';
+class Text extends Component {
 
-import {Component, createElement} from 'rax';
-import {isWeex} from 'nuke-env';
+	static contextTypes = {
+		isInAParentText: PropTypes.bool
+	};
 
-class Text extends Component {
-  render() {
-    let props = this.props;
-    let string;
+	static childContextTypes = {
+		isInAParentText: PropTypes.bool
+	};
 
-    if (props.children != null) {
-      if (!Array.isArray(props.children)) {
-        string = props.children.toString();
-      } else {
-        string = props.children.join('');
-      }
-    } else {
-      string = '';
-    }
+	getChildContext() {
+		return {
+			isInAParentText: true
+		};
+	}
 
-    if (isWeex) {
-      return <text style={props.style} value={string} />;
-    } else {
-      return <span {...props}>{string}</span>;
-    }
-  }
+	render() {
+		let props = this.props;
+		let nativeProps = {
+			...props,
+			...{
+				style: props.style || {},
+			},
+		};
+
+		let textString = '';
+		if (props.children != null) {
+			if (!Array.isArray(props.children)) {
+				textString = props.children.toString();
+			} else {
+				textString = props.children.join('');
+			}
+		}
+
+		if (props.onPress || props.onClick) {
+			nativeProps.onClick = props.onPress;
+		}
+
+		if (isWeex) {
+			if (props.numberOfLines) {
+				nativeProps.style.lines = props.numberOfLines;
+			}
+
+			nativeProps.value = textString;
+
+			return <text {...nativeProps} />;
+		} else {
+			let styleProps = {
+				...styles.initialWeb,
+				...nativeProps.style
+			};
+			let numberOfLines = props.numberOfLines;
+			if (numberOfLines) {
+				if (parseInt(numberOfLines) === 1) {
+					styleProps.whiteSpace = 'nowrap';
+				} else {
+					styleProps.display = '-webkit-box';
+					styleProps.webkitBoxOrient = 'vertical';
+					styleProps.webkitLineClamp = String(numberOfLines);
+				}
+
+				styleProps.overflow = 'hidden';
+			}
+
+			return <span {...nativeProps} style={styleProps}>{textString}</span>;
+		}
+	}
 }
 
-export default Text;
+const styles = {
+	initialWeb: {
+		border: '0 solid black',
+		position: 'relative',
+		boxSizing: 'border-box',
+		display: 'block',
+		flexDirection: 'column',
+		alignContent: 'flex-start',
+		flexShrink: 0,
+		fontSize: '32ren'
+	}
+};
+
+export default Text;

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

116756

increased by6.94%

Lines of code

2222

increased by4.81%

No dependency changes