react-show-more-text 1.4.2 → 1.4.6

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.4.6] - 2020-11-01
+### Fixed
+- [#20](https://github.com/devzonetech/react-show-more-text/issues/20) Incorrect appearance
+- [#23](https://github.com/devzonetech/react-show-more-text/issues/23) Show more/less anchor breaks in case of hash routers
+
+## [1.4.5] - 2020-10-20
+### Fixed
+- [#12](https://github.com/devzonetech/react-show-more-text/issues/12) className prop for the wrapper div of component content
+
+## [1.4.4] - 2020-08-21
+### Fixed
+- [#16](https://github.com/devzonetech/react-show-more-text/issues/16) @ showing at the end of the line
+
+## [1.4.3] - 2020-08-08
+### Fixed
+- [#18](https://github.com/devzonetech/react-show-more-text/issues/18) Missing links, when the content surrounded by the component contains only one line
+- [#16](https://github.com/devzonetech/react-show-more-text/issues/16) @ showing at the end of the line
+
 ## [1.4.2] - 2020-04-02
 ### Changed
 - State update on unmounted component #14

package/README.md

@@ -2,9 +2,7 @@
 [![NPM version][npm-image]][npm-url]
 [![Downloads][downloads-image]][npm-url]
 [![Build status][travis-image]][travis-url]
-[![Coverage status][coveralls-image]][coveralls-url]
 [![Dependency status][david-dm-image]][david-dm-url]
-[![Dev dependency status][david-dm-dev-image]][david-dm-dev-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, added onClick event.
 
@@ -35,19 +33,19 @@ class Foo extends Component {
                 lines={3}
                 more='Show more'
                 less='Show less'
-                anchorClass=''
+                className='content-css'
+                anchorClass='my-anchor-css-class'
                 onClick={this.executeOnClick}
                 expanded={false}
                 width={280}
             >
-                Lorem ipsum dolor sit amet, consectetur <a href="https://www.yahoo.com/" target="_blank">yahoo.com</a> adipiscing elit, sed do eiusmod tempor incididunt 
-                <a href="https://www.google.bg/" title="Google" rel="nofollow" target="_blank">www.google.bg</a> ut labore et dolore magna amet, consectetur adipiscing elit, 
+                Lorem ipsum dolor sit amet, consectetur <a href="https://www.yahoo.com/" target="_blank" rel="noopener noreferrer">yahoo.com</a> adipiscing elit, sed do eiusmod tempor incididunt 
+                <a href="https://www.google.bg/" title="Google" rel="nofollow" target="_blank" rel="noopener noreferrer">www.google.bg</a> ut labore et dolore magna amet, consectetur adipiscing elit, 
                 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                 minim veniam, quis nostrud exercitation ullamco laboris nisi
                 ut aliquip ex Lorem ipsum dolor sit amet, consectetur
                 adipiscing elit, sed do eiusmod tempor incididunt ut labore
 
-
                 et dolore magna aliqua. Ut enim ad minim veniam, quis
                 nostrud exercitation ullamco laboris nisi ut aliquip ex
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
@@ -66,6 +64,7 @@ class Foo extends Component {
 | children | string, React node | | The text to be truncated. Anything that can be evaluated as text. | `'Some text'`, `<p>Some paragraph <a/>with other text-based inline elements<a></p>`, `<span>Some</span><span>siblings</span>` |
 | 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'`
 | 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}`
@@ -96,11 +95,9 @@ $ npm run compile
 [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.org/One-com/react-show-more-text
-[travis-image]: http://img.shields.io/travis/One-com/react-show-more-text.svg
-[coveralls-url]:https://coveralls.io/r/One-com/react-show-more-text
-[coveralls-image]:https://coveralls.io/repos/One-com/react-show-more-text/badge.svg
-[david-dm-url]:https://david-dm.org/One-com/react-show-more-text
-[david-dm-image]:https://david-dm.org/One-com/react-show-more-text.svg
-[david-dm-dev-url]:https://david-dm.org/One-com/react-show-more-text#info=devDependencies
-[david-dm-dev-image]:https://david-dm.org/One-com/react-show-more-text/dev-status.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

package/lib/ShowMoreText.js

@@ -29,7 +29,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { 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 _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; } return _assertThisInitialized(self); }
 
@@ -119,16 +119,19 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
           less = _this$props.less,
           lines = _this$props.lines,
           anchorClass = _this$props.anchorClass,
+          className = _this$props.className,
           width = _this$props.width,
           keepNewLines = _this$props.keepNewLines;
       var _this$state = this.state,
           expanded = _this$state.expanded,
           truncated = _this$state.truncated;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Truncate.default, {
+      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, "...", ' ', /*#__PURE__*/_react.default.createElement("a", {
-          href: "#",
+          href: "",
           className: anchorClass,
           onClick: this.toggleLines
         }, more)),
@@ -149,7 +152,7 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
           })];
         }
       }) : children), !truncated && expanded && /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("a", {
-        href: "#",
+        href: "",
         className: anchorClass,
         onClick: this.toggleLines
       }, less)));
@@ -176,6 +179,7 @@ _defineProperty(ShowMoreText, "propTypes", {
   more: _propTypes.PropTypes.node,
   less: _propTypes.PropTypes.node,
   anchorClass: _propTypes.PropTypes.string,
+  className: _propTypes.PropTypes.string,
   onClick: _propTypes.PropTypes.func,
   expanded: _propTypes.PropTypes.bool,
   width: _propTypes.PropTypes.number,

package/lib/Truncate.js

@@ -29,7 +29,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { 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 _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; } return _assertThisInitialized(self); }
 
@@ -66,7 +66,7 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
       _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++;
+        item.key = '[' + '@'.repeat(item[2].length - 1) + '=' + i++ + ']';
 
         _self.replacedLinks.push(item);
 
@@ -80,8 +80,7 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
         content = content.replace(item.key, item[0]);
       });
 
-      content = _this.createMarkup(content);
-      return content;
+      return _this.createMarkup(content);
     });
 
     _defineProperty(_assertThisInitialized(_this), "innerText", function (node) {
@@ -206,6 +205,7 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
           if (textLines.length === 1) {
             // Line is end of text and fits without truncating
             didTruncate = false;
+            resultLine = restoreReplacedLinks(resultLine);
             lines.push(resultLine);
             break;
           }
@@ -239,6 +239,12 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
             }
           }
 
+          if (lastLineText.substr(lastLineText.length - 2) === '][') {
+            lastLineText = lastLineText.substring(0, lastLineText.length - 1);
+          }
+
+          ;
+          lastLineText = lastLineText.replace(/\[(@)\1{2,}$/, '');
           lastLineText = restoreReplacedLinks(lastLineText);
           resultLine = /*#__PURE__*/_react.default.createElement("span", null, lastLineText, ellipsis);
         } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-show-more-text",
-  "version": "1.4.2",
+  "version": "1.4.6",
   "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": [
@@ -14,8 +14,9 @@
     "prepublish": "rm -rf ./lib && npm run compile",
     "preversion": "npm run test",
     "report-coverage": "npm run coverage | coveralls",
-    "test": "jest --watch",
-    "travis": "npm run lint && npm run compile && npm run test"
+    "test": "./node_modules/.bin/jest",
+    "test:watch": "./node_modules/.bin/jest --watch",
+    "travis": "npm run compile && npm run test"
   },
   "repository": {
     "type": "git",
@@ -40,32 +41,32 @@
     "react": ">= 16.x.x"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.1",
     "babel-eslint": "^10.1.0",
     "babel-preset-minify": "^0.5.1",
     "canvas": "^2.6.1",
     "core-js": "^3.6.5",
     "coveralls": "^3.0.7",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-adapter-react-16": "^1.15.5",
     "eslint": "^4.14.0",
     "eslint-config-onelint": "^3.0.0",
     "eslint-config-onelint-react": "^2.0.1",
-    "eslint-plugin-jest": "^23.8.2",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-jest": "^23.20.0",
+    "eslint-plugin-react": "^7.21.5",
     "jest": "^25.3.0",
     "jest-enzyme": "^7.1.2",
     "nyc": "^14.1.1",
     "onchange": "^6.1.1",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.8.7",
+    "@babel/polyfill": "^7.12.1",
     "prop-types": "^15.7.2"
   },
   "browserslist": "> 0.25%, not dead"