react-show-more-text 1.4.5 → 1.5.2

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 +18 -0
  2. package/README.md +59 -35
  3. package/lib/ShowMoreText.js +19 -6
  4. package/lib/Truncate.js +1 -1
  5. package/package.json +8 -3
package/CHANGELOG.md CHANGED
@@ -1,6 +1,24 @@
1
1
  # Changelog
2
2
  All notable changes to this project will be documented in this file.
3
3
 
4
+ ## [1.5.2] - 2021-11-24
5
+ - Maintenance
6
+
7
+ ## [1.5.1] - 2021-11-24
8
+ - [#34](https://github.com/devzonetech/react-show-more-text/issues/34) Added props expandByClick true/false #34
9
+
10
+ ## [1.5.0] - 2021-07-25
11
+ ### Added
12
+ - [#31](https://github.com/devzonetech/react-show-more-text/issues/31) Ability to change or remove the ... at the end
13
+ - [#25](https://github.com/devzonetech/react-show-more-text/issues/25)Showing [@ at the end
14
+ ### Fixed
15
+ - Dependencies updated
16
+
17
+ ## [1.4.6] - 2020-11-01
18
+ ### Fixed
19
+ - [#20](https://github.com/devzonetech/react-show-more-text/issues/20) Incorrect appearance
20
+ - [#23](https://github.com/devzonetech/react-show-more-text/issues/23) Show more/less anchor breaks in case of hash routers
21
+
4
22
  ## [1.4.5] - 2020-10-20
5
23
  ### Fixed
6
24
  - [#12](https://github.com/devzonetech/react-show-more-text/issues/12) className prop for the wrapper div of component content
package/README.md CHANGED
@@ -1,4 +1,5 @@
1
- # React Show More Text
1
+ # React Show More Text 1.5.2
2
+
2
3
  [![NPM version][npm-image]][npm-url]
3
4
  [![Downloads][downloads-image]][npm-url]
4
5
  [![Build status][travis-image]][travis-url]
@@ -7,21 +8,23 @@
7
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.
8
9
 
9
10
  ## Demo
11
+
10
12
  [https://www.devzonetech.com/demo/react-show-more-text/build/](https://www.devzonetech.com/demo/react-show-more-text/build/)
11
13
 
12
14
  ## Install
15
+
13
16
  ```
14
17
  $ npm install react-show-more-text
15
18
  ```
16
19
 
17
20
  ## Usage
21
+
18
22
  ```js
19
- import ShowMoreText from 'react-show-more-text';
23
+ import ShowMoreText from "react-show-more-text";
20
24
 
21
25
  // ...
22
26
 
23
27
  class Foo extends Component {
24
-
25
28
  executeOnClick(isExpanded) {
26
29
  console.log(isExpanded);
27
30
  }
@@ -31,26 +34,41 @@ class Foo extends Component {
31
34
  <ShowMoreText
32
35
  /* Default options */
33
36
  lines={3}
34
- more='Show more'
35
- less='Show less'
36
- className='content-css'
37
- anchorClass='my-anchor-css-class'
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,36 +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
- | className | string | '' | Class name(s) to add on component content wrapper div. | `'wrapper-class'`, `'wrapper-class-1 wrapper-class-2'`
68
- | anchorClass | string | '' | Class name(s) to add to the anchor elements. | `'my-anchor-class'`, `'class-1 class-2'`
69
- | onClick | Function | | Function executed on click on 'Show more' or 'Show less' | `onClick={this.executeOnClick}`
70
- | expanded | boolean | 'false' | Control the text to be shown as expanded | `expanded={true}`
71
- | width | number | `0` | If not `0`, the calculation of the content will be based on this number. | |
72
- | 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={'... '}` |
73
94
 
74
95
  ## Developing
96
+
75
97
  Install development dependencies
98
+
76
99
  ```
77
100
  $ npm install
78
101
  ```
79
102
 
80
103
  Run tests
104
+
81
105
  ```
82
106
  $ npm test
83
107
  ```
84
108
 
85
109
  Run code linter
110
+
86
111
  ```
87
112
  $ npm run lint
88
113
  ```
89
114
 
90
115
  Compile to ES5 from /src to /lib
116
+
91
117
  ```
92
118
  $ npm run compile
93
119
  ```
@@ -95,9 +121,7 @@ $ npm run compile
95
121
  [npm-url]: https://npmjs.org/package/react-show-more-text
96
122
  [downloads-image]: http://img.shields.io/npm/dm/react-show-more-text.svg
97
123
  [npm-image]: https://badge.fury.io/js/react-show-more-text.svg
98
-
99
124
  [travis-url]: https://travis-ci.com/devzonetech/react-show-more-text
100
125
  [travis-image]: https://travis-ci.com/devzonetech/react-show-more-text.svg?branch=master
101
-
102
- [david-dm-url]:https://david-dm.org/devzonetech/react-show-more-text
103
- [david-dm-image]:https://david-dm.org/devzonetech/react-show-more-text.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
@@ -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
@@ -121,7 +129,8 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
121
129
  anchorClass = _this$props.anchorClass,
122
130
  className = _this$props.className,
123
131
  width = _this$props.width,
124
- keepNewLines = _this$props.keepNewLines;
132
+ keepNewLines = _this$props.keepNewLines,
133
+ truncatedEndingComponent = _this$props.truncatedEndingComponent;
125
134
  var _this$state = this.state,
126
135
  expanded = _this$state.expanded,
127
136
  truncated = _this$state.truncated;
@@ -130,8 +139,8 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
130
139
  }, /*#__PURE__*/_react.default.createElement(_Truncate.default, {
131
140
  width: width,
132
141
  lines: !expanded && lines,
133
- ellipsis: /*#__PURE__*/_react.default.createElement("span", null, "...", ' ', /*#__PURE__*/_react.default.createElement("a", {
134
- href: "#",
142
+ ellipsis: /*#__PURE__*/_react.default.createElement("span", null, truncatedEndingComponent, /*#__PURE__*/_react.default.createElement("a", {
143
+ href: "",
135
144
  className: anchorClass,
136
145
  onClick: this.toggleLines
137
146
  }, more)),
@@ -152,7 +161,7 @@ var ShowMoreText = /*#__PURE__*/function (_Component) {
152
161
  })];
153
162
  }
154
163
  }) : children), !truncated && expanded && /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("a", {
155
- href: "#",
164
+ href: "",
156
165
  className: anchorClass,
157
166
  onClick: this.toggleLines
158
167
  }, less)));
@@ -170,7 +179,9 @@ _defineProperty(ShowMoreText, "defaultProps", {
170
179
  onClick: undefined,
171
180
  expanded: false,
172
181
  width: 0,
173
- keepNewLines: false
182
+ keepNewLines: false,
183
+ truncatedEndingComponent: '... ',
184
+ expandByClick: true
174
185
  });
175
186
 
176
187
  _defineProperty(ShowMoreText, "propTypes", {
@@ -183,7 +194,9 @@ _defineProperty(ShowMoreText, "propTypes", {
183
194
  onClick: _propTypes.PropTypes.func,
184
195
  expanded: _propTypes.PropTypes.bool,
185
196
  width: _propTypes.PropTypes.number,
186
- keepNewLines: _propTypes.PropTypes.bool
197
+ keepNewLines: _propTypes.PropTypes.bool,
198
+ truncatedEndingComponent: _propTypes.PropTypes.node,
199
+ expandByClick: _propTypes.PropTypes.bool
187
200
  });
188
201
 
189
202
  var _default = ShowMoreText;
package/lib/Truncate.js CHANGED
@@ -66,7 +66,6 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
66
66
  _this.replacedLinks = [];
67
67
  content.replace(/(<a[\s]+([^>]+)>((?:.(?!\<\/a\>))*.)<\/a>)/g, function () {
68
68
  var item = Array.prototype.slice.call(arguments, 1, 4);
69
- console.log(item[2]);
70
69
  item.key = '[' + '@'.repeat(item[2].length - 1) + '=' + i++ + ']';
71
70
 
72
71
  _self.replacedLinks.push(item);
@@ -245,6 +244,7 @@ var Truncate = /*#__PURE__*/function (_React$Component) {
245
244
  }
246
245
 
247
246
  ;
247
+ lastLineText = lastLineText.replace(/\[@+$/, '');
248
248
  lastLineText = restoreReplacedLinks(lastLineText);
249
249
  resultLine = /*#__PURE__*/_react.default.createElement("span", null, lastLineText, ellipsis);
250
250
  } else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-show-more-text",
3
- "version": "1.4.5",
3
+ "version": "1.5.2",
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",
@@ -48,7 +48,7 @@
48
48
  "@babel/preset-react": "^7.12.1",
49
49
  "babel-eslint": "^10.1.0",
50
50
  "babel-preset-minify": "^0.5.1",
51
- "canvas": "^2.6.1",
51
+ "canvas": "^2.8.0",
52
52
  "core-js": "^3.6.5",
53
53
  "coveralls": "^3.0.7",
54
54
  "enzyme": "^3.11.0",
@@ -56,8 +56,13 @@
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-config-react-app": "^6.0.0",
60
+ "eslint-plugin-flowtype": "^5.8.1",
61
+ "eslint-plugin-import": "^2.23.4",
59
62
  "eslint-plugin-jest": "^23.20.0",
63
+ "eslint-plugin-jsx-a11y": "^6.4.1",
60
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",