react-simple-read-more
Version:
simple readmore library which allows you to hide your long description with read more and read less button
1 lines • 2.42 kB
JavaScript
'use strict';Object.defineProperty(exports,'__esModule',{value:!0});var _react=require('react'),_react2=_interopRequireDefault(_react),_reactLinkify=require('react-linkify'),_reactLinkify2=_interopRequireDefault(_reactLinkify);function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var StringParser=_react2.default.createClass({displayName:'StringParser',getInitialState:function getInitialState(){return{isMore:!1,text:[]}},getDefaultProps:function getDefaultProps(){return{charLimit:200}},componentDidMount:function componentDidMount(){this.createTextArr(this.props)},componentWillReceiveProps:function componentWillReceiveProps(a){a.text!=this.props.text&&this.createTextArr(a)},createTextArr:function createTextArr(a){var b=[],c=[];a.text&&(b=a.text.split('\n'));for(var d=0;d<b.length;d++){c.push({text:b[d],newLine:!0});var e=b[d],f=[],g='';for(f.push(e);e.length>this.props.charLimit&&(!f.length||f[0]!=g);){g=f[0],e=f[0].substr(0,f[0].length/2);for(var k,h=0;h<f.length;h+=2){for(k=f[h].length/2;' '!=f[h].charAt(k)&&k<f[h].length;)k++;f.splice(h+1,0,f[h].substr(k)),f.splice(h,1,f[h].substr(0,k))}}b.splice(d,1,f[0]),c.splice(d,1,{text:f[0],newLine:!(1!=f.length)});for(var l=1;l<f.length;l++)b.splice(d+l,0,f[l]),c.splice(d+l,0,{text:f[l],newLine:l==f.length-1}),d++}this.setState({text:c})},render:function render(){var a=this;return _react2.default.createElement('div',{style:{width:'100%',wordWrap:'break-word'}},this.state.text.map(function(b,c){var d=this;return''==b.text&&(c<this.props.breakOn||this.state.isMore)?_react2.default.createElement('div',{style:{height:10},className:'',key:c},b.text.replace(/ /g,'\xA0')):c<this.props.breakOn||this.state.isMore?b.newLine?_react2.default.createElement('span',{key:c},_react2.default.createElement(_reactLinkify2.default,{properties:{target:'_blank'},target:'_blank'},b.text),_react2.default.createElement('div',null)):_react2.default.createElement(_reactLinkify2.default,{properties:{target:'_blank'},target:'_blank',key:c},b.text):c==this.props.breakOn?_react2.default.createElement('span',{key:c,className:'cursor-pointer edittabs-indiv-tabs',onClick:function onClick(){d.setState({isMore:!0})}},'...Read More'):void 0}.bind(this)),this.state.isMore?_react2.default.createElement('div',{className:'cursor-pointer edittabs-indiv-tabs',onClick:function onClick(){a.setState({isMore:!1})}},'...Show less'):null)}});exports.default=StringParser;