-
Notifications
You must be signed in to change notification settings - Fork 0
/
3-a28f22da2d828c0b81f9.js
1 lines (1 loc) · 93.2 KB
/
3-a28f22da2d828c0b81f9.js
1
webpackJsonp([3],{1582: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),g=e(f),m=t(3),h=e(m),v=t(0),y=e(v),_=t(232),b=e(_),w=t(359),E=t(1750),C=e(E),I=t(1697),j=e(I),D=t(1753),P=e(D),N=t(1756),O=e(N),M=t(1759),T=e(M),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}),T.default,x.default,Object.assign({limit:1},P.default),Object.assign({limit:2},O.default)]),a=[Object.assign({},C.default,{dragable:!1,appendable:!1,configurable:!1,highlightWhenSelect:!1}),w.Design.group("基础"),T.default,x.default,w.Design.group("其他"),Object.assign({limit:1},P.default),Object.assign({limit:2},O.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,g.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,g.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},"上架"),y.default.createElement(w.Button,{onClick:this.notImplemented},"保存草稿"),y.default.createElement(w.Button,{onClick:this.notImplemented},"预览"),y.default.createElement(w.Button,{onClick:this.switchMode},t?"组件合并显示":"组件分组显示")))}},{key:"notImplemented",value:function(){w.Notify.error("仅作为演示，功能未开发")}},{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,g.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,g.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,g.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,b.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-wei-ye-mian-bian-ji-zu-jian">¶</a><a href="javascript:void(0)" id="design-wei-ye-mian-bian-ji-zu-jian" class="anchor-point"></a>Design 微页面编辑组件</h2>\n<p>微页面编辑组件，用所见即所得(WYSIWG)的方式创建内容丰富的富文本页面。</p>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),y.default.createElement(S,{title:"基础用法",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">\'基础\'</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">\'其他\'</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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</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 上架\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 保存草稿\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 预览\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">\'组件合并显示\'</span> <span class="token punctuation">:</span> <span class="token string">\'组件分组显示\'</span><span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</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">\'仅作为演示，功能未开发\'</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">&&</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"><</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>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>components</td>\n<td>所有组件的定义数组</td>\n<td>array</td>\n<td>[]</td>\n<td>必须</td>\n</tr>\n<tr>\n<td>value</td>\n<td>组件当前的值</td>\n<td>array</td>\n<td>[]</td>\n<td>可选</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>组件值修改时触发的回调函数</td>\n<td>func(value: array): void</td>\n<td>必须</td>\n<td></td>\n</tr>\n<tr>\n<td>settings</td>\n<td>组件的配置信息，会传给每个 Design 组件</td>\n<td>object</td>\n<td></td>\n<td>可选</td>\n</tr>\n<tr>\n<td>onSettingsChange</td>\n<td>组件配置信息的修改回调函数</td>\n<td>func</td>\n<td></td>\n<td>可选</td>\n</tr>\n<tr>\n<td>defaultSelectedIndex</td>\n<td>默认选中的下标（value）</td>\n<td>number</td>\n<td>-1</td>\n<td>可选</td>\n</tr>\n<tr>\n<td>preview</td>\n<td>用于自定义整个 Design 的渲染</td>\n<td>Component</td>\n<td>DesingPreview</td>\n<td>可选</td>\n</tr>\n<tr>\n<td>previewFooter</td>\n<td>自定义 Preview 底部的额外信息</td>\n<td>node</td>\n<td></td>\n<td>可选</td>\n</tr>\n<tr>\n<td>confirmUnsavedLeave</td>\n<td>有未保存数据关闭窗口时需要用户确认</td>\n<td>boolean</td>\n<td>true</td>\n<td>可选</td>\n</tr>\n<tr>\n<td>cache</td>\n<td>是否将未保存的数据暂存到 localStorage 中</td>\n<td>boolean</td>\n<td>false</td>\n<td>可选</td>\n</tr>\n<tr>\n<td>cacheId</td>\n<td>配合 cache 使用，用于设置 Design 实例的缓存 id</td>\n<td>string</td>\n<td></td>\n<td>cache 为 true 时必填</td>\n</tr>\n<tr>\n<td>cacheRestoreMessage</td>\n<td>恢复缓存时的提示文案</td>\n<td>node</td>\n<td>提示：在浏览器中发现未提交的内容，是否使用该内容替换当前内容？</td>\n<td>可选</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>是否禁用编辑</td>\n<td>boolean</td>\n<td>false</td>\n<td>可选</td>\n</tr>\n<tr>\n<td>globalConfig</td>\n<td>全局参数，通常是 window._global</td>\n<td>object</td>\n<td></td>\n<td>可选</td>\n</tr>\n<tr>\n<td>children</td>\n<td>渲染在 Design 内部的额外内容</td>\n<td>node</td>\n<td></td>\n<td>可选</td>\n</tr>\n<tr>\n<td>scrollTopOffset</td>\n<td>滚动到顶部时的偏移量</td>\n<td>number \n|\n func</td>\n<td></td>\n<td>可选</td>\n</tr>\n<tr>\n<td>scrollLeftOffset</td>\n<td>滚动到左侧时的偏移量</td>\n<td>number \n|\n func</td>\n<td></td>\n<td>可选</td>\n</tr>\n<tr>\n<td>className</td>\n<td>额外类名</td>\n<td>string</td>\n<td></td>\n<td>可选</td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>类名前缀</td>\n<td>string</td>\n<td></td>\n<td>可选</td>\n</tr>\n</tbody>\n</table>\n<p><code>components</code> 是一个数组，列出了所有支持的组件，每一项需要指定组件的类型，预览和编辑组件，以及是否可以拖拽、编辑等。 </p>\n<pre><code class="language-js">type Component <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// 组件类型，必须唯一</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">// 组件类型的默认值</span>\n <span class="token comment">// 如果 type 是数组，可以传一个下标</span>\n <span class="token comment">// 如果是函数，不管 type 是字符串还是数组都会调用</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">// 渲染预览部分的组件</span>\n preview<span class="token punctuation">:</span> ReactComponent<span class="token punctuation">,</span>\n\n <span class="token comment">// 渲染编辑部分的组件</span>\n editor<span class="token punctuation">:</span> ReactComponent<span class="token punctuation">,</span>\n\n <span class="token comment">// 预览组件的包裹层</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">// 所有预览界面上的事件都是在这个里面处理的</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">// 编辑组件的包裹层</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">// 组件是否可以拖拽</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">// 组件是否出现在添加组件的列表里面</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">// 是否显示右下角的编辑区域(编辑/加内容/删除)</span>\n <span class="token comment">// 如果要自定义编辑区域，可以通过重写 previewController 的方式来做。</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">// 是否显示删除按钮</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">// 是否显示添加组件按钮</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">// 组件是否可以编辑</span>\n <span class="token comment">// 可以选中的组件一定是可以编辑的</span>\n <span class="token comment">// 不可编辑的组件不可选中，只能展示。</span>\n <span class="token comment">// 右下角的编辑区域由 configurable 单独控制</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">// 选中时是否高亮</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">// 组件最多可以添加的实例个数，可以是数字或者一个函数</span>\n <span class="token comment">// 不传或者传 0 表示没有限制</span>\n <span class="token comment">// 如果是函数，返回 false 表示不可再添加</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">// 组件不可再添加后，鼠标移上去的提示</span>\n <span class="token comment">// 如果是个函数，需要返回一个错误信息</span>\n <span class="token comment">// 如果 limit 是个正整数，limitMessage 会有一个默认的值：该组件最多添加 xx 个</span>\n <span class="token comment">// 如果 limit 是个负数，limitMessage 默认为：该组件暂不可用</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">// 是否可以添加组件的回调函数，返回一个 Promise，resolve 的话可以创建</span>\n <span class="token comment">// 添加组件的实例时会调用</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">// 传给 editor 的额外 props</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">// 传给 preview 的额外 props</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><code>value</code> 是一个数组，数组里面每一项都有一个 <code>type</code> 属性，用来标识这个值应该由哪个组件来渲染。</p>\n<h3 class="anchor-heading"><a href="#design-group-fang-fa">¶</a><a href="javascript:void(0)" id="design-group-fang-fa" class="anchor-point"></a>Design.group 方法</h3>\n<p>原型：<code>group(name: string): object</code></p>\n<p><code>Design</code> 组件支持将可添加的组件分组，只需要在 <code>components</code> 数组内适当的位置插入 <code>Design.group(\'groupName\')</code> 组件即可。</p>\n<pre><code class="language-text"><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-he-onsettingschange">¶</a><a href="javascript:void(0)" id="settings-he-onsettingschange" class="anchor-point"></a><code>settings</code> 和 <code>onSettingsChange</code></h3>\n<p>可以传入一个可选的 <code>settings</code> 以及相应的 <code>onSettingsChange</code> 回调函数，这两个属性会被传递给每一个 Design 组件。</p>\n<p><code>Design</code> 预定义个了一个设置：<code>previewBackground</code>，<code>Design</code> 使用 <code>settings.previewBackground</code> 来设置预览区域的背景色。</p>\n<h3 class="anchor-heading"><a href="#design-shi-li-fang-fa">¶</a><a href="javascript:void(0)" id="design-shi-li-fang-fa" class="anchor-point"></a>Design 实例方法</h3>\n<ul>\n<li><code>design.validate(): Promise</code>, 触发校验，如果有错误会 reject，否则 resolve</li>\n<li><code>design.markAsSaved()</code>，标记为以保存状态，如果使用了缓存或者离开提示需要手动调用这个函数通知 Design 更改已经保存</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><code>Design</code> 上面有一个 <code>stripUUID</code> 方法，数据发送到服务器之前可以使用这个函数来剔除 <code>Design</code> 内部使用的 id，这样可以减小数据大小。</p>\n<p>使用这个函数是可选的，不剔除也不会有问题，只是传输和存储的数据会稍稍大一点。</p>\n<h3 class="anchor-heading"><a href="#ru-he-shi-xian-xin-de-design-zu-jian">¶</a><a href="javascript:void(0)" id="ru-he-shi-xian-xin-de-design-zu-jian" class="anchor-point"></a>如何实现新的 Design 组件</h3>\n<p>每个 Design 组件都分为两部分：Preview 以及 Editor。</p>\n<p>Preview 比较简单，实现一个组件接受 <code>{ value: any, globalConfig: any, design: object }</code> 这些 props即可。</p>\n<p>Editor 请继承 <code>@youzan/design/lib/base/editor/DesignEditor</code>，这个基类提供了一些常用的方法（例如 <code>onChange</code> 事件的处理函数），在子类里面可以直接使用。</p>\n<p>Editor 接受如下props：<code>{ value: any, onChange: func, showError: boolean, validation: object, design object }</code>。</p>\n<ul>\n<li><code>validate(value): Promise</code> 有错误的时候 resolve 一个错误对象出来。</li>\n<li><code>reorder<T>(array: T[], fromIndex: number, toIndex: number): T[]</code> 用于在拖拽结束后调整数组内容。</li>\n<li><code>props.design</code> 提供了一下可能有用的方法：例如触发组件的校验等。</li>\n</ul>\n<p>Editor 必须提供这几个静态属性：<code>designType, designDescription, getInitialValue, validate</code>。</p>\n<p>Editor 内部支持使用 <a href="https://github.com/atlassian/react-beautiful-dnd"><code>react-beautiful-dnd</code></a> 实现拖拽，只需要实现 <code>shouldHandleDragEnd(type: string): boolean</code> 以及 <code>onDragEnd(result)</code> 即可。<code>react-beautiful-dnd</code> 的使用请看官方文档以及 <code>components/image-ad</code> 下的示例。</p>\n<h4 class="anchor-heading"><a href="#yi-ge-li-zi">¶</a><a href="javascript:void(0)" id="yi-ge-li-zi" class="anchor-point"></a>一个例子</h4>\n<pre><code class="language-js"><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 operator"><</span>div className<span class="token operator">=</span><span class="token string">"rc-design-component-notice-preview"</span><span class="token operator">></span><span class="token punctuation">{</span>value<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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 operator"><</span>div className<span class="token operator">=</span><span class="token string">"rc-design-component-notice-editor"</span><span class="token operator">></span>\n <span class="token operator"><</span>ControlGroup\n label<span class="token operator">=</span><span class="token string">"公告:"</span>\n required\n showError<span class="token operator">=</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>\n error<span class="token operator">=</span><span class="token punctuation">{</span>validation<span class="token punctuation">.</span>content<span class="token punctuation">}</span>\n <span class="token operator">></span>\n <span class="token operator"><</span>Input\n name<span class="token operator">=</span><span class="token string">"content"</span>\n placeholder<span class="token operator">=</span><span class="token punctuation">{</span>PLACEHOLDER<span class="token punctuation">}</span>\n value<span class="token operator">=</span><span class="token punctuation">{</span>value<span class="token punctuation">.</span>content<span class="token punctuation">}</span>\n onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onInputChange<span class="token punctuation">}</span>\n onBlur<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onInputBlur<span class="token punctuation">}</span>\n <span class="token operator">/</span><span class="token operator">></span>\n <span class="token operator"><</span><span class="token operator">/</span>ControlGroup<span class="token operator">></span>\n <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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),g=t(0),m=e(g),h=t(5),v=e(h),y=t(8),_=e(y),b=t(35),w=e(b),E=t(610),C=e(E),I=t(1751),j=e(I),D="onInputChange expects an `Event` with { target: { name, value } } as argument",P=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}(g.Component);P.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},P.designType="unknown",P.designDescription="未知组件",P.getInitialValue=function(){};var N=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 m.default.createElement("div",{className:(0,_.default)(t+"-design-editor__control-group",a,{"has-error":d})},m.default.createElement(r?"label":"div",{className:t+"-design-editor__control-group-container"},o?m.default.createElement("div",{className:(0,_.default)(t+"-design-editor__control-group-label",c&&t+"-design-editor__control-group-label--"+c)},i&&m.default.createElement("span",{className:t+"-design-editor__control-group-required-star"},"*"),p):null,m.default.createElement("div",{className:t+"-design-editor__control-group-control"},u,l&&m.default.createElement("div",{className:t+"-design-editor__control-group-help-desc"},l))),d&&m.default.createElement("div",{className:t+"-design-editor__control-group-error"},s))}}]),a}(g.PureComponent);N.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},N.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),g=t(82),m=e(g),h=t(39),v=e(h),y=t(360),_=e(y),b=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(b.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(b.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(b.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(_.default,{color:s(a,t),onChange:this.onBackgroundChange}),f.default.createElement(m.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}(b.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),g=e(f),m=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);m.propTypes={value:g.default.object,design:g.default.object,prefix:g.default.string},a.default=m},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),g=e(f),m=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(m.ControlGroup,{label:"空白高度:",className:t+"-design-component-whitespace-editor__height"},k.default.createElement(g.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}(m.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),g=e(f),m=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);m.propTypes={value:g.default.object,prefix:g.default.string},a.default=m},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),g=e(f),m=t(360),h=e(m),v=t(1664),y=g.default.Group,_="#e5e5e5",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.onColorChange=e.onCustomInputChange("color"),e.onColorReset=function(){e.onColorChange(_)},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(g.default,{name:"hasPadding",value:!1},"无边距"),k.default.createElement(g.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(g.default,{name:"lineType",value:"solid"},"实线"),k.default.createElement(g.default,{name:"lineType",value:"dashed"},"虚线"),k.default.createElement(g.default,{name:"lineType",value:"dotted"},"点线"))))}}],[{key:"getInitialValue",value:function(){return{color:_,hasPadding:!1,lineType:"solid"}}}]),a}(v.DesignEditor);b.designType="line",b.designDescription="辅助线",a.default=b},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),g=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=g},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),g=e(f),m=t(360),h=e(m),v=t(82),y=e(v),_=t(58),b=e(_),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 g.default.createElement("div",{className:"zent-design-component-richtext-editor"},g.default.createElement(w.ControlGroup,{focusOnLabelClick:!1,label:"背景颜色："},g.default.createElement("div",{className:"input-append"},g.default.createElement(h.default,{className:"zent-design-component-richtext-editor__color-picker-popover",color:a.color,onChange:this.onColorChange}),g.default.createElement(y.default,{onClick:this.handleResetBackground},"重置")),g.default.createElement("label",{htmlFor:"fullscreen",className:"control-label"},"是否全屏："),g.default.createElement(b.default,{className:"zent-design-component-richtext-editor-checkbox-wrap",name:"fullscreen",checked:a.fullscreen,onChange:this.onFullscreenChange},"全屏显示")),g.default.createElement("div",{className:"zent-design-component-richtext-editor-group"},g.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),g=e(f),m=t(21),h=e(m),v=t(5),y=e(v),_=t(606),b=e(_);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,g.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,b.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),g=e(f),m=t(608),h=e(m),v=t(171),y=e(v),_=g.default.createForm,b=g.default.Field,w=g.default.InputField,E=_({})(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(g.default,{horizontal:!0},k.default.createElement(b,{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:b,className:"zent-design-component-richtext__emotion",children:k.default.createElement(E,{callback:n.callback})})};var d=t(0),k=e(d),f=t(235),g=e(f),m=t(363),h=e(m),v=h.default.TabPanel,y=g.default.openDialog,_=g.default.closeDialog,b="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(b,{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),g=e(f),m=t(608),h=e(m),v=g.default.createForm,y=g.default.Field,_=g.default.InputField,b=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(g.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:_,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),g=e(f),m=t(8),h=e(m),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>点此编辑『富文本』内容 ——></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:g.default.object,design:g.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),g=e(f),m=t(233),h=e(m),v=t(28),y=e(v),_=t(361),b=t(1698),w=e(b),E=t(151),C=e(E),I=t(148),j=e(I),D=t(1664),P=t(1682),N=t(1769),O=h.default.Group,M=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,N.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[P.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[P.IMAGE_AD_ENTRY_UUID_KEY]===n});if(-1!==o){var p=e.slice();p.splice(o,0,(0,N.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[P.IMAGE_AD_ENTRY_UUID_KEY]===n});if(-1!==o){var p=e.slice();p.splice(o+1,0,(0,N.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[P.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 g.default.createElement("div",{className:t+"-design-component-image-ad-editor"},g.default.createElement(D.ControlGroup,{label:"显示大小:",showError:e||this.getMetaProperty("size","touched"),error:s.size},g.default.createElement(O,{value:o.size,onChange:this.onInputChange},g.default.createElement(h.default,{name:"size",value:P.IMAGE_SIZE.LARGE},"大图"),g.default.createElement(h.default,{name:"size",value:P.IMAGE_SIZE.SMALL},"小图"))),g.default.createElement(_.Droppable,{droppableId:t+"-design-component-image-ad-editor__entry-list",type:P.IMAGE_AD_DND_TYPE,direction:"vertical"},function(a,s){return g.default.createElement("ul",{ref:a.innerRef,className:t+"-design-component-image-ad-editor__entry-list"},o.images.map(function(a){var o=a[P.IMAGE_AD_ENTRY_UUID_KEY];return g.default.createElement("li",{key:o,className:t+"-design-component-image-ad-editor__entry"},g.default.createElement(N.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&&g.default.createElement(y.default,{type:"close-circle",className:t+"-design-component-image-ad-editor__entry-close-btn",onClick:n.removeImageEntry(o)}),!s.isDraggingOver&&l&&g.default.createElement(y.default,{type:"plus",className:t+"-design-component-image-ad-editor__entry-prepend-btn",onClick:n.prependImageEntry(o)}),!s.isDraggingOver&&l&&g.default.createElement(y.default,{type:"plus",className:t+"-design-component-image-ad-editor__entry-append-btn",onClick:n.appendImageEntry(o)}))}),a.placeholder)}),l&&g.default.createElement("a",{className:t+"-design-component-image-ad-editor__add-entry-btn"},g.default.createElement("b",null,"+"),"添加一个广告",g.default.createElement("input",{type:"file",accept:"image/gif, image/jpeg, image/png",title:"",value:p,onChange:this.onAddImageEntry})),g.default.createElement("div",{className:t+"-design-component-image-ad-editor__hint"},"最多添加 ",P.IMAGE_AD_LIMIT," 个广告，拖动选中的图片广告可对其排序"))}},{key:"isAddImageEntryAllowed",value:function(){return this.props.value.images.length<P.IMAGE_AD_LIMIT}},{key:"shouldHandleDragEnd",value:function(n){return n===P.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:P.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[P.IMAGE_AD_ENTRY_UUID_KEY]]="请选择广告图片"),n},{}),(0,j.default)(t.images)&&delete t.images,a(t)})}}]),a}(D.DesignEditor);M.designType="image-ad",M.designDescription=g.default.createElement("span",null,"图片",g.default.createElement("br",null),"广告"),a.default=M},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:""},O.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),g=t(3),m=e(g);a.createEmptyImageEntry=s;var h=t(0),v=e(h),y=t(5),_=e(y),b=t(39),w=e(b),E=t(606),C=e(E),I=t(361),j=t(1698),D=e(j),P=t(8),N=e(P),O=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,m.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:O.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,N.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:_.default.string,imageId:_.default.string,imageUrl:_.default.string,linkUrl:_.default.string,linkTitle:_.default.string,error:_.default.string,onChange:_.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),g=e(f),m=t(8),h=e(m),v=t(148),y=e(v),_=t(1682),b=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)?g.default.createElement("div",{className:(0,h.default)(e+"-design-component-image-ad-preview",e+"-design-component-image-ad-preview--no-data")},"点击编辑图片广告"):g.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===_.IMAGE_SIZE.LARGE),(0,o.default)(n,e+"-design-component-image-ad-preview--small",s===_.IMAGE_SIZE.SMALL),n))},p.map(function(n){var a=n[_.IMAGE_AD_ENTRY_UUID_KEY],t=n.linkUrl||"javascript:void(0);",s=n.linkTitle;return g.default.createElement("a",{key:a,className:e+"-design-component-image-ad-preview__image",href:t,target:"_blank",rel:"noopener noreferrer"},g.default.createElement("div",{className:e+"-design-component-image-ad-preview__image-img"},g.default.createElement("img",{src:n.imageUrl,alt:s}),s&&g.default.createElement("div",{className:e+"-design-component-image-ad-preview__image-title"},s)))}))}}]),a}(f.Component);a.default=b}});