react-show-more-text 1.4.4 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +59 -36
  3. package/lib/ShowMoreText.js +25 -8
  4. package/lib/Truncate.js +2 -1
  5. package/package.json +18 -13
package/CHANGELOG.md CHANGED
@@ -1,6 +1,25 @@
1
1
  # Changelog
2
2
  All notable changes to this project will be documented in this file.
3
3
 
4
+ ## [1.5.1] - 2021-11-24
5
+ - [#34](https://github.com/devzonetech/react-show-more-text/issues/34) Added props expandByClick true/false #34
6
+
7
+ ## [1.5.0] - 2021-07-25
8
+ ### Added
9
+ - [#31](https://github.com/devzonetech/react-show-more-text/issues/31) Ability to change or remove the ... at the end
10
+ - [#25](https://github.com/devzonetech/react-show-more-text/issues/25)Showing [@ at the end
11
+ ### Fixed
12
+ - Dependencies updated
13
+
14
+ ## [1.4.6] - 2020-11-01
15
+ ### Fixed
16
+ - [#20](https://github.com/devzonetech/react-show-more-text/issues/20) Incorrect appearance
17
+ - [#23](https://github.com/devzonetech/react-show-more-text/issues/23) Show more/less anchor breaks in case of hash routers
18
+
19
+ ## [1.4.5] - 2020-10-20
20
+ ### Fixed
21
+ - [#12](https://github.com/devzonetech/react-show-more-text/issues/12) className prop for the wrapper div of component content
22
+
4
23
  ## [1.4.4] - 2020-08-21
5
24
  ### Fixed
6
25
  - [#16](https://github.com/devzonetech/react-show-more-text/issues/16) @ showing at the end of the line
package/README.md CHANGED
@@ -1,28 +1,30 @@
1
- # React Show More Text
1
+ # React Show More Text 1.5.0
2
+
2
3
  [![NPM version][npm-image]][npm-url]
3
4
  [![Downloads][downloads-image]][npm-url]
4
5
  [![Build status][travis-image]][travis-url]
5
6
  [![Dependency status][david-dm-image]][david-dm-url]
6
- [![Dev dependency status][david-dm-dev-image]][david-dm-dev-url]
7
7
 
8
8
  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.
9
9
 
10
10
  ## Demo
11
+
11
12
  [https://www.devzonetech.com/demo/react-show-more-text/build/](https://www.devzonetech.com/demo/react-show-more-text/build/)
12
13
 
13
14
  ## Install
15
+
14
16
  ```
15
17
  $ npm install react-show-more-text
16
18
  ```
17
19
 
18
20
  ## Usage
21
+
19
22
  ```js
20
- import ShowMoreText from 'react-show-more-text';
23
+ import ShowMoreText from "react-show-more-text";
21
24
 
22
25
  // ...
23
26
 
24
27
  class Foo extends Component {
25
-
26
28
  executeOnClick(isExpanded) {
27
29
  console.log(isExpanded);
28
30
  }
@@ -32,25 +34,41 @@ class Foo extends Component {
32
34
  <ShowMoreText
33
35
  /* Default options */
34
36
  lines={3}
35
- more='Show more'
36
- less='Show less'
37
- anchorClass=''
37
+ more="Show more"
38
+ less="Show less"
39
+ className="content-css"
40
+ anchorClass="my-anchor-css-class"
38
41
  onClick={this.executeOnClick}
39
42
  expanded={false}
40
43
  width={280}
44
+ truncatedEndingComponent={"... "}
41
45
  >
42
- 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
43
- <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,
44
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
45
- minim veniam, quis nostrud exercitation ullamco laboris nisi
46
- ut aliquip ex Lorem ipsum dolor sit amet, consectetur
47
- adipiscing elit, sed do eiusmod tempor incididunt ut labore
48
-
49
- et dolore magna aliqua. Ut enim ad minim veniam, quis
50
- nostrud exercitation ullamco laboris nisi ut aliquip ex
51
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
52
- do eiusmod tempor incididunt ut labore et dolore magna
53
- aliqua. Ut enim ad minim veniam, quis nostrud exercitation
46
+ Lorem ipsum dolor sit amet, consectetur{" "}
47
+ <a
48
+ href="https://www.yahoo.com/"
49
+ target="_blank"
50
+ rel="noopener noreferrer"
51
+ >
52
+ yahoo.com
53
+ </a>{" "}
54
+ adipiscing elit, sed do eiusmod tempor incididunt
55
+ <a
56
+ href="https://www.google.bg/"
57
+ title="Google"
58
+ rel="nofollow"
59
+ target="_blank"
60
+ rel="noopener noreferrer"
61
+ >
62
+ www.google.bg
63
+ </a> ut labore et dolore magna amet, consectetur adipiscing elit,
64
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
65
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
66
+ nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipiscing
67
+ elit, sed do eiusmod tempor incididunt ut labore et dolore magna
68
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
69
+ laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur
70
+ adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
71
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
54
72
  </ShowMoreText>
55
73
  );
56
74
  }
@@ -58,35 +76,44 @@ class Foo extends Component {
58
76
  ```
59
77
 
60
78
  ## API
61
- | Prop | Type | Default | Description | Example |
62
- | ---- | ---- | ------- | ----------- | ------- |
63
- | lines | integer, boolean {false} | 3 | Specifies how many lines of text should be preserved until it gets truncated. `false` and any integer < 1 will result in the text not getting clipped at all. | (`false`, `-1`, `0`), `1`, ... |
64
- | 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>` |
65
- | more | string, React node | 'Show more' | The text to display in the anchor element to show more. | `'Show more'`, `<span>Show more</span>`
66
- | less | string, React node | 'Show less' | The text to display in the anchor element to show less. | `'Show less'`, `<span>Show less</span>`
67
- | anchorClass | string | '' | Class name(s) to add to the anchor elements. | `'my-anchor-class'`, `'class-1 class-2'`
68
- | onClick | Function | | Function executed on click on 'Show more' or 'Show less' | `onClick={this.executeOnClick}`
69
- | expanded | boolean | 'false' | Control the text to be shown as expanded | `expanded={true}`
70
- | width | number | `0` | If not `0`, the calculation of the content will be based on this number. | |
71
- | keepNewLines | boolean | 'false' | Controls the new lines in text to be kept or not. When set to true, only strings can be passed in as children, and not html nodes. | `keepNewLines={true}`
79
+
80
+ | Prop | Type | Default | Description | Example |
81
+ | ------------------------ | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
82
+ | lines | integer, boolean {false} | 3 | Specifies how many lines of text should be preserved until it gets truncated. `false` and any integer < 1 will result in the text not getting clipped at all. | (`false`, `-1`, `0`), `1`, ... |
83
+ | 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>` |
84
+ | more | string, React node | 'Show more' | The text to display in the anchor element to show more. | `'Show more'`, `<span>Show more</span>` |
85
+ | less | string, React node | 'Show less' | The text to display in the anchor element to show less. | `'Show less'`, `<span>Show less</span>` |
86
+ | className | string | '' | Class name(s) to add on component content wrapper div. | `'wrapper-class'`, `'wrapper-class-1 wrapper-class-2'` |
87
+ | anchorClass | string | '' | Class name(s) to add to the anchor elements. | `'my-anchor-class'`, `'class-1 class-2'` |
88
+ | onClick | Function | | Function executed on click on 'Show more' or 'Show less' | `onClick={this.executeOnClick}` |
89
+ | expanded | boolean | 'false' | Control the text to be shown as expanded | `expanded={true}` |
90
+ | expandByClick | boolean | 'true' | Cancel the default anchor click expand behavior | `expandByClick={false}` |
91
+ | width | number | `0` | If not `0`, the calculation of the content will be based on this number. | |
92
+ | keepNewLines | boolean | 'false' | Controls the new lines in text to be kept or not. When set to true, only strings can be passed in as children, and not html nodes. | `keepNewLines={true}` |
93
+ | truncatedEndingComponent | string | '...' | Control the text to be shown at the end of short text | `truncatedEndingComponent={'... '}` |
72
94
 
73
95
  ## Developing
96
+
74
97
  Install development dependencies
98
+
75
99
  ```
76
100
  $ npm install
77
101
  ```
78
102
 
79
103
  Run tests
104
+
80
105
  ```
81
106
  $ npm test
82
107
  ```
83
108
 
84
109
  Run code linter
110
+
85
111
  ```
86
112
  $ npm run lint
87
113
  ```
88
114
 
89
115
  Compile to ES5 from /src to /lib
116
+
90
117
  ```
91
118
  $ npm run compile
92
119
  ```
@@ -94,11 +121,7 @@ $ npm run compile
94
121
  [npm-url]: https://npmjs.org/package/react-show-more-text
95
122
  [downloads-image]: http://img.shields.io/npm/dm/react-show-more-text.svg
96
123
  [npm-image]: https://badge.fury.io/js/react-show-more-text.svg
97
-
98
124
  [travis-url]: https://travis-ci.com/devzonetech/react-show-more-text
99
125
  [travis-image]: https://travis-ci.com/devzonetech/react-show-more-text.svg?branch=master
100
-
101
- [david-dm-url]:https://david-dm.org/devzonetech/react-show-more-text
102
- [david-dm-image]:https://david-dm.org/devzonetech/react-show-more-text.svg
103
- [david-dm-dev-url]:https://david-dm.org/devzonetech/react-show-more-text#info=devDependencies
104
- [david-dm-dev-image]:https://david-dm.org/devzonetech/react-show-more-text/dev-status.svg
126
+ [david-dm-url]: https://david-dm.org/devzonetech/react-show-more-text
127
+ [david-dm-image]: https://david-dm.org/devzonetech/react-show-more-text.svg
package/lib/ShowMoreText.js CHANGED
@@ -29,7 +29,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
29
29
 
30
30
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
31
31
 
32
- 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); }; }
32
+ 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); }; }
33
33
 
34
34
  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
35
35
 
@@ -72,6 +72,14 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
72
72
 
73
73
  var _self = _assertThisInitialized(_this);
74
74
 
75
+ if (!_self.props.expandByClick) {
76
+ if (_self.props.onClick) {
77
+ _self.props.onClick(_self.state.expanded);
78
+ }
79
+
80
+ return;
81
+ }
82
+
75
83
  if (_this._isMounted) {
76
84
  _this.setState({
77
85
  expanded: !_this.state.expanded
@@ -119,16 +127,20 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
119
127
  less = _this$props.less,
120
128
  lines = _this$props.lines,
121
129
  anchorClass = _this$props.anchorClass,
130
+ className = _this$props.className,
122
131
  width = _this$props.width,
123
- keepNewLines = _this$props.keepNewLines;
132
+ keepNewLines = _this$props.keepNewLines,
133
+ truncatedEndingComponent = _this$props.truncatedEndingComponent;
124
134
  var _this$state = this.state,
125
135
  expanded = _this$state.expanded,
126
136
  truncated = _this$state.truncated;
127
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Truncate.default, {
137
+ return /*#__PURE__*/_react.default.createElement("div", {
138
+ className: className
139
+ }, /*#__PURE__*/_react.default.createElement(_Truncate.default, {
128
140
  width: width,
129
141
  lines: !expanded && lines,
130
- ellipsis: /*#__PURE__*/_react.default.createElement("span", null, "...", ' ', /*#__PURE__*/_react.default.createElement("a", {
131
- href: "#",
142
+ ellipsis: /*#__PURE__*/_react.default.createElement("span", null, truncatedEndingComponent, /*#__PURE__*/_react.default.createElement("a", {
143
+ href: "",
132
144
  className: anchorClass,
133
145
  onClick: this.toggleLines
134
146
  }, more)),
@@ -149,7 +161,7 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
149
161
  })];
150
162
  }
151
163
  }) : children), !truncated && expanded && /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("a", {
152
- href: "#",
164
+ href: "",
153
165
  className: anchorClass,
154
166
  onClick: this.toggleLines
155
167
  }, less)));
@@ -167,7 +179,9 @@ _defineProperty(ShowMoreText, "defaultProps", {
167
179
  onClick: undefined,
168
180
  expanded: false,
169
181
  width: 0,
170
- keepNewLines: false
182
+ keepNewLines: false,
183
+ truncatedEndingComponent: '... ',
184
+ expandByClick: true
171
185
  });
172
186
 
173
187
  _defineProperty(ShowMoreText, "propTypes", {
@@ -176,10 +190,13 @@ _defineProperty(ShowMoreText, "propTypes", {
176
190
  more: _propTypes.PropTypes.node,
177
191
  less: _propTypes.PropTypes.node,
178
192
  anchorClass: _propTypes.PropTypes.string,
193
+ className: _propTypes.PropTypes.string,
179
194
  onClick: _propTypes.PropTypes.func,
180
195
  expanded: _propTypes.PropTypes.bool,
181
196
  width: _propTypes.PropTypes.number,
182
- keepNewLines: _propTypes.PropTypes.bool
197
+ keepNewLines: _propTypes.PropTypes.bool,
198
+ truncatedEndingComponent: _propTypes.PropTypes.node,
199
+ expandByClick: _propTypes.PropTypes.bool
183
200
  });
184
201
 
185
202
  var _default = ShowMoreText;
package/lib/Truncate.js CHANGED
@@ -29,7 +29,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
29
29
 
30
30
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
31
31
 
32
- 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); }; }
32
+ 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); }; }
33
33
 
