4-a28f22da2d828c0b81f9.js

webpackJsonp([4],{1650:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}function s(n){return y.default.createElement(n.tag,(0,i.default)({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function o(n){return y.default.createElement(s,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function p(n){return y.default.createElement(s,{tag:"style",html:n.style})}function c(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),c(n.parentNode,a);return a}Object.defineProperty(a,"__esModule",{value:!0});var l=t(7),i=e(l),u=t(1),r=e(u),d=t(4),k=e(d),f=t(2),m=e(f),g=t(3),h=e(g),v=t(0),y=e(v),b=t(232),_=e(b),w=t(359),E=t(1750),C=e(E),I=t(1697),j=e(I),D=t(1753),N=e(D),P=t(1756),T=e(P),O=t(1759),M=e(O),U=t(1767),x=e(U),A=function(){var n=(w.Layout.Row,w.Layout.Col,[Object.assign({},C.default,{dragable:!1,appendable:!1,configurable:!1,highlightWhenSelect:!1}),M.default,x.default,Object.assign({limit:1},N.default),Object.assign({limit:2},T.default)]),a=[Object.assign({},C.default,{dragable:!1,appendable:!1,configurable:!1,highlightWhenSelect:!1}),w.Design.group("Basics"),M.default,x.default,w.Design.group("Others"),Object.assign({limit:1},N.default),Object.assign({limit:2},T.default)],t=function(t){function e(){var n,a,t,s;(0,r.default)(this,e);for(var o=arguments.length,p=Array(o),c=0;c<o;c++)p[c]=arguments[c];return a=t=(0,m.default)(this,(n=e.__proto__||Object.getPrototypeOf(e)).call.apply(n,[this].concat(p))),t.state={grouped:!0,value:[(0,i.default)({type:C.default.type},j.default.getInitialValue())],settings:{}},t.onChange=function(n){t.setState({value:n})},t.onSettingsChange=function(n){t.setState({settings:n})},t.switchMode=function(){var n=t.state.grouped;t.setState({grouped:!n})},t.saveDesign=function(n){t.design=n&&n.getDecoratedComponentInstance()},t.submit=function(){t.triggerDesignValidation().then(function(){w.Design.stripUUID(t.state.value);t.design.markAsSaved(),w.Notify.success("提交成功")}).catch(function(n){})},s=a,(0,m.default)(t,s)}return(0,h.default)(e,t),(0,k.default)(e,[{key:"render",value:function(){var t=this.state.grouped;return y.default.createElement("div",null,y.default.createElement(w.Design,{ref:this.saveDesign,cache:!0,cacheId:"zent-design-test",confirmUnsavedLeave:!1,components:t?a:n,value:this.state.value,onChange:this.onChange,settings:this.state.settings,onSettingsChange:this.onSettingsChange,scrollTopOffset:-270,globalConfig:window._global}),y.default.createElement("div",{className:"design-example-actions"},y.default.createElement(w.Button,{type:"primary",onClick:this.submit},"Submit"),y.default.createElement(w.Button,{onClick:this.notImplemented},"Draft"),y.default.createElement(w.Button,{onClick:this.notImplemented},"Preview"),y.default.createElement(w.Button,{onClick:this.switchMode},t?"Combine":"Group")))}},{key:"notImplemented",value:function(){w.Notify.error("Not Implmented")}},{key:"triggerDesignValidation",value:function(){return this.design.validate()}}]),e}(v.Component);return y.default.createElement(t,null)},S=function(n){function a(){var n,t,e,s;(0,r.default)(this,a);for(var o=arguments.length,p=Array(o),c=0;c<o;c++)p[c]=arguments[c];return t=e=(0,m.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(p))),e.state={showCode:!1},e.toggle=function(){e.setState({showCode:!e.state.showCode})},s=t,(0,m.default)(e,s)}return(0,h.default)(a,n),(0,k.default)(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,t=a.title,e=a.src,o=a.children;return y.default.createElement("div",{className:"zandoc-react-demo"},y.default.createElement("div",{className:"zandoc-react-demo__preview"},o),y.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},y.default.createElement("div",{className:"zandoc-react-demo__title"},y.default.createElement("p",null,t||"")),y.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&y.default.createElement("pre",{className:"zandoc-react-demo__code"},y.default.createElement(s,{tag:"code",html:e,attributes:{className:"language-jsx"}})))}}]),a}(v.Component),z=function(n){function a(){return(0,r.default)(this,a),(0,m.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,h.default)(a,n),(0,k.default)(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'+n+'"]');a&&(0,_.default)(document.documentElement,0,c(a,-9))}}},{key:"render",value:function(){return y.default.createElement("div",{className:"zandoc-react-container",key:null},y.default.createElement(p,{style:".design-example-actions {\n  margin-top: 20px;\n}\n\n\t.design-example-actions .zent-btn {\n\t\twidth: 100px;\n\t\tmargin-right: 10px;\n\t}"}),y.default.createElement(o,{html:'<h2 class="anchor-heading"><a href="#design">¶</a><a href="javascript:void(0)" id="design" class="anchor-point"></a>Design</h2>\n<p>H5 page editor, build your H5 pages in a WYSIWYG way.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),y.default.createElement(S,{title:"Basic usage",id:"Demobasics",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Design<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Layout<span class="token punctuation">,</span> Notify <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// ⚠️注意：这个示例里面代码的引入和实际使用时有一些区别。</span>\n\n<span class="token comment">// Please replace \'design/...\' with \'zent/lib/design/...\' in your own code</span>\n<span class="token keyword">import</span> configConf <span class="token keyword">from</span> <span class="token string">\'design/components/config\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> ConfigEditor <span class="token keyword">from</span> <span class="token string">\'design/components/config/ConfigEditor\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> whitespaceConf <span class="token keyword">from</span> <span class="token string">\'design/components/whitespace\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> lineConf <span class="token keyword">from</span> <span class="token string">\'design/components/line\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> richtextConf <span class="token keyword">from</span> <span class="token string">\'design/components/richtext\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> imageAdConf <span class="token keyword">from</span> <span class="token string">\'design/components/image-ad\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 我们仅仅提供了少数几个 Design 组件作为示例，更多业务组件需要根据你的业务需求自己实现。</span>\n<span class="token comment">// If you use these two default design components, you have to</span>\n<span class="token comment">// manually include the styles in your own code:</span>\n<span class="token comment">// import \'zent/css/design-config.css\';</span>\n<span class="token comment">// import \'zent/css/design-whitespace.css\';</span>\n<span class="token comment">// import \'zent/css/design-line.css\';</span>\n\n<span class="token keyword">const</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token operator">=</span> Layout<span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> components <span class="token operator">=</span> <span class="token punctuation">[</span>\n  Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> configConf<span class="token punctuation">,</span> <span class="token punctuation">{</span>\n    <span class="token comment">// 是否可以拖拽</span>\n    dragable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n\n    <span class="token comment">// 是否出现在底部的添加组件区域</span>\n    appendable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n\n    <span class="token comment">// 是否可以编辑，UMP里面有些地方config是不能编辑的</span>\n    <span class="token comment">// editable: true,</span>\n\n    configurable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n\n    highlightWhenSelect<span class="token punctuation">:</span> <span class="token boolean">false</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n\n  richtextConf<span class="token punctuation">,</span>\n\n  imageAdConf<span class="token punctuation">,</span>\n\n  Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> limit<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> whitespaceConf<span class="token punctuation">)</span><span class="token punctuation">,</span>\n\n  Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> limit<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> lineConf<span class="token punctuation">)</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> groupedComponents <span class="token operator">=</span> <span class="token punctuation">[</span>\n  Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> configConf<span class="token punctuation">,</span> <span class="token punctuation">{</span>\n    <span class="token comment">// 是否可以拖拽</span>\n    dragable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n\n    <span class="token comment">// 是否出现在底部的添加组件区域</span>\n    appendable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n\n    <span class="token comment">// 是否可以编辑，UMP里面有些地方config是不能编辑的</span>\n    <span class="token comment">// editable: true,</span>\n\n    configurable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n\n    highlightWhenSelect<span class="token punctuation">:</span> <span class="token boolean">false</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n\n  Design<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">\'Basics\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  richtextConf<span class="token punctuation">,</span>\n  imageAdConf<span class="token punctuation">,</span>\n\n  Design<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">\'Others\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> limit<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> whitespaceConf<span class="token punctuation">)</span><span class="token punctuation">,</span>\n  Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> limit<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> lineConf<span class="token punctuation">)</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    grouped<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n    value<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        type<span class="token punctuation">:</span> configConf<span class="token punctuation">.</span>type<span class="token punctuation">,</span>\n        <span class="token operator">...</span>ConfigEditor<span class="token punctuation">.</span><span class="token function">getInitialValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n      <span class="token punctuation">}</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n    settings<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n      <span class="token comment">// previewBackground: \'red\'</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onChange</span> <span class="token operator">=</span> newValue <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      value<span class="token punctuation">:</span> newValue\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onSettingsChange</span> <span class="token operator">=</span> newSettings <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      settings<span class="token punctuation">:</span> newSettings\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">switchMode</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> grouped <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      grouped<span class="token punctuation">:</span> <span class="token operator">!</span>grouped\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> grouped <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Design</span>\n          <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>saveDesign<span class="token punctuation">}</span></span>\n          <span class="token attr-name">cache</span>\n          <span class="token attr-name">cacheId</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-design-test<span class="token punctuation">"</span></span>\n          <span class="token attr-name">confirmUnsavedLeave</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">components</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>grouped <span class="token operator">?</span> groupedComponents <span class="token punctuation">:</span> components<span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChange<span class="token punctuation">}</span></span>\n          <span class="token attr-name">settings</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>settings<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onSettingsChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSettingsChange<span class="token punctuation">}</span></span>\n          <span class="token attr-name">scrollTopOffset</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">-</span><span class="token number">270</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">globalConfig</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>window<span class="token punctuation">.</span>_global<span class="token punctuation">}</span></span>\n        <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>design-example-actions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>submit<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            Submit\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>notImplemented<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            Draft\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>notImplemented<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            Preview\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>switchMode<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token punctuation">{</span>grouped <span class="token operator">?</span> <span class="token string">\'Combine\'</span> <span class="token punctuation">:</span> <span class="token string">\'Group\'</span><span class="token punctuation">}</span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">notImplemented</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    Notify<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">\'Not Implmented\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function-variable function">saveDesign</span> <span class="token operator">=</span> instance <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span>design <span class="token operator">=</span> instance <span class="token operator">&amp;&amp;</span> instance<span class="token punctuation">.</span><span class="token function">getDecoratedComponentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">triggerDesignValidation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>design<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function-variable function">submit</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerDesignValidation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n      <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n        <span class="token keyword">const</span> data <span class="token operator">=</span> Design<span class="token punctuation">.</span><span class="token function">stripUUID</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token comment">// submit this.state.value to server</span>\n        <span class="token keyword">this</span><span class="token punctuation">.</span>design<span class="token punctuation">.</span><span class="token function">markAsSaved</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        Notify<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">\'提交成功\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span><span class="token punctuation">)</span>\n      <span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>validations <span class="token operator">=></span> <span class="token punctuation">{</span>\n        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>validations<span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<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 tag"><span class="token tag"><span class="token punctuation">&lt;</span>Simple</span> <span class="token punctuation">/></span></span>\n  <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},y.default.createElement(A)),y.default.createElement(o,{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>Default</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>components</td>\n<td>All available components in Design</td>\n<td>array</td>\n<td>[]</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Current value</td>\n<td>array</td>\n<td>[]</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when value changes</td>\n<td>func(value: array): void</td>\n<td>Yes</td>\n<td></td>\n</tr>\n<tr>\n<td>settings</td>\n<td>Design settings, will be passed to every Design component</td>\n<td>object</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>onSettingsChange</td>\n<td>Callback to change settings</td>\n<td>func</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>defaultSelectedIndex</td>\n<td>Default selected index in value array</td>\n<td>number</td>\n<td>-1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>preview</td>\n<td>Custom Preview component</td>\n<td>Component</td>\n<td>DesingPreview</td>\n<td>No</td>\n</tr>\n<tr>\n<td>previewFooter</td>\n<td>Custom footer after preview section</td>\n<td>node</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>confirmUnsavedLeave</td>\n<td>Show a confirm dialog if there\'re unsaved changes</td>\n<td>boolean</td>\n<td>true</td>\n<td>No</td>\n</tr>\n<tr>\n<td>cache</td>\n<td>Cache unsaved changes to \n<code>localStorage</code></td>\n<td>boolean</td>\n<td>false</td>\n<td>No</td>\n</tr>\n<tr>\n<td>cacheId</td>\n<td>Cache id, must be used with \n<code>cache</code></td>\n<td>string</td>\n<td></td>\n<td>Yes if \n<code>cache</code>\n is \n<code>true</code>\n, No otherwise</td>\n</tr>\n<tr>\n<td>cacheRestoreMessage</td>\n<td>Message to restore cache from \n<code>localStorage</code></td>\n<td>node</td>\n<td>提示：在浏览器中发现未提交的内容，是否使用该内容替换当前内容？</td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Is Design disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td>No</td>\n</tr>\n<tr>\n<td>globalConfig</td>\n<td>Global config across Design</td>\n<td>object</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>children</td>\n<td>Additional children inside Design</td>\n<td>node</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>scrollTopOffset</td>\n<td>Top scroll offset</td>\n<td>number \n|\n func</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>scrollLeftOffset</td>\n<td>Left scroll offset</td>\n<td>number \n|\n func</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom class name</td>\n<td>string</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>Custom prefix</td>\n<td>string</td>\n<td></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<p><code>components</code> is an array, all available componets should be included in this array. Each item in this array is a component description, here are the possible options.</p>\n<pre><code class="language-js">type Component <span class="token operator">=</span> <span class="token punctuation">{</span>\n  <span class="token comment">// Component type, must be unique</span>\n  type<span class="token punctuation">:</span> string <span class="token operator">|</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n\n  <span class="token comment">// Default component type</span>\n  <span class="token comment">// If `type` is an array, `defaultType` can be a number</span>\n  <span class="token comment">// If `defaultType` is a function, it will be called with `type` as the sole argument</span>\n  defaultType<span class="token operator">?</span><span class="token punctuation">:</span> number <span class="token operator">|</span> <span class="token punctuation">(</span>string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> string<span class="token punctuation">)</span> <span class="token operator">=></span> string\n\n  <span class="token comment">// Component to render preview</span>\n  preview<span class="token punctuation">:</span> ReactComponent<span class="token punctuation">,</span>\n\n  <span class="token comment">// Component responsible for editing</span>\n  editor<span class="token punctuation">:</span> ReactComponent<span class="token punctuation">,</span>\n\n  <span class="token comment">// Preview component container</span>\n  previewItem<span class="token operator">?</span><span class="token punctuation">:</span> ReactComponent<span class="token punctuation">,</span>\n\n  <span class="token comment">// Preview controller, responsible for dnd, select and so on</span>\n  previewController<span class="token operator">?</span><span class="token punctuation">:</span> ReactComponent<span class="token punctuation">,</span>\n\n  <span class="token comment">// Editor component container</span>\n  editorItem<span class="token operator">?</span><span class="token punctuation">:</span> ReactComponent<span class="token punctuation">,</span>\n\n  <span class="token comment">// Is this component dragable?</span>\n  dragable<span class="token operator">?</span><span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>\n\n  <span class="token comment">// Should this component appear in the component list?</span>\n  appendable<span class="token operator">?</span><span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>\n\n  <span class="token comment">// Is this component configurable(add/delete on the bottom right corner)?</span>\n  configurable<span class="token operator">?</span><span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>\n\n  <span class="token comment">// show delete button</span>\n  canDelete<span class="token operator">?</span><span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>\n\n  <span class="token comment">// show add button</span>\n  canInsert<span class="token operator">?</span><span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>\n\n  <span class="token comment">// Is this component editable? Only editable components are selectable</span>\n  editable<span class="token operator">?</span><span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>\n\n  <span class="token comment">// Highlight preview when selected</span>\n  highlightWhenSelect<span class="token operator">?</span><span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>\n\n  <span class="token comment">// Maximum number of instances this component can have</span>\n  <span class="token comment">// Zero is no limit</span>\n  <span class="token comment">// If passing a function, return false to stop adding more</span>\n  limit<span class="token operator">?</span><span class="token punctuation">:</span> number <span class="token operator">|</span> <span class="token punctuation">(</span>count<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=></span> boolean<span class="token punctuation">,</span>\n\n  <span class="token comment">// Tooltip when a component reaches its limit</span>\n  <span class="token comment">// If limit is a number, limitMessage has a default value.</span>\n  limitMessage<span class="token operator">?</span><span class="token punctuation">:</span> node <span class="token operator">|</span> <span class="token punctuation">(</span>count<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=></span> node<span class="token punctuation">,</span>\n\n  <span class="token comment">// Callback when adding a new instance for component</span>\n  <span class="token comment">// Add only if Promise resolves.</span>\n  shouldCreate<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>comp<span class="token punctuation">:</span> Component<span class="token punctuation">)</span> <span class="token operator">=></span> Promise<span class="token punctuation">,</span>\n\n  <span class="token comment">// Additional props passed to editor</span>\n  editorProps<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">:</span> object<span class="token punctuation">)</span> <span class="token operator">=></span> object <span class="token operator">|</span> object<span class="token punctuation">,</span>\n\n  <span class="token comment">// Addtional props passed to preview</span>\n  previewProps<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">:</span> object<span class="token punctuation">)</span> <span class="token operator">=></span> object <span class="token operator">|</span> object\n<span class="token punctuation">}</span></code></pre>\n<p>Each item in <code>value</code> array must have a <code>type</code> property, <code>Design</code> uses this property to determine why component in <code>component</code> array should be used to render this value.</p>\n<h3 class="anchor-heading"><a href="#design-group">¶</a><a href="javascript:void(0)" id="design-group" class="anchor-point"></a>Design.group</h3>\n<p>Declaration：<code>group(name: string): object</code></p>\n<p><code>Design</code> supports component grouping in add component area, all you have to do is insert <code>Desgin.group(groupName)</code> to the right place in your <code>components</code> array.</p>\n<pre><code class="language-js"><span class="token punctuation">[</span>\n  config<span class="token punctuation">,</span>\n\n  Design<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">\'分组1\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  componentA<span class="token punctuation">,</span>\n  componentB<span class="token punctuation">,</span>\n\n  Design<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">\'分组2\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  componentC<span class="token punctuation">,</span>\n  componentD\n<span class="token punctuation">]</span></code></pre>\n<h3 class="anchor-heading"><a href="#settings-and-onsettingschange">¶</a><a href="javascript:void(0)" id="settings-and-onsettingschange" class="anchor-point"></a><code>settings</code> and <code>onSettingsChange</code></h3>\n<p>You can pass in a <code>settings</code> object and a corresponding <code>onSettingsChange</code> callback. This two props will be pass to every Design component.</p>\n<p>There\'s a predefined setting called <code>previewBackground</code>, Design will use this value as the preview background.</p>\n<h3 class="anchor-heading"><a href="#design-instance-methods">¶</a><a href="javascript:void(0)" id="design-instance-methods" class="anchor-point"></a>Design Instance Methods</h3>\n<ul>\n<li><code>design.validate(): Promise</code>, trigger a validation, resolves only if there\'s no erro.</li>\n<li><code>design.markAsSaved()</code>, tell <code>Desgin</code> data has been saved.</li>\n</ul>\n<h3 class="anchor-heading"><a href="#stripuuid">¶</a><a href="javascript:void(0)" id="stripuuid" class="anchor-point"></a>stripUUID</h3>\n<p>There\'s a <code>stripUUID</code> method on <code>Design</code> instance, you can use this method to strip all internal ids used by <code>Design</code> before sending data to server. This may help reduce data size.</p>\n<p>Note: calling <code>stripUUID</code> before sending data to server is optional.</p>\n<h3 class="anchor-heading"><a href="#how-to-implement-new-design-co">¶</a><a href="javascript:void(0)" id="how-to-implement-new-design-co" class="anchor-point"></a>How to Implement new Design Component?</h3>\n<p>Each Desgin component are divided in two parts: Preview and Editor.</p>\n<p>Preview is just a component which accepts <code>{ value: any, globalConfig: any, design: object }</code> as props and renders a UI with these props.</p>\n<p>It is a little bit complex about Editor component. You are recommended to extend the <code>@youzan/design/lib/base/editor/DesignEditor</code> base class, this class has some useful methods you can use(e.g. <code>onChange</code> event handlers).</p>\n<p>Editor has these props:</p>\n<p><code>{ value: any, onChange: func, showError: boolean, validation: object, design object }</code></p>\n<ul>\n<li><code>validate(value): Promise</code> You should resolve an error object if there\'re errors</li>\n<li><code>reorder&#x3C;T>(array: T[], fromIndex: number, toIndex: number): T[]</code> Reorder array after drag</li>\n<li><code>props.design</code> There\'re some useful methods on this prop</li>\n</ul>\n<p>A editor component must have these static properties: </p>\n<p><code>designType, designDescription, getInitialValue, validate</code></p>\n<p>You can use <a href="https://github.com/atlassian/react-beautiful-dnd"><code>react-beautiful-dnd</code></a> to implement drag-and-drop inside an editor, implement these two functions in your editor: <code>shouldHandleDragEnd(type: string): boolean</code> and <code>onDragEnd(result)</code>. Check <code>react-beautiful-dnd</code>\'s documentation for detailed instructions. There\'s also a demo in <code>components/image-ad</code>.</p>\n<h4 class="anchor-heading"><a href="#example">¶</a><a href="javascript:void(0)" id="example" class="anchor-point"></a>Example</h4>\n<pre><code class="language-jsx"><span class="token comment">// Preview</span>\n<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> PureComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">NoticePreview</span> <span class="token keyword">extends</span> <span class="token class-name">PureComponent</span> <span class="token punctuation">{</span>\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> value <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>\n\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rc-design-component-notice-preview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>value<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token comment">// Editor</span>\n<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Input <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">import</span> <span class="token punctuation">{</span> DesignEditor<span class="token punctuation">,</span> ControlGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@youzan/design/base/editor/DesignEditor\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">const</span> PLACEHOLDER <span class="token operator">=</span> <span class="token string">\'请填写内容，如果过长，将会在手机上滚动显示\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">NoticeEditor</span> <span class="token keyword">extends</span> <span class="token class-name">DesignEditor</span> <span class="token punctuation">{</span>\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> value<span class="token punctuation">,</span> showError<span class="token punctuation">,</span> validation <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>\n\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rc-design-component-notice-editor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ControlGroup</span>\n          <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>公告:<span class="token punctuation">"</span></span>\n          <span class="token attr-name">required</span>\n          <span class="token attr-name">showError</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>showError <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMetaProperty</span><span class="token punctuation">(</span><span class="token string">\'content\'</span><span class="token punctuation">,</span> <span class="token string">\'touched\'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">error</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>validation<span class="token punctuation">.</span>content<span class="token punctuation">}</span></span>\n        <span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>Input</span>\n            <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span>\n            <span class="token attr-name">placeholder</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>PLACEHOLDER<span class="token punctuation">}</span></span>\n            <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">.</span>content<span class="token punctuation">}</span></span>\n            <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onInputChange<span class="token punctuation">}</span></span>\n            <span class="token attr-name">onBlur</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onInputBlur<span class="token punctuation">}</span></span>\n          <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ControlGroup</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token keyword">static</span> designType <span class="token operator">=</span> <span class="token string">\'notice\'</span><span class="token punctuation">;</span>\n  <span class="token keyword">static</span> designDescription <span class="token operator">=</span> <span class="token string">\'公告\'</span><span class="token punctuation">;</span>\n  <span class="token keyword">static</span> <span class="token function">getInitialValue</span><span class="token punctuation">(</span>settings<span class="token punctuation">,</span> globalConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">{</span>\n      content<span class="token punctuation">:</span> <span class="token string">\'\'</span><span class="token punctuation">,</span>\n      scrollable<span class="token punctuation">:</span> <span class="token boolean">false</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token keyword">static</span> <span class="token function">validate</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>resolve <span class="token operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">const</span> errors <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n      <span class="token keyword">const</span> <span class="token punctuation">{</span> content <span class="token punctuation">}</span> <span class="token operator">=</span> value<span class="token punctuation">;</span>\n      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>content <span class="token operator">||</span> <span class="token operator">!</span>content<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        errors<span class="token punctuation">.</span>content <span class="token operator">=</span> <span class="token string">\'请填写公告内容\'</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span>\n\n      <span class="token function">resolve</span><span class="token punctuation">(</span>errors<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre>'}))}}]),a}(v.Component);a.default=z},1664:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}function s(n){return n&&n.target&&n.target.name&&n.preventDefault&&n.stopPropagation}Object.defineProperty(a,"__esModule",{value:!0}),a.ControlGroup=a.DesignEditor=void 0;var o=t(9),p=e(o),c=t(1),l=e(c),i=t(2),u=e(i),r=t(4),d=e(r),k=t(3),f=e(k),m=t(0),g=e(m),h=t(5),v=e(h),y=t(8),b=e(y),_=t(35),w=e(_),E=t(610),C=e(E),I=t(1751),j=e(I),D="onInputChange expects an `Event` with { target: { name, value } } as argument",N=a.DesignEditor=function(n){function a(n){(0,l.default)(this,a);var t=(0,u.default)(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,n));return t.onInputChange=function(n){if(!s(n))throw new Error(D);var a=t.props.onChange,e=n.target,o=e.name,c=e.type,l=e.value;"checkbox"===c&&(l=e.checked),a((0,p.default)({},o,l)),t.setMetaProperty(o,"dirty")},t.onCustomInputChange=function(n){return function(a){(0,t.props.onChange)((0,p.default)({},n,a)),t.setMetaProperty(n,"dirty")}},t.onInputBlur=function(n){if(!s(n))throw new Error(D);var a=n.target.name;t.onCustomInputBlur(a)},t.onCustomInputBlur=function(n){t.setMetaProperty(n,"touched"),t.validateValue()},t.state=(0,w.default)({},t.state,{meta:{}}),t.validateValue(),t}return(0,f.default)(a,n),(0,d.default)(a,null,[{key:"validate",value:function(n,a,t){return new Promise(function(n){return n({})})}}]),(0,d.default)(a,[{key:"getMetaProperty",value:function(n,a){var t=this.state.meta;return!!(t&&t[n]&&t[n][a])}},{key:"setMetaProperty",value:function(n,a){var t=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],e=this.state.meta,s=e[n];s&&s[a]===t||this.setState({meta:(0,w.default)({},e,(0,p.default)({},n,(0,w.default)({},s,(0,p.default)({},a,t))))})}},{key:"isValid",value:function(){var n=this.props.validation;return Object.keys(n).length>0}},{key:"isInvalid",value:function(){return!this.isValid()}},{key:"validateValue",value:function(){var n=this.props,a=n.value,t=n.design;t.validateComponentValue(a,a,[]).then(function(n){var e=t.getUUID(a);t.setValidation((0,p.default)({},e,n))})}},{key:"reorder",value:function(n,a,t){return(0,C.default)(n,a,t)}},{key:"shouldComponentUpdate",value:function(n,a){return!(0,j.default)(this.props,n)||!(0,j.default)(this.state,a)}}]),a}(m.Component);N.propTypes={value:v.default.object,onChange:v.default.func.isRequired,validation:v.default.object.isRequired,showError:v.default.bool.isRequired,design:v.default.object.isRequired,globalConfig:v.default.object,settings:v.default.object,onSettingsChange:v.default.func},N.designType="unknown",N.designDescription="未知组件",N.getInitialValue=function(){};var P=a.ControlGroup=function(n){function a(){return(0,l.default)(this,a),(0,u.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,f.default)(a,n),(0,d.default)(a,[{key:"render",value:function(){var n=this.props,a=n.className,t=n.prefix,e=n.showError,s=n.error,o=n.showLabel,p=n.label,c=n.labelAlign,l=n.helpDesc,i=n.required,u=n.children,r=n.focusOnLabelClick,d=e&&s;return g.default.createElement("div",{className:(0,b.default)(t+"-design-editor__control-group",a,{"has-error":d})},g.default.createElement(r?"label":"div",{className:t+"-design-editor__control-group-container"},o?g.default.createElement("div",{className:(0,b.default)(t+"-design-editor__control-group-label",c&&t+"-design-editor__control-group-label--"+c)},i&&g.default.createElement("span",{className:t+"-design-editor__control-group-required-star"},"*"),p):null,g.default.createElement("div",{className:t+"-design-editor__control-group-control"},u,l&&g.default.createElement("div",{className:t+"-design-editor__control-group-help-desc"},l))),d&&g.default.createElement("div",{className:t+"-design-editor__control-group-error"},s))}}]),a}(m.PureComponent);P.propTypes={showError:v.default.bool,error:v.default.node,showLabel:v.default.bool,helpDesc:v.default.node,label:v.default.node,labelAlign:v.default.string,focusOnLabelClick:v.default.bool,required:v.default.bool,className:v.default.string,prefix:v.default.string},P.defaultProps={required:!1,showError:!1,showLabel:!0,focusOnLabelClick:!0,error:"",prefix:"zent"}},1682:function(n,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.IMAGE_SIZE={SMALL:1,LARGE:2},a.IMAGE_AD_LIMIT=10,a.IMAGE_AD_ENTRY_UUID_KEY="__image-ad-entry-uuid__",a.IMAGE_AD_DND_TYPE="zent-design-componentimage-ad-dnd-type"},1697:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}function s(n,a){return n&&n.color||a.previewBackground||w.DEFAULT_BACKGROUND}Object.defineProperty(a,"__esModule",{value:!0});var o=t(1),p=e(o),c=t(4),l=e(c),i=t(2),u=e(i),r=t(3),d=e(r),k=t(0),f=e(k),m=t(82),g=e(m),h=t(39),v=e(h),y=t(360),b=e(y),_=t(1664),w=t(364),E=function(n){function a(){var n,t,e,s;(0,p.default)(this,a);for(var o=arguments.length,c=Array(o),l=0;l<o;l++)c[l]=arguments[l];return t=e=(0,u.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(c))),e.onColorChange=e.onCustomInputChange("color"),e.onBackgroundChange=function(n){e.onColorChange(n),e.props.onSettingsChange({previewBackground:n})},e.resetBackground=function(){e.onBackgroundChange(w.DEFAULT_BACKGROUND)},e.filterTag=function(n,a){return n.text.indexOf(a)>-1},s=t,(0,u.default)(e,s)}return(0,d.default)(a,n),(0,l.default)(a,[{key:"render",value:function(){var n=this.props,a=n.value,t=n.settings,e=n.prefix,o=n.showError,p=n.validation;return f.default.createElement("div",{className:e+"-design-component-config-editor"},f.default.createElement(_.ControlGroup,{showError:o||this.getMetaProperty("title","touched"),error:p.title,required:!0,label:"页面名称:"},f.default.createElement(v.default,{value:a.title,onChange:this.onInputChange,onBlur:this.onInputBlur,name:"title"})),f.default.createElement(_.ControlGroup,{showError:o||this.getMetaProperty("description","touched"),error:p.description,label:"页面描述:"},f.default.createElement(v.default,{value:a.description,onChange:this.onInputChange,onBlur:this.onInputBlur,name:"description",placeholder:"用户通过微信分享给朋友时，会自动显示页面描述"})),f.default.createElement(_.ControlGroup,{label:"背景颜色:",labelAlign:"top",className:e+"-design-component-config-editor__background",focusOnLabelClick:!1},f.default.createElement("div",{className:e+"-design-component-config-editor__background-control"},f.default.createElement(b.default,{color:s(a,t),onChange:this.onBackgroundChange}),f.default.createElement(g.default,{onClick:this.resetBackground},"重置")),f.default.createElement("div",{className:e+"-design-component-config-editor__background-hint"},"背景颜色只在手机端显示")))}}],[{key:"getInitialValue",value:function(){return{title:"微页面标题",color:"",description:""}}},{key:"validate",value:function(n){return new Promise(function(a){var t={},e=n.title;e&&e.trim()?e.length>50&&(t.title="页面名称长度不能多于 50 个字"):t.title="请填写页面名称",a(t)})}}]),a}(_.DesignEditor);E.designType="config",E.designDescription="页面配置",a.default=E},1698:function(n,a,t){"use strict";function e(n){return window.URL?window.URL.createObjectURL(n):window.webkitURL.createObjectURL(n)}Object.defineProperty(a,"__esModule",{value:!0}),a.default=e},1750:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1697),o=e(s),p=t(1752),c=e(p);a.default={type:o.default.designType,editor:o.default,preview:c.default}},1751:function(n,a,t){"use strict";function e(n,a){return n===a?0!==n||1/n==1/a:n!==n&&a!==a}function s(n,a){if(e(n,a))return!0;if("object"!==(void 0===n?"undefined":(0,p.default)(n))||null===n||"object"!==(void 0===a?"undefined":(0,p.default)(a))||null===a)return!1;var t=Object.keys(n),s=Object.keys(a);if(t.length!==s.length)return!1;for(var o=0;o<t.length;o++)if(!c.call(a,t[o])||!e(n[t[o]],a[t[o]]))return!1;return!0}Object.defineProperty(a,"__esModule",{value:!0});var o=t(57),p=function(n){return n&&n.__esModule?n:{default:n}}(o),c=Object.prototype.hasOwnProperty;a.default=s},1752:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u),d=t(0),k=e(d),f=t(5),m=e(f),g=function(n){function a(){return(0,o.default)(this,a),(0,i.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,r.default)(a,n),(0,c.default)(a,[{key:"render",value:function(){var n=this.props,a=n.value,t=n.prefix;return k.default.createElement("div",{className:t+"-design-component-config-preview"},k.default.createElement("div",{className:t+"-design-component-config-preview__title"},a.title))}}]),a}(d.PureComponent);g.propTypes={value:m.default.object,design:m.default.object,prefix:m.default.string},a.default=g},1753:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1754),o=e(s),p=t(1755),c=e(p);a.default={type:o.default.designType,editor:o.default,preview:c.default}},1754:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u),d=t(0),k=e(d),f=t(609),m=e(f),g=t(1664),h=function(n){function a(){var n,t,e,s;(0,o.default)(this,a);for(var p=arguments.length,c=Array(p),l=0;l<p;l++)c[l]=arguments[l];return t=e=(0,i.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(c))),e.onHeightChange=e.onCustomInputChange("height"),s=t,(0,i.default)(e,s)}return(0,r.default)(a,n),(0,c.default)(a,[{key:"render",value:function(){var n=this.props,a=n.value,t=n.prefix;return k.default.createElement("div",{className:t+"-design-component-whitespace-editor"},k.default.createElement(g.ControlGroup,{label:"空白高度:",className:t+"-design-component-whitespace-editor__height"},k.default.createElement(m.default,{min:10,max:100,value:a.height,onChange:this.onHeightChange,withInput:!1}),k.default.createElement("span",null,a.height," 像素")))}}],[{key:"getInitialValue",value:function(){return{height:30}}}]),a}(g.DesignEditor);h.designType="white",h.designDescription=k.default.createElement("span",null,"辅助",k.default.createElement("br",null),"空白"),a.default=h},1755:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u),d=t(0),k=e(d),f=t(5),m=e(f),g=function(n){function a(){return(0,o.default)(this,a),(0,i.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,r.default)(a,n),(0,c.default)(a,[{key:"render",value:function(){var n=this.props,a=n.value,t=n.prefix;return k.default.createElement("div",{className:t+"-design-component-whitespace-preview",style:{height:a.height+"px"}})}}]),a}(d.PureComponent);g.propTypes={value:m.default.object,prefix:m.default.string},a.default=g},1756:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1757),o=e(s),p=t(1758),c=e(p);a.default={type:o.default.designType,editor:o.default,preview:c.default}},1757:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u),d=t(0),k=e(d),f=t(233),m=e(f),g=t(360),h=e(g),v=t(1664),y=m.default.Group,b="#e5e5e5",_=function(n){function a(){var n,t,e,s;(0,o.default)(this,a);for(var p=arguments.length,c=Array(p),l=0;l<p;l++)c[l]=arguments[l];return t=e=(0,i.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(c))),e.onColorChange=e.onCustomInputChange("color"),e.onColorReset=function(){e.onColorChange(b)},s=t,(0,i.default)(e,s)}return(0,r.default)(a,n),(0,c.default)(a,[{key:"render",value:function(){var n=this.props,a=n.prefix,t=n.value,e=n.showError,s=n.validation;return k.default.createElement("div",{className:a+"-design-component-line-editor"},k.default.createElement(v.ControlGroup,{label:"颜色:",showError:e||this.getMetaProperty("color","touched"),error:s.color},k.default.createElement(h.default,{className:a+"-design-component-line-editor_color-select",color:t.color,onChange:this.onColorChange}),k.default.createElement("span",{className:a+"-design-component-line-editor_color-reset",onClick:this.onColorReset},"重置")),k.default.createElement(v.ControlGroup,{label:"边距:",showError:e||this.getMetaProperty("hasPadding","touched"),error:s.hasPadding},k.default.createElement(y,{value:t.hasPadding,onChange:this.onInputChange},k.default.createElement(m.default,{name:"hasPadding",value:!1},"无边距"),k.default.createElement(m.default,{name:"hasPadding",value:!0},"左右留边"))),k.default.createElement(v.ControlGroup,{label:"样式:",showError:e||this.getMetaProperty("lineType","touched"),error:s.lineType},k.default.createElement(y,{value:t.lineType,onChange:this.onInputChange},k.default.createElement(m.default,{name:"lineType",value:"solid"},"实线"),k.default.createElement(m.default,{name:"lineType",value:"dashed"},"虚线"),k.default.createElement(m.default,{name:"lineType",value:"dotted"},"点线"))))}}],[{key:"getInitialValue",value:function(){return{color:b,hasPadding:!1,lineType:"solid"}}}]),a}(v.DesignEditor);_.designType="line",_.designDescription="辅助线",a.default=_},1758:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}function s(n){var a=n.color,t=n.hasPadding,e=n.lineType;return{height:0,borderTopWidth:"1px",margin:t?"0 10px":0,borderColor:a,borderStyle:e}}Object.defineProperty(a,"__esModule",{value:!0});var o=t(1),p=e(o),c=t(4),l=e(c),i=t(2),u=e(i),r=t(3),d=e(r),k=t(0),f=e(k),m=function(n){function a(){return(0,p.default)(this,a),(0,u.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,d.default)(a,n),(0,l.default)(a,[{key:"render",value:function(){var n=this.props,a=n.value,t=n.prefix;return f.default.createElement("div",{className:t+"-design-component-line-preview"},f.default.createElement("div",{style:s(a)}))}}]),a}(k.PureComponent);a.default=m},1759:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1760),o=e(s),p=t(1766),c=e(p);a.default={type:o.default.designType,editor:o.default,preview:c.default}},1760:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(7),o=e(s),p=t(1),c=e(p),l=t(4),i=e(l),u=t(2),r=e(u),d=t(3),k=e(d),f=t(0),m=e(f),g=t(360),h=e(g),v=t(82),y=e(v),b=t(58),_=e(b),w=t(1664),E=t(1761),C=e(E),I="#f9f9f9",j=function(n){function a(){var n,t,e,s;(0,c.default)(this,a);for(var o=arguments.length,p=Array(o),l=0;l<o;l++)p[l]=arguments[l];return t=e=(0,r.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(p))),e.handleResetBackground=function(){e.onCustomInputChange("color")(I)},e.onColorChange=function(n){e.onCustomInputChange("color")(n)},e.onFullscreenChange=function(n){var a=Number(n.target.checked);e.onCustomInputChange("fullscreen")(a)},e.onEditorChange=function(n){e.onCustomInputChange("content")(n)},s=t,(0,r.default)(e,s)}return(0,k.default)(a,n),(0,i.default)(a,[{key:"render",value:function(){var n=this.props,a=n.value,t=n.richTextConfig;return m.default.createElement("div",{className:"zent-design-component-richtext-editor"},m.default.createElement(w.ControlGroup,{focusOnLabelClick:!1,label:"背景颜色："},m.default.createElement("div",{className:"input-append"},m.default.createElement(h.default,{className:"zent-design-component-richtext-editor__color-picker-popover",color:a.color,onChange:this.onColorChange}),m.default.createElement(y.default,{onClick:this.handleResetBackground},"重置")),m.default.createElement("label",{htmlFor:"fullscreen",className:"control-label"},"是否全屏："),m.default.createElement(_.default,{className:"zent-design-component-richtext-editor-checkbox-wrap",name:"fullscreen",checked:a.fullscreen,onChange:this.onFullscreenChange},"全屏显示")),m.default.createElement("div",{className:"zent-design-component-richtext-editor-group"},m.default.createElement(C.default,(0,o.default)({value:a.content,onChange:this.onEditorChange,editorConfig:{initialFrameWidth:386,initialFrameHeight:600}},t))))}}],[{key:"getInitialValue",value:function(){return{color:I,content:"",fullscreen:0}}}]),a}(w.DesignEditor);j.defaultProps={richTextConfig:{}},j.designType="rich_text",j.designDescription="富文本",a.default=j},1761:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u),d=t(0),k=e(d),f=t(35),m=e(f),g=t(21),h=e(g),v=t(5),y=e(v),b=t(606),_=e(b);t(1762);var w="__ZENT_UEDITOR_LOADED_STATUS__",E={toolbars:[["bold","italic","underline","strikethrough","forecolor","backcolor","justifyleft","justifycenter","justifyright","|","insertunorderedlist","insertorderedlist","blockquote"],["emotion","insertvideo","link","removeformat","|","rowspacingtop","rowspacingbottom","lineheight","paragraph","fontsize"],["inserttable","deletetable","insertparagraphbeforetable","insertrow","deleterow","insertcol","deletecol","mergecells","mergeright","mergedown","splittocells","splittorows","splittocols"]],autoClearinitialContent:!1,autoFloatEnabled:!0,focus:!1,wordCount:!0,elementPathEnabled:!1,pasteplain:!1,initialFrameWidth:640,initialFrameHeight:200,maximumWords:1e4},C=function(n){function a(n){(0,o.default)(this,a);var t=(0,i.default)(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,n));return t.initRichText=function(){var n=window.UE,a=document.getElementById(t.uuid);if(!n||!a)return!1;var e=t.props,s=e.value,o=e.editorConfig,p=(0,m.default)({},E,o),c=new n.ui.Editor(p);t.editor=c,c.addListener("blur contentChange",function(){t.onChange()}),c.render(a),c.ready(function(){c.setContent(s)})},t.onChange=function(){var n=t.editor.getContent();t.props.onChange&&t.props.onChange(n)},t.uuid=(0,_.default)(),t}return(0,r.default)(a,n),(0,c.default)(a,[{key:"componentDidMount",value:function(){var n=this,a=null;window.UE?this.initRichText():a=setInterval(function(){var t=window[w];1===t||(2===t?(clearInterval(a),n.initRichText()):n.loadUEditorScript())},50)}},{key:"loadUEditorScript",value:function(){var n=this;if(void 0===window[w]){window[w]=1;var a=this.props,t=a.ueditorHomeUrl,e=a.ueditorIframeUrl,s=a.ueditorUrl,o=a.ueditorConfigUrl;window.UEDITOR_HOME_URL=t,window.UEDITOR_IFRAME_URL=e,this.createScript(o,function(){n.createScript(s,function(){window[w]=2})})}}},{key:"createScript",value:function(n,a){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=n,t.onload=function(){a()},document.body.appendChild(t)}},{key:"componentWillUnmount",value:function(){this.editor&&this.editor.destroy()}},{key:"render",value:function(){var n=this.props.prefix;return k.default.createElement("div",{className:n+"-richtext "+this.props.className},k.default.createElement("div",{id:this.uuid}))}}]),a}(d.Component);C.propTypes={value:y.default.string,onChange:y.default.func,ueditorUrl:y.default.string,ueditorConfigUrl:y.default.string,ueditorHomeUrl:y.default.string,ueditorIframeUrl:y.default.string,editorConfig:y.default.object,className:y.default.string,prefix:y.default.string},C.defaultProps={value:"",onChange:h.default,ueditorUrl:"//b.yzcdn.cn/v2/vendor/ueditor/release/ueditor.all.min.201707251345.js",ueditorConfigUrl:"//b.yzcdn.cn/v2/vendor/ueditor/release/ueditor.config.201707251345.js",ueditorHomeUrl:"//b.yzcdn.cn/v2/vendor/ueditor/dist/",ueditorIframeUrl:"//www.youzan.com/v2/static/vendor/ueditor/dist/",editorConfig:{},className:"",prefix:"zent-design-component"},a.default=C},1762:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}var s=t(1763),o=e(s),p=t(1764),c=e(p),l=t(1765),i=e(l);window.__ueditor_link=o.default,window.__ueditor_emotion=c.default,window.__ueditor_video=i.default},1763:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u);a.default=function(n){var a=void 0,t=void 0,e=function(){return new Promise(function(t,e){if(a.submit(),a.isValid()){var s=a.getFormValues(),o=s.linkUrl,p=/^tel:/;/(:\s*\/\/|tel:)/.test(s.linkUrl)||(y.default.success("您输入的超链接中不包含http等协议名称，默认将为您添加http://前缀"),o="http://"+o);var c={target:p.test(o)?"":"_blank",href:o,textValue:o};n.callback(c),t()}else e()})},s=function(){e().then(function(){t()}).catch(function(){})};t=h.default.confirm({className:"zent-design-component-richtext__link",title:"超链接",content:k.default.createElement(E,{onPressEnter:s,ref:function(n){return a=n}}),onConfirm:e})};var d=t(0),k=e(d),f=t(607),m=e(f),g=t(608),h=e(g),v=t(171),y=e(v),b=m.default.createForm,_=m.default.Field,w=m.default.InputField,E=b({})(function(n){function a(){var n,t,e,s;(0,o.default)(this,a);for(var p=arguments.length,c=Array(p),l=0;l<p;l++)c[l]=arguments[l];return t=e=(0,i.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(c))),e.onPressEnter=function(n){n.preventDefault(),e.props.onPressEnter()},s=t,(0,i.default)(e,s)}return(0,r.default)(a,n),(0,c.default)(a,[{key:"render",value:function(){return k.default.createElement("div",{className:"share-content"},k.default.createElement(m.default,{horizontal:!0},k.default.createElement(_,{name:"linkUrl",label:"链接地址",validations:{required:!0},validationErrors:{required:"链接地址不能为空"},onPressEnter:this.onPressEnter,autoFocus:!0,component:w})," ")," ")}}]),a}(k.default.Component))},1764:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u);a.default=function(n){y({dialogId:_,className:"zent-design-component-richtext__emotion",children:k.default.createElement(E,{callback:n.callback})})};var d=t(0),k=e(d),f=t(235),m=e(f),g=t(363),h=e(g),v=h.default.TabPanel,y=m.default.openDialog,b=m.default.closeDialog,_="zent_design_component_richtext_emotion_dialog",w=[{name:"精选",whichTpl:"normal",tplInfo:"Choice",wrapClass:"jd",sum:84,imgFolder:"jx2/",imgName:"j_00"},{name:"兔斯基",whichTpl:"normal",tplInfo:"Tuzki",wrapClass:"tsj",sum:40,imgFolder:"tsj/",imgName:"t_00"},{name:"绿豆蛙",whichTpl:"normal",tplInfo:"Lvdouwa",wrapClass:"ldw",sum:52,imgFolder:"ldw/",imgName:"w_00"},{name:"波波",whichTpl:"normal",tplInfo:"Bobo",wrapClass:"bb",sum:63,imgFolder:"bobo/",imgName:"b_00"},{name:"北鼻猫",whichTpl:"normal",tplInfo:"BabyCat",wrapClass:"cat",sum:20,imgFolder:"babycat/",imgName:"C_00"},{name:"泡泡",whichTpl:"pp",tplInfo:"Bubble",wrapClass:"pp",sum:50,imgFolder:"face/",imgName:"i_f_"},{name:"有啊",whichTpl:"normal",tplInfo:"Youa",wrapClass:"youa",sum:44,imgFolder:"youa/",imgName:"y_00"},{name:"QQ",whichTpl:"qq",tplInfo:"Qq",wrapClass:"qq",sum:105,imgFolder:"qq/",imgName:""}],E=function(n){function a(n){(0,o.default)(this,a);var t=(0,i.default)(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,n));return t.onTabChange=function(n){t.setState({activeId:n})},t.state={activeId:"Choice"},t}return(0,r.default)(a,n),(0,c.default)(a,[{key:"componentWillMount",value:function(){this.initTabs()}},{key:"initTabs",value:function(){var n=this;this.allTabs=w.map(function(a,t){for(var e=[],s=1,o=a.sum;s<=o;s++){var p=""+a.imgFolder+a.imgName+(s<10?"0"+s:s)+".gif",c={},l="";"pp"===a.whichTpl?(c={backgroundPosition:"left "+-25*(s-1)+"px"},l=s%12<=6?"posRight":"posLeft"):"qq"===a.whichTpl?(c={backgroundPosition:-24*(s-1)+"px 50%"},l=s%15<=6?"posRight":"posLeft"):(c={backgroundPosition:"left "+-35*(s-1)+"px"},l=s%12<=6?"posRight":"posLeft"),e.push(k.default.createElement("div",{key:a.tplInfo+"-"+s},k.default.createElement("span",{className:a.wrapClass,style:c,onClick:n.onClick.bind(n,a,p,l)})))}return k.default.createElement(v,{tab:a.name,id:a.tplInfo,key:t},k.default.createElement("div",{className:"emotion-content"},k.default.createElement("div",{className:"emotion-list-wrapper"},e)))})}},{key:"onClick",value:function(n,a){var t="https://b.yzcdn.cn/v2";t=t.replace(/^\/\//,"https://"),a=t+"/image/ueditor_emotion/"+a,b(_),this.props.callback(a)}},{key:"render",value:function(){return k.default.createElement(h.default,{activeId:this.state.activeId,onTabChange:this.onTabChange,className:"emotion-tabs"},this.allTabs)}}]),a}(d.Component)},1765:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u);a.default=function(n){var a=this,t=h.default.confirm({className:"zent-design-component-richtext__video",title:"视频插入视频",content:k.default.createElement(_,{callback:n.callback,onClose:function(){return t()},ref:function(n){return a.form=n}}),onConfirm:function(){a.form.getWrappedForm().saveVideo()}})};var d=t(0),k=e(d),f=t(607),m=e(f),g=t(608),h=e(g),v=m.default.createForm,y=m.default.Field,b=m.default.InputField,_=v({})(function(n){function a(n){(0,o.default)(this,a);var t=(0,i.default)(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,n));return t.preview=t.preview.bind(t),t.width=n.width||620,t.height=n.height||.75*t.width,t.imgWidth=n.imgWidth||300,t.imgHeight=n.imgHeight||225,t.iframeUrl="",t.state={videoUrl:""},t}return(0,r.default)(a,n),(0,c.default)(a,[{key:"preview",value:function(n){var a=n.target.value;"paste"===n.type?setTimeout(this.previewVideo.bind(this,a),1):this.previewVideo(a),this.setState({videoUrl:a})}},{key:"previewVideo",value:function(n){this.iframeUrl=this.processUrl(n),this.renderIframe()}},{key:"processUrl",value:function(n){if(n){var a=void 0,t=void 0;if(n.indexOf("v.qq.com")>=0){if(a=n.match(/vid=([^&]*)($|&)/),a?t="https://v.qq.com/iframe/player.html?vid="+a[1]+"&tiny=0&auto=0":(a=n.match(/\/([0-9a-zA-Z]+).html/))&&(t="https://v.qq.com/iframe/player.html?vid="+a[1]+"&tiny=0&auto=0"),!a)return}else if(n.indexOf("v.youku.com")>=0)a=n.match(/id_(.*)\.html/),t="http://player.youku.com/embed/"+a[1];else if(n.indexOf("//player.youku.com/embed/")>=0)t=n.match(/src="([^"]*)"/)[1];else{if(!(n.indexOf("tudou.com")>=0))return;a=n.match(/\/([\w\-]*)\.html/)[1],t="http://www.tudou.com/programs/view/html5embed.action?code="+a}return t}}},{key:"renderIframe",value:function(n){if(n=n||this.iframeUrl){var a='<iframe src="'+n+'" width="'+this.width+'" height="'+this.height+'" allowfullscreen="true"></ifame>';(this.isYouku()||this.isTudou())&&(a='<img src="'+this.getSiteLogoImage()+'" />'),document.getElementById("preview").innerHTML=a}else document.getElementById("preview").innerHTML="<span>请复制腾讯、优酷视频地址输入框。</span>"}},{key:"isYouku",value:function(){return this.iframeUrl&&this.iframeUrl.match("youku")}},{key:"isTudou",value:function(){return this.iframeUrl&&this.iframeUrl.match("tudou")}},{key:"getSiteLogoImage",value:function(){return this.isYouku()?"http://img.yzcdn.cn/public_files/2015/09/10/04eeb56eb29cbfbe29d67042be4d21ed.jpg":this.isTudou()?"http://img.yzcdn.cn/public_files/2015/09/10/1640ba3f20b22d4b35a62d72831e8110.jpg":void 0}},{key:"saveVideo",value:function(){if(this.iframeUrl){var n={url:this.iframeUrl,width:this.imgWidth,height:this.imgHeight};(this.isYouku()||this.isTudou())&&(n.html='<a class="video-link" target="_blank" href="'+this.iframeUrl+'"><img src="'+this.getSiteLogoImage()+'" /></a>'),this.props.callback(n),this.props.onClose()}}},{key:"render",value:function(){return k.default.createElement(m.default,{horizontal:!0,className:"video-content",onSubmit:this.props.handleSubmit(this.saveVideo)},k.default.createElement("strong",null,"为了在微信中有更好的体验，推荐使用",k.default.createElement("a",{href:"http://v.qq.com",target:"_blank",rel:"noopener noreferrer"},"腾讯视频"),"。"),k.default.createElement(y,{name:"videoUrl",label:"视频地址",placeholder:"复制视频地址到这里",component:b,value:this.state.videoUrl,onInput:this.preview,onChange:this.preview}),k.default.createElement("div",{id:"preview"},k.default.createElement("span",null,"预览区")))}}]),a}(d.Component))},1766:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1),o=e(s),p=t(4),c=e(p),l=t(2),i=e(l),u=t(3),r=e(u),d=t(0),k=e(d),f=t(5),m=e(f),g=t(8),h=e(g),v=function(n){function a(){return(0,o.default)(this,a),(0,i.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,r.default)(a,n),(0,c.default)(a,[{key:"render",value:function(){var n=this.props.value,a=n.content||'<p>点此编辑『富文本』内容 ——&gt;</p><p>你可以对文字进行<strong>加粗</strong>、<em>斜体</em>、<span style="text-decoration: underline;">下划线</span>、<span style="text-decoration: line-through;">删除线</span>、文字<span style="color: rgb(0, 176, 240);">颜色</span>、<span style="background-color: rgb(255, 192, 0); color: rgb(255, 255, 255);">背景色</span>、以及字号<span style="font-size: 20px;">大</span><span style="font-size: 14px;">小</span>等简单排版操作。</p><p>还可以在这里加入表格了</p><table><tbody><tr><td width="93" valign="top" style="word-break: break-all;">中奖客户</td><td width="93" valign="top" style="word-break: break-all;">发放奖品</td><td width="93" valign="top" style="word-break: break-all;">备注</td></tr><tr><td width="93" valign="top" style="word-break: break-all;">猪猪</td><td width="93" valign="top" style="word-break: break-all;">内测码</td><td width="93" valign="top" style="word-break: break-all;"><em><span style="color: rgb(255, 0, 0);">已经发放</span></em></td></tr><tr><td width="93" valign="top" style="word-break: break-all;">大麦</td><td width="93" valign="top" style="word-break: break-all;">积分</td><td width="93" valign="top" style="word-break: break-all;"><a href="javascript: void(0);" target="_blank">领取地址</a></td></tr></tbody></table>',t=n.fullscreen,e=n.color;return k.default.createElement("div",{dangerouslySetInnerHTML:{__html:a},className:(0,h.default)("zent-design-component-richtext-preview",{"zent-design-component-richtext-preview--fullscreen":t}),style:{backgroundColor:e}})}}]),a}(d.Component);v.propTypes={value:m.default.object,design:m.default.object},a.default=v},1767:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(1768),o=e(s),p=t(1770),c=e(p);a.default={type:o.default.designType,editor:o.default,preview:c.default}},1768:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(7),o=e(s),p=t(1),c=e(p),l=t(4),i=e(l),u=t(2),r=e(u),d=t(3),k=e(d),f=t(0),m=e(f),g=t(233),h=e(g),v=t(28),y=e(v),b=t(361),_=t(1698),w=e(_),E=t(151),C=e(E),I=t(148),j=e(I),D=t(1664),N=t(1682),P=t(1769),T=h.default.Group,O=function(n){function a(n){(0,c.default)(this,a);var t=(0,r.default)(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,n));return t.onAddImageEntry=function(n){var a=n.target.files,e=(0,w.default)(a[0]),s=t.props,o=s.value;(0,s.onChange)({images:o.images.concat((0,P.createEmptyImageEntry)({imageUrl:e}))})},t.removeImageEntry=function(n){return function(){var a=t.props,e=a.value.images;(0,a.onChange)({images:e.filter(function(a){return a[N.IMAGE_AD_ENTRY_UUID_KEY]!==n})})}},t.prependImageEntry=function(n){return function(){var a=t.props,e=a.value.images,s=a.onChange,o=(0,C.default)(e,function(a){return a[N.IMAGE_AD_ENTRY_UUID_KEY]===n});if(-1!==o){var p=e.slice();p.splice(o,0,(0,P.createEmptyImageEntry)()),s({images:p})}}},t.appendImageEntry=function(n){return function(){var a=t.props,e=a.value.images,s=a.onChange,o=(0,C.default)(e,function(a){return a[N.IMAGE_AD_ENTRY_UUID_KEY]===n});if(-1!==o){var p=e.slice();p.splice(o+1,0,(0,P.createEmptyImageEntry)()),s({images:p})}}},t.onImageEntryChange=function(n){return function(a){var e=t.props,s=e.value.images;(0,e.onChange)({images:s.map(function(t){return t[N.IMAGE_AD_ENTRY_UUID_KEY]!==n?t:(0,o.default)({},t,a)})})}},t.state=(0,o.default)({},t.state,{localImage:""}),t}return(0,k.default)(a,n),(0,i.default)(a,[{key:"render",value:function(){var n=this,a=this.props,t=a.prefix,e=a.showError,s=a.validation,o=a.value,p=this.state.localImage,c=s.images,l=this.isAddImageEntryAllowed();return m.default.createElement("div",{className:t+"-design-component-image-ad-editor"},m.default.createElement(D.ControlGroup,{label:"显示大小:",showError:e||this.getMetaProperty("size","touched"),error:s.size},m.default.createElement(T,{value:o.size,onChange:this.onInputChange},m.default.createElement(h.default,{name:"size",value:N.IMAGE_SIZE.LARGE},"大图"),m.default.createElement(h.default,{name:"size",value:N.IMAGE_SIZE.SMALL},"小图"))),m.default.createElement(b.Droppable,{droppableId:t+"-design-component-image-ad-editor__entry-list",type:N.IMAGE_AD_DND_TYPE,direction:"vertical"},function(a,s){return m.default.createElement("ul",{ref:a.innerRef,className:t+"-design-component-image-ad-editor__entry-list"},o.images.map(function(a){var o=a[N.IMAGE_AD_ENTRY_UUID_KEY];return m.default.createElement("li",{key:o,className:t+"-design-component-image-ad-editor__entry"},m.default.createElement(P.ImageEntry,{prefix:t,imageId:o,imageUrl:a.imageUrl,linkTitle:a.linkTitle,linkUrl:a.linkUrl,onChange:n.onImageEntryChange(o),error:e&&c?c[o]:""}),!s.isDraggingOver&&m.default.createElement(y.default,{type:"close-circle",className:t+"-design-component-image-ad-editor__entry-close-btn",onClick:n.removeImageEntry(o)}),!s.isDraggingOver&&l&&m.default.createElement(y.default,{type:"plus",className:t+"-design-component-image-ad-editor__entry-prepend-btn",onClick:n.prependImageEntry(o)}),!s.isDraggingOver&&l&&m.default.createElement(y.default,{type:"plus",className:t+"-design-component-image-ad-editor__entry-append-btn",onClick:n.appendImageEntry(o)}))}),a.placeholder)}),l&&m.default.createElement("a",{className:t+"-design-component-image-ad-editor__add-entry-btn"},m.default.createElement("b",null,"+"),"添加一个广告",m.default.createElement("input",{type:"file",accept:"image/gif, image/jpeg, image/png",title:"",value:p,onChange:this.onAddImageEntry})),m.default.createElement("div",{className:t+"-design-component-image-ad-editor__hint"},"最多添加 ",N.IMAGE_AD_LIMIT," 个广告，拖动选中的图片广告可对其排序"))}},{key:"isAddImageEntryAllowed",value:function(){return this.props.value.images.length<N.IMAGE_AD_LIMIT}},{key:"shouldHandleDragEnd",value:function(n){return n===N.IMAGE_AD_DND_TYPE}},{key:"onDragEnd",value:function(n){var a=n.source,t=n.destination;if(t){var e=this.props,s=e.value;(0,e.onChange)((0,o.default)({},s,{images:this.reorder(s.images,a.index,t.index)}))}}}],[{key:"getInitialValue",value:function(){return{size:N.IMAGE_SIZE.SMALL,images:[]}}},{key:"validate",value:function(n){return new Promise(function(a){var t={};t.images=n.images.reduce(function(n,a){return a.imageUrl||(n[a[N.IMAGE_AD_ENTRY_UUID_KEY]]="请选择广告图片"),n},{}),(0,j.default)(t.images)&&delete t.images,a(t)})}}]),a}(D.DesignEditor);O.designType="image-ad",O.designDescription=m.default.createElement("span",null,"图片",m.default.createElement("br",null),"广告"),a.default=O},1769:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}function s(n){return(0,p.default)((0,l.default)({imageUrl:"",linkTitle:"",linkUrl:""},T.IMAGE_AD_ENTRY_UUID_KEY,(0,C.default)()),n)}Object.defineProperty(a,"__esModule",{value:!0}),a.ImageEntry=void 0;var o=t(7),p=e(o),c=t(9),l=e(c),i=t(1),u=e(i),r=t(4),d=e(r),k=t(2),f=e(k),m=t(3),g=e(m);a.createEmptyImageEntry=s;var h=t(0),v=e(h),y=t(5),b=e(y),_=t(39),w=e(_),E=t(606),C=e(E),I=t(361),j=t(1698),D=e(j),N=t(8),P=e(N),T=t(1682);(a.ImageEntry=function(n){function a(){var n,t,e,s;(0,u.default)(this,a);for(var o=arguments.length,p=Array(o),c=0;c<o;c++)p[c]=arguments[c];return t=e=(0,f.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(p))),e.state={localImage:""},e.onTitleChange=function(n){var a=n.target.value;e.props.onChange({linkTitle:a})},e.onUrlChange=function(n){var a=n.target.value;e.props.onChange({linkUrl:a})},e.onImageChange=function(n){var a=n.target.files,t=(0,D.default)(a[0]);e.props.onChange({imageUrl:t})},s=t,(0,f.default)(e,s)}return(0,g.default)(a,n),(0,d.default)(a,[{key:"render",value:function(){var n=this,a=this.props,t=a.imageId,e=a.imageUrl,s=a.linkTitle,o=a.linkUrl,c=a.error,i=a.prefix,u=this.state.localImage;return v.default.createElement(I.Draggable,{draggableId:t,type:T.IMAGE_AD_DND_TYPE},function(a){var t;return v.default.createElement("div",null,v.default.createElement("div",(0,p.default)({className:i+"-design-component-image-ad-editor__image-entry",ref:a.innerRef,style:a.draggableStyle},a.dragHandleProps),v.default.createElement("div",{className:i+"-design-component-image-ad-editor__image-entry-image-container"},v.default.createElement("img",{src:e,alt:s}),v.default.createElement("div",{className:(0,P.default)(i+"-design-component-image-ad-editor__image-entry-image-upload",(t={},(0,l.default)(t,i+"-design-component-image-ad-editor__image-entry-image-upload--has-image",e),(0,l.default)(t,i+"-design-component-image-ad-editor__image-entry-image-upload--no-image",!e),t))},e?v.default.createElement("span",null,"重新上传"):v.default.createElement("a",null,v.default.createElement("b",null,"+"),"添加图片"),v.default.createElement("input",{type:"file",accept:"image/gif, image/jpeg, image/png",title:"",value:u,onChange:n.onImageChange}))),v.default.createElement("div",{className:i+"-design-component-image-ad-editor__image-entry-controls"},v.default.createElement("div",{className:i+"-design-component-image-ad-editor__image-entry-image-control"},v.default.createElement("label",null,"标题:"),v.default.createElement(w.default,{value:s,onChange:n.onTitleChange})),v.default.createElement("div",{className:i+"-design-component-image-ad-editor__image-entry-image-control"},v.default.createElement("label",null,"链接:"),v.default.createElement(w.default,{value:o,onChange:n.onUrlChange}))),c&&v.default.createElement("div",{className:i+"-design-component-image-ad-editor__image-entry-error"},c)),a.placeholder)})}}]),a}(h.Component)).propTypes={prefix:b.default.string,imageId:b.default.string,imageUrl:b.default.string,linkUrl:b.default.string,linkTitle:b.default.string,error:b.default.string,onChange:b.default.func.isRequired}},1770:function(n,a,t){"use strict";function e(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(a,"__esModule",{value:!0});var s=t(9),o=e(s),p=t(1),c=e(p),l=t(4),i=e(l),u=t(2),r=e(u),d=t(3),k=e(d),f=t(0),m=e(f),g=t(8),h=e(g),v=t(148),y=e(v),b=t(1682),_=function(n){function a(){return(0,c.default)(this,a),(0,r.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,k.default)(a,n),(0,i.default)(a,[{key:"render",value:function(){var n,a=this.props,t=a.value,e=a.prefix,s=t.size,p=t.images;return(0,y.default)(p)?m.default.createElement("div",{className:(0,h.default)(e+"-design-component-image-ad-preview",e+"-design-component-image-ad-preview--no-data")},"点击编辑图片广告"):m.default.createElement("div",{className:(0,h.default)(e+"-design-component-image-ad-preview",(n={},(0,o.default)(n,e+"-design-component-image-ad-preview--large",s===b.IMAGE_SIZE.LARGE),(0,o.default)(n,e+"-design-component-image-ad-preview--small",s===b.IMAGE_SIZE.SMALL),n))},p.map(function(n){var a=n[b.IMAGE_AD_ENTRY_UUID_KEY],t=n.linkUrl||"javascript:void(0);",s=n.linkTitle;return m.default.createElement("a",{key:a,className:e+"-design-component-image-ad-preview__image",href:t,target:"_blank",rel:"noopener noreferrer"},m.default.createElement("div",{className:e+"-design-component-image-ad-preview__image-img"},m.default.createElement("img",{src:n.imageUrl,alt:s}),s&&m.default.createElement("div",{className:e+"-design-component-image-ad-preview__image-title"},s)))}))}}]),a}(f.Component);a.default=_}});