react-show-more-text 1.6.0 → 1.6.2

package/README.md

@@ -1,9 +1,8 @@
-# React Show More Text 1.6.0
+# React Show More Text 1.6.2
 
 [![NPM version][npm-image]][npm-url]
 [![Downloads][downloads-image]][npm-url]
 [![Build status][travis-image]][travis-url]
-[![Dependency status][david-dm-image]][david-dm-url]
 
 The text surrounded by the component will be truncated. Anything surrounded by the component could be evaluated as text. The component react-show-more-text/ShowMoreText is fork of react-show-more/ShowMore, applied improvements, works with React 16.x.x, React 18.x.x added onClick event.
 
@@ -37,7 +36,7 @@ class Foo extends Component {
                 more="Show more"
                 less="Show less"
                 className="content-css"
-                anchorClass="my-anchor-css-class"
+                anchorClass="show-more-less-clickable"
                 onClick={this.executeOnClick}
                 expanded={false}
                 width={280}
@@ -128,7 +127,5 @@ $ npm run storybook --legacy-peer-deps=true
 [npm-url]: https://npmjs.org/package/react-show-more-text
 [downloads-image]: http://img.shields.io/npm/dm/react-show-more-text.svg
 [npm-image]: https://badge.fury.io/js/react-show-more-text.svg
-[travis-url]: https://travis-ci.com/devzonetech/react-show-more-text
-[travis-image]: https://travis-ci.com/devzonetech/react-show-more-text.svg?branch=master
-[david-dm-url]: https://david-dm.org/devzonetech/react-show-more-text
-[david-dm-image]: https://david-dm.org/devzonetech/react-show-more-text.svg
+[travis-url]: https://app.travis-ci.com/github/devzonetech/react-show-more-text
+[travis-image]: https://travis-ci.com/devzonetech/react-show-more-text.svg?branch=master

package/lib/ShowMoreText.css

@@ -0,0 +1,8 @@
+span.show-more-less-clickable {
+    cursor:pointer;
+    text-decoration:underline;
+}
+
+span.show-more-less-clickable:hover{
+    text-decoration:none;
+}

package/lib/ShowMoreText.js

@@ -1,85 +1,56 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = require("prop-types");
-
 var _Truncate = _interopRequireDefault(require("./Truncate"));
-
+require("./ShowMoreText.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 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; }
-
 var ShowMoreText = /*#__PURE__*/function (_Component) {
   _inherits(ShowMoreText, _Component);
-
   var _super = _createSuper(ShowMoreText);
-
   function ShowMoreText(props) {
     var _this;
-
     _classCallCheck(this, ShowMoreText);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "_isMounted", false);
-
     _defineProperty(_assertThisInitialized(_this), "handleTruncate", function (truncated) {
       if (_this._isMounted && truncated !== _this.state.truncated) {
         _this.setState({
           truncated: truncated
         });
-
         if (truncated) {
           _this.truncateRef.onResize();
         }
+        _this.props.onTruncate && _this.props.onTruncate();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "toggleLines", function (event) {
       event.preventDefault();
-
       var _self = _assertThisInitialized(_this);
-
       if (!_self.props.expandByClick) {
         if (_self.props.onClick) {
           _self.props.onClick(_self.state.expanded, event);
         }
-
         return;
       }
-
       if (_this._isMounted) {
         _this.setState({
           expanded: !_this.state.expanded
@@ -90,21 +61,17 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
         });
       }
     });
-
     _this.state = {
       expanded: false,
       truncated: false
     };
     return _this;
   }
-
   _createClass(ShowMoreText, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
-
       var _self = this;
-
       if (this._isMounted) {
         this.setState({
           expanded: _self.props.expanded
@@ -120,27 +87,26 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          children = _this$props.children,
-          more = _this$props.more,
-          less = _this$props.less,
-          lines = _this$props.lines,
-          anchorClass = _this$props.anchorClass,
-          className = _this$props.className,
-          width = _this$props.width,
-          keepNewLines = _this$props.keepNewLines,
-          truncatedEndingComponent = _this$props.truncatedEndingComponent;
+        children = _this$props.children,
+        more = _this$props.more,
+        less = _this$props.less,
+        lines = _this$props.lines,
+        anchorClass = _this$props.anchorClass,
+        className = _this$props.className,
+        width = _this$props.width,
+        keepNewLines = _this$props.keepNewLines,
+        truncatedEndingComponent = _this$props.truncatedEndingComponent,
+        onTruncate = _this$props.onTruncate;
       var _this$state = this.state,
-          expanded = _this$state.expanded,
-          truncated = _this$state.truncated;
+        expanded = _this$state.expanded,
+        truncated = _this$state.truncated;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: className
       }, /*#__PURE__*/_react.default.createElement(_Truncate.default, {
         width: width,
         lines: !expanded && lines,
-        ellipsis: /*#__PURE__*/_react.default.createElement("span", null, truncatedEndingComponent, /*#__PURE__*/_react.default.createElement("a", {
-          href: "",
+        ellipsis: /*#__PURE__*/_react.default.createElement("span", null, truncatedEndingComponent, /*#__PURE__*/_react.default.createElement("span", {
           className: anchorClass,
           onClick: this.toggleLines
         }, more)),
@@ -152,7 +118,6 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
         line = /*#__PURE__*/_react.default.createElement("span", {
           key: i
         }, line);
-
         if (i === arr.length - 1) {
           return line;
         } else {
@@ -160,30 +125,27 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
             key: i + 'br'
           })];
         }
-      }) : children), !truncated && expanded && /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("a", {
-        href: "",
+      }) : children), !truncated && expanded && /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
         className: anchorClass,
         onClick: this.toggleLines
       }, less)));
     }
   }]);
