react-line-clamp - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

Clamp.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,2 +34,5 @@
 
+    _this.adjustIntervalHandler = null;
+
+
     _this.state = {
@@ -35,2 +42,6 @@ context: _this.props.children,
     };
+
+    _this.option = (0, _merge2.default)({
+      autoAdjustInterval: 200
+    }, _this.props.option);
     return _this;
@@ -109,5 +120,26 @@ }
     value: function componentDidMount() {
+      var _this3 = this;
+
       this.adjustContext();
+
+      if (this.option.autoAdjustInterval > 0) {
+        (function () {
+          var prevWidthOfWrap = null;
+          _this3.adjustIntervalHandler = setInterval(function () {
+            var widthOfWrap = _this3._getWrapRect_().width;
+
+            if (prevWidthOfWrap !== widthOfWrap) {
+              _this3.adjustContext();
+              prevWidthOfWrap = widthOfWrap;
+            }
+          }, _this3.option.autoAdjustInterval);
+        })();
+      }
     }
   }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      clearInterval(this.adjustIntervalHandler);
+    }
+  }, {
     key: 'render',
@@ -114,0 +146,0 @@ value: function render() {

package.json

 {
   "name": "react-line-clamp",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A react component which can help you implememt line-clamp automatically",
@@ -5,0 +5,0 @@ "main": "LineClamp.js",

README.md

@@ -23,4 +23,2 @@ # [react-clamp](https://github.com/oglen/react-clamp)
                     this.refs.aCard.adjustContext();
-                    this.refs.bCard.adjustContext();
-                    this.refs.cCard.adjustContext();
                 });
@@ -33,3 +31,3 @@ }
                         <div className="column">
-                            <Clamp className="card" ellipsis="..." ref="aCard">
+                            <Clamp className="card" ellipsis="..." ref="aCard" option={{autoAdjustInterval: 0}} >
                             Brisbane’s Waterfront Place and the Eagle Street Pier retail complex were snapped up by property giant Dexus Property Group and Dexus Wholesale Property Fund for a staggering $635 million.
@@ -49,2 +47,4 @@ </Clamp>
         }
+    In default, the option is {autoAdjustInterval: 200}, it will ensure adjusting is automatic.
+
 3. And set the card style:
@@ -51,0 +51,0 @@

src/demo/main.js

@@ -16,4 +16,2 @@ import React from 'react';
       this.refs.aCard.adjustContext();
-      this.refs.bCard.adjustContext();
-      this.refs.cCard.adjustContext();
     }, 300));
@@ -26,3 +24,3 @@ }
         <div className="column">
-          <Clamp className="card" ellipsis="..." ref="aCard">
+          <Clamp className="card" ellipsis="..." option={{autoAdjustInterval: 0}} ref="aCard">
             Some of Australia’s largest waterfront office buildings are changing hands, with Melbourne’s South Wharf Tower up for sale and a Brisbane building fetching one of the highest prices for an office complex in the past
@@ -32,3 +30,3 @@ </Clamp>
         <div className="column">
-          <Clamp className="card" ellipsis={<span>&nbsp;<a href="#">Read More</a></span>} ref="bCard">
+          <Clamp className="card" ellipsis={<span>&nbsp;<a href="#">Read More</a></span>} option={{}} ref="bCard">
             Brisbane’s Waterfront Place and the Eagle Street Pier retail complex were snapped up by property giant Dexus Property Group and Dexus Wholesale Property Fund for a staggering $635 million.
@@ -38,3 +36,3 @@ </Clamp>
         <div className="column">
-          <Clamp className="card" ellipsis=">" ref="cCard">
+          <Clamp className="card" ellipsis="..." option={{}} ref="cCard">
             “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
@@ -41,0 +39,0 @@ </Clamp>

src/lib/Clamp.js

 import React from 'react';
+import merge from 'lodash/merge';
 
 export default class Clamp extends React.Component {
 
+  adjustIntervalHandler = null;
+
   constructor(props) {
@@ -12,2 +15,6 @@ super(props);
     };
+
+    this.option = merge({
+      autoAdjustInterval: 200
+    }, this.props.option);
   }
@@ -76,4 +83,21 @@
     this.adjustContext();
+
+    if (this.option.autoAdjustInterval > 0) {
+      let prevWidthOfWrap = null;
+      this.adjustIntervalHandler = setInterval(() => {
+        const widthOfWrap = this._getWrapRect_().width;
+
+        if (prevWidthOfWrap !== widthOfWrap) {
+          this.adjustContext();
+          prevWidthOfWrap = widthOfWrap;
+        }
+
+      }, this.option.autoAdjustInterval);
+    }
   }
 
+  componentWillUnmount() {
+    clearInterval(this.adjustIntervalHandler);
+  }
+
   render() {
@@ -80,0 +104,0 @@ return <div className={this.props.className} ref="wrap">

No alert changes

Improved metrics

Total package byte prevSize

17644

increased by9.01%

Lines of code

324

increased by14.08%

No dependency changes