diff --git a/CHANGELOG.md b/CHANGELOG.md index 43144e3..367a3a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,6 @@ ## Changelog + +* 0.14.0 Added new event hook: `onToggled` * 0.13.1 Fix react warning of `maxCalculateTimes` * 0.13.0 Shows all of the text when `line` is falsely, add `maxCalculateTimes` to prevent infinite loop * 0.12.1 Update peerDependencies to support React 16 diff --git a/lib/index.js b/lib/index.js index 93b1d63..3902374 100644 --- a/lib/index.js +++ b/lib/index.js @@ -106,6 +106,10 @@ window.cancelAnimationFrame(_this.rafId); } _this.rafId = window.requestAnimationFrame(_this.update.bind(_this)); + }, _this.onToggled = function (truncated) { + typeof _this.props.onToggled === 'function' && setTimeout(function () { + return _this.props.onToggled(truncated); + }, 0); }, _this.onTruncated = function () { typeof _this.props.onTruncated === 'function' && setTimeout(function () { return _this.props.onTruncated(); @@ -174,6 +178,7 @@ // return if all of text can be displayed if (scopeWidth >= this.measureWidth(text)) { + this.onToggled(false); return (0, _react.createElement)(textElement, props, text); } @@ -261,10 +266,12 @@ } if (startPos === maxTextLength) { + this.onToggled(false); return (0, _react.createElement)(textElement, props, text); } this.onTruncated(); + this.onToggled(true); return _react2.default.createElement( 'div', props, @@ -321,6 +328,7 @@ line: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.bool]), onCalculated: _propTypes2.default.func, onTruncated: _propTypes2.default.func, + onToggled: _propTypes2.default.func, text: _propTypes2.default.string, textElement: _propTypes2.default.node, textTruncateChild: _propTypes2.default.node, diff --git a/package.json b/package.json index e07effc..095626c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-text-truncate", - "version": "0.13.1", + "version": "0.14.0", "description": "Truncate text for React.js", "main": "lib/index.js", "scripts": { diff --git a/src/App.js b/src/App.js index 0e7fdce..185a5a0 100644 --- a/src/App.js +++ b/src/App.js @@ -118,6 +118,12 @@ export class App extends Component { <h5>10. Custom text element</h5> <TextTruncate {...props} textElement={customTextRender} /> </div> + <div id='sample-10'> + <h5>11. Custom text element</h5> + <div style={{width: 288, fontSize:16, background: '#ccc'}}> + <TextTruncate {...props} textTruncateChild={undefined} text="甘蔗產地直送甘蔗汁+四季青,可選擇甜度、冰塊或是熱飲,冷飲皆為700cc、熱飲皆為500cc;另可加價換成鮮奶茶,也可加購(布丁、黑糖珍珠、燕麥、蜂蜜、蘆薈、珍珠、椰果)。餐點圖片僅供參考,餐點狀況以當日實際出餐為主" /> + </div> + </div> </div> </div> )