1.2.1 Fixes & Readme

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)
 

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;

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"
   }
 }

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;

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
   );
 };