(window.webpackJsonp=window.webpackJsonp||[]).push([[136],{729:function(n,t,a){"use strict";a.r(t),a.d(t,"default",function(){return H});var e=a(23),s=a.n(e),o=a(24),i=a.n(o),r=a(25),p=a.n(r),c=a(26),d=a.n(c),l=a(32),h=a.n(l),u=a(27),m=a.n(u),g=a(28),k=a.n(g),f=a(580),C=a.n(f),b=a(0),y=a.n(b),v=a(111),x=a(82),w=function(){return y.a.createElement(x.Bb,{style:{lineHeight:"28px"},activeIndex:1,activeStyle:{backgroundColor:"#f48f42"},highlightStyle:{backgroundColor:"#ffd54f"},searchWords:["Chain","Chomps"],textToHighlight:"Chain Chomps (occasionally Chain-Chomps) are common enemies in the Mario franchise. They first appeared in Super Mario Bros. 3. Chain Chomps bear a resemblance to a ball and chain and are typified by their large, tooth-filled maws and incessant biting. Shigeru Miyamoto's inspiration for the Chain Chomps was from a childhood experience: a dog once ran up to him and tried to bite him, but the dog's chain held it back. As a result, Chain Chomps also possess canine qualities, such as barking, and are commonly used as guard dogs throughout the Mario series. Chain Chomps were originally created as an enemy for The Legend of Zelda series, but ended up being used for the Mario franchise first. Many Chomps have been part of the Koopa Troop, though a couple of them have been shown to be independent. "})},M=function(){return y.a.createElement(x.Bb,{style:{lineHeight:"28px"},activeIndex:1,activeClassName:"zent-demo-text-mark-active",highlightClassName:"zent-demo-text-mark-highlight",searchWords:["Chomps"],textToHighlight:"Chain Chomps (occasionally Chain-Chomps) are common enemies in the Mario franchise. They first appeared in Super Mario Bros. 3. Chain Chomps bear a resemblance to a ball and chain and are typified by their large, tooth-filled maws and incessant biting. Shigeru Miyamoto's inspiration for the Chain Chomps was from a childhood experience: a dog once ran up to him and tried to bite him, but the dog's chain held it back. As a result, Chain Chomps also possess canine qualities, such as barking, and are commonly used as guard dogs throughout the Mario series. Chain Chomps were originally created as an enemy for The Legend of Zelda series, but ended up being used for the Mario franchise first. Many Chomps have been part of the Koopa Troop, though a couple of them have been shown to be independent. "})},N=function(){return y.a.createElement(x.Bb,{style:{lineHeight:"28px"},activeIndex:1,activeClassName:"zent-demo-text-mark-active",highlightClassName:{Chomps:"zent-demo-text-mark-highlight",Chain:"zent-demo-text-mark-highlight2"},searchWords:["Chomps","Chain"],textToHighlight:"Chain Chomps (occasionally Chain-Chomps) are common enemies in the Mario franchise. They first appeared in Super Mario Bros. 3. Chain Chomps bear a resemblance to a ball and chain and are typified by their large, tooth-filled maws and incessant biting. Shigeru Miyamoto's inspiration for the Chain Chomps was from a childhood experience: a dog once ran up to him and tried to bite him, but the dog's chain held it back. As a result, Chain Chomps also possess canine qualities, such as barking, and are commonly used as guard dogs throughout the Mario series. Chain Chomps were originally created as an enemy for The Legend of Zelda series, but ended up being used for the Mario franchise first. Many Chomps have been part of the Koopa Troop, though a couple of them have been shown to be independent. "})};function T(n){return y.a.createElement(n.tag,C()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function S(n){return y.a.createElement(T,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function E(n){return y.a.createElement(T,{tag:"style",html:n.style})}var z=function(n){function t(){var n,a;s()(this,t);for(var e=arguments.length,o=new Array(e),i=0;i<e;i++)o[i]=arguments[i];return a=p()(this,(n=d()(t)).call.apply(n,[this].concat(o))),k()(h()(a),"state",{showCode:!1}),k()(h()(a),"toggle",function(){a.setState({showCode:!a.state.showCode})}),a}return m()(t,n),i()(t,[{key:"render",value:function(){var n=this.state.showCode,t=this.props,a=t.title,e=t.src,s=t.children;return y.a.createElement("div",{className:"zandoc-react-demo"},y.a.createElement("div",{className:"zandoc-react-demo__preview"},s),y.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},y.a.createElement("div",{className:"zandoc-react-demo__title"},y.a.createElement("p",null,a||"")),y.a.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&y.a.createElement("pre",{className:"zandoc-react-demo__code"},y.a.createElement(T,{tag:"code",html:e,attributes:{className:"language-jsx"}})))}}]),t}(b.Component),H=function(n){function t(){return s()(this,t),p()(this,d()(t).apply(this,arguments))}return m()(t,n),i()(t,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var t=document.querySelector('a[href="'.concat(n,'"]'));t&&Object(v.a)(document.documentElement,0,function n(t,a){for(;t;)return t.offsetTop&&"static"!==getComputedStyle(t).position&&(a+=t.offsetTop),n(t.parentNode,a);return a}(t,-9))}}},{key:"render",value:function(){return y.a.createElement("div",{className:"zandoc-react-container",key:null},y.a.createElement(E,{style:".zent-demo-text-mark-highlight {\n\tbackground-color: #ffd54f;\n}\n\n.zent-demo-text-mark-active {\n\tbackground-color: #f48f42;\n}\n\n.zent-demo-text-mark-highlight2 {\n\tbackground-color: #df4545;\n}"}),y.a.createElement(S,{html:'<h2 class="anchor-heading"><a href="#textmark">¶</a><a href="javascript:void(0)" id="textmark" class="anchor-point"></a>TextMark</h2>\n<p>Highlight selected words in a string.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),y.a.createElement(z,{title:"Inline styles",id:"Demobasic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> TextMark <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token operator">&lt;</span>TextMark\n    style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> lineHeight<span class="token punctuation">:</span> <span class="token string">\'28px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>\n    activeIndex<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span>\n    activeStyle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">\'#f48f42\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>\n    highlightStyle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">\'#ffd54f\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>\n    searchWords<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"Chain"</span><span class="token punctuation">,</span> <span class="token string">"Chomps"</span><span class="token punctuation">]</span><span class="token punctuation">}</span>\n    textToHighlight<span class="token operator">=</span><span class="token string">"Chain Chomps (occasionally Chain-Chomps) are common enemies in the Mario franchise. They first appeared in Super Mario Bros. 3. Chain Chomps bear a resemblance to a ball and chain and are typified by their large, tooth-filled maws and incessant biting. Shigeru Miyamoto\'s inspiration for the Chain Chomps was from a childhood experience: a dog once ran up to him and tried to bite him, but the dog\'s chain held it back. As a result, Chain Chomps also possess canine qualities, such as barking, and are commonly used as guard dogs throughout the Mario series. Chain Chomps were originally created as an enemy for The Legend of Zelda series, but ended up being used for the Mario franchise first. Many Chomps have been part of the Koopa Troop, though a couple of them have been shown to be independent. "</span>\n  <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},y.a.createElement(w)),y.a.createElement(z,{title:"External CSS",id:"Democlass",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> TextMark <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token operator">&lt;</span>TextMark\n    style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> lineHeight<span class="token punctuation">:</span> <span class="token string">\'28px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>\n    activeIndex<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span>\n    activeClassName<span class="token operator">=</span><span class="token string">"zent-demo-text-mark-active"</span>\n    highlightClassName<span class="token operator">=</span><span class="token string">"zent-demo-text-mark-highlight"</span>\n    searchWords<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"Chomps"</span><span class="token punctuation">]</span><span class="token punctuation">}</span>\n    textToHighlight<span class="token operator">=</span><span class="token string">"Chain Chomps (occasionally Chain-Chomps) are common enemies in the Mario franchise. They first appeared in Super Mario Bros. 3. Chain Chomps bear a resemblance to a ball and chain and are typified by their large, tooth-filled maws and incessant biting. Shigeru Miyamoto\'s inspiration for the Chain Chomps was from a childhood experience: a dog once ran up to him and tried to bite him, but the dog\'s chain held it back. As a result, Chain Chomps also possess canine qualities, such as barking, and are commonly used as guard dogs throughout the Mario series. Chain Chomps were originally created as an enemy for The Legend of Zelda series, but ended up being used for the Mario franchise first. Many Chomps have been part of the Koopa Troop, though a couple of them have been shown to be independent. "</span>\n  <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},y.a.createElement(M)),y.a.createElement(z,{title:"Different styles for different search words",id:"Demomulti",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> TextMark <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token operator">&lt;</span>TextMark\n    style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> lineHeight<span class="token punctuation">:</span> <span class="token string">\'28px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>\n    activeIndex<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span>\n    activeClassName<span class="token operator">=</span><span class="token string">"zent-demo-text-mark-active"</span>\n    highlightClassName<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n      <span class="token string">\'Chomps\'</span><span class="token punctuation">:</span> <span class="token string">\'zent-demo-text-mark-highlight\'</span><span class="token punctuation">,</span>\n      <span class="token string">\'Chain\'</span><span class="token punctuation">:</span> <span class="token string">\'zent-demo-text-mark-highlight2\'</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">}</span>\n    searchWords<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">\'Chomps\'</span><span class="token punctuation">,</span> <span class="token string">\'Chain\'</span><span class="token punctuation">]</span><span class="token punctuation">}</span>\n    textToHighlight<span class="token operator">=</span><span class="token string">"Chain Chomps (occasionally Chain-Chomps) are common enemies in the Mario franchise. They first appeared in Super Mario Bros. 3. Chain Chomps bear a resemblance to a ball and chain and are typified by their large, tooth-filled maws and incessant biting. Shigeru Miyamoto\'s inspiration for the Chain Chomps was from a childhood experience: a dog once ran up to him and tried to bite him, but the dog\'s chain held it back. As a result, Chain Chomps also possess canine qualities, such as barking, and are commonly used as guard dogs throughout the Mario series. Chain Chomps were originally created as an enemy for The Legend of Zelda series, but ended up being used for the Mario franchise first. Many Chomps have been part of the Koopa Troop, though a couple of them have been shown to be independent. "</span>\n  <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},y.a.createElement(N)),y.a.createElement(S,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Required</th>\n<th>Default</th>\n<th>Alternative</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>textToHighlight</td>\n<td>Text to be searched</td>\n<td>string</td>\n<td>Yes</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>searchWords</td>\n<td>Search words, will be converted to RegExp</td>\n<td>Array&#x3C;string \n|\n RegExp></td>\n<td>Yes</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>highlightClassName</td>\n<td>Highlight CSS class name, you can have different class names for each search word</td>\n<td>string \n|\n object</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>highlightStyle</td>\n<td>Highlight inline style</td>\n<td>object</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>activeClassName</td>\n<td>Active CSS class name</td>\n<td>string</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>activeStyle</td>\n<td>Active inline style</td>\n<td>object</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>activeIndex</td>\n<td>Active index</td>\n<td>number</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>unhighlightClassName</td>\n<td>Unhighlight CSS class name</td>\n<td>string</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>unhighlightStyle</td>\n<td>Unhighlight inline style</td>\n<td>object</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>highlightTag</td>\n<td>Component to render highlighted text</td>\n<td>React.ElementType</td>\n<td>No</td>\n<td><code>\'mark\'</code></td>\n<td></td>\n</tr>\n<tr>\n<td>sanitize</td>\n<td>Preprocessor for search words and text</td>\n<td>(str: string) => string</td>\n<td>No</td>\n<td>identity</td>\n<td></td>\n</tr>\n<tr>\n<td>autoEscape</td>\n<td>Automatically escape RegExp special characters in search words</td>\n<td>boolean</td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>caseSensitive</td>\n<td>Case sensitive match</td>\n<td>boolean</td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>findChunks</td>\n<td>Customize matching algorithm</td>\n<td>(options) => Array&#x3C;{start: number; end: number; highlight: boolean;}></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom top level CSS class name</td>\n<td>string</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom top level inline style</td>\n<td>object</td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>'}))}}]),t}(b.Component)}}]);