react-show-more-text 1.6.2 → 1.7.0

package/README.md

@@ -1,10 +1,10 @@
-# React Show More Text 1.6.2
+# React Show More Text 1.7.0
 
 [![NPM version][npm-image]][npm-url]
 [![Downloads][downloads-image]][npm-url]
 [![Build status][travis-image]][travis-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.
+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, added onClick event, works with React 16.x.x, React 18.x.x, Next.Js 13.3.x and upper.
 
 ## Demo
 
@@ -83,7 +83,7 @@ class Foo extends Component {
 | more                     | string, React node       | 'Show more' | The text to display in the anchor element to show more.                                                                                                       | `'Show more'`, `<span>Show more</span>`                                                                                       |
 | less                     | string, React node       | 'Show less' | The text to display in the anchor element to show less.                                                                                                       | `'Show less'`, `<span>Show less</span>`                                                                                       |
 | className                | string                   | ''          | Class name(s) to add on component content wrapper div.                                                                                                        | `'wrapper-class'`, `'wrapper-class-1 wrapper-class-2'`                                                                        |
-| anchorClass              | string                   | ''          | Class name(s) to add to the anchor elements.                                                                                                                  | `'my-anchor-class'`, `'class-1 class-2'`                                                                                      |
+| anchorClass              | string                   | 'show-more-less-clickable'          | Class name(s) to add to the anchor elements. Should be the name of a css class defined globally by you.                                                                                                                  | `'my-anchor-class'`, `'class-1 class-2'`                                                                                      |
 | onClick                  | Function                 |             | Function executed on click on 'Show more' or 'Show less'                                                                                                      | `onClick={this.executeOnClick}`                                                                                               |
 | expanded                 | boolean                  | 'false'     | Control the text to be shown as expanded                                                                                                                      | `expanded={true}`                                                                                                             |
 | expandByClick            | boolean                  | 'true'      | Cancel the default anchor click expand behavior                                                                                                               | `expandByClick={false}`                                                                                                       |

package/lib/ShowMoreText.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -8,141 +7,116 @@ 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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _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
+class ShowMoreText extends _react.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "_isMounted", false);
+    _defineProperty(this, "handleTruncate", truncated => {
+      if (this._isMounted && truncated !== this.state.truncated) {
+        this.setState({
+          truncated
         });
         if (truncated) {
-          _this.truncateRef.onResize();
+          this.truncateRef.onResize();
         }
-        _this.props.onTruncate && _this.props.onTruncate();
+        this.props.onTruncate && this.props.onTruncate();
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "toggleLines", function (event) {
+    _defineProperty(this, "toggleLines", event => {
       event.preventDefault();
-      var _self = _assertThisInitialized(_this);
+      var _self = 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
-        }, function () {
+      if (this._isMounted) {
+        this.setState({
+          expanded: !this.state.expanded
+        }, () => {
           if (_self.props.onClick) {
             _self.props.onClick(_self.state.expanded, event);
           }
         });
       }
     });
-    _this.state = {
+    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
-        });
-      }
+  componentDidMount() {
+    this._isMounted = true;
+    var _self = this;
+    if (this._isMounted) {
+      this.setState({
+        expanded: _self.props.expanded
+      });
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._isMounted = false;
-    }
-  }, {
-    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,
-        onTruncate = _this$props.onTruncate;
-      var _this$state = this.state,
-        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("span", {
-          className: anchorClass,
-          onClick: this.toggleLines
-        }, more)),
-        onTruncate: this.handleTruncate,
-        ref: function ref(_ref) {
-          return _this2.truncateRef = _ref;
-        }
-      }, keepNewLines ? children.split('\n').map(function (line, i, arr) {
-        line = /*#__PURE__*/_react.default.createElement("span", {
-          key: i
-        }, line);
-        if (i === arr.length - 1) {
-          return line;
-        } else {
-          return [line, /*#__PURE__*/_react.default.createElement("br", {
-            key: i + 'br'
-          })];
-        }
-      }) : children), !truncated && expanded && /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  render() {
+    const {
+      children,
+      more,
+      less,
+      lines,
+      anchorClass,
+      className,
+      width,
+      keepNewLines,
+      truncatedEndingComponent,
+      onTruncate
+    } = this.props;
+    const {
+      expanded,
+      truncated
+    } = this.state;
+    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("span", {
         className: anchorClass,
         onClick: this.toggleLines
-      }, less)));
-    }
-  }]);
-  return ShowMoreText;
-}(_react.Component);
+      }, more)),
+      onTruncate: this.handleTruncate,
+      ref: ref => this.truncateRef = ref
+    }, keepNewLines ? children.split("\n").map((line, i, arr) => {
+      line = /*#__PURE__*/_react.default.createElement("span", {
+        key: i
+      }, line);
+      if (i === arr.length - 1) {
+        return line;
+      } else {
+        return [line, /*#__PURE__*/_react.default.createElement("br", {
+          key: i + "br"
+        })];
+      }
+    }) : children), !truncated && expanded && /*#__PURE__*/_react.default.createElement("span", null, " ", /*#__PURE__*/_react.default.createElement("span", {
+      className: anchorClass,
+      onClick: this.toggleLines
+    }, less)));
+  }
+}
 _defineProperty(ShowMoreText, "defaultProps", {
   lines: 3,
-  more: 'Show more',
-  less: 'Show less',
-  anchorClass: 'show-more-less-clickable',
+  more: "Show more",
+  less: "Show less",
+  anchorClass: "show-more-less-clickable",
   onClick: undefined,
   expanded: false,
   width: 0,
   keepNewLines: false,
-  truncatedEndingComponent: '... ',
+  truncatedEndingComponent: "... ",
   expandByClick: true,
   onTruncate: undefined
 });

