nuke-view - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

docs/md.md

@@ -28,3 +28,6 @@ # View demo
                 <StyleProvider androidConfigs={{rippleEnabled:true}}>
-                    <View style={{marginBottom:'10rem',height:'150rem',backgroundColor:'#3089dc','backgroundColor:active':'#1170BC'}} onClick={()=>{}}><Text>水波纹效果，需配合 onClick 使用</Text></View>
+                    <View style={{justifyContent:'center',alignItems:'center',marginBottom:'10rem',height:'150rem',backgroundColor:'#3089dc',color:'#ffffff','backgroundColor:active':'#1170BC'}} onClick={()=>{}}>
+
+                    <Text>水波纹效果，请切换 ua 到 安卓设备查看</Text>
+                    </View>
                 </StyleProvider>
@@ -31,0 +34,0 @@ <View style={{borderRadius:'10rem',marginBottom:'10rem',height:'150rem',backgroundImage:'linear-gradient(to right,#2FAEF0,#378BD9)'}}>

HISTORY.md

 # Changelog 
 
 
+## 1.0.4 / 2017-11-13 
+
+  * [[eede32a](http://gitlab.alibaba-inc.com/nuke/view/commit/eede32a891c49227801ac0c58f5185ee08f230f5)] - `fix` fix style mix bug in md mode 
+  * [[ef639d2](http://gitlab.alibaba-inc.com/nuke/view/commit/ef639d2028b21fdb782b848a7545ecc01255eedd)] - `feat` fix style bug 
+  * [[bac6bd1](http://gitlab.alibaba-inc.com/nuke/view/commit/bac6bd1fbce2abdddcec68a9de02a000874ef19e)] - `fix` delete files 
+  * [[b1e182c](http://gitlab.alibaba-inc.com/nuke/view/commit/b1e182c60d4ba73018a76c7c9af85a9f77624a5f)] - `fix` delete files 
+
 ## 1.0.3 / 2017-11-04 
 
   * [[19abc15](http://gitlab.alibaba-inc.com/nuke/view/commit/19abc15ce76045ab517790a8bb58bb2722cf62f9)] - `fix` fix dependencies && docs 

lib/index.js

 'use strict';
+
 /** @jsx createElement */
@@ -26,2 +27,6 @@
 
+var _inherit = require('./inherit');
+
+var _inherit2 = _interopRequireDefault(_inherit);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,25 +45,33 @@
 
-  function View() {
+  function View(props, context) {
     _classCallCheck(this, View);
 
-    return _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).call(this, props));
+
+    _this.contextRipple = false;
+    if (props.role && props.role !== 'container') {
+      _this.contextRipple = false;
+    } else {
+      _this.contextRipple = context.androidConfigs && context.androidConfigs.rippleEnabled;
+    }
+    return _this;
   }
+  /**
+   * 用来处理 weex 下，同时有 borderWidth 和 borderTopWidth 时，weex 表现异常的问题
+   * @param {object} style
+   * @param {array} attrArray 需要修复 border 的哪些属性
+   * @return {object} style
+   */
 
+
   _createClass(View, [{
     key: 'fixBorderWidth',
-
-    /**
-     * 用来处理 weex 下，同时有 borderWidth 和 borderTopWidth 时，weex 表现异常的问题
-     * @param {object} style
-     * @param {array} attrArray 需要修复 border 的哪些属性
-     * @return {object} style
-     */
     value: function fixBorderWidth(style) {
       var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['Color', 'Style', 'Width'];
 
-      if (style['border']) {
-        if (style['border'] === 'none') {
-          style['borderWidth'] = 0;
+      if (style.border) {
+        if (style.border === 'none') {
+          style.borderWidth = 0;
         }
-        delete style['border'];
+        delete style.border;
       }
@@ -98,13 +111,11 @@ attrs.map(function (attr) {
         hairLineFlag = window.OffsetHeightForRxBorder;
-      } else {
-        if (window && window.devicePixelRatio && window.devicePixelRatio >= 2) {
-          var testElem = document.createElement('div');
-          testElem.style.border = '.5px solid transparent';
-          document.body.appendChild(testElem);
-          if (testElem.offsetHeight === 1) {
-            hairLineFlag = true;
-          }
-          window.OffsetHeightForRxBorder = hairLineFlag;
-          document.body.removeChild(testElem);
+      } else if (window && window.devicePixelRatio && window.devicePixelRatio >= 2) {
+        var testElem = document.createElement('div');
+        testElem.style.border = '.5px solid transparent';
+        document.body.appendChild(testElem);
+        if (testElem.offsetHeight === 1) {
+          hairLineFlag = true;
         }
+        window.OffsetHeightForRxBorder = hairLineFlag;
+        document.body.removeChild(testElem);
       }
@@ -130,4 +141,4 @@ return hairLineFlag;
       });
-      if (style['borderWidth'] && parseFloat(style['borderWidth'], 10) === 1) {
-        style['borderWidth'] = borderWidthHair;
+      if (style.borderWidth && parseFloat(style.borderWidth, 10) === 1) {
+        style.borderWidth = borderWidthHair;
       }
@@ -157,2 +168,13 @@
   }, {
+    key: 'calcInheritStyle',
+    value: function calcInheritStyle(styles) {
+      var insideStyle = {};
+      _inherit2.default.map(function (item) {
+        if (styles[item]) {
+          insideStyle[item] = styles[item];
+        }
+      });
+      return insideStyle;
+    }
+  }, {
     key: 'render',
@@ -166,32 +188,41 @@ value: function render() {
       if (_nukeEnv.isWeex) {
-        if (_nukeEnv.appInfo.platform.toLowerCase() === 'android' && this.context.androidConfigs && this.context.androidConfigs.rippleEnabled) {
-          props['rippleEnabled'] = 'true';
+        if (_nukeEnv.appInfo.platform.toLowerCase() === 'android') {
+          if (!('rippleEnabled' in props)) {
+            props.rippleEnabled = this.contextRipple;
+          }
         }
+
         return (0, _rax.createElement)(_raxView2.default, props);
-      } else {
-        if (props.children) {
-          delete props.children;
+      }
+      if (props.children) {
+        delete props.children;
+      }
+      if (!('rippleEnabled' in props)) {
+        props.rippleEnabled = this.contextRipple;
+      }
+      if (props.style) {
+        props.style = this.fixBorderHairLine(props.style);
+        props.style = this.calcRemToPx(props.style);
+      }
+      // wave happens only in clickable elements
+      if (props.rippleEnabled && (props.onClick || props.onPress)) {
+        var insideStyle = Object.assign({}, { flex: 1 }, this.calcInheritStyle(props.style));
+        if (props.style && props.style.alignItems) {
+          delete props.style.alignItems;
         }
-        if (props.style) {
-          props.style = this.fixBorderHairLine(props.style);
-          props.style = this.calcRemToPx(props.style);
-        }
-        // wave happens only in clickable elements
-        if (_nukeEnv.appInfo.platform.toLowerCase() === 'android' && this.context.androidConfigs && this.context.androidConfigs.rippleEnabled && (props.onClick || props.onPress)) {
-          return (0, _rax.createElement)(
-            _ripples2.default,
-            props,
-            (0, _rax.createElement)(
-              _raxView2.default,
-              { style: { flex: 1 } },
-              this.props.children
-            )
-          );
-        }
         return (0, _rax.createElement)(
-          _raxView2.default,
+          _ripples2.default,
           props,
-          this.props.children
+          (0, _rax.createElement)(
+            _raxView2.default,
+            { style: insideStyle },
+            this.props.children
+          )
         );
       }
+      return (0, _rax.createElement)(
+        _raxView2.default,
+        props,
+        this.props.children
+      );
     }
@@ -198,0 +229,0 @@ }]);

package.json

 {
   "name": "nuke-view",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "视图",
@@ -52,2 +52,8 @@ "main": "lib/index",
   "devDependencies": {
+    "babel-eslint": "^7.2.3",
+    "eslint": "3.19.0",
+    "eslint-config-ali": "2.0.0",
+    "eslint-plugin-import": "2.6.0",
+    "eslint-plugin-jsx-a11y": "6.0.2",
+    "eslint-plugin-react": "7.1.0",
     "nuke-button": "^1.x.x",
@@ -57,9 +63,3 @@ "nuke-dimensions": "^0.x.x",
     "nuke-theme-provider": "^1.x.x",
-    "nuke-transition": "^1.x.x",
-    "eslint": "3.19.0",
-    "babel-eslint": "^7.2.3",
-    "eslint-config-ali": "2.0.0",
-    "eslint-plugin-import": "2.6.0",
-    "eslint-plugin-jsx-a11y": "6.0.2",
-    "eslint-plugin-react": "7.1.0"
+    "nuke-transition": "^1.x.x"
   },
@@ -66,0 +66,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

25149

increased by6.95%

Number of package files

12

increased by9.09%

Lines of code

371

increased by9.12%

No dependency changes