react-simple-read-more
Version:
simple readmore library which allows you to hide your long description with read more and read less button
96 lines (90 loc) • 2.98 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var Linkify = require('linkify-react');
function createTextArr(text, charLimit) {
let lines = [];
let result = [];
if (text) lines = text.split("\n");
for (let i = 0; i < lines.length; i++) {
result.push({
text: lines[i],
newLine: true
});
let tempText = lines[i];
let tempArr = [];
let cmptext = '';
tempArr.push(tempText);
while (tempText.length > charLimit && (!tempArr.length || tempArr[0] != cmptext)) {
cmptext = tempArr[0];
tempText = tempArr[0].substr(0, tempArr[0].length / 2);
for (let j = 0; j < tempArr.length; j = j + 2) {
let splitIndex = tempArr[j].length / 2;
while (tempArr[j].charAt(splitIndex) != ' ' && splitIndex < tempArr[j].length) {
splitIndex++;
}
tempArr.splice(j + 1, 0, tempArr[j].substr(splitIndex));
tempArr.splice(j, 1, tempArr[j].substr(0, splitIndex));
}
}
lines.splice(i, 1, tempArr[0]);
result.splice(i, 1, {
text: tempArr[0],
newLine: tempArr.length == 1 ? true : false
});
for (let j = 1; j < tempArr.length; j++) {
lines.splice(i + j, 0, tempArr[j]);
result.splice(i + j, 0, {
text: tempArr[j],
newLine: j == tempArr.length - 1 ? true : false
});
i++;
}
}
return result;
}
function StringParser({
text: inputText,
charLimit = 200,
breakOn = Infinity
}) {
const [isMore, setIsMore] = React.useState(false);
const [text, setText] = React.useState([]);
React.useEffect(() => {
setText(createTextArr(inputText, charLimit));
}, [inputText, charLimit]);
return /*#__PURE__*/React.createElement("div", {
style: {
width: '100%',
wordWrap: 'break-word'
}
}, text.map((station, i) => {
if (station.text === '' && (i < breakOn || isMore)) return /*#__PURE__*/React.createElement("div", {
style: {
height: 10
},
className: "",
key: i
}, station.text.replace(/ /g, "\u00a0"));else if (i < breakOn || isMore) return station.newLine ? /*#__PURE__*/React.createElement("span", {
key: i
}, /*#__PURE__*/React.createElement(Linkify, {
options: {
target: '_blank'
}
}, station.text), /*#__PURE__*/React.createElement("div", null)) : /*#__PURE__*/React.createElement(Linkify, {
options: {
target: '_blank'
},
key: i
}, station.text);else if (i === breakOn) return /*#__PURE__*/React.createElement("span", {
key: i,
className: "cursor-pointer edittabs-indiv-tabs",
onClick: () => setIsMore(true)
}, "...Read More");else return null;
}), isMore ? /*#__PURE__*/React.createElement("div", {
className: "cursor-pointer edittabs-indiv-tabs",
onClick: () => setIsMore(false)
}, "...Show less") : null);
}
exports.createTextArr = createTextArr;
exports.default = StringParser;