package/lib/Truncate.js

@@ -1,150 +1,139 @@
 "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;
+class Truncate extends _react.default.Component {
+  constructor() {
     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),
+    super(...args);
+    _defineProperty(this, "state", {});
+    _defineProperty(this, "extractReplaceLinksKeys", content => {
+      var _self = this,
         i = 0;
-      _this.replacedLinks = [];
+      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++ + ']';
+        const 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) {
+    _defineProperty(this, "restoreReplacedLinks", content => {
+      this.replacedLinks.forEach(item => {
         content = content.replace(item.key, item[0]);
       });
-      return _this.createMarkup(content);
+      return this.createMarkup(content);
     });
-    _defineProperty(_assertThisInitialized(_this), "innerText", function (node) {
-      var div = document.createElement('div');
-      var contentKey = 'innerText' in window.HTMLElement.prototype ? 'innerText' : 'textContent';
-      var content = node.innerHTML.replace(/\r\n|\r|\n/g, ' ');
-      div.innerHTML = _this.extractReplaceLinksKeys(content);
-      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');
+    _defineProperty(this, "innerText", node => {
+      const div = document.createElement("div");
+      const contentKey = "innerText" in window.HTMLElement.prototype ? "innerText" : "textContent";
+      const content = node.innerHTML.replace(/\r\n|\r|\n/g, " ");
+      div.innerHTML = this.extractReplaceLinksKeys(content);
+      let text = div[contentKey];
+      const 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(this, "onResize", () => {
+      this.calcTargetWidth();
     });
-    _defineProperty(_assertThisInitialized(_this), "onTruncate", function (didTruncate) {
-      var onTruncate = _this.props.onTruncate;
-      if (typeof onTruncate === 'function') {
-        _this.timeout = window.requestAnimationFrame(function () {
+    _defineProperty(this, "onTruncate", didTruncate => {
+      const {
+        onTruncate
+      } = this.props;
+      if (typeof onTruncate === "function") {
+        this.timeout = window.requestAnimationFrame(() => {
           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;
+    _defineProperty(this, "calcTargetWidth", callback => {
+      const {
+        elements: {
+          target
+        },
+        calcTargetWidth,
+        canvasContext,
+        props: {
+          width
+        }
+      } = this;
 
       // Calculation is no longer relevant, since node has been removed
       if (!target) {
         return;
       }
-      var targetWidth = width ||
+      const 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
       // Mounting order in React is ChildComponent, ParentComponent
       if (!targetWidth) {
-        return window.requestAnimationFrame(function () {
-          return calcTargetWidth(callback);
-        });
+        return window.requestAnimationFrame(() => calcTargetWidth(callback));
       }
-      var style = window.getComputedStyle(target);
-      var font = [style['font-weight'], style['font-style'], style['font-size'], style['font-family']].join(' ');
+      const style = window.getComputedStyle(target);
+      const font = [style["font-weight"], style["font-style"], style["font-size"], style["font-family"]].join(" ");
       canvasContext.font = font;
-      _this.setState({
-        targetWidth: targetWidth
+      this.setState({
+        targetWidth
       }, callback);
     });
-    _defineProperty(_assertThisInitialized(_this), "measureWidth", function (text) {
-      return _this.canvasContext.measureText(text).width;
+    _defineProperty(this, "measureWidth", text => {
+      return this.canvasContext.measureText(text).width;
     });
-    _defineProperty(_assertThisInitialized(_this), "ellipsisWidth", function (node) {
+    _defineProperty(this, "ellipsisWidth", node => {
       return node.offsetWidth;
     });
-    _defineProperty(_assertThisInitialized(_this), "trimRight", function (text) {
-      return text.replace(/\s+$/, '');
+    _defineProperty(this, "trimRight", text => {
+      return text.replace(/\s+$/, "");
     });
-    _defineProperty(_assertThisInitialized(_this), "createMarkup", function (str) {
+    _defineProperty(this, "createMarkup", str => {
       return /*#__PURE__*/_react.default.createElement("span", {
         dangerouslySetInnerHTML: {
           __html: str
         }
       });
     });
-    _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;
-      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];
+    _defineProperty(this, "getLines", () => {
+      const {
+        elements,
+        props: {
+          lines: numLines,
+          ellipsis,
+          trimWhitespace
+        },
+        state: {
+          targetWidth
+        },
+        innerText,
+        measureWidth,
+        onTruncate,
+        trimRight,
+        renderLine,
+        restoreReplacedLinks
+      } = this;
+      const lines = [];
+      const text = innerText(elements.text);
+      const textLines = text.split("\n").map(line => line.split(" "));
+      let didTruncate = true;
+      const ellipsisWidth = this.ellipsisWidth(this.elements.ellipsis);
+      for (let line = 1; line <= numLines; line++) {
+        const textWords = textLines[0];
 
         // Handle newline
         if (textWords.length === 0) {
@@ -153,7 +142,7 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
           line--;
           continue;
         }
-        var resultLine = textWords.join(' ');
+        let resultLine = textWords.join(" ");
         if (measureWidth(resultLine) <= targetWidth) {
           if (textLines.length === 1) {
             // Line is end of text and fits without truncating
@@ -165,72 +154,71 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
         }
         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;
+          const textRest = textWords.join(" ");
+          let lower = 0;
+          let upper = textRest.length - 1;
           while (lower <= upper) {
-            var middle = Math.floor((lower + upper) / 2);
-            var testLine = textRest.slice(0, middle + 1);
+            const middle = Math.floor((lower + upper) / 2);
+            const testLine = textRest.slice(0, middle + 1);
             if (measureWidth(testLine) + ellipsisWidth <= targetWidth) {
               lower = middle + 1;
             } else {
               upper = middle - 1;
             }
           }
-          var lastLineText = textRest.slice(0, lower);
+          let lastLineText = textRest.slice(0, lower);
           if (trimWhitespace) {
             lastLineText = trimRight(lastLineText);
 
             // Remove blank lines from the end of text
             while (!lastLineText.length && lines.length) {
-              var prevLine = lines.pop();
+              const prevLine = lines.pop();
               lastLineText = trimRight(prevLine);
             }
           }
-          if (lastLineText.substr(lastLineText.length - 2) === '][') {
+          if (lastLineText.substr(lastLineText.length - 2) === "][") {
             lastLineText = lastLineText.substring(0, lastLineText.length - 1);
           }
-          ;
-          lastLineText = lastLineText.replace(/\[@+$/, '');
+          lastLineText = lastLineText.replace(/\[@+$/, "");
           lastLineText = restoreReplacedLinks(lastLineText);
           resultLine = /*#__PURE__*/_react.default.createElement("span", null, lastLineText, ellipsis);
         } 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;
+          let lower = 0;
+          let upper = textWords.length - 1;
+          while (lower <= upper) {
+            const middle = Math.floor((lower + upper) / 2);
+            const testLine = textWords.slice(0, middle + 1).join(" ");
+            if (measureWidth(testLine) <= targetWidth) {
+              lower = middle + 1;
             } else {
-              _upper = _middle - 1;
+              upper = middle - 1;
             }
           }
 
           // The first word of this line is too long to fit it
-          if (_lower === 0) {
+          if (lower === 0) {
             // Jump to processing of last line
             line = numLines - 1;
             continue;
           }
-          resultLine = textWords.slice(0, _lower).join(' ');
+          resultLine = textWords.slice(0, lower).join(" ");
           resultLine = restoreReplacedLinks(resultLine);
-          textLines[0].splice(0, _lower);
+          textLines[0].splice(0, lower);
         }
         lines.push(resultLine);
       }
       onTruncate(didTruncate);
       return lines.map(renderLine);
     });
-    _defineProperty(_assertThisInitialized(_this), "renderLine", function (line, i, arr) {
+    _defineProperty(this, "renderLine", (line, i, arr) => {
       if (i === arr.length - 1) {
         return /*#__PURE__*/_react.default.createElement("span", {
           key: i
         }, line);
       } else {
-        var br = /*#__PURE__*/_react.default.createElement("br", {
-          key: i + 'br'
+        const br = /*#__PURE__*/_react.default.createElement("br", {
+          key: i + "br"
         });
         if (line) {
           return [/*#__PURE__*/_react.default.createElement("span", {
@@ -241,102 +229,110 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "styles", {
+    _defineProperty(this, "styles", {
       ellipsis: {
-        position: 'fixed',
-        visibility: 'hidden',
+        position: "fixed",
+        visibility: "hidden",
         top: 0,
         left: 0
       }
     });
-    _this.elements = {};
-    _this.replacedLinks = [];
-    return _this;
+    this.elements = {};
+    this.replacedLinks = [];
   }
-  _createClass(Truncate, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var text = this.elements.text,
-        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 && text.parentNode) {
-          text.parentNode.removeChild(text);
-        }
-      });
-      window.addEventListener('resize', onResize);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      // Render was based on outdated refs and needs to be rerun
-      if (this.props.children !== prevProps.children) {
-        this.forceUpdate();
+  componentDidMount() {
+    const {
+      elements: {
+        text
+      },
+      calcTargetWidth,
+      onResize
+    } = this;
+    const canvas = document.createElement("canvas");
+    this.canvasContext = canvas.getContext("2d");
+    calcTargetWidth(() => {
+      // Node not needed in document tree to read its content
+      if (text && text.parentNode) {
+        text.parentNode.removeChild(text);
       }
+    });
+    window.addEventListener("resize", onResize);
+  }
+  componentDidUpdate(prevProps) {
+    // 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 (this.props.width !== prevProps.width) {
-        this.calcTargetWidth();
-      }
+    // If the width prop has changed, recalculate size of contents
+    if (this.props.width !== prevProps.width) {
+      this.calcTargetWidth();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var ellipsis = this.elements.ellipsis,
-        onResize = this.onResize,
-        timeout = this.timeout;
-      if (ellipsis.parentNode) {
-        ellipsis.parentNode.removeChild(ellipsis);
-      }
-      window.removeEventListener('resize', onResize);
-      window.cancelAnimationFrame(timeout);
+  }
+  componentWillUnmount() {
+    const {
+      elements: {
+        ellipsis
+      },
+      onResize,
+      timeout
+    } = this;
+    if (ellipsis.parentNode) {
+      ellipsis.parentNode.removeChild(ellipsis);
     }
-  }, {
-    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;
-      var text;
-      var mounted = !!(target && targetWidth);
-      if (typeof window !== 'undefined' && mounted) {
-        if (lines > 0) {
-          text = getLines();
-        } else {
-          text = children;
-          onTruncate(false);
-        }
+    window.removeEventListener("resize", onResize);
+    window.cancelAnimationFrame(timeout);
+  }
+  render() {
+    const {
+      elements: {
+        target
+      },
+      props: {
+        children,
+        ellipsis,
+        lines,
+        ...spanProps
+      },
+      state: {
+        targetWidth
+      },
+      getLines,
+      onTruncate
+    } = this;
+    let text;
+    const mounted = !!(target && targetWidth);
+    if (typeof window !== "undefined" && mounted) {
+      if (lines > 0) {
+        text = getLines();
+      } else {
+        text = children;
+        onTruncate(false);
       }
-      delete spanProps.onTruncate;
-      delete spanProps.trimWhitespace;
-      return /*#__PURE__*/_react.default.createElement("span", _extends({}, spanProps, {
-        ref: function ref(targetEl) {
-          _this2.elements.target = targetEl;
-        }
-      }), /*#__PURE__*/_react.default.createElement("span", null, text), /*#__PURE__*/_react.default.createElement("span", {
-        ref: function ref(textEl) {
-          _this2.elements.text = textEl;
-        }
-      }, children), /*#__PURE__*/_react.default.createElement("span", {
-        ref: function ref(ellipsisEl) {
-          _this2.elements.ellipsis = ellipsisEl;
-        },
-        style: this.styles.ellipsis
-      }, ellipsis));
     }
-  }]);
-  return Truncate;
-}(_react.default.Component);
+    delete spanProps.onTruncate;
+    delete spanProps.trimWhitespace;
+    return /*#__PURE__*/_react.default.createElement("span", _extends({}, spanProps, {
+      ref: targetEl => {
+        this.elements.target = targetEl;
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: "block",
+        maxWidth: "".concat(spanProps.width, "px")
+      }
+    }, text), /*#__PURE__*/_react.default.createElement("span", {
+      ref: textEl => {
+        this.elements.text = textEl;
+      }
+    }, children), /*#__PURE__*/_react.default.createElement("span", {
+      ref: ellipsisEl => {
+        this.elements.ellipsis = ellipsisEl;
+      },
+      style: this.styles.ellipsis
+    }, ellipsis));
+  }
+}
 exports.default = Truncate;
 _defineProperty(Truncate, "propTypes", {
   children: _propTypes.default.node,
@@ -347,10 +343,9 @@ _defineProperty(Truncate, "propTypes", {
   onTruncate: _propTypes.default.func
 });
 _defineProperty(Truncate, "defaultProps", {
-  children: '',
-  ellipsis: '…',
+  children: "",
+  ellipsis: "…",
   lines: 1,
   trimWhitespace: false,
   width: 0
-});
-;
+});

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-show-more-text",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "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 && cp -R src/ShowMoreText.css lib/",
+    "compile": "./node_modules/.bin/babel src/ShowMoreText.js src/Truncate.js --out-dir lib",
     "compile:watch": "onchange \"src/**/*.js\" -- npm run compile --silent --source-maps",
     "coverage": "nyc npm test && nyc report --reporter=text-lcov",
     "lint": "eslint .",
@@ -83,7 +83,6 @@
     "react-dom": "^16.14.0"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
     "prop-types": "^15.7.2"
   },
   "browserslist": "> 0.25%, not dead"

package/lib/ShowMoreText.css

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