react-line-clamp - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

Clamp.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
@@ -25,145 +25,135 @@
 
+var _requestAnimationFrame_ = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : function (cb) {
+    return cb();
+};
+
 var Clamp = function (_React$Component) {
-  _inherits(Clamp, _React$Component);
+    _inherits(Clamp, _React$Component);
 
-  function Clamp(props) {
-    _classCallCheck(this, Clamp);
+    function Clamp(props) {
+        _classCallCheck(this, Clamp);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Clamp).call(this, props));
+        var _this = _possibleConstructorReturn(this, (Clamp.__proto__ || Object.getPrototypeOf(Clamp)).call(this, props));
 
-    _this.adjustIntervalHandler = null;
+        _this.adjustIntervalHandler = null;
 
 
-    _this.state = {
-      context: _this.props.children,
-      ellipsis: _this.props.ellipsis
-    };
-
-    _this.option = (0, _merge2.default)({
-      autoAdjustInterval: 200
-    }, _this.props.option);
-    return _this;
-  }
-
-  _createClass(Clamp, [{
-    key: '_getWrapRect_',
-    value: function _getWrapRect_() {
-      return this.refs.wrap.getBoundingClientRect();
+        _this.option = (0, _merge2.default)({
+            autoAdjustInterval: 300
+        }, _this.props.option);
+        return _this;
     }
-  }, {
-    key: '_getContextRect_',
-    value: function _getContextRect_() {
-      return this.refs.context.getBoundingClientRect();
-    }
-  }, {
-    key: 'adjustContext',
-    value: function adjustContext() {
-      var _this2 = this;
 
-      this.refs.context.innerHTML = this.refs.raw.innerHTML;
+    _createClass(Clamp, [{
+        key: '_getWrapRect_',
+        value: function _getWrapRect_() {
+            return this.refs.wrap.getBoundingClientRect();
+        }
+    }, {
+        key: '_getContextRect_',
+        value: function _getContextRect_() {
+            return this.refs.context.getBoundingClientRect();
+        }
+    }, {
+        key: 'adjustContext',
+        value: function adjustContext() {
+            var _this2 = this;
 
-      var heightOfWrap = this._getWrapRect_().height;
-      var heightOfContext = this._getContextRect_().height;
+            this.refs.context.innerHTML = this.refs.text.innerHTML;
 
-      var ellipsis = this.refs.ellipsis.innerHTML;
-      var text = this.refs.raw.innerText;
+            var heightOfWrap = this._getWrapRect_().height;
+            var heightOfContext = this._getContextRect_().height;
 
-      var low = 0,
-          high = text.length,
-          mid = high;
+            if (heightOfContext > heightOfWrap) {
+                (function () {
+                    var text = _this2.refs.raw.innerText;
+                    var ellipsis = _this2.refs.ellipsis.innerHTML;
 
-      // First time, check the context height if it higher than wrap, enter adjusting
-      if (heightOfContext > heightOfWrap) {
-        (function () {
-          // Get line-height
-          _this2.refs.context.innerHTML = 'A';
-          var lineHeight = _this2.refs.context.getBoundingClientRect().height;
+                    var low = 0,
+                        high = text.length,
+                        mid = void 0;
+                    var count = 0;
 
-          mid = high * heightOfWrap / heightOfContext | 0;
-          var _text = text.slice(0, mid);
+                    var clamp = function clamp() {
+                        if (count > 100) return;
+                        count++;
 
-          var upper = 100;
-          var count = 0;
+                        mid = (low + high) / 2 | 0;
+                        var _text = text.slice(0, mid);
+                        _this2.refs.context.innerHTML = _text + ellipsis;
 
-          var clamp = function clamp() {
-            if (count > upper) return;
-            count++;
+                        var contextHeight = _this2._getContextRect_().height;
+                        var wrapHeight = _this2._getWrapRect_().height;
 
-            _text = text.slice(0, mid);
-            _this2.refs.context.innerHTML = _text + ellipsis;
+                        if (contextHeight > wrapHeight) {
+                            high = mid - 1;
+                        } else {
+                            low = mid + 1;
+                        }
 
-            var testHeight = _this2._getContextRect_().height;
-            var wrapHeight = _this2._getWrapRect_().height;
+                        if (low <= high) {
+                            _requestAnimationFrame_(clamp);
+                        } else {
+                            _this2.refs.context.innerHTML = _text.slice(0, mid - 1) + ellipsis;
+                        }
+                    };
 
-            if (testHeight > wrapHeight) {
-              high = mid - 1;
-            } else {
-              low = mid + 1;
+                    clamp();
+                })();
             }
+        }
+    }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            var _this3 = this;
 
-            if (low <= high) {
-              mid = (low + high) / 2 | 0;
-              clamp();
-            }
-          };
+            this.adjustContext();
 
-          clamp();
-          _this2.refs.context.innerHTML = _text.slice(0, mid - 1) + ellipsis;
-        })();
-      }
-    }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _this3 = this;
+            if (this.option.autoAdjustInterval > 0) {
+                (function () {
+                    var prevWidthOfWrap = null;
+                    _this3.adjustIntervalHandler = setInterval(function () {
+                        var widthOfWrap = _this3._getWrapRect_().width;
 
-      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;
+                        if (prevWidthOfWrap !== widthOfWrap) {
+                            _this3.adjustContext();
+                            prevWidthOfWrap = widthOfWrap;
+                        }
+                    }, _this3.option.autoAdjustInterval);
+                })();
             }
-          }, _this3.option.autoAdjustInterval);
-        })();
-      }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      clearInterval(this.adjustIntervalHandler);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        { className: this.props.className, ref: 'wrap' },
-        _react2.default.createElement('div', { ref: 'context' }),
-        _react2.default.createElement(
-          'div',
-          { ref: 'raw', style: { opacity: 0 } },
-          _react2.default.createElement(
-            'span',
-            { ref: 'text' },
-            this.props.children
-          ),
-          _react2.default.createElement(
-            'span',
-            { ref: 'ellipsis' },
-            this.props.ellipsis
-          )
-        )
-      );
-    }
-  }]);
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            clearInterval(this.adjustIntervalHandler);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            return _react2.default.createElement(
+                'div',
+                { className: this.props.className, ref: 'wrap', style: this.props.style },
+                _react2.default.createElement('div', { ref: 'context' }),
+                _react2.default.createElement(
+                    'div',
+                    { ref: 'raw', style: { opacity: 0 } },
+                    _react2.default.createElement(
+                        'span',
+                        { ref: 'text' },
+                        this.props.children
+                    ),
+                    _react2.default.createElement(
+                        'span',
+                        { ref: 'ellipsis' },
+                        this.props.ellipsis
+                    )
+                )
+            );
+        }
+    }]);
 
