mjml-column - npm Package Compare versions

Comparing version 4.8.1 to 4.8.2

lib/index.js

@@ -10,2 +10,10 @@ "use strict";
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -17,198 +25,216 @@
 
-class MjColumn extends _mjmlCore.BodyComponent {
-  getChildContext() {
-    const {
-      containerWidth: parentWidth
-    } = this.context;
-    const {
-      nonRawSiblings
-    } = this.props;
-    const {
-      borders,
-      paddings
-    } = this.getBoxWidths();
-    const innerBorders = this.getShorthandAttrValue('inner-border', 'left') + this.getShorthandAttrValue('inner-border', 'right');
-    const allPaddings = paddings + borders + innerBorders;
-    let containerWidth = this.getAttribute('width') || `${parseFloat(parentWidth) / nonRawSiblings}px`;
-    const {
-      unit,
-      parsedWidth
-    } = (0, _widthParser.default)(containerWidth, {
-      parseFloatToInt: false
-    });
+let MjColumn = /*#__PURE__*/function (_BodyComponent) {
+  (0, _inherits2.default)(MjColumn, _BodyComponent);
 
-    if (unit === '%') {
-      containerWidth = `${parseFloat(parentWidth) * parsedWidth / 100 - allPaddings}px`;
-    } else {
-      containerWidth = `${parsedWidth - allPaddings}px`;
-    }
+  var _super = (0, _createSuper2.default)(MjColumn);
 
-    return { ...this.context,
-      containerWidth
-    };
+  function MjColumn() {
+    (0, _classCallCheck2.default)(this, MjColumn);
+    return _super.apply(this, arguments);
   }
 
-  getStyles() {
-    const tableStyle = {
-      'background-color': this.getAttribute('background-color'),
-      border: this.getAttribute('border'),
-      'border-bottom': this.getAttribute('border-bottom'),
-      'border-left': this.getAttribute('border-left'),
-      'border-radius': this.getAttribute('border-radius'),
-      'border-right': this.getAttribute('border-right'),
-      'border-top': this.getAttribute('border-top'),
-      'vertical-align': this.getAttribute('vertical-align')
-    };
-    return {
-      div: {
-        'font-size': '0px',
-        'text-align': 'left',
-        direction: this.getAttribute('direction'),
-        display: 'inline-block',
-        'vertical-align': this.getAttribute('vertical-align'),
-        width: this.getMobileWidth()
-      },
-      table: { ...(this.hasGutter() ? {
-          'background-color': this.getAttribute('inner-background-color'),
-          border: this.getAttribute('inner-border'),
-          'border-bottom': this.getAttribute('inner-border-bottom'),
-          'border-left': this.getAttribute('inner-border-left'),
-          'border-radius': this.getAttribute('inner-border-radius'),
-          'border-right': this.getAttribute('inner-border-right'),
-          'border-top': this.getAttribute('inner-border-top')
-        } : tableStyle)
-      },
-      tdOutlook: {
-        'vertical-align': this.getAttribute('vertical-align'),
-        width: this.getWidthAsPixel()
-      },
-      gutter: { ...tableStyle,
-        padding: this.getAttribute('padding'),
-        'padding-top': this.getAttribute('padding-top'),
-        'padding-right': this.getAttribute('padding-right'),
-        'padding-bottom': this.getAttribute('padding-bottom'),
-        'padding-left': this.getAttribute('padding-left')
+  (0, _createClass2.default)(MjColumn, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      const {
+        containerWidth: parentWidth
+      } = this.context;
+      const {
+        nonRawSiblings
+      } = this.props;
+      const {
+        borders,
+        paddings
+      } = this.getBoxWidths();
+      const innerBorders = this.getShorthandAttrValue('inner-border', 'left') + this.getShorthandAttrValue('inner-border', 'right');
+      const allPaddings = paddings + borders + innerBorders;
+      let containerWidth = this.getAttribute('width') || `${parseFloat(parentWidth) / nonRawSiblings}px`;
+      const {
+        unit,
+        parsedWidth
+      } = (0, _widthParser.default)(containerWidth, {
+        parseFloatToInt: false
+      });
+
+      if (unit === '%') {
+        containerWidth = `${parseFloat(parentWidth) * parsedWidth / 100 - allPaddings}px`;
+      } else {
+        containerWidth = `${parsedWidth - allPaddings}px`;
       }
-    };
-  }
 
-  getMobileWidth() {
-    const {
-      containerWidth
-    } = this.context;
-    const {
-      nonRawSiblings
-    } = this.props;
-    const width = this.getAttribute('width');
-    const mobileWidth = this.getAttribute('mobileWidth');
-
-    if (mobileWidth !== 'mobileWidth') {
-      return '100%';
+      return { ...this.context,
+        containerWidth
+      };
     }
-
-    if (width === undefined) {
-      return `${parseInt(100 / nonRawSiblings, 10)}%`;
+  }, {
+    key: "getStyles",
+    value: function getStyles() {
+      const tableStyle = {
+        'background-color': this.getAttribute('background-color'),
+        border: this.getAttribute('border'),
+        'border-bottom': this.getAttribute('border-bottom'),
+        'border-left': this.getAttribute('border-left'),
+        'border-radius': this.getAttribute('border-radius'),
+        'border-right': this.getAttribute('border-right'),
+        'border-top': this.getAttribute('border-top'),
+        'vertical-align': this.getAttribute('vertical-align')
+      };
+      return {
+        div: {
+          'font-size': '0px',
+          'text-align': 'left',
+          direction: this.getAttribute('direction'),
+          display: 'inline-block',
+          'vertical-align': this.getAttribute('vertical-align'),
+          width: this.getMobileWidth()
+        },
+        table: { ...(this.hasGutter() ? {
+            'background-color': this.getAttribute('inner-background-color'),
+            border: this.getAttribute('inner-border'),
+            'border-bottom': this.getAttribute('inner-border-bottom'),
+            'border-left': this.getAttribute('inner-border-left'),
+            'border-radius': this.getAttribute('inner-border-radius'),
+            'border-right': this.getAttribute('inner-border-right'),
+            'border-top': this.getAttribute('inner-border-top')
+          } : tableStyle)
+        },
+        tdOutlook: {
+          'vertical-align': this.getAttribute('vertical-align'),
+          width: this.getWidthAsPixel()
+        },
+        gutter: { ...tableStyle,
+          padding: this.getAttribute('padding'),
+          'padding-top': this.getAttribute('padding-top'),
+          'padding-right': this.getAttribute('padding-right'),
+          'padding-bottom': this.getAttribute('padding-bottom'),
+          'padding-left': this.getAttribute('padding-left')
+        }
+      };
     }
+  }, {
+    key: "getMobileWidth",
+    value: function getMobileWidth() {
+      const {
+        containerWidth
+      } = this.context;
+      const {
+        nonRawSiblings
+      } = this.props;
+      const width = this.getAttribute('width');
+      const mobileWidth = this.getAttribute('mobileWidth');
 
-    const {
-      unit,
-      parsedWidth
-    } = (0, _widthParser.default)(width, {
-      parseFloatToInt: false
-    });
+      if (mobileWidth !== 'mobileWidth') {
+        return '100%';
+      }
 
-    switch (unit) {
-      case '%':
-        return width;
+      if (width === undefined) {
+        return `${parseInt(100 / nonRawSiblings, 10)}%`;
+      }
 
-      case 'px':
-      default:
-        return `${parsedWidth / parseInt(containerWidth, 10)}%`;
-    }
-  }
+      const {
+        unit,
+        parsedWidth
+      } = (0, _widthParser.default)(width, {
+        parseFloatToInt: false
+      });
 
-  getWidthAsPixel() {
-    const {
-      containerWidth
-    } = this.context;
-    const {
-      unit,
-      parsedWidth
-    } = (0, _widthParser.default)(this.getParsedWidth(true), {
-      parseFloatToInt: false
-    });
+      switch (unit) {
+        case '%':
+          return width;
 
-    if (unit === '%') {
-      return `${parseFloat(containerWidth) * parsedWidth / 100}px`;
+        case 'px':
+        default:
+          return `${parsedWidth / parseInt(containerWidth, 10)}%`;
+      }
     }
+  }, {
+    key: "getWidthAsPixel",
+    value: function getWidthAsPixel() {
+      const {
+        containerWidth
+      } = this.context;
+      const {
+        unit,
+        parsedWidth
+      } = (0, _widthParser.default)(this.getParsedWidth(true), {
+        parseFloatToInt: false
+      });
 
-    return `${parsedWidth}px`;
-  }
+      if (unit === '%') {
+        return `${parseFloat(containerWidth) * parsedWidth / 100}px`;
+      }
 
-  getParsedWidth(toString) {
-    const {
-      nonRawSiblings
-    } = this.props;
-    const width = this.getAttribute('width') || `${100 / nonRawSiblings}%`;
-    const {
-      unit,
-      parsedWidth
-    } = (0, _widthParser.default)(width, {
-      parseFloatToInt: false
-    });
-
-    if (toString) {
-      return `${parsedWidth}${unit}`;
+      return `${parsedWidth}px`;
     }
+  }, {
+    key: "getParsedWidth",
+    value: function getParsedWidth(toString) {
+      const {
+        nonRawSiblings
+      } = this.props;
+      const width = this.getAttribute('width') || `${100 / nonRawSiblings}%`;
+      const {
+        unit,
+        parsedWidth
+      } = (0, _widthParser.default)(width, {
+        parseFloatToInt: false
+      });
 
-    return {
-      unit,
-      parsedWidth
-    };
-  }
+      if (toString) {
+        return `${parsedWidth}${unit}`;
+      }
 
-  getColumnClass() {
-    const {
-      addMediaQuery
-    } = this.context;
-    let className = '';
-    const {
-      parsedWidth,
-      unit
-    } = this.getParsedWidth();
-    const formattedClassNb = parsedWidth.toString().replace('.', '-');
+      return {
+        unit,
+        parsedWidth
+      };
+    }
+  }, {
+    key: "getColumnClass",
+    value: function getColumnClass() {
+      const {
+        addMediaQuery
+      } = this.context;
+      let className = '';
+      const {
+        parsedWidth,
+        unit
+      } = this.getParsedWidth();
+      const formattedClassNb = parsedWidth.toString().replace('.', '-');
 
-    switch (unit) {
-      case '%':
-        className = `mj-column-per-${formattedClassNb}`;
-        break;
+      switch (unit) {
+        case '%':
+          className = `mj-column-per-${formattedClassNb}`;
+          break;
 
-      case 'px':
-      default:
-        className = `mj-column-px-${formattedClassNb}`;
-        break;
-    } // Add className to media queries
+        case 'px':
+        default:
+          className = `mj-column-px-${formattedClassNb}`;
+          break;
+      } // Add className to media queries
 
 
-    addMediaQuery(className, {
-      parsedWidth,
-      unit
-    });
-    return className;
-  }
-
-  hasGutter() {
-    return ['padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top'].some(attr => this.getAttribute(attr) != null);
-  }
-
-  renderGutter() {
-    return `
+      addMediaQuery(className, {
+        parsedWidth,
+        unit
+      });
+      return className;
+    }
+  }, {
+    key: "hasGutter",
+    value: function hasGutter() {
+      return ['padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top'].some(attr => this.getAttribute(attr) != null);
+    }
+  }, {
+    key: "renderGutter",
+    value: function renderGutter() {
+      return `
       <table
         ${this.htmlAttributes({
-      border: '0',
-      cellpadding: '0',
-      cellspacing: '0',
-      role: 'presentation',
-      width: '100%'
-    })}
+        border: '0',
+        cellpadding: '0',
+        cellspacing: '0',
+        role: 'presentation',
+        width: '100%'
+      })}
       >
@@ -218,4 +244,4 @@ <tbody>
             <td ${this.htmlAttributes({
-      style: 'gutter'
-    })}>
+        style: 'gutter'
+      })}>
               ${this.renderColumn()}
@@ -227,39 +253,40 @@ </td>
     `;
-  }
-
-  renderColumn() {
-    const {
-      children
-    } = this.props;
-    return `
+    }
+  }, {
+    key: "renderColumn",
+    value: function renderColumn() {
+      const {
+        children
+      } = this.props;
+      return `
       <table
         ${this.htmlAttributes({
-      border: '0',
-      cellpadding: '0',
-      cellspacing: '0',
-      role: 'presentation',
-      style: 'table',
-      width: '100%'
-    })}
+        border: '0',
+        cellpadding: '0',
+        cellspacing: '0',
+        role: 'presentation',
+        style: 'table',
+        width: '100%'
+      })}
       >
         <tbody>
           ${this.renderChildren(children, {
-      renderer: component => component.constructor.isRawElement() ? component.render() : `
+        renderer: component => component.constructor.isRawElement() ? component.render() : `
               <tr>
                 <td
                   ${component.htmlAttributes({
-        align: component.getAttribute('align'),
-        'vertical-align': component.getAttribute('vertical-align'),
-        class: component.getAttribute('css-class'),
-        style: {
-          background: component.getAttribute('container-background-color'),
-          'font-size': '0px',
-          padding: component.getAttribute('padding'),
-          'padding-top': component.getAttribute('padding-top'),
-          'padding-right': component.getAttribute('padding-right'),
-          'padding-bottom': component.getAttribute('padding-bottom'),
-          'padding-left': component.getAttribute('padding-left'),
-          'word-break': 'break-word'
-        }
-      })}
+          align: component.getAttribute('align'),
+          'vertical-align': component.getAttribute('vertical-align'),
+          class: component.getAttribute('css-class'),
+          style: {
+            background: component.getAttribute('container-background-color'),
+            'font-size': '0px',
+            padding: component.getAttribute('padding'),
+            'padding-top': component.getAttribute('padding-top'),
+            'padding-right': component.getAttribute('padding-right'),
+            'padding-bottom': component.getAttribute('padding-bottom'),
+            'padding-left': component.getAttribute('padding-left'),
+            'word-break': 'break-word'
+          }
+        })}
                 >
@@ -270,21 +297,22 @@ ${component.render()}
             `
-    })}
+      })}
         </tbody>
       </table>
     `;
-  }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      let classesName = `${this.getColumnClass()} mj-outlook-group-fix`;
 
-  render() {
-    let classesName = `${this.getColumnClass()} mj-outlook-group-fix`;
+      if (this.getAttribute('css-class')) {
+        classesName += ` ${this.getAttribute('css-class')}`;
+      }
 
-    if (this.getAttribute('css-class')) {
-      classesName += ` ${this.getAttribute('css-class')}`;
-    }
-
-    return `
+      return `
       <div
         ${this.htmlAttributes({
-      class: classesName,
-      style: 'div'
-    })}
+        class: classesName,
+        style: 'div'
+      })}
       >
@@ -294,6 +322,7 @@ ${this.hasGutter() ? this.renderGutter() : this.renderColumn()}
     `;
