react-clamp-lines - npm Package Compare versions

Comparing version 2.4.0 to 3.0.0

lib/index.js

@@ -1,1 +0,1 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(window,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e,n){t.exports=n(3)()},function(t,e){t.exports=require("react")},function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return h});var i=n(1),r=n.n(i),o=n(0),s=n.n(o);function a(t){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function l(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function c(t){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function u(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function p(t,e){return(p=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var h=function(t){function e(t){var n,i,r;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),i=this,(n=!(r=c(e).call(this,t))||"object"!==a(r)&&"function"!=typeof r?u(i):r).element=null,n.original=t.text,n.watch=!0,n.lineHeight=0,n.start=0,n.middle=0,n.end=0,n.randomID=Math.random().toString(36).substr(2,10),n.state={expanded:!0,noClamp:!1,text:"."},n.ssr="undefined"==typeof window,n.action=n.action.bind(u(n)),n.clickHandler=n.clickHandler.bind(u(n)),n.ssr?n.state.text=t.text:n.debounced=n.debounce(n.action,t.delay),n}var n,o,s;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&p(t,e)}(e,i["PureComponent"]),n=e,(o=[{key:"componentDidMount",value:function(){this.props.text&&!this.ssr&&(this.lineHeight=this.element.clientHeight+1,this.clampLines(),this.watch&&window.addEventListener("resize",this.debounced))}},{key:"componentWillUnmount",value:function(){this.ssr||window.removeEventListener("resize",this.debounced)}},{key:"componentDidUpdate",value:function(t){t.text!==this.props.text&&(this.original=this.props.text,this.clampLines())}},{key:"debounce",value:function(t,e,n){var i,r=this,o=arguments;return function(){var s=r,a=o,l=n&&!i;clearTimeout(i),i=setTimeout(function(){i=null,n||t.apply(s,a)},e),l&&t.apply(s,a)}}},{key:"action",value:function(){this.watch&&(this.setState({noClamp:!1}),this.clampLines(),this.setState({expanded:!this.state.expanded}))}},{key:"clampLines",value:function(){if(this.element){this.setState({text:""});var t=this.lineHeight*this.props.lines+1;for(this.start=0,this.middle=0,this.end=this.original.length;this.start<=this.end;){if(this.middle=Math.floor((this.start+this.end)/2),this.element.innerText=this.original.slice(0,this.middle),this.middle===this.original.length)return void this.setState({text:this.original,noClamp:!0});this.moveMarkers(t)}this.element.innerText=this.original.slice(0,this.middle-5)+this.getEllipsis(),this.setState({text:this.original.slice(0,this.middle-5)+this.getEllipsis()})}}},{key:"moveMarkers",value:function(t){this.element.clientHeight<=t?this.start=this.middle+1:this.end=this.middle-1}},{key:"getClassName",value:function(){var t=this.props.className||"";return"clamp-lines ".concat(t)}},{key:"getEllipsis",value:function(){return this.watch&&!this.state.noClamp?this.props.ellipsis:""}},{key:"getButton",value:function(){if(!this.state.noClamp&&this.props.buttons){var t=this.watch?this.props.moreText:this.props.lessText;return r.a.createElement("button",{className:"clamp-lines__button",onClick:this.clickHandler,"aria-controls":"clamped-content-".concat(this.randomID),"aria-expanded":!this.state.expanded},t)}}},{key:"clickHandler",value:function(t){var e=this.props.stopPropagation;t.preventDefault(),e&&t.stopPropagation(),this.watch=!this.watch,this.watch?this.clampLines():this.setState({text:this.original}),this.setState({expanded:!this.state.expanded})}},{key:"render",value:function(){var t=this;if(!this.props.text)return null;var e=r.a.createElement(this.props.innerElement,{ref:function(e){t.element=e},id:!this.ssr&&"clamped-content-".concat(this.randomID),"aria-hidden":!this.ssr&&this.state.expanded},this.state.text);return r.a.createElement("div",{className:this.getClassName()},e,!this.ssr&&this.getButton())}}])&&l(n.prototype,o),s&&l(n,s),e}();h.propTypes={text:s.a.string.isRequired,lines:s.a.number,ellipsis:s.a.string,buttons:s.a.bool,moreText:s.a.string,lessText:s.a.string,className:s.a.string,delay:s.a.number,stopPropagation:s.a.bool,innerElement:s.a.string},h.defaultProps={lines:3,ellipsis:"...",buttons:!0,moreText:"Read more",lessText:"Read less",delay:300,innerElement:"div"}},function(t,e,n){"use strict";var i=n(4);function r(){}function o(){}o.resetWarningCache=r,t.exports=function(){function t(t,e,n,r,o,s){if(s!==i){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,elementType:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(t,e,n){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])});
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(this,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e,n){t.exports=n(3)()},function(t,e){t.exports=require("react")},function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return f});var i=n(1),r=n.n(i),o=n(0),s=n.n(o);function a(t){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function l(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function p(t,e){return(p=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var f=function(t){function e(t){var n,i,r;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),i=this,(n=!(r=u(e).call(this,t))||"object"!==a(r)&&"function"!=typeof r?c(i):r).element=null,n.original=t.text,n.watch=!0,n.lineHeight=0,n.start=0,n.middle=0,n.end=0,n.uuid=t.id,n.state={expanded:!0,noClamp:!1,text:t.text.substring(0,20)},n.ssr="undefined"==typeof window,n.action=n.action.bind(c(n)),n.clickHandler=n.clickHandler.bind(c(n)),n.ssr?n.state.text=t.text.substring(0,20):n.debounced=n.debounce(n.action,t.delay),n}var n,o,s;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&p(t,e)}(e,i["PureComponent"]),n=e,(o=[{key:"componentDidMount",value:function(){this.props.text&&!this.ssr&&(this.lineHeight=this.element.clientHeight+1,this.clampLines(),this.watch&&window.addEventListener("resize",this.debounced))}},{key:"componentWillUnmount",value:function(){this.ssr||window.removeEventListener("resize",this.debounced)}},{key:"componentDidUpdate",value:function(t){t.text!==this.props.text&&(this.original=this.props.text,this.clampLines())}},{key:"debounce",value:function(t,e,n){var i,r=this,o=arguments;return function(){var s=r,a=o,l=n&&!i;clearTimeout(i),i=setTimeout(function(){i=null,n||t.apply(s,a)},e),l&&t.apply(s,a)}}},{key:"action",value:function(){this.watch&&(this.setState({noClamp:!1}),this.clampLines(),this.setState({expanded:!this.state.expanded}))}},{key:"clampLines",value:function(){if(this.element){this.setState({text:""});var t=this.lineHeight*this.props.lines+1;for(this.start=0,this.middle=0,this.end=this.original.length;this.start<=this.end;){if(this.middle=Math.floor((this.start+this.end)/2),this.element.innerText=this.original.slice(0,this.middle),this.middle===this.original.length)return void this.setState({text:this.original,noClamp:!0});this.moveMarkers(t)}this.element.innerText=this.original.slice(0,this.middle-5)+this.getEllipsis(),this.setState({text:this.original.slice(0,this.middle-5)+this.getEllipsis()})}}},{key:"moveMarkers",value:function(t){this.element.clientHeight<=t?this.start=this.middle+1:this.end=this.middle-1}},{key:"getClassName",value:function(){var t=this.props.className||"";return"clamp-lines ".concat(t)}},{key:"getEllipsis",value:function(){return this.watch&&!this.state.noClamp?this.props.ellipsis:""}},{key:"getButton",value:function(){if(!this.state.noClamp&&this.props.buttons){var t=this.watch?this.props.moreText:this.props.lessText;return r.a.createElement("button",{className:"clamp-lines__button",onClick:this.clickHandler,"aria-controls":"clamped-content-".concat(this.uuid),"aria-expanded":!this.state.expanded},t)}}},{key:"clickHandler",value:function(t){var e=this.props.stopPropagation;t.preventDefault(),e&&t.stopPropagation(),this.watch=!this.watch,this.watch?this.clampLines():this.setState({text:this.original}),this.setState({expanded:!this.state.expanded})}},{key:"render",value:function(){var t=this;if(!this.props.text)return null;var e=r.a.createElement(this.props.innerElement,{ref:function(e){t.element=e},id:"clamped-content-".concat(this.uuid),"aria-hidden":this.state.expanded},this.state.text);return r.a.createElement("div",{className:this.getClassName()},e,this.getButton())}}])&&l(n.prototype,o),s&&l(n,s),e}();f.propTypes={text:s.a.string.isRequired,id:s.a.string.isRequired,lines:s.a.number,ellipsis:s.a.string,buttons:s.a.bool,moreText:s.a.string,lessText:s.a.string,className:s.a.string,delay:s.a.number,stopPropagation:s.a.bool,innerElement:s.a.string},f.defaultProps={lines:3,ellipsis:"...",buttons:!0,moreText:"Read more",lessText:"Read less",delay:300,innerElement:"div"}},function(t,e,n){"use strict";var i=n(4);function r(){}function o(){}o.resetWarningCache=r,t.exports=function(){function t(t,e,n,r,o,s){if(s!==i){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,elementType:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(t,e,n){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])});

package.json

 {
   "name": "react-clamp-lines",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "Responsive and accessible clamping component with Read more/Read less buttons built for React.",
   "main": "lib/index.js",
+  "files": [
+    "lib/**/*"
+  ],
   "scripts": {
@@ -7,0 +10,0 @@ "build": "webpack"

README.md

@@ -40,2 +40,3 @@ # react-clamp-lines
         text={text_to_clamp}
+        id="really-unique-id"
         lines={4}
@@ -59,4 +60,15 @@ ellipsis="..."
 <div class="clamp-lines custom-class">
-  <p>clamped text here...</p>
-  <button class="clamp-lines__button">Expand</button>
+  <p 
+    id="clamped-content-really-unique-id"
+    aria-hidden="true"
+  >
+    clamped text here...
+  </p>
+  <button 
+    class="clamp-lines__button"
+    aria-controls="clamped-content-really-unique-id"
+    aria-expanded="false"
+  >
+    Expand
+  </button>
 </div>
@@ -72,2 +84,3 @@ ```
   text={String}
+  id={String}
   lines={Number}
@@ -85,14 +98,15 @@ ellipsis={String}
 
-| prop            | type      | default&#160;value | description                                                                                           |
-| --------------- | --------- | ------------------ | ----------------------------------------------------------------------------------------------------- |
-| text            | {String}  |                    | Text you wish to clamp                                                                                |
-| lines           | {Number}  | `3`                | Number of visible lines                                                                               |
-| ellipsis        | {String}  | `...`              | Text content for the ellipsis - will appear after the clamped lines                                   |
-| buttons         | {Boolean} | `true`             | The _&laquo;Read more&raquo;_ and _&laquo;Read less&raquo;_ buttons                                   |
-| moreText        | {String}  | `Read more`        | _&laquo;Read more&raquo;_ button value                                                                |
-| lessText        | {String}  | `Read less`        | _&laquo;Read less&raquo;_ button value                                                                |
-| className       | {String}  |                    | CSS class names added to component                                                                    |
-| delay           | {Number}  | `300`              | Milliseconds, the function is waiting before being triggered, after it stops being called             |
-| stopPropagation | {Boolean} | `false`            | Prevents the event from bubbling up the DOM tree when clicked on the _&laquo;Read more&raquo;_ button |
-| innerElement    | {String}  | `div`              | Custom inner element for clamped text. **This MUST be a [block level element](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements) or styled as one.**
+| prop            | required | type      | default&#160;value | description  |
+| --------------- | -------- | --------- | ------------------ | ------------ |
+| text            | __*__    | {String}  |                    | Text you wish to clamp |
+| id              | __*__    | {String}  |                    | Unique id (used for ARIA props) |
+| lines           |          | {Number}  | `3`                | Number of visible lines |
+| ellipsis        |          | {String}  | `...`              | Text content for the ellipsis - will appear after the clamped lines |
+| buttons         |          | {Boolean} | `true`             | The _&laquo;Read more&raquo;_ and _&laquo;Read less&raquo;_ buttons |
+| moreText        |          | {String}  | `Read more`        | _&laquo;Read more&raquo;_ button value |
+| lessText        |          | {String}  | `Read less`        | _&laquo;Read less&raquo;_ button value |
+| className       |          | {String}  |                    | CSS class names added to component |
+| delay           |          | {Number}  | `300`              | Milliseconds, the function is waiting before being triggered, after it stops being called |
+| stopPropagation |          | {Boolean} | `false`            | Prevents the event from bubbling up the DOM tree when clicked on the _&laquo;Read more&raquo;_ button |
+| innerElement    |          | {String}  | `div`              | Custom inner element for clamped text. **This MUST be a [block level element](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements) or styled as one.**
 
@@ -99,0 +113,0 @@ ## License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

114

increased by14%

Worsened metrics

Total package byte prevSize

13714

decreased by-56.82%

Number of package files

5

decreased by-37.5%

Lines of code

15

decreased by-93.42%

No dependency changes