-  return Clamp;
+    return Clamp;
 }(_react2.default.Component);
 
 exports.default = Clamp;

package.json

 {
   "name": "react-line-clamp",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A react component which can help you implememt line-clamp automatically",
@@ -27,20 +27,20 @@ "main": "Clamp.js",
   "devDependencies": {
-    "babel-cli": "^6.8.0",
-    "babel-core": "^6.8.0",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.8.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-register": "^6.26.0",
     "gulp": "^3.9.1",
-    "gulp-sass": "^2.3.1",
-    "gulp-util": "^3.0.7",
-    "react-dom": "^15.0.2",
-    "webpack": "^1.13.0",
-    "webpack-stream": "^3.2.0",
-    "lodash": "^4.11.2"
+    "gulp-sass": "^3.1.0",
+    "gulp-util": "^3.0.8",
+    "lodash": "^4.17.4",
+    "react-dom": "^16.0.0",
+    "webpack": "^3.8.1",
+    "webpack-stream": "^4.0.0"
   },
   "dependencies": {
-    "react": "^15.0.2"
+    "react": "^16.0.0"
   }
 }

README.md

@@ -7,3 +7,3 @@ # [react-clamp](https://github.com/oglen/react-clamp)
 
-* Install with [npm](https://npmjs.org): `npm install react-clamp`
+* Install with [npm](https://npmjs.org): `npm install react-line-clamp`
 * Clone the repo: `https://github.com/oglen/react-clamp`
@@ -15,3 +15,3 @@
 
-        import Clamp from 'react-clamp';
+        import Clamp from 'react-line-clamp';
 
@@ -61,5 +61,5 @@ 2. Use react-clamp in your component:
 
-Enter this project fold and execute:
+Enter the project fold and execute:
 
-    npm instasll
+    npm install
     gulp
@@ -66,0 +66,0 @@

src/demo/main.js

@@ -28,9 +28,26 @@ import React from 'react';
         <div className="column">
-          <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.
+          <Clamp className="card" option={{}} ref="bCard">
+            Brisbane’s Waterfront Place and theBrisbane’s Waterfront Place and theBrisbane’s Waterfront Place and theBrisbane’s Waterfront Place and theBrisbane’s Waterfront Place and theBrisbane’s Waterfront Place and the
           </Clamp>
         </div>
         <div className="column">
-          <Clamp className="card" ellipsis="..." option={{}} ref="cCard">
+          <Clamp className="card" style={{height: "150px"}} ellipsis={<span>&nbsp;<a href="#">Read More</a></span>} 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.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
+            “Waterfront Place complements our ownership of 480 Queen Street in Brisbane and reinforces our role as a workspace partner for our customers.”
           </Clamp>
@@ -37,0 +54,0 @@ </div>

src/lib/Clamp.js

 import React from 'react';
 import merge from 'lodash/merge';
 
-export default class Clamp extends React.Component {
+const _requestAnimationFrame_ = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : cb => cb();
 
-  adjustIntervalHandler = null;
+class Clamp extends React.Component {
 
-  constructor(props) {
-    super(props);
+    adjustIntervalHandler = null;
 
-    this.state = {
-      context: this.props.children,
-      ellipsis: this.props.ellipsis
-    };
+    constructor(props) {
+        super(props);
 
-    this.option = merge({
-      autoAdjustInterval: 200
-    }, this.props.option);
-  }
+        this.option = merge({
+            autoAdjustInterval: 300
+        }, this.props.option);
+    }
 
-  _getWrapRect_() {
-    return this.refs.wrap.getBoundingClientRect();
-  }
+    _getWrapRect_() {
+        return this.refs.wrap.getBoundingClientRect();
+    }
 
-  _getContextRect_() {
-    return this.refs.context.getBoundingClientRect();
-  }
+    _getContextRect_() {
+        return this.refs.context.getBoundingClientRect();
+    }
 
-  adjustContext() {
+    adjustContext() {
+        this.refs.context.innerHTML = this.refs.text.innerHTML;
 
-    this.refs.context.innerHTML = this.refs.raw.innerHTML;
+        const heightOfWrap = this._getWrapRect_().height;
+        const heightOfContext = this._getContextRect_().height;
 
-    const heightOfWrap = this._getWrapRect_().height;
-    const heightOfContext = this._getContextRect_().height;
+        if (heightOfContext > heightOfWrap) {
+            const text = this.refs.raw.innerText;
+            const ellipsis = this.refs.ellipsis.innerHTML;
 
-    const ellipsis = this.refs.ellipsis.innerHTML;
-    const text = this.refs.raw.innerText;
+            let low = 0, high = text.length, mid;
+            let count = 0;
 
-    let low = 0, high = text.length, mid = high;
+            const clamp = () => {
+                if (count > 100) return;
+                count++;
 
-    // First time, check the context height if it higher than wrap, enter adjusting
-    if (heightOfContext > heightOfWrap) {
-      // Get line-height
-      this.refs.context.innerHTML = 'A';
-      const lineHeight = this.refs.context.getBoundingClientRect().height;
+                mid = (low + high) / 2 | 0;
+                const _text = text.slice(0, mid);
+                this.refs.context.innerHTML = _text + ellipsis;
 
-      mid = high * heightOfWrap / heightOfContext | 0;
-      let _text = text.slice(0, mid);
+                const contextHeight = this._getContextRect_().height;
+                const wrapHeight = this._getWrapRect_().height;
 
-      const upper = 100;
-      let count = 0;
+                if (contextHeight > wrapHeight) {
+                    high = mid - 1;
+                } else {
+                    low = mid + 1;
+                }
 
-      const clamp = () => {
-        if (count > upper) return;
-        count++;
+                if (low <= high) {
+                    _requestAnimationFrame_(clamp);
+                } else {
+                    this.refs.context.innerHTML = _text.slice(0, mid - 1) + ellipsis;
+                }
+            };
 
-        _text = text.slice(0, mid);
-        this.refs.context.innerHTML = _text + ellipsis;
-
-        const testHeight = this._getContextRect_().height;
-        const wrapHeight = this._getWrapRect_().height;
-
-        if (testHeight > wrapHeight) {
-          high = mid - 1;
-        } else {
-          low = mid + 1;
+            clamp();
         }
+    }
 
-        if (low <= high) {
-          mid = (low + high) / 2 | 0;
-          clamp();
-        }
-      };
+    componentDidMount() {
+        this.adjustContext();
 
-      clamp();
-      this.refs.context.innerHTML = _text.slice(0, mid - 1) + ellipsis;
-    }
-  }
+        if (this.option.autoAdjustInterval > 0) {
+            let prevWidthOfWrap = null;
+            this.adjustIntervalHandler = setInterval(() => {
+                const widthOfWrap = this._getWrapRect_().width;
 
-  componentDidMount() {
-    this.adjustContext();
+                if (prevWidthOfWrap !== widthOfWrap) {
+                    this.adjustContext();
+                    prevWidthOfWrap = widthOfWrap;
+                }
 
-    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);
         }
+    }
 
-      }, this.option.autoAdjustInterval);
+    componentWillUnmount() {
+        clearInterval(this.adjustIntervalHandler);
     }
-  }
 
-  componentWillUnmount() {
-    clearInterval(this.adjustIntervalHandler);
-  }
+    render() {
+        return <div className={this.props.className} ref="wrap" style={this.props.style}>
+            <div ref="context"></div>
+            <div ref="raw" style={{opacity: 0}}>
+                <span ref="text">{this.props.children}</span>
+                <span ref="ellipsis">{this.props.ellipsis}</span>
+            </div>
+        </div>
+    }
+}
 
-  render() {
-    return <div className={this.props.className} ref="wrap">
-      <div ref="context"></div>
-      <div ref="raw" style={{opacity: 0}}>
-        <span ref="text">{this.props.children}</span>
-        <span ref="ellipsis">{this.props.ellipsis}</span>
-      </div>
-    </div>
-  }
-}
+export default Clamp;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

168082

increased by847.47%

Number of package files

11

increased by10%

Lines of code

327

increased by0.93%

Dependency changes

• + Addedreact@16.14.0(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedreact@^16.0.0