nuke-view - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

docs/basic.md

@@ -23,18 +23,19 @@ # View demo
             <View>
-                <View style={{marginBottom:'10rem',height:'150rem',backgroundColor:'#3089dc'}}>
+                <View style={[styles.box,{backgroundColor:'#3089dc'}]}>
                 </View>
-                <View style={{borderRadius:'10rem',marginBottom:'10rem',height:'150rem',backgroundImage:'linear-gradient(to right,#2FAEF0,#378BD9)'}}>
+                <View style={[styles.box,{borderRadius:'10rem',backgroundImage:'linear-gradient(to right,#2FAEF0,#378BD9)'}]}>
                 </View>
-                <View style={{marginBottom:'10rem',height:'150rem',backgroundImage:'linear-gradient(to left,#FD8E25,#FC521F)'}}>
+                <View style={[styles.box,{backgroundImage:'linear-gradient(to left,#FD8E25,#FC521F)'}]}>
                 </View>
-                <View style={{marginBottom:'10rem',height:'150rem',backgroundImage:'linear-gradient(to bottom,#FD8E25,#EEEEEE)'}}>
+                <View style={[styles.box,{backgroundImage:'linear-gradient(to bottom,#FD8E25,#EEEEEE)'}]}>
                 </View>
-                <View style={{marginBottom:'10rem',height:'150rem',backgroundImage:'linear-gradient(to top,#FD8E25,#EEEEEE)'}}>
+                <View style={[styles.box,{backgroundImage:'linear-gradient(to top,#FD8E25,#EEEEEE)'}]}>
                 </View>
-                <View style={{marginBottom:'10rem',height:'150rem',backgroundImage:'linear-gradient(to bottom right,#FD8E25,#EEEEEE)'}}>
+                <View style={[styles.box,{backgroundImage:'linear-gradient(to bottom right,#FD8E25,#EEEEEE)'}]}>
                 </View>
-                <View style={{marginBottom:'10rem',height:'150rem',backgroundImage:'linear-gradient(to top left,#FD8E25,#EEEEEE)'}}>
+                <View style={[styles.box,{backgroundImage:'linear-gradient(to top left,#FD8E25,#EEEEEE)'}]}>
                 </View>
+
             </View>
-            
+
         );
@@ -44,2 +45,8 @@ }
 
+const styles={
+  box:{
+    marginBottom:'10rem',
+    height:'150rem',
+  }
+}
 render(<App />);
@@ -46,0 +53,0 @@

HISTORY.md

 # Changelog 
 
 
+## 1.0.1 / 2017-11-01 
+
+  * [[77f721c](http://gitlab.alibaba-inc.com/nuke/view/commit/77f721cde710f19e10eb887263f33e002b61e245)] - `feat` add borderHelper && 1px clsname fixer 
+
 ## 1.0.0 / 2017-10-23 
@@ -5,0 +9,0 @@

lib/index.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -25,2 +25,4 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -33,55 +35,127 @@
 var View = function (_Component) {
-    _inherits(View, _Component);
+  _inherits(View, _Component);
 
-    function View() {
-        _classCallCheck(this, View);
+  function View() {
+    _classCallCheck(this, View);
 
-        return _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).apply(this, arguments));
-    }
+    return _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).apply(this, arguments));
+  }
 
