From a4a9b2b76f57d76a55bcac1aba1ea91e5a36c7b6 Mon Sep 17 00:00:00 2001 From: Cezary Daniel Nowak Date: Thu, 1 Feb 2018 19:13:32 +0100 Subject: [PATCH] 1.2.1 Fixes & Readme --- README.md | 23 ++++- demo/dist/index.dist.js | 159 ++++++++----------------------- demo/dist/style.css | 5 +- demo/index.js | 58 ++++++------ demo/style.css | 201 ---------------------------------------- package.json | 13 +-- src/clamp.js | 6 +- src/index.js | 38 +++++--- 8 files changed, 128 insertions(+), 375 deletions(-) delete mode 100644 demo/style.css diff --git a/README.md b/README.md index 63e5a70..5817641 100644 --- a/README.md +++ b/README.md @@ -46,16 +46,35 @@ render() { Dotdotdot props: ---------------- *clamp* (Number | String | 'auto'). This controls where and when to clamp the text of an element. Submitting a number controls the number of lines that should be displayed. Second, you can submit a CSS value (in px or em) that controls the height of the element as a String. Finally, you can submit the word 'auto' as a string. Auto will try to fill up the available space with the content and then automatically clamp once content no longer fits. This last option should only be set if a static height is being set on the element elsewhere (such as through CSS) otherwise no clamping will be done. - -*ellipsis* (String). The character to insert at the end of the HTML element after truncation is performed. This defaults to an ellipsis (…). +*useNativeClamp*: [default: `true`] Use -webkit-line-clamp available in Webkit (Chrome, Safari) only. +*splitOnChars*: [default: `['.', '-', '–', '—', ' ']`] Split on sentences (periods), hypens, en-dashes, em-dashes, and words (spaces). +*animate*: [default: false] animated clamp +*truncationChar*: The character to insert at the end of the HTML element after truncation is performed. This defaults to an ellipsis (…). + `useNativeClamp` overrides it to default. +*truncationHTML*: String of HTML to use instead of truncationChar Notes ----------------- React-dotdotdot is simple plugin, if you need more functionality, consider using react-truncate https://www.npmjs.com/package/react-truncate +Known issues: +----------------- +- react-dotdotdot does not work with text containers with nested markup. +- `padding-bottom` CSS rule breaks clamp + Changelog ----------------- +1.2.1 +- Update documentation +- Re-trigger clamp on window.load +- Allow for all params to passed to clamp-js (splitOnChars, animate, etc) + +1.2.0 +- Fix word breaking for long text (issues #21 and #15; Thanks @krzysztofczernek). +- calculate correct height for many childs + clamp: 'auto' (thanks @rurquia) +- Update dependencies to support react 16 (thanks @emersonbroga) + 1.0.17 - Support for IE11, Edge and Firefox (thanks, @kkwiatkowski) diff --git a/demo/dist/index.dist.js b/demo/dist/index.dist.js index d1436d5..2c279d3 100644 --- a/demo/dist/index.dist.js +++ b/demo/dist/index.dist.js @@ -81,7 +81,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'h2', null, - 'Light' + 'Light / clamp=3 useNativeClamp=false' ), _react2.default.createElement( _reactDotdotdot2.default, @@ -92,13 +92,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - '1Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ) ), @@ -108,7 +102,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'h2', null, - 'Normal' + 'Normal / clamp=7' ), _react2.default.createElement( _reactDotdotdot2.default, @@ -116,13 +110,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - '2Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ) ), @@ -132,18 +120,16 @@ var App = function (_React$Component) { _react2.default.createElement( 'h2', null, - 'Heavy' + 'Heavy / clamp=7' ), _react2.default.createElement( - 'p', - null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', + _reactDotdotdot2.default, + { clamp: 7 }, _react2.default.createElement( - 'span', + 'p', null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + ) ) ) ), @@ -161,18 +147,16 @@ var App = function (_React$Component) { _react2.default.createElement( 'h2', null, - 'Tight' + 'Tight / clamp=5 useNativeClamp=false truncationChar="\xBB"' ), _react2.default.createElement( - 'p', - null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', + _reactDotdotdot2.default, + { clamp: 5, useNativeClamp: false, truncationChar: '\xBB' }, _react2.default.createElement( - 'span', + 'p', null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + ) ) ), _react2.default.createElement( @@ -181,18 +165,16 @@ var App = function (_React$Component) { _react2.default.createElement( 'h2', null, - 'Normal' + 'Normal / clamp=5 useNativeClamp=false truncationHTML="
\u2026" truncationChar=""' ), _react2.default.createElement( - 'p', - null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', + _reactDotdotdot2.default, + { clamp: 5, useNativeClamp: false, truncationHTML: '
\u2026', truncationChar: '' }, _react2.default.createElement( - 'span', + 'p', null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + ) ) ), _react2.default.createElement( @@ -206,13 +188,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ) ), @@ -235,13 +211,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ), _react2.default.createElement( @@ -255,13 +225,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ), _react2.default.createElement( @@ -275,13 +239,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ) ), @@ -304,13 +262,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ), _react2.default.createElement( @@ -324,13 +276,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ), _react2.default.createElement( @@ -344,13 +290,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ) ), @@ -373,13 +313,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ), _react2.default.createElement( @@ -393,13 +327,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ), _react2.default.createElement( @@ -413,13 +341,7 @@ var App = function (_React$Component) { _react2.default.createElement( 'p', null, - 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled ', - _react2.default.createElement( - 'span', - null, - '`ORANGE MARMALADE\'' - ), - ', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' + 'Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE\', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.' ) ) ) @@ -17876,7 +17798,7 @@ module.exports = function pick(obj, keys) { * on the current height of the element and the line-height of the text. */ function getMaxLines(height) { - var availHeight = height || element.clientHeight, + var availHeight = height || (element.parentNode.clientHeight-element.offsetTop), lineHeight = getLineHeight(element); return Math.max(Math.floor(availHeight / lineHeight), 0); @@ -17899,9 +17821,9 @@ module.exports = function pick(obj, keys) { if (lh == 'normal') { // Normal line heights vary from browser to browser. The spec recommends // a value between 1.0 and 1.2 of the font size. Using 1.1 to split the diff. - lh = parseInt(computeStyle(elem, 'font-size')) * 1.2; + lh = parseInt(computeStyle(elem, 'font-size'), 10) * 1.2; } - return parseInt(lh); + return parseInt(lh, 10); } @@ -18050,7 +17972,7 @@ module.exports = function pick(obj, keys) { if (clampValue == 'auto') { clampValue = getMaxLines(); } else if (isCSSValue) { - clampValue = getMaxLines(parseInt(clampValue)); + clampValue = getMaxLines(parseInt(clampValue, 10)); } var clampedText; @@ -18060,6 +17982,7 @@ module.exports = function pick(obj, keys) { sty.webkitBoxOrient = 'vertical'; sty.display = '-webkit-box'; sty.webkitLineClamp = clampValue; + sty.wordBreak = 'break-all'; if (isCSSValue) { sty.height = opt.clamp + 'px'; @@ -18096,7 +18019,6 @@ function Dotdotdot() { } this.update = this.update.bind(this); this.getContainerRef = function (container) { - console.log('ref created', container); this.container = container; }.bind(this); } @@ -18105,10 +18027,8 @@ Dotdotdot.prototype = Object.create(React.Component.prototype); Dotdotdot.prototype.componentDidMount = function() { window.addEventListener('resize', this.update, false); window.addEventListener('load', function(event) { - setTimeout(function() { - this.update(); - - }.bind(this), 1000) + // NOTE: It's possible, not all fonts are loaded at this point + this.update(); }.bind(this)); this.dotdotdot(ReactDOM.findDOMNode(this.container)); }; @@ -18124,7 +18044,6 @@ Dotdotdot.prototype.dotdotdot = function(container) { if (container.length) { throw new Error('Please provide exacly one child to dotdotdot'); } - console.log('dotdotdot', container.innerHTML) clamp(container, pick(this.props, [ 'clamp', 'useNativeClamp', diff --git a/demo/dist/style.css b/demo/dist/style.css index 4b70466..d1a956b 100644 --- a/demo/dist/style.css +++ b/demo/dist/style.css @@ -88,8 +88,8 @@ span { body { font-size: 16px; - /*font-family: 'Cormorant Garamond', serif; - */line-height: 1.3; + font-family: 'Cormorant Garamond', serif; + line-height: 1.3; font-weight: 400; letter-spacing: 0; } @@ -130,7 +130,6 @@ h1 { h2 { display: block; padding-bottom: 15px; - text-transform: uppercase; letter-spacing: 0.05em; font-variant-ligatures: none; font-weight: 700; diff --git a/demo/index.js b/demo/index.js index 98a78f0..28a87b2 100644 --- a/demo/index.js +++ b/demo/index.js @@ -21,49 +21,55 @@ class App extends React.Component {

Font Weight

-

Light

+

Light / clamp=3 useNativeClamp=false

- 1Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

-

Normal

+

Normal / clamp=7

- 2Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

-

Heavy

-

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. -

+

Heavy / clamp=7

+ +

+ Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. +

+

Tracking

-

Tight

-

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. -

+

Tight / clamp=5 useNativeClamp=false truncationChar="»"

+ +

+ Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. +

+
-

Normal

-

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. -

+

Normal / clamp=5 useNativeClamp=false truncationHTML="<br /><marquee>…</marquee>" truncationChar=""

+ +

+ Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. +

+

Wide

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

@@ -72,19 +78,19 @@ class App extends React.Component {

Tight

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

Normal

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

Wide

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

@@ -93,19 +99,19 @@ class App extends React.Component {

Tight

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

Normal

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

Double

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

@@ -114,19 +120,19 @@ class App extends React.Component {

Ragged Right

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

Justified

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

Justified with Hyphenation

- Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. + Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

diff --git a/demo/style.css b/demo/style.css deleted file mode 100644 index de0dc5b..0000000 --- a/demo/style.css +++ /dev/null @@ -1,201 +0,0 @@ -/* - Thanks to Carolyn McNeillie - Source: https://codepen.io/carolynmcneillie/pen/Lewxrm' - */ - -/*Let's play!*/ - -/*Font-weight*/ -.font-weight.small { - font-weight: 300; -} - -.font-weight.medium { - font-weight: 400; -} - -.font-weight.large { - font-weight: 600; -} - -/*Letter-spacing*/ -.letter-spacing.small, -.letter-spacing.small span { - letter-spacing: -0.05em; -} - -.letter-spacing.medium, -.letter-spacing.medium span { - letter-spacing: 0; -} - -.letter-spacing.large, -.letter-spacing.large span { - letter-spacing: 0.3em; -} - -/*Word-spacing*/ -.word-spacing.small { - word-spacing: -0.2em; -} - -.word-spacing.medium { - word-spacing: 0em; -} - -.word-spacing.large { - word-spacing: 0.5em; -} - -/*Line-height */ -.line-height.small { - line-height: 0.9; -} - -.line-height.medium { - line-height: 1.3; -} - -.line-height.large { - line-height: 2; -} - -/* Justification */ -.left { - text-align: left; -} - -.justified { - text-align: justify; -} - -.justified-hyphen { - text-align: justify; - hyphens: auto; -} - -/*BONUS - play with letter-spacing on the all-caps ORANGE MARMALADE*/ - -span { - letter-spacing: 0.025em; -} - -/*Styles*/ - -* { - box-model: border-box; -} - -body { - font-size: 16px; - font-family: 'Cormorant Garamond', serif; - line-height: 1.3; - font-weight: 400; - letter-spacing: 0; -} - -.wrapper { - width: 1080px; - border-top: 2px solid #efefef; - display: block; - margin: 0 auto; -} - -.wrapper:after { - content: ""; - display: table; - clear: both; -} - -.wrapper div { - width: 300px; - padding-right: 60px; - padding-top: 30px; - padding-bottom: 100px; - float: left; -} - -h1 { - display: block; - width: 1080px; - margin: 0 auto; - padding: 15px; - text-transform: uppercase; - letter-spacing: 0.025em; - font-variant-ligatures: none; - font-weight: 700; - font-size: 32px; -} - -h2 { - display: block; - padding-bottom: 15px; - text-transform: uppercase; - letter-spacing: 0.05em; - font-variant-ligatures: none; - font-weight: 700; - font-size: 16px; - margin: 0; -} - -p { - padding: 0; - margin: 0; -} - -p.intro { - max-width: 1080px; - margin: 0 auto; - padding-bottom: 12px; - font-size: 24px; -} - -p.intro:first-of-type { - padding-top: 100px; -} - -p.intro:last-of-type { - padding-bottom: 100px; -} - -@media screen and (max-width: 1100px) { - - .intro, - h1, - .wrapper { - width: 600px; - padding-bottom: 50px; - } - - .intro:last-of-type, - .wrapper div, - h1{ - padding-bottom: 15px; - } - - .wrapper div { - display: block; - float: none; - width: 100%; - margin: 0 auto; - } - -} - -@media screen and (max-width: 680px) { - - body { - padding: 35px; - } - - .intro, - h1, - .wrapper { - width: 100%; - } - - h1 { - padding: 10px 0; - } - -} diff --git a/package.json b/package.json index a5be6ee..7eaccd0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-dotdotdot", - "version": "1.2.0", + "version": "1.2.1", "description": "Multiline text ellipsis for react", "main": "src/index.js", "scripts": { @@ -16,11 +16,12 @@ "url": "https://github.com/CezaryDanielNowak/React-dotdotdot/issues" }, "homepage": "https://github.com/CezaryDanielNowak/React-dotdotdot#readme", - "dependencies": { - "prop-types": "^15.6.0" - }, "peerDependencies": { - "react": "^16.2.0", - "react-dom": "^16.2.0" + "prop-types": "*", + "react": "*", + "react-dom": "*" + }, + "dependencies": { + "object.pick": "^1.3.0" } } diff --git a/src/clamp.js b/src/clamp.js index 4af7522..0cf5f69 100644 --- a/src/clamp.js +++ b/src/clamp.js @@ -112,9 +112,9 @@ if (lh == 'normal') { // Normal line heights vary from browser to browser. The spec recommends // a value between 1.0 and 1.2 of the font size. Using 1.1 to split the diff. - lh = parseInt(computeStyle(elem, 'font-size')) * 1.2; + lh = parseInt(computeStyle(elem, 'font-size'), 10) * 1.2; } - return parseInt(lh); + return parseInt(lh, 10); } @@ -263,7 +263,7 @@ if (clampValue == 'auto') { clampValue = getMaxLines(); } else if (isCSSValue) { - clampValue = getMaxLines(parseInt(clampValue)); + clampValue = getMaxLines(parseInt(clampValue, 10)); } var clampedText; diff --git a/src/index.js b/src/index.js index d775d5c..111e342 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,9 @@ var React = require('react'); -var ReactDOM = require('react-dom'); var clamp = require('./clamp.js'); +var pick = require('object.pick'); var PropTypes = require('prop-types'); +var ReactDOM = require('react-dom'); + /** * multuline text-overflow: ellipsis */ @@ -10,12 +12,19 @@ function Dotdotdot() { throw new TypeError("Cannot call a class as a function"); } this.update = this.update.bind(this); + this.getContainerRef = function (container) { + this.container = container; + }.bind(this); } Dotdotdot.prototype = Object.create(React.Component.prototype); Dotdotdot.prototype.componentDidMount = function() { - this.dotdotdot(ReactDOM.findDOMNode(this.container)); window.addEventListener('resize', this.update, false); + window.addEventListener('load', function(event) { + // NOTE: It's possible, not all fonts are loaded at this point + this.update(); + }.bind(this)); + this.dotdotdot(ReactDOM.findDOMNode(this.container)); }; Dotdotdot.prototype.componentWillUnmount = function() { window.removeEventListener('resize', this.update, false); @@ -29,26 +38,27 @@ Dotdotdot.prototype.dotdotdot = function(container) { if (container.length) { throw new Error('Please provide exacly one child to dotdotdot'); } - - clamp(container, { - clamp: this.props.clamp, - useNativeClamp: this.props.useNativeClamp, - truncationChar: this.props.truncationChar - }); - } + clamp(container, pick(this.props, [ + 'animate', + 'clamp', + 'splitOnChars', + 'truncationChar', + 'truncationHTML', + 'useNativeClamp' + ])); + }; }; Dotdotdot.prototype.update = function() { this.forceUpdate(); }; Dotdotdot.prototype.render = function() { - var _ref = function (container) { - this.container = container; - }.bind(this); return React.createElement( "div", - { ref: _ref, - className: this.props.className }, + { + ref: this.getContainerRef, + className: this.props.className + }, this.props.children ); };