self-cellular-layout-react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/components/CellularLayout.css

@@ -10,3 +10,3 @@ .cellular_row_box{
 }
-.cellular_li_box {
+.cellular_li_box, .cellular_li_box_null {
   /* width: 216px;
@@ -50,2 +50,14 @@ height: 186px; */
   z-index: 1;
+}
+.cellular_li_box_null{
+  visibility: hidden;
+}
+.cellular_li_box_null .cellular_box1 {
+  border-right-color: rgba(32,137,203, 0.7);
+}
+.cellular_li_box_null .cellular_box2 {
+  background-color: rgba(32,137,203, 0.7);
+}
+.cellular_li_box_null .cellular_box3 {
+  border-left-color: rgba(32,137,203, 0.7);
 }

lib/components/CellularLayout.js

@@ -17,2 +17,4 @@ 'use strict';
 
+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"); } }
@@ -57,2 +59,11 @@
         list[row - 1] = imgs.slice(imgLen - row3count);
+        if (row2) {
+          for (var i = 0; i < colmun2 - row3count; i++) {
+            list[row - 1].push(null);
+          }
+        } else {
+          for (var _i = 0; _i < colmun - row3count; _i++) {
+            list[row - 1].push(null);
+          }
+        }
       }
@@ -63,4 +74,4 @@ if (row2) {
       var imgsRow1 = imgs.slice(0, imgLen - row2count);
-      for (var i = 0; i < row1; i++) {
-        list1[i] = imgsRow1.slice(i * (colmun + colmun2), (i + 1) * (colmun + colmun2));
+      for (var _i2 = 0; _i2 < row1; _i2++) {
+        list1[_i2] = imgsRow1.slice(_i2 * (colmun + colmun2), (_i2 + 1) * (colmun + colmun2));
       }
@@ -91,3 +102,2 @@ list1.forEach(function (item, index) {
       var imgList = this.getImgList(colmun, colmun2);
-      var rowLastIndex = imgList.length - 1;
       return _react2.default.createElement(
@@ -102,18 +112,18 @@ 'div',
                 height: boxAllH / 2 + boxH / 2 + 'px',
-                paddingLeft: index % 2 && index != rowLastIndex ? boxW * 3 / 4 + 'px' : 0,
-                paddingRight: index % 2 && index != rowLastIndex ? boxW * 3 / 4 + 'px' : 0,
-                top: index * -1 * boxH / 2 + 'px',
-                marginLeft: index % 2 && index == rowLastIndex ? -boxAllW - boxW / 2 + 'px' : 0
+                paddingLeft: index % 2 ? boxW * 3 / 4 + 'px' : 0,
+                paddingRight: index % 2 ? boxW * 3 / 4 + 'px' : 0,
+                top: index * -1 * boxH / 2 + 'px'
               }
             },
             item.map(function (v, i) {
+              var _React$createElement;
+
               return _react2.default.createElement(
                 'div',
-                { className: 'cellular_li_box', key: i, 'data-index': i,
-                  style: {
-                    width: boxW + 'px',
-                    height: boxH + 'px',
-                    marginRight: i != item.length - 1 ? boxW / 2 + 'px' : 0
-                  }
-                },
+                (_React$createElement = { className: 'cellular_li_box', key: i, 'data-index': i
+                }, _defineProperty(_React$createElement, 'className', [v ? "cellular_li_box" : "cellular_li_box_null"]), _defineProperty(_React$createElement, 'style', {
+                  width: boxW + 'px',
+                  height: boxH + 'px',
+                  marginRight: i != item.length - 1 ? boxW / 2 + 'px' : 0
+                }), _React$createElement),
                 _react2.default.createElement('div', { className: 'cellular_box1',
@@ -120,0 +130,0 @@ style: {

package.json

 {
   "name": "self-cellular-layout-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "6边形蜂窝布局react组件",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/components/CellularLayout.css

@@ -10,3 +10,3 @@ .cellular_row_box{
 }
-.cellular_li_box {
+.cellular_li_box, .cellular_li_box_null {
   /* width: 216px;
@@ -50,2 +50,14 @@ height: 186px; */
   z-index: 1;
+}
+.cellular_li_box_null{
+  visibility: hidden;
+}
+.cellular_li_box_null .cellular_box1 {
+  border-right-color: rgba(32,137,203, 0.7);
+}
+.cellular_li_box_null .cellular_box2 {
+  background-color: rgba(32,137,203, 0.7);
+}
+.cellular_li_box_null .cellular_box3 {
+  border-left-color: rgba(32,137,203, 0.7);
 }

src/components/CellularLayout.js

@@ -25,3 +25,12 @@ import React, { Component } from 'react';
     if(row3) {
-      list[row-1] = imgs.slice(imgLen-row3count)
+      list[row-1] = imgs.slice(imgLen-row3count);
+      if(row2) {
+        for(let i=0; i< colmun2-row3count; i++){
+          list[row-1].push(null)
+        }
+      } else {
+        for(let i=0; i< colmun-row3count; i++){
+          list[row-1].push(null)
+        }
+      }
     }
@@ -52,3 +61,2 @@ if(row2) {
     const imgList = this.getImgList(colmun, colmun2);
-    const rowLastIndex = imgList.length-1;
     return (
@@ -61,6 +69,5 @@ <div style={{width: width+'px'}}>
                 height: boxAllH/2+boxH/2+ 'px',
-                paddingLeft: index%2 && index!=rowLastIndex ? boxW*3/4+'px' : 0,
-                paddingRight: index%2 && index!=rowLastIndex ? boxW*3/4+'px' : 0,
+                paddingLeft: index%2 ? boxW*3/4+'px' : 0,
+                paddingRight: index%2 ? boxW*3/4+'px' : 0,
                 top: index*-1*boxH/2+'px',
-                marginLeft: index%2&&index==rowLastIndex ? -boxAllW-boxW/2+'px' : 0
               }}
@@ -71,2 +78,3 @@ >
                   <div className="cellular_li_box" key={i} data-index={i}
+                    className={[v ? "cellular_li_box" : "cellular_li_box_null"]}
                     style={{
@@ -73,0 +81,0 @@ width: boxW+'px',

No alert changes

Improved metrics

Total package byte prevSize

14552

9.93%

Lines of code

371

12.08%

No dependency changes