34
34
  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
35
35
 
@@ -244,6 +244,7 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
244
244
  }
245
245
 
246
246
  ;
247
+ lastLineText = lastLineText.replace(/\[@+$/, '');
247
248
  lastLineText = restoreReplacedLinks(lastLineText);
248
249
  resultLine = /*#__PURE__*/_react.default.createElement("span", null, lastLineText, ellipsis);
249
250
  } else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-show-more-text",
3
- "version": "1.4.4",
3
+ "version": "1.5.1",
4
4
  "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.",
5
5
  "main": "lib/ShowMoreText.js",
6
6
  "files": [
@@ -8,7 +8,7 @@
8
8
  ],
9
9
  "scripts": {
10
10
  "compile": "./node_modules/.bin/babel src/ShowMoreText.js src/Truncate.js --out-dir lib",
11
- "compile:watch": "onchange \"src/**/*.js\" -- npm run compile --silent",
11
+ "compile:watch": "onchange \"src/**/*.js\" -- npm run compile --silent --source-maps",
12
12
  "coverage": "nyc npm test && nyc report --reporter=text-lcov",
13
13
  "lint": "eslint .",
14
14
  "prepublish": "rm -rf ./lib && npm run compile",
@@ -41,32 +41,37 @@
41
41
  "react": ">= 16.x.x"
42
42
  },
