From 055332b4171322ff9d45bb716b73b20dc50b29e8 Mon Sep 17 00:00:00 2001 From: sektordv Date: Mon, 2 Nov 2020 17:29:01 +0100 Subject: [PATCH 1/8] added cutoff prop --- src/index.js | 47 +++++++++++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/src/index.js b/src/index.js index a5ffa06..5d73bba 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; +import React, { PureComponent } from "react"; +import PropTypes from "prop-types"; export default class ClampLines extends PureComponent { constructor(props) { @@ -20,7 +20,7 @@ export default class ClampLines extends PureComponent { }; // If window is undefined it means the code is executed server-side - this.ssr = typeof window === 'undefined'; + this.ssr = typeof window === "undefined"; this.action = this.action.bind(this); this.clickHandler = this.clickHandler.bind(this); @@ -38,14 +38,14 @@ export default class ClampLines extends PureComponent { this.clampLines(); if (this.watch) { - window.addEventListener('resize', this.debounced); + window.addEventListener("resize", this.debounced); } } } componentWillUnmount() { if (!this.ssr) { - window.removeEventListener('resize', this.debounced); + window.removeEventListener("resize", this.debounced); } } @@ -87,7 +87,7 @@ export default class ClampLines extends PureComponent { if (!this.element) return; this.setState({ - text: '', + text: "", }); let maxHeight = this.lineHeight * this.props.lines + 1; @@ -111,9 +111,10 @@ export default class ClampLines extends PureComponent { } this.element.innerText = - this.original.slice(0, this.middle - 5) + this.getEllipsis(); + this.original.slice(0, this.middle - this.cutoff) + this.getEllipsis(); this.setState({ - text: this.original.slice(0, this.middle - 5) + this.getEllipsis(), + text: + this.original.slice(0, this.middle - this.cutoff) + this.getEllipsis(), }); } @@ -126,13 +127,13 @@ export default class ClampLines extends PureComponent { } getClassName() { - let className = this.props.className || ''; + let className = this.props.className || ""; return `clamp-lines ${className}`; } getEllipsis() { - return this.watch && !this.state.noClamp ? this.props.ellipsis : ''; + return this.watch && !this.state.noClamp ? this.props.ellipsis : ""; } getButton() { @@ -173,13 +174,17 @@ export default class ClampLines extends PureComponent { return null; } - const innerClampElement = React.createElement(this.props.innerElement, { - ref: e => { - this.element = e; + const innerClampElement = React.createElement( + this.props.innerElement, + { + ref: (e) => { + this.element = e; + }, + id: `clamped-content-${this.uuid}`, + "aria-hidden": this.state.expanded, }, - id: `clamped-content-${this.uuid}`, - 'aria-hidden': this.state.expanded, - }, this.state.text); + this.state.text + ); return (
@@ -202,14 +207,16 @@ ClampLines.propTypes = { delay: PropTypes.number, stopPropagation: PropTypes.bool, innerElement: PropTypes.string, + cutoff: PropTypes.number, }; ClampLines.defaultProps = { lines: 3, - ellipsis: '...', + ellipsis: "...", buttons: true, - moreText: 'Read more', - lessText: 'Read less', + moreText: "Read more", + lessText: "Read less", delay: 300, - innerElement: 'div' + cutoff: 5, + innerElement: "div", }; From 8f25d6e74b55a52a451767c55af521eb1be23774 Mon Sep 17 00:00:00 2001 From: sektordv Date: Mon, 2 Nov 2020 17:53:13 +0100 Subject: [PATCH 2/8] built --- lib/index.js | 2 +- yarn.lock | 3868 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 3869 insertions(+), 1 deletion(-) create mode 100644 yarn.lock diff --git a/lib/index.js b/lib/index.js index 1c1e9a1..4c2bd17 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1 +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]}}(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 Date: Mon, 2 Nov 2020 17:58:30 +0100 Subject: [PATCH 3/8] fixed missing prop --- src/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 5d73bba..f34bc91 100644 --- a/src/index.js +++ b/src/index.js @@ -111,10 +111,12 @@ export default class ClampLines extends PureComponent { } this.element.innerText = - this.original.slice(0, this.middle - this.cutoff) + this.getEllipsis(); + this.original.slice(0, this.middle - this.props.cutoff) + + this.getEllipsis(); this.setState({ text: - this.original.slice(0, this.middle - this.cutoff) + this.getEllipsis(), + this.original.slice(0, this.middle - this.props.cutoff) + + this.getEllipsis(), }); } From 6ef44a0fbaaa3e13557817728c1f111cfa7ac195 Mon Sep 17 00:00:00 2001 From: sektordv Date: Mon, 2 Nov 2020 17:58:51 +0100 Subject: [PATCH 4/8] built --- lib/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/index.js b/lib/index.js index 4c2bd17..c01b603 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1 +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]}}(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 d}));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 u(t,e){for(var n=0;n Date: Mon, 2 Nov 2020 18:06:46 +0100 Subject: [PATCH 5/8] amended readme --- README.md | 44 +++++++++++++++++++++----------------------- 1 file changed, 21 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index f77b9a4..5d9f9b5 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Responsive and accessible clamping component with _«Read more»_/_«Read less»_ buttons built for [React](http://facebook.github.io/react/). -![react-clamp-lines](react-clamp.png 'react-clamp-lines') +![react-clamp-lines](react-clamp.png "react-clamp-lines") ## Demo @@ -28,9 +28,9 @@ Responsive and accessible clamping component with _«Read more»_/_&la ## Usage ```js -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; -import ClampLines from 'react-clamp-lines'; +import React, { Component } from "react"; +import ReactDOM from "react-dom"; +import ClampLines from "react-clamp-lines"; class App extends Component { render() { @@ -49,20 +49,17 @@ class App extends Component { } } -ReactDOM.render(, document.getElementById('clamp')); +ReactDOM.render(, document.getElementById("clamp")); ``` The component and the or _«Read more»_ button always have the `clamp-lines` and `clamp-lines__button` CSS classes respectively. In the example above the `custom-class` will be added to `clamp-lines`, so the output will be: ```html
- -