-    _createClass(View, [{
-        key: 'render',
-        value: function render() {
-            var props = _extends({}, this.props);
-            if (_nukeEnv.isWeex) {
+  _createClass(View, [{
+    key: 'fixBorderWidth',
 
-                if (_nukeEnv.appInfo.platform.toLowerCase() === 'android' && this.context.androidConfigs && this.context.androidConfigs.rippleEnabled) {
-                    props['rippleEnabled'] = "true";
-                }
-                return _rax.createElement(_raxView2.default, props);
-            } else {
+    /**
+     * 用来处理 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 (props.children) {
-                    delete props.children;
-                }
-                if (_nukeEnv.appInfo.platform.toLowerCase() === 'android' && this.context.androidConfigs && this.context.androidConfigs.rippleEnabled && (props.onClick || props.onPress)) {
-                    return _rax.createElement(
-                        _ripples2.default,
-                        props,
-                        _rax.createElement(
-                            _raxView2.default,
-                            { style: { flex: 1 } },
-                            this.props.children
-                        )
-                    );
-                }
-                return _rax.createElement(
-                    _raxView2.default,
-                    props,
-                    this.props.children
-                );
+      if (style['border']) {
+        if (style['border'] === 'none') {
+          style['borderWidth'] = 0;
+        }
+        delete style['border'];
+      }
+      attrs.map(function (attr) {
+        if (style.hasOwnProperty('border' + attr)) {
+          var _attrObj;
+
+          var attrObj = (_attrObj = {}, _defineProperty(_attrObj, 'borderTop' + attr, style['border' + attr]), _defineProperty(_attrObj, 'borderLeft' + attr, style['border' + attr]), _defineProperty(_attrObj, 'borderRight' + attr, style['border' + attr]), _defineProperty(_attrObj, 'borderBottom' + attr, style['border' + attr]), _attrObj);
+          var deleteFlag = false;
+          ['Top', 'Left', 'Right', 'Bottom'].map(function (direction) {
+            if (style.hasOwnProperty('border' + direction + attr)) {
+              deleteFlag = true;
+              attrObj['border' + direction + attr] = style['border' + direction + attr];
             }
+          });
+          if (deleteFlag) {
+            delete style['border' + attr];
+            style = Object.assign({}, attrObj, style);
+          }
         }
-    }]);
+        // ['Top','Left','Right','Bottom'].each((direction)=>{
+      });
+      return style;
+    }
+    /**
+     * 计算是否需要添加1px 类，返回 clsName
+     * @param {object} style
+     * @return {string} className ,如果不止一个，空格分隔
+     */
 
-    return View;
+  }, {
+    key: 'calcBorder1Px',
+    value: function calcBorder1Px(style) {
+      var clsName = '';
+      style = this.fixBorderWidth(style, ['Width']);
+      ['Top', 'Left', 'Right', 'Bottom'].map(function (direction) {
+        if ('border' + direction + 'Width' in style && parseInt(style['border' + direction + 'Width'], 10) === 1) {
+          clsName += ' nuke-border-' + direction.toLowerCase() + '-fix-1';
+        }
+      });
+      if ('borderWidth' in style && parseInt(style['borderWidth'], 10) === 1) {
+        clsName = 'nuke-border-fix-1';
+      }
+
+      return clsName.replace(/(^\s+)|(\s+$)/g, '');
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var props = _extends({}, this.props);
+      if (props.style) {
+        props.style = this.fixBorderWidth(props.style);
+      }
+
+      if (_nukeEnv.isWeex) {
+        if (_nukeEnv.appInfo.platform.toLowerCase() === 'android' && this.context.androidConfigs && this.context.androidConfigs.rippleEnabled) {
+          props['rippleEnabled'] = 'true';
+        }
+        return (0, _rax.createElement)(_raxView2.default, props);
+      } else {
+        if (props.children) {
+          delete props.children;
+        }
+        var clsNameFor1Px = '';
+        if (props.style) {
+          clsNameFor1Px = this.calcBorder1Px(props.style);
+        }
+        if (clsNameFor1Px) {
+          // add 1px clsName
+          props.className = (props.className || '') + ' ' + clsNameFor1Px;
+        }
+
+        if (_nukeEnv.appInfo.platform.toLowerCase() === 'android' && this.context.androidConfigs && this.context.androidConfigs.rippleEnabled && (props.onClick || props.onPress)) {
+          return (0, _rax.createElement)(
+            _ripples2.default,
+            _extends({}, props, { className: props.className }),
+            (0, _rax.createElement)(
+              _raxView2.default,
+              { style: { flex: 1 } },
+              this.props.children
+            )
+          );
+        }
+        return (0, _rax.createElement)(
+          _raxView2.default,
+          _extends({}, props, { className: props.className }),
+          this.props.children
+        );
+      }
+    }
+  }]);
+
+  return View;
 }(_rax.Component);
 
 View.contextTypes = {
-    androidConfigs: _rax.PropTypes.any
+  androidConfigs: _rax.PropTypes.any
 };
 var styles = {
-    initial: {
-        cursor: 'pointer'
-    }
+  initial: {
+    cursor: 'pointer'
+  }
 };
@@ -88,0 +162,0 @@

lib/ripples.js

@@ -119,7 +119,7 @@ 'use strict';
 
-      return _rax.createElement(
+      return (0, _rax.createElement)(
         'div',
         _extends({}, props, { style: s, onClick: handleClick }),
         children,
-        _rax.createElement('s', { style: _extends({}, rippleStyle, state.rippleStyle) })
+        (0, _rax.createElement)('s', { style: _extends({}, rippleStyle, state.rippleStyle) })
       );
@@ -126,0 +126,0 @@ }

package.json

 {
   "name": "nuke-view",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "视图",
@@ -5,0 +5,0 @@ "main": "lib/index",

No alert changes

Improved metrics

Total package byte prevSize

21674

increased by20%

Number of package files

10

increased by11.11%

Lines of code

276

increased by33.33%

No dependency changes