116-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{1018:function(t,n,e){"use strict";e.r(n),e.d(n,"default",(function(){return P}));var d=e(840),r=e.n(d),a=e(841),o=e.n(a),c=e(521),s=e.n(c),i=e(842),u=e.n(i),l=e(843),h=e.n(l),p=e(844),f=e.n(p),m=e(845),y=e.n(m),k=e(846),v=e.n(k),g=e(0),b=e.n(g),x=e(210);function w(t){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}();return function(){var e,d=f()(t);if(n){var r=f()(this).constructor;e=Reflect.construct(d,arguments,r)}else e=d.apply(this,arguments);return h()(this,e)}}function S(t){return b.a.createElement(t.tag,v()({},t.attributes,{dangerouslySetInnerHTML:{__html:t.html}}))}function T(t){return b.a.createElement(S,{tag:"section",html:t.html,attributes:{className:"zandoc-react-markdown"}})}function E(t){return b.a.createElement(S,{tag:"style",html:t.style})}g.Component;var P=function(t){u()(e,t);var n=w(e);function e(){return r()(this,e),n.apply(this,arguments)}return o()(e,[{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(E,{style:""}),b.a.createElement(T,{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><strong>Please use <code>@zent/sku</code>.</strong></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>'}))}}]),e}(g.Component)}}]);