nanoclamp - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

CHANGELOG.md

@@ -0,1 +1,17 @@
+<a name="1.2.0"></a>
+# 1.2.0 (2018-02-23)
+
+* Avoid pass component props to children props ([f571af0](https://github.com/microlinkhq/nanoclamp/commit/f571af0))
+* Build lib ([562070d](https://github.com/microlinkhq/nanoclamp/commit/562070d))
+* Improve ellipsis size calculation ([67529c4](https://github.com/microlinkhq/nanoclamp/commit/67529c4))
+* Increase default debounce value ([271aa82](https://github.com/microlinkhq/nanoclamp/commit/271aa82))
+* Prettier storybook ([e3de8f5](https://github.com/microlinkhq/nanoclamp/commit/e3de8f5))
+* Refactor ([836e238](https://github.com/microlinkhq/nanoclamp/commit/836e238))
+* Refactor ([5a06ebd](https://github.com/microlinkhq/nanoclamp/commit/5a06ebd))
+* Update README ([5d83b67](https://github.com/microlinkhq/nanoclamp/commit/5d83b67))
+* Update storybook ([c6557b6](https://github.com/microlinkhq/nanoclamp/commit/c6557b6))
+* Update storybook styles ([bc58b06](https://github.com/microlinkhq/nanoclamp/commit/bc58b06))
+
+
+
 <a name="1.1.4"></a>
@@ -2,0 +18,0 @@ ## 1.1.4 (2018-02-22)

lib/index.js

@@ -1,2 +0,2 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e,t=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),n=require("react");e=n;var i=function(e){function i(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);var t=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,e));return t.state={noClamp:!1,text:"."},t.element=null,t.original=e.text,t.lineHeight=0,t.start=0,t.middle=0,t.end=0,t.debounced=t.debounce(t.action),t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,n.PureComponent),t(i,[{key:"componentDidMount",value:function(){this.props.text&&(this.lineHeight=this.element.clientHeight+1,this.clampLines(),window.addEventListener("resize",this.debounced))}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.debounced)}},{key:"debounce",value:function(e){var t=this,n=void 0;return function(){var i=t,r=!n;clearTimeout(n),n=setTimeout(function(){n=null,e.apply(i)},200),r&&e.apply(i)}}},{key:"action",value:function(){this.setState({noClamp:!1},this.clampLines)}},{key:"clampLines",value:function(){var e=this;this.setState({text:""},function(){var t=e.lineHeight*e.props.lines+1;for(e.start=0,e.middle=0,e.end=e.original.length;e.start<=e.end;){if(e.middle=Math.floor((e.start+e.end)/2),e.element.innerText=e.original.slice(0,e.middle),e.middle===e.original.length)return void e.setState({text:e.original,noClamp:!0});e.moveMarkers(t)}e.setState(function(){return{text:e.original.slice(0,e.middle-5).trim()+"..."}},function(){e.element.innerText=e.state.text})})}},{key:"moveMarkers",value:function(e){this.element.clientHeight<=e?this.start=this.middle+1:this.end=this.middle-1}},{key:"render",value:function(){var e=this,t=this.props;return t.text?(0,n.createElement)(t.is,{className:t.className,ref:function(t){e.element=t}},this.state.text):null}}]),i}();i.defaultProps={className:"",is:"div",lines:3},exports.default=i;
+Object.defineProperty(exports,"__esModule",{value:!0});var e=Object.assign||function(e){for(var t=arguments,n=1;n<arguments.length;n++){var i=t[n];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},t=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),n=require("react");var i=function(i){function r(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r);var t=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.state={noClamp:!1,text:"."},t.element=null,t.original=e.text,t.lineHeight=0,t.start=0,t.middle=0,t.end=0,t.debounced=t.debounce(t.action),t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(r,n.Component),t(r,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.debounced),this.props.text&&(this.lineHeight=this.element.clientHeight+1,this.clampLines())}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.debounced)}},{key:"debounce",value:function(e){var t=this,n=void 0,i=function(){n=null,e.apply(t)};return function(){var r=!n;clearTimeout(n),n=setTimeout(i,t.props.debounce),r&&e.apply(t)}}},{key:"action",value:function(){this.setState({noClamp:!1},this.clampLines)}},{key:"clampLines",value:function(){var e=this,t=this.props,n=t.ellipsis,i=this.lineHeight*t.lines+1,o=n===r.defaultProps.ellipsis?5:1.2*n.length;for(this.start=0,this.middle=0,this.end=this.original.length-o;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(i)}var s=this.original.slice(0,this.middle-o).trim()+n;this.setState({text:s},function(){e.element.innerText=e.state.text})}},{key:"moveMarkers",value:function(e){this.element.clientHeight<=e?this.start=this.middle+1:this.end=this.middle-1}},{key:"render",value:function(){var t=this,i=this.state.text,r=this.props,o=r.is,s=r.text,l=function(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}(r,["is","text","lines","debounce","ellipsis"]),a=e({ref:function(e){return t.element=e}},l);return s?(0,n.createElement)(o,a,i):null}}]),r}();i.defaultProps={is:"div",lines:3,ellipsis:"…",debounce:300},exports.default=i;
 //# sourceMappingURL=index.js.map

lib/index.m.js

@@ -1,2 +0,2 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),t=require("react"),n=function(n){function i(e){!function(e,t){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")}(this);var t=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,e));return t.state={noClamp:!1,text:"."},t.element=null,t.original=e.text,t.lineHeight=0,t.start=0,t.middle=0,t.end=0,t.debounced=t.debounce(t.action),t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,t.PureComponent),e(i,[{key:"componentDidMount",value:function(){this.props.text&&(this.lineHeight=this.element.clientHeight+1,this.clampLines(),window.addEventListener("resize",this.debounced))}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.debounced)}},{key:"debounce",value:function(e){var t=this,n=void 0;return function(){var i=t,r=!n;clearTimeout(n),n=setTimeout(function(){n=null,e.apply(i)},200),r&&e.apply(i)}}},{key:"action",value:function(){this.setState({noClamp:!1},this.clampLines)}},{key:"clampLines",value:function(){var e=this;this.setState({text:""},function(){var t=e.lineHeight*e.props.lines+1;for(e.start=0,e.middle=0,e.end=e.original.length;e.start<=e.end;){if(e.middle=Math.floor((e.start+e.end)/2),e.element.innerText=e.original.slice(0,e.middle),e.middle===e.original.length)return void e.setState({text:e.original,noClamp:!0});e.moveMarkers(t)}e.setState(function(){return{text:e.original.slice(0,e.middle-5).trim()+"..."}},function(){e.element.innerText=e.state.text})})}},{key:"moveMarkers",value:function(e){this.element.clientHeight<=e?this.start=this.middle+1:this.end=this.middle-1}},{key:"render",value:function(){var e=this,n=this.props;return n.text?(0,t.createElement)(n.is,{className:n.className,ref:function(t){e.element=t}},this.state.text):null}}]),i}();n.defaultProps={className:"",is:"div",lines:3},exports.default=n;
+Object.defineProperty(exports,"__esModule",{value:!0});var e=Object.assign||function(e){for(var t=arguments,n=1;n<arguments.length;n++){var i=t[n];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},t=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),n=require("react"),i=function(i){function r(e){!function(e,t){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}(this);var t=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.state={noClamp:!1,text:"."},t.element=null,t.original=e.text,t.lineHeight=0,t.start=0,t.middle=0,t.end=0,t.debounced=t.debounce(t.action),t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(r,n.Component),t(r,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.debounced),this.props.text&&(this.lineHeight=this.element.clientHeight+1,this.clampLines())}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.debounced)}},{key:"debounce",value:function(e){var t=this,n=void 0,i=function(){n=null,e.apply(t)};return function(){var r=!n;clearTimeout(n),n=setTimeout(i,t.props.debounce),r&&e.apply(t)}}},{key:"action",value:function(){this.setState({noClamp:!1},this.clampLines)}},{key:"clampLines",value:function(){var e=this,t=this.props,n=t.ellipsis,i=this.lineHeight*t.lines+1,o=n===r.defaultProps.ellipsis?5:1.2*n.length;for(this.start=0,this.middle=0,this.end=this.original.length-o;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(i)}var s=this.original.slice(0,this.middle-o).trim()+n;this.setState({text:s},function(){e.element.innerText=e.state.text})}},{key:"moveMarkers",value:function(e){this.element.clientHeight<=e?this.start=this.middle+1:this.end=this.middle-1}},{key:"render",value:function(){var t=this,i=this.state.text,r=this.props,o=r.is,s=r.text,l=function(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}(r,["is","text","lines","debounce","ellipsis"]),a=e({ref:function(e){return t.element=e}},l);return s?(0,n.createElement)(o,a,i):null}}]),r}();i.defaultProps={is:"div",lines:3,ellipsis:"…",debounce:300},exports.default=i;
 //# sourceMappingURL=index.m.js.map

package.json

@@ -5,3 +5,3 @@ {
   "homepage": "https://github.com/microlinkhq/nanoclamp",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "main": "lib/index.js",
@@ -40,2 +40,4 @@ "module": "lib/index.m.js",
     "eslint-plugin-jsx-a11y": "latest",
+    "husky": "latest",
+    "lint-staged": "latest",
     "microbundle": "latest",
@@ -42,0 +44,0 @@ "prettier-standard": "latest",

README.md

@@ -1,2 +0,2 @@
-# nanoclamp
+# nanoclamp 🗜
 
@@ -34,5 +34,7 @@ ![Last version](https://img.shields.io/github/tag/microlinkhq/nanoclamp.svg?style=flat-square)
 
-prop | type | default value | description |
+prop | type | default | description |
 -----|------|--------------------|-------------|
 className | `string` |  | CSS classname(s) added to the string
+debounce | `number` | `300` | Time in milliseconds used for debounce
+ellipsis | `string` | `'…'` | String displayed after the clamped `text`
 is | `string` | `'div'` | DOM selector used to render the string
@@ -39,0 +41,0 @@ lines | `number` | `3` | Number of visible lines

No alert changes

Improved metrics

Total package byte prevSize

34982

increased by12.49%

Lines of code

26

increased by18.18%

Number of lines in readme file

49

increased by4.26%

Worsened metrics

Dev dependency count

21

increased by10.53%

No dependency changes