-
   return ShowMoreText;
 }(_react.Component);
-
 _defineProperty(ShowMoreText, "defaultProps", {
   lines: 3,
   more: 'Show more',
   less: 'Show less',
-  anchorClass: '',
+  anchorClass: 'show-more-less-clickable',
   onClick: undefined,
   expanded: false,
   width: 0,
   keepNewLines: false,
   truncatedEndingComponent: '... ',
-  expandByClick: true
+  expandByClick: true,
+  onTruncate: undefined
 });
-
 _defineProperty(ShowMoreText, "propTypes", {
   children: _propTypes.PropTypes.node,
   lines: _propTypes.PropTypes.number,
@@ -196,8 +158,8 @@ _defineProperty(ShowMoreText, "propTypes", {
   width: _propTypes.PropTypes.number,
   keepNewLines: _propTypes.PropTypes.bool,
   truncatedEndingComponent: _propTypes.PropTypes.node,
-  expandByClick: _propTypes.PropTypes.bool
+  expandByClick: _propTypes.PropTypes.bool,
+  onTruncate: _propTypes.PropTypes.func
 });
-
 var _default = ShowMoreText;
 exports.default = _default;

package/lib/Truncate.js

@@ -1,90 +1,57 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _excluded = ["children", "ellipsis", "lines"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 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; }
-
 var Truncate = /*#__PURE__*/function (_React$Component) {
   _inherits(Truncate, _React$Component);
-
   var _super = _createSuper(Truncate);
-
   function Truncate() {
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _classCallCheck(this, Truncate);
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "state", {});
-
     _defineProperty(_assertThisInitialized(_this), "extractReplaceLinksKeys", function (content) {
       var _self = _assertThisInitialized(_this),
-          i = 0;
-
+        i = 0;
       _this.replacedLinks = [];
       content.replace(/(<a[\s]+([^>]+)>((?:.(?!\<\/a\>))*.)<\/a>)/g, function () {
         var item = Array.prototype.slice.call(arguments, 1, 4);
         item.key = '[' + '@'.repeat(item[2].length - 1) + '=' + i++ + ']';
-
         _self.replacedLinks.push(item);
-
         content = content.replace(item[0], item.key);
       });
       return content;
     });
-
     _defineProperty(_assertThisInitialized(_this), "restoreReplacedLinks", function (content) {
       _this.replacedLinks.forEach(function (item) {
         content = content.replace(item.key, item[0]);
       });
-
       return _this.createMarkup(content);
     });
-
     _defineProperty(_assertThisInitialized(_this), "innerText", function (node) {
       var div = document.createElement('div');
       var contentKey = 'innerText' in window.HTMLElement.prototype ? 'innerText' : 'textContent';
@@ -93,72 +60,61 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
       var text = div[contentKey];
       var test = document.createElement('div');
       test.innerHTML = 'foo<br/>bar';
-
       if (test[contentKey].replace(/\r\n|\r/g, '\n') !== 'foo\nbar') {
         div.innerHTML = div.innerHTML.replace(/<br.*?[\/]?>/gi, '\n');
         text = div[contentKey];
       }
-
       return text;
     });
-
     _defineProperty(_assertThisInitialized(_this), "onResize", function () {
       _this.calcTargetWidth();
     });
-
     _defineProperty(_assertThisInitialized(_this), "onTruncate", function (didTruncate) {
       var onTruncate = _this.props.onTruncate;
-
       if (typeof onTruncate === 'function') {
         _this.timeout = window.requestAnimationFrame(function () {
           onTruncate(didTruncate);
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "calcTargetWidth", function (callback) {
       var _assertThisInitialize = _assertThisInitialized(_this),
-          target = _assertThisInitialize.elements.target,
-          calcTargetWidth = _assertThisInitialize.calcTargetWidth,
-          canvasContext = _assertThisInitialize.canvasContext,
-          width = _assertThisInitialize.props.width; // Calculation is no longer relevant, since node has been removed
-
+        target = _assertThisInitialize.elements.target,
+        calcTargetWidth = _assertThisInitialize.calcTargetWidth,
+        canvasContext = _assertThisInitialize.canvasContext,
+        width = _assertThisInitialize.props.width;
 
+      // Calculation is no longer relevant, since node has been removed
       if (!target) {
         return;
       }
+      var targetWidth = width ||
+      // Floor the result to deal with browser subpixel precision
+      Math.floor(target.parentNode.getBoundingClientRect().width);
 
-      var targetWidth = width || // Floor the result to deal with browser subpixel precision
-      Math.floor(target.parentNode.getBoundingClientRect().width); // Delay calculation until parent node is inserted to the document
+      // Delay calculation until parent node is inserted to the document
       // Mounting order in React is ChildComponent, ParentComponent
-
       if (!targetWidth) {
         return window.requestAnimationFrame(function () {
           return calcTargetWidth(callback);
         });
       }
-
       var style = window.getComputedStyle(target);
       var font = [style['font-weight'], style['font-style'], style['font-size'], style['font-family']].join(' ');
       canvasContext.font = font;
-
       _this.setState({
         targetWidth: targetWidth
       }, callback);
     });
-
     _defineProperty(_assertThisInitialized(_this), "measureWidth", function (text) {
       return _this.canvasContext.measureText(text).width;
     });
-
     _defineProperty(_assertThisInitialized(_this), "ellipsisWidth", function (node) {
       return node.offsetWidth;
     });
-
     _defineProperty(_assertThisInitialized(_this), "trimRight", function (text) {
       return text.replace(/\s+$/, '');
     });
-
     _defineProperty(_assertThisInitialized(_this), "createMarkup", function (str) {
       return /*#__PURE__*/_react.default.createElement("span", {
         dangerouslySetInnerHTML: {
@@ -166,43 +122,38 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "getLines", function () {
       var _assertThisInitialize2 = _assertThisInitialized(_this),
-          elements = _assertThisInitialize2.elements,
-          _assertThisInitialize3 = _assertThisInitialize2.props,
-          numLines = _assertThisInitialize3.lines,
-          ellipsis = _assertThisInitialize3.ellipsis,
-          trimWhitespace = _assertThisInitialize3.trimWhitespace,
-          targetWidth = _assertThisInitialize2.state.targetWidth,
-          innerText = _assertThisInitialize2.innerText,
-          measureWidth = _assertThisInitialize2.measureWidth,
-          onTruncate = _assertThisInitialize2.onTruncate,
-          trimRight = _assertThisInitialize2.trimRight,
-          renderLine = _assertThisInitialize2.renderLine,
-          restoreReplacedLinks = _assertThisInitialize2.restoreReplacedLinks;
-
+        elements = _assertThisInitialize2.elements,
+        _assertThisInitialize3 = _assertThisInitialize2.props,
+        numLines = _assertThisInitialize3.lines,
+        ellipsis = _assertThisInitialize3.ellipsis,
+        trimWhitespace = _assertThisInitialize3.trimWhitespace,
+        targetWidth = _assertThisInitialize2.state.targetWidth,
+        innerText = _assertThisInitialize2.innerText,
+        measureWidth = _assertThisInitialize2.measureWidth,
+        onTruncate = _assertThisInitialize2.onTruncate,
+        trimRight = _assertThisInitialize2.trimRight,
+        renderLine = _assertThisInitialize2.renderLine,
+        restoreReplacedLinks = _assertThisInitialize2.restoreReplacedLinks;
       var lines = [];
       var text = innerText(elements.text);
       var textLines = text.split('\n').map(function (line) {
         return line.split(' ');
       });
       var didTruncate = true;
-
       var ellipsisWidth = _this.ellipsisWidth(_this.elements.ellipsis);
-
       for (var line = 1; line <= numLines; line++) {
-        var textWords = textLines[0]; // Handle newline
+        var textWords = textLines[0];
 
+        // Handle newline
         if (textWords.length === 0) {
           lines.push();
           textLines.shift();
           line--;
           continue;
         }
-
         var resultLine = textWords.join(' ');
-
         if (measureWidth(resultLine) <= targetWidth) {
           if (textLines.length === 1) {
             // Line is end of text and fits without truncating
@@ -212,39 +163,33 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
             break;
           }
         }
-
         if (line === numLines) {
           // Binary search determining the longest possible line inluding truncate string
           var textRest = textWords.join(' ');
           var lower = 0;
           var upper = textRest.length - 1;
-
           while (lower <= upper) {
             var middle = Math.floor((lower + upper) / 2);
             var testLine = textRest.slice(0, middle + 1);
-
             if (measureWidth(testLine) + ellipsisWidth <= targetWidth) {
               lower = middle + 1;
             } else {
               upper = middle - 1;
             }
           }
-
           var lastLineText = textRest.slice(0, lower);
-
           if (trimWhitespace) {
-            lastLineText = trimRight(lastLineText); // Remove blank lines from the end of text
+            lastLineText = trimRight(lastLineText);
 
+            // Remove blank lines from the end of text
             while (!lastLineText.length && lines.length) {
               var prevLine = lines.pop();
               lastLineText = trimRight(prevLine);
             }
           }
-
           if (lastLineText.substr(lastLineText.length - 2) === '][') {
             lastLineText = lastLineText.substring(0, lastLineText.length - 1);
           }
-
           ;
           lastLineText = lastLineText.replace(/\[@+$/, '');
           lastLineText = restoreReplacedLinks(lastLineText);
@@ -252,40 +197,32 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
         } else {
           // Binary search determining when the line breaks
           var _lower = 0;
-
           var _upper = textWords.length - 1;
-
           while (_lower <= _upper) {
             var _middle = Math.floor((_lower + _upper) / 2);
-
             var _testLine = textWords.slice(0, _middle + 1).join(' ');
-
             if (measureWidth(_testLine) <= targetWidth) {
               _lower = _middle + 1;
             } else {
               _upper = _middle - 1;
             }
-          } // The first word of this line is too long to fit it
-
+          }
 
+          // The first word of this line is too long to fit it
           if (_lower === 0) {
             // Jump to processing of last line
             line = numLines - 1;
             continue;
           }
-
           resultLine = textWords.slice(0, _lower).join(' ');
           resultLine = restoreReplacedLinks(resultLine);
           textLines[0].splice(0, _lower);
         }
-
         lines.push(resultLine);
       }
-
       onTruncate(didTruncate);
       return lines.map(renderLine);
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderLine", function (line, i, arr) {
       if (i === arr.length - 1) {
         return /*#__PURE__*/_react.default.createElement("span", {
@@ -295,7 +232,6 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
         var br = /*#__PURE__*/_react.default.createElement("br", {
           key: i + 'br'
         });
-
         if (line) {
           return [/*#__PURE__*/_react.default.createElement("span", {
             key: i
@@ -305,7 +241,6 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
         }
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "styles", {
       ellipsis: {
         position: 'fixed',
@@ -314,23 +249,21 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
         left: 0
       }
     });
-
     _this.elements = {};
     _this.replacedLinks = [];
     return _this;
   }
-
   _createClass(Truncate, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var text = this.elements.text,
-          calcTargetWidth = this.calcTargetWidth,
-          onResize = this.onResize;
+        calcTargetWidth = this.calcTargetWidth,
+        onResize = this.onResize;
       var canvas = document.createElement('canvas');
       this.canvasContext = canvas.getContext('2d');
       calcTargetWidth(function () {
         // Node not needed in document tree to read its content
-        if (text) {
+        if (text && text.parentNode) {
           text.parentNode.removeChild(text);
         }
       });
@@ -342,9 +275,9 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
       // Render was based on outdated refs and needs to be rerun
       if (this.props.children !== prevProps.children) {
         this.forceUpdate();
-      } // If the width prop has changed, recalculate size of contents
-
+      }
 
+      // If the width prop has changed, recalculate size of contents
       if (this.props.width !== prevProps.width) {
         this.calcTargetWidth();
       }
@@ -353,9 +286,11 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var ellipsis = this.elements.ellipsis,
-          onResize = this.onResize,
-          timeout = this.timeout;
-      ellipsis.parentNode.removeChild(ellipsis);
+        onResize = this.onResize,
+        timeout = this.timeout;
+      if (ellipsis.parentNode) {
+        ellipsis.parentNode.removeChild(ellipsis);
+      }
       window.removeEventListener('resize', onResize);
       window.cancelAnimationFrame(timeout);
     }
@@ -363,20 +298,17 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var target = this.elements.target,
-          _this$props = this.props,
-          children = _this$props.children,
-          ellipsis = _this$props.ellipsis,
-          lines = _this$props.lines,
-          spanProps = _objectWithoutProperties(_this$props, _excluded),
-          targetWidth = this.state.targetWidth,
-          getLines = this.getLines,
-          onTruncate = this.onTruncate;
-
+        _this$props = this.props,
+        children = _this$props.children,
+        ellipsis = _this$props.ellipsis,
+        lines = _this$props.lines,
+        spanProps = _objectWithoutProperties(_this$props, _excluded),
+        targetWidth = this.state.targetWidth,
+        getLines = this.getLines,
+        onTruncate = this.onTruncate;
       var text;
       var mounted = !!(target && targetWidth);
-
       if (typeof window !== 'undefined' && mounted) {
         if (lines > 0) {
           text = getLines();
@@ -385,7 +317,6 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
           onTruncate(false);
         }
       }
-
       delete spanProps.onTruncate;
       delete spanProps.trimWhitespace;
       return /*#__PURE__*/_react.default.createElement("span", _extends({}, spanProps, {
@@ -404,12 +335,9 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
       }, ellipsis));
     }
   }]);
-
   return Truncate;
 }(_react.default.Component);
-
 exports.default = Truncate;
-
 _defineProperty(Truncate, "propTypes", {
   children: _propTypes.default.node,
   ellipsis: _propTypes.default.node,
@@ -418,7 +346,6 @@ _defineProperty(Truncate, "propTypes", {
   width: _propTypes.default.number,
   onTruncate: _propTypes.default.func
 });
-
 _defineProperty(Truncate, "defaultProps", {
   children: '',
   ellipsis: '…',
@@ -426,5 +353,4 @@ _defineProperty(Truncate, "defaultProps", {
   trimWhitespace: false,
   width: 0
 });
-
 ;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-show-more-text",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "The text surrounded by the component will be truncated. Anything surrounded by the component could be evaluated as text. The component react-show-more-text/ShowMoreText is fork of react-show-more/ShowMore, applied improvements, works with React 16.x.x, added onClick event.",
   "main": "lib/ShowMoreText.js",
   "files": [
     "lib"
   ],
   "scripts": {
-    "compile": "./node_modules/.bin/babel src/ShowMoreText.js src/Truncate.js --out-dir lib",
+    "compile": "./node_modules/.bin/babel src/ShowMoreText.js src/Truncate.js --out-dir lib && cp -R src/ShowMoreText.css lib/",
     "compile:watch": "onchange \"src/**/*.js\" -- npm run compile --silent --source-maps",
     "coverage": "nyc npm test && nyc report --reporter=text-lcov",
     "lint": "eslint .",
@@ -49,12 +49,12 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.1",
     "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-interactions": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
     "@storybook/builder-webpack4": "^6.5.12",
     "@storybook/manager-webpack4": "^6.5.12",
-    "@storybook/react": "^6.5.12",
+    "@storybook/react": "^6.1.21",
     "@storybook/testing-library": "^0.0.13",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
@@ -64,7 +64,7 @@
     "coveralls": "^3.0.7",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
-    "eslint": "^4.14.0",
+    "eslint": "^8.24.0",
     "eslint-config-onelint": "^3.0.0",
     "eslint-config-onelint-react": "^2.0.1",
     "eslint-config-react-app": "^6.0.0",
@@ -74,8 +74,9 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^25.3.0",
-    "jest-enzyme": "^7.1.2",
+    "jest": "^29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
+    "jest-enzyme": "^4.2.0",
     "nyc": "^14.1.1",
     "onchange": "^6.1.1",
     "react": "^16.14.0",