43
43
  "devDependencies": {
44
- "@babel/cli": "^7.8.4",
45
- "@babel/core": "^7.9.0",
46
- "@babel/plugin-proposal-class-properties": "^7.8.3",
47
- "@babel/preset-env": "^7.9.5",
48
- "@babel/preset-react": "^7.9.4",
44
+ "@babel/cli": "^7.12.1",
45
+ "@babel/core": "^7.12.3",
46
+ "@babel/plugin-proposal-class-properties": "^7.12.1",
47
+ "@babel/preset-env": "^7.12.1",
48
+ "@babel/preset-react": "^7.12.1",
49
49
  "babel-eslint": "^10.1.0",
50
50
  "babel-preset-minify": "^0.5.1",
51
51
  "canvas": "^2.6.1",
52
52
  "core-js": "^3.6.5",
53
53
  "coveralls": "^3.0.7",
54
54
  "enzyme": "^3.11.0",
55
- "enzyme-adapter-react-16": "^1.15.2",
55
+ "enzyme-adapter-react-16": "^1.15.5",
56
56
  "eslint": "^4.14.0",
57
57
  "eslint-config-onelint": "^3.0.0",
58
58
  "eslint-config-onelint-react": "^2.0.1",
59
- "eslint-plugin-jest": "^23.8.2",
60
- "eslint-plugin-react": "^7.16.0",
59
+ "eslint-config-react-app": "^6.0.0",
60
+ "eslint-plugin-flowtype": "^5.8.1",
61
+ "eslint-plugin-import": "^2.23.4",
62
+ "eslint-plugin-jest": "^23.20.0",
63
+ "eslint-plugin-jsx-a11y": "^6.4.1",
64
+ "eslint-plugin-react": "^7.21.5",
65
+ "eslint-plugin-react-hooks": "^4.2.0",
61
66
  "jest": "^25.3.0",
62
67
  "jest-enzyme": "^7.1.2",
63
68
  "nyc": "^14.1.1",
64
69
  "onchange": "^6.1.1",
65
- "react": "^16.11.0",
66
- "react-dom": "^16.11.0"
70
+ "react": "^16.14.0",
71
+ "react-dom": "^16.14.0"
67
72
  },
68
73
  "dependencies": {
69
- "@babel/polyfill": "^7.8.7",
74
+ "@babel/polyfill": "^7.12.1",
70
75
  "prop-types": "^15.7.2"
71
76
  },
72
77
  "browserslist": "> 0.25%, not dead"