114-bc4eac5649ec72ccd951.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{739:function(t,n,e){"use strict";e.r(n),e.d(n,"default",function(){return E});var d=e(23),a=e.n(d),r=e(24),o=e.n(r),c=e(25),s=e.n(c),i=e(26),u=e.n(i),h=e(32),l=e.n(h),p=e(27),m=e.n(p),f=e(28),y=e.n(f),k=e(580),g=e.n(k),v=e(0),b=e.n(v),x=e(111);function w(t){return b.a.createElement(t.tag,g()({},t.attributes,{dangerouslySetInnerHTML:{__html:t.html}}))}function S(t){return b.a.createElement(w,{tag:"section",html:t.html,attributes:{className:"zandoc-react-markdown"}})}function T(t){return b.a.createElement(w,{tag:"style",html:t.style})}v.Component;var E=function(t){function n(){return a()(this,n),s()(this,u()(n).apply(this,arguments))}return m()(n,t),o()(n,[{key:"componentDidMount",value:function(){var t=location.hash;if(t){var n=document.querySelector('a[href="'.concat(t,'"]'));n&&Object(x.a)(document.documentElement,0,function t(n,e){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(e+=n.offsetTop),t(n.parentNode,e);return e}(n,-9))}}},{key:"render",value:function(){return b.a.createElement("div",{className:"zandoc-react-container",key:null},b.a.createElement(T,{style:""}),b.a.createElement(S,{html:'<h2 class="anchor-heading"><a href="#sku-selector-deprecated">¶</a><a href="javascript:void(0)" id="sku-selector-deprecated" class="anchor-point"></a>SKU Selector(DEPRECATED)</h2>\n<p>Please use <code>@zent/sku</code>.</p>\n<p>A widget for SKU selection.</p>\n<h3 class="anchor-heading"><a href="#guides">¶</a><a href="javascript:void(0)" id="guides" class="anchor-point"></a>Guides</h3>\n<p>You can create a editable page with a variety of goods and services</p>\n<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>Default</th>\n<th>Alternative</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>custom extra class name</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>current chosen sku array</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n<tr>\n<td>maxSize</td>\n<td>sku key maximum size</td>\n<td>number</td>\n<td><code>3</code></td>\n<td></td>\n</tr>\n<tr>\n<td>maxSKUTextLength</td>\n<td>sku text value maximum length</td>\n<td>number</td>\n<td><code>4</code></td>\n<td></td>\n</tr>\n<tr>\n<td>maxLeafTextLength</td>\n<td>left text value maximum length</td>\n<td>number</td>\n<td><code>20</code></td>\n<td></td>\n</tr>\n<tr>\n<td>skuTree</td>\n<td>choosable sku array</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n<tr>\n<td>optionValue</td>\n<td>custom sku id</td>\n<td>string</td>\n<td><code>\'id\'</code></td>\n<td></td>\n</tr>\n<tr>\n<td>optionText</td>\n<td>custom sku text</td>\n<td>string</td>\n<td><code>\'text\'</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onFetchGroup</td>\n<td>async get choosable sku array, such as "color"、"size"</td>\n<td>function</td>\n<td><code>Promise</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onFetchSKU</td>\n<td>async get one sku value, such as "red"、"blue"</td>\n<td>function</td>\n<td><code>Promise</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onCreateGroup</td>\n<td>create a new sku key, such as "constellation"</td>\n<td>function</td>\n<td><code>Promise</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onCreateSKU</td>\n<td>create a new sku value, such as "virgo"</td>\n<td>function</td>\n<td><code>Promise</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>the callback will return current sku value when sku changes</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td></td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>custom prefix</td>\n<td>string</td>\n<td>\'rc-sku\'</td>\n<td>null</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#utility-methods">¶</a><a href="javascript:void(0)" id="utility-methods" class="anchor-point"></a>Utility methods</h4>\n<p>In order to easily manipulate sku date, sku widget supports some utility methods</p>\n<h4 class="anchor-heading"><a href="#sku-flatten-sku-items-option">¶</a><a href="javascript:void(0)" id="sku-flatten-sku-items-option" class="anchor-point"></a>SKU.flatten(sku, items, options)</h4>\n<p>Using cartesian product, transform tree value to platten array</p>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Alternative</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>sku</td>\n<td>current chosen sku value</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n<tr>\n<td>items</td>\n<td>exist array</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n<tr>\n<td>options</td>\n<td>optional parameter</td>\n<td>object</td>\n<td><code>{}</code></td>\n<td><code>optionValue: \'id\', optionText: \'text\'</code></td>\n</tr>\n</tbody>\n</table>'}))}}]),n}(v.Component)}}]);