-  }
+    }
+  }]);
+  return MjColumn;
+}(_mjmlCore.BodyComponent);
 
-}
-
 exports.default = MjColumn;
@@ -300,0 +329,0 @@ (0, _defineProperty2.default)(MjColumn, "componentName", 'mj-column');

package.json

 {
   "name": "mjml-column",
   "description": "mjml-column",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "main": "lib/index.js",
@@ -26,3 +26,3 @@ "files": [
     "lodash": "^4.17.15",
-    "mjml-core": "4.8.1"
+    "mjml-core": "4.8.2"
   },
@@ -33,3 +33,3 @@ "devDependencies": {
   },
-  "gitHead": "45507ebde835129ba62671d341e76bc9892552c9"
+  "gitHead": "67cb33b5edd2b1d80436a72c213d2e815a685cd5"
 }

No alert changes

Improved metrics

Total package byte prevSize

15360

increased by11.53%

Lines of code

320

increased by11.11%

Dependency changes

• + Addedmjml-core@4.8.2(transitive)

• + Addedmjml-migrate@4.8.2(transitive)

• + Addedmjml-parser-xml@4.8.2(transitive)

• + Addedmjml-validator@4.8.2(transitive)

• - Removedmjml-core@4.8.1(transitive)

• - Removedmjml-migrate@4.8.1(transitive)

• - Removedmjml-parser-xml@4.8.1(transitive)

• - Removedmjml-validator@4.8.1(transitive)

• Updatedmjml-core@4.8.2