-
Notifications
You must be signed in to change notification settings - Fork 1
/
4715-180f1b8020ecd3ad34dc.js
1 lines (1 loc) · 78.3 KB
/
4715-180f1b8020ecd3ad34dc.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[4715],{54715:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>C});var t=a(73450),p=a(73118),e=a(27378),o=a(57318),c=a(77148),l=a(56377),u=a(69916),r=a(36603),i=a(39215),k=a(26317),d=a(24246);function m(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 y(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?m(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):m(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var g=function(){var n=new Array(20).fill().map(((n,s)=>({option:String(s),text:"option".concat(s),disabled:s%2==1}))),s=(0,e.useState)(["8","9","10","15"]),a=(0,p.Z)(s,2),t=a[0],o=a[1],u=(0,e.useState)([]),r=(0,p.Z)(u,2),i=r[0],k=r[1],m=(0,e.useState)(!1),y=(0,p.Z)(m,2),g=y[0],h=y[1];return(0,d.jsxs)("div",{children:[(0,d.jsx)(c.F,{keyName:"option",dataSource:n,targetKeys:t,onChange:({targetKeys:n,selectedKeys:s})=>{o(n),k(s)},list:{columns:[{name:"text"}]},selectedKeys:i,onSelectChange:n=>k(n),disabled:g}),(0,d.jsxs)("div",{style:{marginTop:"20px"},children:[(0,d.jsx)(l.r,{checked:g,onChange:()=>h(!g)}),"disabled"]})]})},h=function(){var n=new Array(20).fill().map(((n,s)=>({option:String(s),text:"option".concat(s)}))),s=(0,e.useState)([]),a=(0,p.Z)(s,2),t=a[0],o=a[1];return(0,d.jsx)("div",{children:(0,d.jsx)(c.F,{keyName:"option",dataSource:n,targetKeys:t,onChange:({targetKeys:n})=>o(n),showSearch:!0,filterOption:(n,{text:s})=>s.indexOf(n)>-1,list:{columns:[{name:"text"}]}})})},f=function(){var n=new Array(200).fill().map(((n,s)=>({option:String(s),text1:"Option".concat(s),text2:"Product".concat(s)}))),s=(0,e.useState)([]),a=(0,p.Z)(s,2),t=a[0],o=a[1];return(0,d.jsx)("div",{children:(0,d.jsx)(c.F,{keyName:"option",className:"grid-transfer",dataSource:n,targetKeys:t,onChange:({targetKeys:n})=>o(n),pagination:!0,list:[{columns:[{name:"text1",title:"left1"},{name:"text2",title:"left2"}],scroll:{y:198}},{columns:[{name:"text1",title:"right"}],scroll:{y:198}}]})})},b=function(){var n=[{id:1,title:"杭州有赞科技有限公司",children:[{id:2,title:"技术",children:[{id:3,title:"后端",children:[{id:7,title:"JAVA"},{id:8,title:"PHP"},{id:9,title:"GO"},{id:10,title:".NET"}]},{id:4,title:"运维"},{id:5,title:"前端"}]},{id:6,title:"产品"}]}],s=(0,e.useMemo)((()=>{var s=[];return function n(a=[]){a.forEach((a=>{s.push(a),n(a.children)}))}(n),s}),[n]),a=(0,e.useState)([]),t=(0,p.Z)(a,2),o=t[0],l=t[1];return(0,d.jsx)("div",{children:(0,d.jsx)(c.F,{keyName:"id",dataSource:s,targetKeys:o,onChange:({targetKeys:n})=>l(n),list:{columns:[{name:"title"}]},children:({direction:s,selectedKeys:a,handleSelectChange:t})=>{if("left"===s)return(0,d.jsx)(u.m,{checkable:!0,size:"small",data:n,onCheck:(n,s)=>{t(n.filter((n=>!o.includes(n))))},checkedKeys:Array.from(new Set([...a,...o])),disabledCheckedKeys:o,expandAll:!0})}})})},w=function(){var n=[{id:1,title:"杭州有赞科技有限公司",children:[{id:2,title:"技术",children:[{id:3,title:"后端",children:[{id:7,title:"JAVA"},{id:8,title:"PHP"},{id:9,title:"GO"},{id:10,title:".NET"}]},{id:4,title:"运维"},{id:5,title:"前端"}]},{id:6,title:"产品"}]}],s=(0,e.useMemo)((()=>{var s=[];return function n(a=[]){a.forEach((a=>{s.push(a),n(a.children)}))}(n),s}),[n]),a=(0,r.Z)({targetKeys:[8,9]}),t=a.targetKeys,p=a.selectedKeys,o=a.transferKeys,c=a.changeSelectedKeys;return(0,d.jsxs)("div",{className:"transfer-hook",children:[(0,d.jsx)(u.m,{checkable:!0,size:"small",data:n,onCheck:n=>{c("left",n.filter((n=>!t.includes(n))))},checkedKeys:Array.from(new Set([...p,...t])),disabledCheckedKeys:t,expandAll:!0}),(0,d.jsx)(i.J,{className:"left-icon",type:"left",onClick:()=>o("left")}),(0,d.jsx)(i.J,{className:"right-icon",type:"right",onClick:()=>o("right")}),(0,d.jsx)(k.r,{className:"transfer-gird",datasets:t.map((n=>s.find((s=>n===s.id)))),selection:{selectedRowKeys:t.filter((n=>p.includes(n))),onSelect:n=>c("right",n)},columns:[{name:"title",title:"tree node"}]})]})};function v(n){return(0,d.jsx)(n.tag,y(y({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function K(n){return(0,d.jsx)(v,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return(0,d.jsx)(v,{tag:"style",html:n.style})}function x(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),x(n.parentNode,s);return s}class S extends e.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,d.jsxs)("div",{className:"zandoc-react-demo",children:[(0,d.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,d.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,d.jsx)("div",{className:"zandoc-react-demo__title",children:(0,d.jsx)("p",{children:a||""})}),(0,d.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,d.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,d.jsx)(v,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class C extends e.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,o.l)(document.documentElement,0,x(s,-9))}}render(){return e.createElement("div",{className:"zandoc-react-container"},e.createElement(j,{style:".grid-transfer .zent-transfer__item:first-child {\n\twidth: 400px;\n}\n.grid-transfer .zent-grid-thead .zent-grid-tr {\n\theight: 36px;\n}\n\n.transfer-hook {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.transfer-hook .left-icon {\n\t\tfont-size: 30px;\n\t\tpadding: 20px 0 20px 10px;\n\t}\n\n.transfer-hook .right-icon {\n\t\tfont-size: 30px;\n\t\tpadding: 20px 30px 20px 0;\n\t}\n\n.transfer-hook .transfer-gird {\n\t\tmin-height: 240px;\n\t\twidth: 200px;\n\t}"}),e.createElement(K,{html:'<h2 class="anchor-heading"><a href="#transfer">¶</a><a href="javascript:void(0)" id="transfer" class="anchor-point"></a>Transfer</h2>\n<p>双栏穿梭选择框。</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>'}),e.createElement(S,{title:"基础用法",id:"Demobasic",src:'<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<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Transfer</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Switch</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Disabled</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\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">option</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">option</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</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>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'text\'</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> <span class="token punctuation">[</span>targetKeys<span class="token punctuation">,</span> setTargetKeys<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">\'8\'</span><span class="token punctuation">,</span> <span class="token string">\'9\'</span><span class="token punctuation">,</span> <span class="token string">\'10\'</span><span class="token punctuation">,</span> <span class="token string">\'15\'</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>selectedKeys<span class="token punctuation">,</span> setSelectedKeys<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</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<span class="token keyword">const</span> <span class="token punctuation">[</span>checked<span class="token punctuation">,</span> setChecked<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><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>\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">Transfer</span></span>\n <span class="token attr-name">keyName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option<span class="token punctuation">"</span></span>\n <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">targetKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>targetKeys<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><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> targetKeys<span class="token punctuation">,</span> selectedKeys <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 function">setTargetKeys</span><span class="token punctuation">(</span>targetKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setSelectedKeys</span><span class="token punctuation">(</span>selectedKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">list</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> columns <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">selectedKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>selectedKeys<span class="token punctuation">}</span></span>\n <span class="token attr-name">onSelectChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">items</span> <span class="token arrow operator">=></span> <span class="token function">setSelectedKeys</span><span class="token punctuation">(</span>items<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">disabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>checked<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">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">marginTop</span><span class="token operator">:</span> <span class="token string">\'20px\'</span> <span class="token punctuation">}</span><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">Switch</span></span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>checked<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><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setChecked</span><span class="token punctuation">(</span><span class="token operator">!</span>checked<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n disabled\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><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(g)),e.createElement(S,{title:"搜索",id:"Demosearch",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useCallback <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<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Transfer</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\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">option</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">option</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'text\'</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> <span class="token punctuation">[</span>targetKeys<span class="token punctuation">,</span> setTargetKeys<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</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 maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</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><span class="token class-name">Transfer</span></span>\n <span class="token attr-name">keyName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option<span class="token punctuation">"</span></span>\n <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">targetKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>targetKeys<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><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> targetKeys <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setTargetKeys</span><span class="token punctuation">(</span>targetKeys<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">showSearch</span>\n <span class="token attr-name">filterOption</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 parameter">inputValue<span class="token punctuation">,</span> <span class="token punctuation">{</span> text <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> text<span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>inputValue<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">list</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> columns <span class="token punctuation">}</span><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 punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(h)),e.createElement(S,{title:"表格",id:"Demogrid",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useCallback <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<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Transfer</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\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">option</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text1</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Option</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">text2</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Product</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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>\n\n<span class="token keyword">const</span> leftColumns <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'text1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'left1\'</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">name</span><span class="token operator">:</span> <span class="token string">\'text2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'left2\'</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> rightColumns <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'text1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'right\'</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> <span class="token punctuation">[</span>targetKeys<span class="token punctuation">,</span> setTargetKeys<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</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 maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</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><span class="token class-name">Transfer</span></span>\n <span class="token attr-name">keyName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option<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>grid-transfer<span class="token punctuation">"</span></span>\n <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">targetKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>targetKeys<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><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> targetKeys <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setTargetKeys</span><span class="token punctuation">(</span>targetKeys<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">pagination</span>\n <span class="token attr-name">list</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">columns</span><span class="token operator">:</span> leftColumns<span class="token punctuation">,</span> <span class="token literal-property property">scroll</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">198</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">columns</span><span class="token operator">:</span> rightColumns<span class="token punctuation">,</span> <span class="token literal-property property">scroll</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">198</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>\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 punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(f)),e.createElement(S,{title:"自定义渲染列表",id:"DemorenderProps",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useCallback<span class="token punctuation">,</span> useMemo <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<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Transfer</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Tree</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\n<span class="token keyword">const</span> treeData <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'杭州有赞科技有限公司\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'技术\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'后端\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'JAVA\'</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">id</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'PHP\'</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">id</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'GO\'</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">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'.NET\'</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 <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'运维\'</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">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'前端\'</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 <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'产品\'</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<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 punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'title\'</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> transferDataSource <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">const</span> result <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">function</span> <span class="token function">flatten</span><span class="token punctuation">(</span><span class="token parameter">list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n list<span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n result<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">flatten</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token property-access">children</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>\n <span class="token punctuation">}</span>\n <span class="token function">flatten</span><span class="token punctuation">(</span>treeData<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword control-flow">return</span> result<span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>treeData<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token punctuation">[</span>targetKeys<span class="token punctuation">,</span> setTargetKeys<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</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 maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</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><span class="token class-name">Transfer</span></span>\n <span class="token attr-name">keyName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>transferDataSource<span class="token punctuation">}</span></span>\n <span class="token attr-name">targetKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>targetKeys<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><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> targetKeys <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setTargetKeys</span><span class="token punctuation">(</span>targetKeys<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">list</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> columns <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> direction<span class="token punctuation">,</span> selectedKeys<span class="token punctuation">,</span> handleSelectChange <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">if</span> <span class="token punctuation">(</span><span class="token string">\'left\'</span> <span class="token operator">===</span> direction<span class="token punctuation">)</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><span class="token class-name">Tree</span></span>\n <span class="token attr-name">checkable</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">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>treeData<span class="token punctuation">}</span></span>\n <span class="token attr-name">onCheck</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 parameter">checked<span class="token punctuation">,</span> helpInfo</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">handleSelectChange</span><span class="token punctuation">(</span>\n checked<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> <span class="token operator">!</span>targetKeys<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span>item<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>\n <span class="token attr-name">checkedKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token known-class-name class-name">Array</span><span class="token punctuation">.</span><span class="token keyword module">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token spread operator">...</span>selectedKeys<span class="token punctuation">,</span> <span class="token spread operator">...</span>targetKeys<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">disabledCheckedKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>targetKeys<span class="token punctuation">}</span></span>\n <span class="token attr-name">expandAll</span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Transfer</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><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(b)),e.createElement(S,{title:"useTransfer",id:"Demohook",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useCallback<span class="token punctuation">,</span> useMemo <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<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useTransfer<span class="token punctuation">,</span> <span class="token maybe-class-name">Grid</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Tree</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Icon</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\n<span class="token keyword">const</span> treeData <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'杭州有赞科技有限公司\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'技术\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'后端\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'JAVA\'</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">id</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'PHP\'</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">id</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'GO\'</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">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'.NET\'</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 <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'运维\'</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">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'前端\'</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 <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'产品\'</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<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 punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'title\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'tree node\'</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> transferDataSource <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">const</span> result <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">function</span> <span class="token function">flatten</span><span class="token punctuation">(</span><span class="token parameter">list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n list<span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n result<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">flatten</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token property-access">children</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>\n <span class="token punctuation">}</span>\n <span class="token function">flatten</span><span class="token punctuation">(</span>treeData<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword control-flow">return</span> result<span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>treeData<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token punctuation">{</span> targetKeys<span class="token punctuation">,</span> selectedKeys<span class="token punctuation">,</span> transferKeys<span class="token punctuation">,</span> changeSelectedKeys <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useTransfer</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">targetKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</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 maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</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>transfer-hook<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">Tree</span></span>\n <span class="token attr-name">checkable</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">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>treeData<span class="token punctuation">}</span></span>\n <span class="token attr-name">onCheck</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">checked</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">changeSelectedKeys</span><span class="token punctuation">(</span>\n <span class="token string">\'left\'</span><span class="token punctuation">,</span>\n checked<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> <span class="token operator">!</span>targetKeys<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span>item<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>\n <span class="token attr-name">checkedKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token known-class-name class-name">Array</span><span class="token punctuation">.</span><span class="token keyword module">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token spread operator">...</span>selectedKeys<span class="token punctuation">,</span> <span class="token spread operator">...</span>targetKeys<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">disabledCheckedKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>targetKeys<span class="token punctuation">}</span></span>\n <span class="token attr-name">expandAll</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">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>left-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>left<span class="token punctuation">"</span></span> <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><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">transferKeys</span><span class="token punctuation">(</span><span class="token string">\'left\'</span><span class="token punctuation">)</span><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>right-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>right<span class="token punctuation">"</span></span> <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><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">transferKeys</span><span class="token punctuation">(</span><span class="token string">\'right\'</span><span class="token punctuation">)</span><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">Grid</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>transfer-gird<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>targetKeys<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token arrow operator">=></span> transferDataSource<span class="token punctuation">.</span><span class="token method function property-access">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> key <span class="token operator">===</span> item<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">selection</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token literal-property property">selectedRowKeys</span><span class="token operator">:</span> targetKeys<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> selectedKeys<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token function-variable function">onSelect</span><span class="token operator">:</span> <span class="token parameter">keys</span> <span class="token arrow operator">=></span> <span class="token function">changeSelectedKeys</span><span class="token punctuation">(</span><span class="token string">\'right\'</span><span class="token punctuation">,</span> keys<span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><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 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><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(w)),e.createElement(K,{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>keyName</td>\n<td>指定\n<code>dataSource</code>\n的主键</td>\n<td><code>string</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>数据源，其中的数据将会被渲染到左边一栏中，\n<code>targetKeys</code>\n中指定的除外</td>\n<td><code>ITransferData[]</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>选项在两栏之间转移时的回调函数</td>\n<td><code>({ targetKeys, transferredKeys, direction, selectedKeys }) => void</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>targetKeys</td>\n<td>显示在右侧框数据的\n<code>key</code>\n集合</td>\n<td><code>string[]</code></td>\n<td><code>[]</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>selectedKeys</td>\n<td>设置哪些项应该被选中</td>\n<td><code>string[]</code></td>\n<td><code>[]</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onSelectChange</td>\n<td>选中项发生改变时的回调函数</td>\n<td><code>(selectedKeys: string[]) => void</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>titles</td>\n<td>标题集合，顺序从左至右</td>\n<td><code>[React.ReactNode, React.ReactNode]</code></td>\n<td><code>[\'Source\', \'Target\']</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showSearch</td>\n<td>是否显示搜索框</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>搜索框文案</td>\n<td><code>string</code></td>\n<td><code>请输入搜索内容</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>filterOption</td>\n<td>接收\n<code>inputValue</code>\n、\n<code>option</code>\n两个参数，当\n<code>option</code>\n符合筛选条件时，应返回\n<code>true</code>\n，反之则返回\n<code>false</code></td>\n<td><code>(inputValue: string, option: ITransferData) => boolean</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pagination</td>\n<td>列表分页，自定义渲染列表下无效，pageSize 默认 10 条</td>\n<td><code>boolean</code>\n \n|\n \n<code>{ pageSize: number }</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>是否禁用</td>\n<td><code>boolean</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义类名</td>\n<td><code>string</code></td>\n<td><code>\'\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>list</td>\n<td>设置列表属性</td>\n<td><code>Object ListType</code>\n \n|\n \n<code>[ListType, ListType]</code></td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#render-props">¶</a><a href="javascript:void(0)" id="render-props" class="anchor-point"></a>Render Props</h4>\n<p>Transfer 支持接收 children 自定义渲染列表，并返回以下参数：</p>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>direction</td>\n<td>渲染列表的方向</td>\n<td><code>left</code>\n \n|\n \n<code>right</code></td>\n</tr>\n<tr>\n<td>selectedKeys</td>\n<td>选中项</td>\n<td><code>string[]</code></td>\n</tr>\n<tr>\n<td>handleSelectChange</td>\n<td>修改选中项</td>\n<td><code>(keys: string[]) => void</code></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#list">¶</a><a href="javascript:void(0)" id="list" class="anchor-point"></a>list</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>columns</td>\n<td>表格列配置</td>\n<td><code>TransferColumnType</code></td>\n<td>是</td>\n</tr>\n<tr>\n<td>selection</td>\n<td>表格的选择功能配置，(当前仅支持\n<code>getCheckboxProps</code>\n)</td>\n<td><code>object { getCheckboxProps: ( data: ITransferData) => { disabled?: boolean; reason?: React.ReactNode }; }</code></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<p>以上 props 和<code>Grid</code>不同，支持透传的属性有<code>rowKey</code>、<code>scroll</code>、<code>emptyLabel</code>、<code>onRowClick</code>、<code>sortBy</code>、<code>sortType</code>、<code>defaultSortType</code>、<code>bordered</code>、<code>ellipsis</code>、<code>components</code>、<code>rowProps</code>、<code>autoStick</code>、<code>autoStickOffsetTop</code>、<code>disableHoverHighlight</code>、<code>onChange</code>、<code>loading</code>、<code>className</code>、<code>rowClassName</code>（<a href="https://youzan.github.io/zent/zh/component/grid#api">查看属性说明</a>）。</p>\n<h4 class="anchor-heading"><a href="#columns">¶</a><a href="javascript:void(0)" id="columns" class="anchor-point"></a>columns</h4>\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>name</td>\n<td>列表展示数据的\n<code>key</code></td>\n<td><code>string</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>title</td>\n<td>列头的名称</td>\n<td><code>ReactNode</code></td>\n<td><code>\'\'</code></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<p>以上 props 和 <code>Grid</code> 不同，<a href="https://youzan.github.io/zent/zh/component/grid#columns">查看其他属性说明</a>。</p>\n<h3 class="anchor-heading"><a href="#usetransfer">¶</a><a href="javascript:void(0)" id="usetransfer" class="anchor-point"></a>useTransfer</h3>\n<p>传送左右两边数据的 hook。</p>\n<h4 class="anchor-heading"><a href="#params">¶</a><a href="javascript:void(0)" id="params" class="anchor-point"></a>Params</h4>\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>selectedKeys</td>\n<td>初始选中项</td>\n<td><code>string[]</code></td>\n<td><code>[]</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>targetKeys</td>\n<td>初始显示在右侧框数据的\n<code>key</code>\n集合</td>\n<td><code>string[]</code></td>\n<td><code>[]</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabledKeys</td>\n<td>禁用的\n<code>key</code>\n集合</td>\n<td><code>string[]</code></td>\n<td><code>[]</code></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#result">¶</a><a href="javascript:void(0)" id="result" class="anchor-point"></a>Result</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>selectedKeys</td>\n<td>选中项</td>\n<td><code>string[]</code></td>\n</tr>\n<tr>\n<td>targetKeys</td>\n<td>显示在右侧数据的\n<code>key</code>\n集合</td>\n<td><code>string[]</code></td>\n</tr>\n<tr>\n<td>transferKeys</td>\n<td>转移左侧或右侧选项的函数</td>\n<td><code>(direction: Direction) => void</code></td>\n</tr>\n<tr>\n<td>changeSelectedKeys</td>\n<td>设置左侧或右侧选中项的函数</td>\n<td><code>(direction: Direction, selectedKeys: string[]) => void</code></td>\n</tr>\n<tr>\n<td>resetSelectedKeys</td>\n<td>重置选中项的函数</td>\n<td><code>(keys: string[]) => void</code></td>\n</tr>\n<tr>\n<td>resetTargetKeys</td>\n<td>重置\n<code>targetKeys</code>\n的函数</td>\n<td><code>(keys: string[]) => void</code></td>\n</tr>\n</tbody>\n</table>'}))}}}}]);