-
Notifications
You must be signed in to change notification settings - Fork 1
/
1859-970d893d2ef65e2e40e0.js
1 lines (1 loc) · 59.7 KB
/
1859-970d893d2ef65e2e40e0.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[1859],{61859:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>z});var t=a(73450),p=a(73118),o=a(27378),e=a(57318),c=a(3454),l=a(89522),u=a(39215),r=a(93531),k=a(26317),i=a(80186),m=a(23476),d=a(61853),y=a(70387),g=a(29850),h=a(24246);function b(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function f(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?b(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):b(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var C=function(){var n=d.q.generateTheme,s=["#ed6a18","#ed9f18","#edd418","#bad415","#5bd415","#15d48e","#15bad4","#155bd4","#412ad4","#8e15d4","#d415ba","#d42f15"],a="Hex",t=[d.h.DefaultHoverBackgroundColor,d.h.PrimaryHoverBackgroundColor,d.h.PrimaryBackgroundColor,d.h.PrimaryActiveBackgroundColor],e=({colorType:n,setColorType:s})=>{var t=n===a?"Rgb":a,p=(0,o.useCallback)((()=>{s(t)}),[s,t]);return(0,h.jsxs)(h.Fragment,{children:[n," Color",(0,h.jsxs)(c.z,{className:"demo-theme-color-copy-switcher",size:"small",onClick:p,children:["切换到 ",t]})]})},m=()=>{var m,d=(0,o.useState)(null!==(m=window.sessionStorage.getItem("zent-theme-color"))&&void 0!==m?m:"#155bd4"),b=(0,p.Z)(d,2),f=b[0],C=b[1],v=(0,o.useMemo)((()=>n({colors:[{baseColor:f,scene:t}]},y)),[f]),w=(0,o.useMemo)((()=>(n=>n.filter((({cssVariableName:n})=>y.vars[n])))(v.colors)),[v]),x=(0,o.useMemo)((()=>(n=>n.map((n=>"".concat(n.cssVariableName,": ").concat(n.color,";"))).join("\n"))(v.colors)),[v]),T=(0,o.useState)(a),j=(0,p.Z)(T,2),S=j[0],z=j[1],N=(0,o.useMemo)((()=>[{title:"CSS Variable",name:"cssVariableName",bodyRender:({cssVariableName:n})=>(0,h.jsxs)("div",{className:"demo-theme-color-title",children:[(0,h.jsxs)("p",{className:"demo-theme-color-css-variable",children:[n,(0,h.jsx)(l.q,{text:n,children:(0,h.jsx)(u.J,{className:"demo-theme-color-copy-icon",type:"order-o"})})]}),(0,h.jsx)("p",{className:"demo-theme-color-desc",children:y.vars[n].comment})]})},{title:(0,h.jsx)(e,{colorType:S,setColorType:z}),name:"color",bodyRender:({color:n})=>{var s="Rgb"===S?(0,g.cD)(n):n;return(0,h.jsxs)("div",{className:"demo-theme-color",children:[(0,h.jsx)(l.q,{text:s,children:(0,h.jsx)("p",{className:"demo-theme-color-block",style:{background:n}})}),(0,h.jsx)("div",{className:"demo-theme-color-name",children:s})]})},width:"300px"}]),[S]),B=(0,o.useCallback)((n=>{C(n)}),[]),q=(0,o.useCallback)((n=>{B(n.detail)}),[]);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)("div",{children:[(0,h.jsx)(r.z,{color:f,type:"simple",onChange:B,presetColors:s}),(0,h.jsx)("span",{className:"demo-theme-base-color",children:f}),(0,h.jsx)(l.q,{text:x,children:(0,h.jsx)(c.z,{type:"primary",className:"demo-theme-copy-btn",children:"复制所有变量"})})]}),(0,h.jsx)(k.r,{rowKey:"cssVariableName",className:"demo-theme-colors",columns:N,datasets:w}),(0,h.jsx)(i.ZM,{eventName:"zent-theme-change",listener:q})]})};return(0,h.jsx)(m,{})},v=function(){var n=d.q.generateTheme,s=d.q.applyTheme,a=["#ed6a18","#ed9f18","#edd418","#bad415","#5bd415","#15d48e","#15bad4","#155bd4","#412ad4","#8e15d4","#d415ba","#d42f15"],t=[d.h.DefaultHoverBackgroundColor,d.h.PrimaryHoverBackgroundColor,d.h.PrimaryBackgroundColor,d.h.PrimaryActiveBackgroundColor],e=()=>{var e=(0,o.useState)("#155bd4"),c=(0,p.Z)(e,2),l=c[0],u=c[1];return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(r.z,{color:l,type:"simple",onChange:a=>{var p=n({colors:[{baseColor:a,scene:t}]},y);s(p),u(a),m.g.success("主题色已更新")},presetColors:a}),(0,h.jsx)("span",{className:"demo-theme-base-color",children:l})]})};return(0,h.jsx)(e,{})};function w(n){return(0,h.jsx)(n.tag,f(f({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function x(n){return(0,h.jsx)(w,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function T(n){return(0,h.jsx)(w,{tag:"style",html:n.style})}function j(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),j(n.parentNode,s);return s}class S extends o.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,s=this.props,a=s.title,t=s.src,p=s.children;return(0,h.jsxs)("div",{className:"zandoc-react-demo",children:[(0,h.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,h.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,h.jsx)("div",{className:"zandoc-react-demo__title",children:(0,h.jsx)("p",{children:a||""})}),(0,h.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,h.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,h.jsx)(w,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class z extends o.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,e.l)(document.documentElement,0,j(s,-9))}}render(){return o.createElement("div",{className:"zandoc-react-container"},o.createElement(T,{style:".demo-theme-color-title {\n font-size: 14px;\n color: #333;\n}\n\n.demo-theme-color-css-variable {\n cursor: pointer;\n}\n\n.demo-theme-color-desc {\n font-size: 12px;\n color: #999;\n}\n\n.demo-theme-color {\n margin: 4px 8px 4px 4px;\n display: flex;\n align-items: center;\n}\n\n.demo-theme-color-copy-switcher {\n margin-left: 16px;\n}\n\n.demo-theme-color-block {\n width: 80px;\n height: 30px;\n margin-bottom: 4px;\n border-radius: 2px;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #000;\n cursor: pointer;\n}\n\n.demo-theme-color-copy-icon {\n margin-left: 4px;\n}\n\n.demo-theme-color-name {\n color: #333;\n text-align: center;\n margin-left: 4px;\n}\n\n.demo-theme-base-color {\n margin-left: 8px;\n}\n\n.demo-theme-copy-btn {\n float: right;\n}\n\n.demo-theme-colors {\n margin-top: 16px;\n}\n\nimg[alt='zent-theme'] {\n width: 514px;\n height: 319px;\n}"}),o.createElement(x,{html:'<h2 class="anchor-heading"><a href="#ding-zhi-zhu-ti">¶</a><a href="javascript:void(0)" id="ding-zhi-zhu-ti" class="anchor-point"></a>定制主题</h2>\n<p>Zent 支持主题定制，目前仅支持组件库颜色的定制。</p>\n<p><img src="https://img.yzcdn.cn/zanui/react/zent-theme.png" alt="zent-theme"></p>\n<h3 class="anchor-heading"><a href="#shi-yong-css-variables">¶</a><a href="javascript:void(0)" id="shi-yong-css-variables" class="anchor-point"></a>使用 CSS Variables</h3>\n<p>Zent 使用CSS Variables定制主题色，对于不支持 CSS Variables 的浏览器，会降级到默认主题色，可以通过重新构建 SCSS 定制主题色。</p>\n<p>注意：主题色需要提供两套，一套是 Hex 形式，另一套是类似 RGB 形式的，CSS 变量主题色如下：</p>'}),o.createElement(S,{title:"获取主题色",id:"Demo01",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ColorPicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Grid</span><span class="token punctuation">,</span> <span class="token maybe-class-name">CopyButton</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Icon</span><span class="token punctuation">,</span> <span class="token maybe-class-name">WindowEventHandler</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ThemeSdk</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ThemeScene</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'@zent/theme-sdk\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ThemeCssVars</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent/theme-css-vars.json\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> hexToRGBString <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'@zent/theme-sdk/esm/utils\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useMemo<span class="token punctuation">,</span> useCallback<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token punctuation">{</span> generateTheme <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">ThemeSdk</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token string">\'#ed6a18\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#ed9f18\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#edd418\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#bad415\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#5bd415\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#15d48e\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#15bad4\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#155bd4\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#412ad4\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#8e15d4\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#d415ba\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#d42f15\'</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> defaultColor <span class="token operator">=</span> <span class="token string">\'#155bd4\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> themeIndex <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token string-property property">\'$primary-100\'</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n <span class="token string-property property">\'$primary-400\'</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token string-property property">\'$primary-500\'</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token string-property property">\'$primary-600\'</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">ColorType</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">hex</span><span class="token operator">:</span> <span class="token string">\'Hex\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">rgb</span><span class="token operator">:</span> <span class="token string">\'Rgb\'</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">ColorScene</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token maybe-class-name">ThemeScene</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">DefaultHoverBackgroundColor</span></span><span class="token punctuation">,</span>\n <span class="token maybe-class-name">ThemeScene</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">PrimaryHoverBackgroundColor</span></span><span class="token punctuation">,</span>\n <span class="token maybe-class-name">ThemeScene</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">PrimaryBackgroundColor</span></span><span class="token punctuation">,</span>\n <span class="token maybe-class-name">ThemeScene</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">PrimaryActiveBackgroundColor</span></span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">getThemeCommentsVars</span> <span class="token operator">=</span> <span class="token parameter">colors</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> colors<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cssVariableName <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token maybe-class-name">ThemeCssVars</span><span class="token punctuation">.</span><span class="token property-access">vars</span><span class="token punctuation">[</span>cssVariableName<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 punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">transformToCss</span> <span class="token operator">=</span> <span class="token parameter">theme</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> theme\n <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span><span class="token property-access">cssVariableName</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">\'\\n\'</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 keyword">const</span> <span class="token function-variable function">getSessionThemeColor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// ThemeSwitcher on top-right corner sets this variable</span>\n <span class="token keyword control-flow">return</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">sessionStorage</span><span class="token punctuation">.</span><span class="token method function property-access">getItem</span><span class="token punctuation">(</span><span class="token string">\'zent-theme-color\'</span><span class="token punctuation">)</span> <span class="token operator">??</span> defaultColor<span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Color</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> colorType<span class="token punctuation">,</span> setColorType <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> otherType <span class="token operator">=</span> colorType <span class="token operator">===</span> <span class="token maybe-class-name">ColorType</span><span class="token punctuation">.</span><span class="token property-access">hex</span> <span class="token operator">?</span> <span class="token maybe-class-name">ColorType</span><span class="token punctuation">.</span><span class="token property-access">rgb</span> <span class="token operator">:</span> <span class="token maybe-class-name">ColorType</span><span class="token punctuation">.</span><span class="token property-access">hex</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> changeColorType <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setColorType</span><span class="token punctuation">(</span>otherType<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>setColorType<span class="token punctuation">,</span> otherType<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">{</span>colorType<span class="token punctuation">}</span> <span class="token maybe-class-name">Color</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-color-copy-switcher<span class="token punctuation">"</span></span>\n <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>changeColorType<span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n 切换到 <span class="token punctuation">{</span>otherType<span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <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 keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">ThemeSdkComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>color<span class="token punctuation">,</span> setColor<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token function">getSessionThemeColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token function">generateTheme</span><span class="token punctuation">(</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">colors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">baseColor</span><span class="token operator">:</span> color<span class="token punctuation">,</span> <span class="token literal-property property">scene</span><span class="token operator">:</span> <span class="token maybe-class-name">ColorScene</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token maybe-class-name">ThemeCssVars</span>\n <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>color<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> themeComments <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token function">getThemeCommentsVars</span><span class="token punctuation">(</span>theme<span class="token punctuation">.</span><span class="token property-access">colors</span><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>theme<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> themeCssStr <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token function">transformToCss</span><span class="token punctuation">(</span>theme<span class="token punctuation">.</span><span class="token property-access">colors</span><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>theme<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>colorType<span class="token punctuation">,</span> setColorType<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token maybe-class-name">ColorType</span><span class="token punctuation">.</span><span class="token property-access">hex</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'CSS Variable\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'cssVariableName\'</span><span class="token punctuation">,</span>\n <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cssVariableName <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">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 attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-color-title<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>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-color-css-variable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">{</span>cssVariableName<span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CopyButton</span></span> <span class="token attr-name">text</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>cssVariableName<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><span class="token class-name">Icon</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-color-copy-icon<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>order-o<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><span class="token class-name">CopyButton</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-color-desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">{</span><span class="token maybe-class-name">ThemeCssVars</span><span class="token punctuation">.</span><span class="token property-access">vars</span><span class="token punctuation">[</span>cssVariableName<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">comment</span><span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</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><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Color</span></span> <span class="token attr-name">colorType</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>colorType<span class="token punctuation">}</span></span> <span class="token attr-name">setColorType</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>setColorType<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'color\'</span><span class="token punctuation">,</span>\n <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> color <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> colorText <span class="token operator">=</span>\n colorType <span class="token operator">===</span> <span class="token maybe-class-name">ColorType</span><span class="token punctuation">.</span><span class="token property-access">rgb</span> <span class="token operator">?</span> <span class="token function">hexToRGBString</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span> <span class="token operator">:</span> color<span class="token punctuation">;</span>\n <span class="token keyword control-flow">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 attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-color<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><span class="token class-name">CopyButton</span></span> <span class="token attr-name">text</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>colorText<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>p</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-color-block<span class="token punctuation">"</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> color <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">CopyButton</span></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 attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-color-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>colorText<span class="token punctuation">}</span><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><span class="token punctuation">,</span>\n <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">\'300px\'</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 punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>colorType<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> onColorChange <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span>\n <span class="token parameter">baseColor</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setColor</span><span class="token punctuation">(</span>baseColor<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 punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> onThemeSwitch <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">evt</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">onColorChange</span><span class="token punctuation">(</span>evt<span class="token punctuation">.</span><span class="token property-access">detail</span><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><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><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>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ColorPicker</span></span>\n <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>color<span class="token punctuation">}</span></span>\n <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>simple<span class="token punctuation">"</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onColorChange<span class="token punctuation">}</span></span>\n <span class="token attr-name">presetColors</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>colors<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>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-base-color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>color<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CopyButton</span></span> <span class="token attr-name">text</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>themeCssStr<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><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-copy-btn<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><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">CopyButton</span></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><span class="token class-name">Grid</span></span>\n <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cssVariableName<span class="token punctuation">"</span></span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-colors<span class="token punctuation">"</span></span>\n <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>themeComments<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><span class="token class-name">WindowEventHandler</span></span> <span class="token attr-name">eventName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-theme-change<span class="token punctuation">"</span></span> <span class="token attr-name">listener</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onThemeSwitch<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></span><span class="token punctuation">></span></span>\n <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 maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeSdkComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(C)),o.createElement(x,{html:'<h3 class="anchor-heading"><a href="#chong-xin-gou-jian-scss-ding-zhi-zhu-ti-se">¶</a><a href="javascript:void(0)" id="chong-xin-gou-jian-scss-ding-zhi-zhu-ti-se" class="anchor-point"></a>重新构建 SCSS 定制主题色</h3>\n<p>Zent 的样式使用 <a href="https://sass-lang.com">scss</a> 开发，我们提供了一个预定义的扩展文件来支持主题定制，通过在 Zent 仓库中修改配置，生成一份定制的 css 样式。</p>\n<p>这种方式对业务项目是非侵入式的，样式的定制和业务项目完全独立；但也有一个问题，就是每次更新 Zent 组件库都要重新生成一份定制主题。</p>\n<h4 class="anchor-heading"><a href="#ding-zhi-fang-fa">¶</a><a href="javascript:void(0)" id="ding-zhi-fang-fa" class="anchor-point"></a>定制方法</h4>\n<ol>\n<li>克隆 Zent <a href="https://github.com/youzan/zent">源码</a>并安装依赖</li>\n<li>在 <code>packages/zent/assets/theme</code> 目录下找到一个名为 <a href="https://github.com/youzan/zent/blob/master/packages/zent/assets/theme/_override.scss"><code>_override.scss</code></a> 的文件，这个文件是预留用来覆盖默认主题变量的，所有主题变量可以在同目录的 <a href="https://github.com/youzan/zent/blob/master/packages/zent/assets/theme/_raw-vars.scss"><code>_default.scss</code></a> 文件内找到</li>\n<li>在 <code>packages/zent</code> 目录下面执行 <code>yarn theme</code></li>\n<li>定制的主题样式文件会生成在 <code>packages/zent/css</code> 目录下</li>\n</ol>\n<h4 class="anchor-heading"><a href="#dong-tai-gai-bian-zhu-ti-se">¶</a><a href="javascript:void(0)" id="dong-tai-gai-bian-zhu-ti-se" class="anchor-point"></a>动态改变主题色</h4>\n<p>可以调用 <a href="https://github.com/zent-contrib/theme-sdk"><code>ThemeSdk</code></a>，传入指定的基础主题色，来更新主题。主题色建议选择饱和度和亮度更高的颜色。比如： S > 85, B > 80。示例如下：</p>'}),o.createElement(S,{title:"动态更新主题色",id:"Demo02",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ColorPicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ThemeSdk</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ThemeScene</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'@zent/theme-sdk\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ThemeCssVars</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent/theme-css-vars.json\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token punctuation">{</span> generateTheme<span class="token punctuation">,</span> applyTheme <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">ThemeSdk</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token string">\'#ed6a18\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#ed9f18\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#edd418\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#bad415\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#5bd415\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#15d48e\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#15bad4\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#155bd4\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#412ad4\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#8e15d4\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#d415ba\'</span><span class="token punctuation">,</span>\n <span class="token string">\'#d42f15\'</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> colorScene <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token maybe-class-name">ThemeScene</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">DefaultHoverBackgroundColor</span></span><span class="token punctuation">,</span>\n <span class="token maybe-class-name">ThemeScene</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">PrimaryHoverBackgroundColor</span></span><span class="token punctuation">,</span>\n <span class="token maybe-class-name">ThemeScene</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">PrimaryBackgroundColor</span></span><span class="token punctuation">,</span>\n <span class="token maybe-class-name">ThemeScene</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">PrimaryActiveBackgroundColor</span></span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">ThemeSdkComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>color<span class="token punctuation">,</span> setColor<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'#155bd4\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> <span class="token function-variable function">onChangeComplete</span> <span class="token operator">=</span> <span class="token parameter">hex</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">generateTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">colors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">baseColor</span><span class="token operator">:</span> hex<span class="token punctuation">,</span> <span class="token literal-property property">scene</span><span class="token operator">:</span> colorScene <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ThemeCssVars</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">applyTheme</span><span class="token punctuation">(</span>theme<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">setColor</span><span class="token punctuation">(</span>hex<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">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\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><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><span class="token class-name">ColorPicker</span></span> <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>color<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>simple<span class="token punctuation">"</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onChangeComplete<span class="token punctuation">}</span></span> <span class="token attr-name">presetColors</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>colors<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>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-theme-base-color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>color<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span></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 maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeSdkComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(v)),o.createElement(x,{html:""}))}}},89522:(n,s,a)=>{"use strict";a.d(s,{q:()=>m});var t=a(59312),p=a(24246),o=a(27378),e=a(90347),c=a(23476),l=a(52074),u=a(42690),r=a(14805),k=function(n){var s,a,t,p,o=!1;try{if(s=function(){var n=document.getSelection();if(!n.rangeCount)return u.Z;for(var s=document.activeElement,a=[],t=0;t<n.rangeCount;t++)a.push(n.getRangeAt(t));switch(s.tagName.toUpperCase()){case"INPUT":case"TEXTAREA":s.blur();break;default:s=null}return n.removeAllRanges(),function(){"Caret"===n.type&&n.removeAllRanges(),n.rangeCount||a.forEach((function(s){n.addRange(s)})),s&&s.focus()}}(),a=document.createRange(),t=document.getSelection(),(p=(0,r.Z)("span")).textContent=n,p.style.all="unset",p.style.position="fixed",p.style.top="0",p.style.clip="rect(0, 0, 0, 0)",p.style.whiteSpace="pre",p.style.webkitUserSelect="text",p.style.MozUserSelect="text",p.style.msUserSelect="text",p.style.userSelect="text",document.body.appendChild(p),a.selectNodeContents(p),t.addRange(a),!document.execCommand("copy"))throw new Error("copy command was unsuccessful");o=!0}catch(s){try{window.clipboardData.setData("text",n),o=!0}catch(n){console.error(n)}}finally{t&&("function"==typeof t.removeRange?t.removeRange(a):t.removeAllRanges()),p&&document.body.removeChild(p),s()}return o},i=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.onClick=function(n){var a=s.props,t=a.text,p=a.onCopy,e=a.children,c=o.Children.only(e),l=k(t);p&&p(t,l),c&&c.props&&"function"==typeof c.props.onClick&&c.props.onClick(n)},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this.props,s=(n.text,n.onCopy,n.children),a=(0,t._T)(n,["text","onCopy","children"]),p=o.Children.only(s);return(0,o.cloneElement)(p,(0,t.pi)((0,t.pi)({},a),{onClick:this.onClick}))},s}(o.Component),m=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.onCopyCallback=function(n,s){"string"==typeof s?c.Z[n](s):s()},s.onCopy=function(n){return function(a,t){var p=s.props,o=p.onCopySuccess,e=p.onCopyError;t?s.onCopyCallback("success",o||n.success):s.onCopyCallback("error",e||n.error)}},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this,s=this.props,a=s.text,c=s.children,u=s.onClick,r="function"==typeof a?a():a;return(0,p.jsx)(l.Z,(0,t.pi)({componentName:"CopyButton"},{children:function(s){return(0,p.jsx)(i,(0,t.pi)({text:r,onCopy:n.onCopy(s)},{children:c?o.Children.only(c):(0,p.jsx)(e.ZP,(0,t.pi)({onClick:u,type:"primary"},{children:s.copy}),void 0)}),void 0)}}),void 0)},s.defaultProps={onCopySuccess:"",onCopyError:""},s}(o.Component)}}]);