@uiw/doc
Version:
UIW documentation website.
1 lines • 57 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[383],{4934:e=>{function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=()=>[],n.resolve=n,n.id=4934,e.exports=n},5301:(e,n,t)=>{"use strict";t.d(n,{Z:()=>h});var r=t(8573),l=t(6320),a=t(8563),o=t(7622),i=t(7937);const u={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=t(4760);function s(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:n}=e,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,c.jsxs)("div",{className:u.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,c.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,c.jsx)("br",{}),(0,c.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const f=l.ZP.Preview,d=l.ZP.Code,y=l.ZP.Toolbar,p=e=>{var n,t;let{node:o,components:i,data:u,...s}=e;const p=(0,r.useRef)(null),{headings:h,headingsList:b,...m}=s;(0,r.useEffect)((()=>{if(p.current){const e=p.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(p.current,e)}}),[p]);const _=null===o||void 0===o||null===(n=o.position)||void 0===n?void 0:n.start.line,g=null===o||void 0===o||null===(t=o.data)||void 0===t?void 0:t.meta,k=(0,a.Mx)(g)||String(_),w=i["".concat(k)];if(k&&"function"===typeof w){const e=u[k].value||"",n=(0,a.aE)(g||"");return(0,c.jsxs)(l.ZP,{ref:p,children:[(0,c.jsx)(f,{style:{background:n.bg||"transparent"},children:(0,c.jsx)(w,{})}),(0,c.jsx)(y,{text:e,children:n.title||"Example"}),(0,c.jsx)(d,{children:(0,c.jsx)("pre",{...m})})]})}return(0,c.jsx)("code",{...m})};function h(e){return(0,c.jsxs)(r.Fragment,{children:[(0,c.jsx)(o.Z,{className:u.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:n=>(0,c.jsx)(p,{...e,...n})}}),(0,c.jsx)(s,{path:e.path})]})}},3962:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>o});const r={components:{19:function(){function e(n){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(n)}var n=function(n,t){if(!t&&n&&n.__esModule)return n;if(null===n||"object"!=e(n)&&"function"!=typeof n)return{default:n};var r=l(t);if(r&&r.has(n))return r.get(n);var a={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in n)if("default"!==i&&Object.prototype.hasOwnProperty.call(n,i)){var u=o?Object.getOwnPropertyDescriptor(n,i):null;u&&(u.get||u.set)?Object.defineProperty(a,i,u):a[i]=n[i]}return a.default=n,r&&r.set(n,a),a}(t(8573)),r=t(7937);function l(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,t=new WeakMap;return(l=function(e){return e?t:n})(e)}function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,l,a,o,i=[],u=!0,c=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=a.call(t)).done)&&(i.push(r.value),i.length!==n);u=!0);}catch(e){c=!0,l=e}finally{try{if(!u&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw l}}return i}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var i=[{label:"\u4e0a\u6d77\u5e02",key:1,children:[{label:"\u9ec4\u6d66\u533a",key:2},{label:"\u5362\u6e7e\u533a",key:3},{label:"\u5f90\u6c47\u533a",key:4,children:[{label:"\u534a\u6dde\u56ed\u8def\u8857\u9053",key:6},{label:"\u5357\u4eac\u4e1c\u8def\u8857\u9053",key:7},{label:"\u5916\u6ee9\u8857\u9053",key:8}]}]},{label:"\u5317\u4eac\u5e02",key:9,children:[{label:"\u4e1c\u57ce\u533a",key:10},{label:"\u897f\u57ce\u533a",key:11},{label:"\u5d07\u6587\u533a",key:12,children:[{label:"\u4e1c\u82b1\u5e02\u8857\u9053",key:13},{label:"\u4f53\u80b2\u9986\u8def\u8857\u9053",key:14},{label:"\u524d\u95e8\u8857\u9053",key:15}]}]},{label:"\u6fb3\u95e8",key:16}];return function(){var e=a((0,n.useState)([{label:"\u9ec4\u6d66\u533a",key:12}]),2),t=e[0],l=e[1],o=a((0,n.useState)([{label:"\u4e0a\u6d77\u5e02",key:"1-0-0"}]),2),u=o[0],c=o[1];return n.default.createElement(r.Row,{gutter:20},n.default.createElement("label",null,"\u5355\u9009"),n.default.createElement(r.Row,null,n.default.createElement(r.SearchTree,{style:{width:200},multiple:!1,allowClear:!0,onSearch:function(e){return console.log("singe",e)},onChange:function(e,n,t){console.log("SearchTree-> onChange",e,n,t),c(n)},value:u,options:i,placeholder:"\u8bf7\u9009\u62e9\u9009\u9879"})),n.default.createElement("label",null,"\u591a\u9009"),n.default.createElement(r.Row,null,n.default.createElement(r.SearchTree,{style:{width:200},allowClear:!0,onSearch:function(e){return console.log("multiple",e)},onChange:function(e,n,t){console.log("SearchTree-> onChange",n,e,t),l(n)},value:t,options:i,placeholder:"\u8bf7\u9009\u62e9\u9009\u9879"})),n.default.createElement("label",null,"\u7981\u7528"),n.default.createElement(r.Row,null,n.default.createElement(r.SearchTree,{disabled:!0,style:{width:200},allowClear:!0,value:[{label:"\u4e1c\u57ce\u533a",key:10},{label:"\u6210\u90fd\u5e02",key:2}],options:i,placeholder:"\u8bf7\u9009\u62e9\u9009\u9879"})))}}(),120:function(){function e(n){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(n)}var n=function(n,t){if(!t&&n&&n.__esModule)return n;if(null===n||"object"!=e(n)&&"function"!=typeof n)return{default:n};var r=l(t);if(r&&r.has(n))return r.get(n);var a={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in n)if("default"!==i&&Object.prototype.hasOwnProperty.call(n,i)){var u=o?Object.getOwnPropertyDescriptor(n,i):null;u&&(u.get||u.set)?Object.defineProperty(a,i,u):a[i]=n[i]}return a.default=n,r&&r.set(n,a),a}(t(8573)),r=t(7937);function l(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,t=new WeakMap;return(l=function(e){return e?t:n})(e)}return function(){var e=[{label:"\u5c0f\u5c3a\u5bf8",key:1},{label:"\u9ed8\u8ba4\u5c3a\u5bf8",key:2},{label:"\u5927\u5c3a\u5bf8",key:3}];return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.SearchTree,{style:{width:150},value:[{label:"\u5c0f\u5c3a\u5bf8",key:1}],options:e,size:"small"}),n.default.createElement(r.SearchTree,{style:{width:175,marginTop:10},value:[{label:"\u9ed8\u8ba4\u5c3a\u5bf8",key:2}],options:e}),n.default.createElement(r.SearchTree,{style:{width:200,marginTop:10},value:[{label:"\u5927\u5c3a\u5bf8",key:3}],options:e,size:"large"}))}}(),157:function(){function e(n){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(n)}var n=function(n,t){if(!t&&n&&n.__esModule)return n;if(null===n||"object"!=e(n)&&"function"!=typeof n)return{default:n};var r=l(t);if(r&&r.has(n))return r.get(n);var a={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in n)if("default"!==i&&Object.prototype.hasOwnProperty.call(n,i)){var u=o?Object.getOwnPropertyDescriptor(n,i):null;u&&(u.get||u.set)?Object.defineProperty(a,i,u):a[i]=n[i]}return a.default=n,r&&r.set(n,a),a}(t(8573)),r=t(7937);function l(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,t=new WeakMap;return(l=function(e){return e?t:n})(e)}return function(){return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.SearchTree,{style:{width:200},placeholder:"\u8bf7\u9009\u62e9\u9009\u9879"}),n.default.createElement(r.SearchTree,{style:{width:200,marginTop:5},emptyOption:n.default.createElement("span",null,"\u6682\u65e0\u6570\u636e.."),placeholder:"\u8bf7\u9009\u62e9\u9009\u9879"}))}}(),180:function(){var e=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var t=r(n);if(t&&t.has(e))return t.get(e);var a={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var u=o?Object.getOwnPropertyDescriptor(e,i):null;u&&(u.get||u.set)?Object.defineProperty(a,i,u):a[i]=e[i]}return a.default=e,t&&t.set(e,a),a}(t(8573)),n=t(7937);function r(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,t=new WeakMap;return(r=function(e){return e?t:n})(e)}function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==l(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==l(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===l(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}return function(){var t=(0,e.useRef)(),r=[{label:"\u4e0a\u6d77\u5e02",key:"1-0-0",children:[{label:"\u9ec4\u6d66\u533a",key:"1-0-1"},{label:"\u5362\u6e7e\u533a",key:"1-0-2"},{label:"\u5f90\u6c47\u533a",key:"1-0-3",children:[{label:"\u534a\u6dde\u56ed\u8def\u8857\u9053",key:"1-1-0"},{label:"\u5357\u4eac\u4e1c\u8def\u8857\u9053",key:"1-2-0"},{label:"\u5916\u6ee9\u8857\u9053",key:"1-3-0"}]}]},{label:"\u5317\u4eac\u5e02",key:"2-0-0",children:[{label:"\u4e1c\u57ce\u533a",key:"2-1-0"},{label:"\u897f\u57ce\u533a",key:"2-2-0"},{label:"\u5d07\u6587\u533a",key:"2-3-0",children:[{label:"\u4e1c\u82b1\u5e02\u8857\u9053",key:"2-3-1"},{label:"\u4f53\u80b2\u9986\u8def\u8857\u9053",key:"2-3-2"},{label:"\u524d\u95e8\u8857\u9053",key:"2-3-3"}]}]},{label:"\u6fb3\u95e8",key:"3"}],l=function(){t.current.setFields({searchTree:[{label:"\u4e1c\u57ce\u533a",key:"2-1-0"},{label:"\u5916\u6ee9\u8857\u9053",key:"1-3-0"}],searchTreeSinge:[{label:"\u524d\u95e8\u8857\u9053",key:"2-3-3"}]})},i=function(){t.current.resetForm()};return e.default.createElement("div",null,e.default.createElement(n.Form,{ref:t,onSubmitError:function(e){return e.filed?function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}({},e.filed):null},onSubmit:function(e){e.initial;var t=e.current,r={};if(t.searchTree&&0!==t.searchTree.length||(r.searchTree="\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9"),Object.keys(r).length>0){var l=new Error;throw l.filed=r,n.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01"}),l}n.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a".concat(t.selectField,"\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01")})},fields:{searchTree:{initialValue:[{label:"\u9ec4\u6d66\u533a",key:"1-0-1"},{label:"\u5362\u6e7e\u533a",key:"1-0-2"}],children:e.default.createElement(n.SearchTree,{allowClear:!0,style:{width:200},onSearch:function(e){return console.log("SearchTree-> SearchTreeOption",e)},onChange:function(e,n,t){return console.log("SearchTree-> onChange",e,n,t)},options:r,placeholder:"\u8bf7\u9009\u62e9\u9009\u9879"})},searchTreeSinge:{initialValue:[{label:"\u4e1c\u82b1\u5e02\u8857\u9053",key:"2-3-1"}],children:e.default.createElement(n.SearchTree,{multiple:!1,style:{width:200},allowClear:!0,onSearch:function(e){return console.log("SearchTree-> SearchTreeOption",e)},onChange:function(e,n,t){return console.log("SearchTree-> onChange",e,n,t)},options:r,placeholder:"\u8bf7\u9009\u62e9\u9009\u9879",treeProps:{style:{height:200,overflow:"scroll"}}})}}},(function(t){var r=t.fields,a=t.state,o=t.canSubmit;return e.default.createElement("div",null,e.default.createElement(n.Row,{style:{display:"flex",flexDirection:"column"}},e.default.createElement("div",null,"\u591a\u9009"),e.default.createElement(n.Col,null,r.searchTree)),e.default.createElement(n.Row,{style:{display:"flex",flexDirection:"column"}},e.default.createElement("label",null,"\u5355\u9009"),e.default.createElement(n.Col,null,r.searchTreeSinge)),e.default.createElement(n.Row,null,e.default.createElement(n.Col,{fixed:!0},e.default.createElement(n.Button,{disabled:!o(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"),e.default.createElement(n.Button,{onClick:l,type:"primary"},"setValue"),e.default.createElement(n.Button,{onClick:i,type:"primary"},"\u91cd\u7f6e"))),e.default.createElement(n.Row,null,e.default.createElement(n.Col,null,e.default.createElement("pre",{style:{padding:10,marginTop:10}},JSON.stringify(a.current,null,2)))))})))}}()},data:{19:{name:19,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireWildcard(require("react"));\nvar _uiw = require("uiw");\nfunction _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nvar data = [{\n label: \'\u4e0a\u6d77\u5e02\',\n key: 1,\n children: [{\n label: \'\u9ec4\u6d66\u533a\',\n key: 2\n }, {\n label: \'\u5362\u6e7e\u533a\',\n key: 3\n }, {\n label: \'\u5f90\u6c47\u533a\',\n key: 4,\n children: [{\n label: \'\u534a\u6dde\u56ed\u8def\u8857\u9053\',\n key: 6\n }, {\n label: \'\u5357\u4eac\u4e1c\u8def\u8857\u9053\',\n key: 7\n }, {\n label: \'\u5916\u6ee9\u8857\u9053\',\n key: 8\n }]\n }]\n}, {\n label: \'\u5317\u4eac\u5e02\',\n key: 9,\n children: [{\n label: \'\u4e1c\u57ce\u533a\',\n key: 10\n }, {\n label: \'\u897f\u57ce\u533a\',\n key: 11\n }, {\n label: \'\u5d07\u6587\u533a\',\n key: 12,\n children: [{\n label: \'\u4e1c\u82b1\u5e02\u8857\u9053\',\n key: 13\n }, {\n label: \'\u4f53\u80b2\u9986\u8def\u8857\u9053\',\n key: 14\n }, {\n label: \'\u524d\u95e8\u8857\u9053\',\n key: 15\n }]\n }]\n}, {\n label: \'\u6fb3\u95e8\',\n key: 16\n}];\nreturn function Demo() {\n var _useState = (0, _react.useState)([{\n label: \'\u9ec4\u6d66\u533a\',\n key: 12\n }]),\n _useState2 = _slicedToArray(_useState, 2),\n value = _useState2[0],\n valueSet = _useState2[1];\n var _useState3 = (0, _react.useState)([{\n label: \'\u4e0a\u6d77\u5e02\',\n key: \'1-0-0\'\n }]),\n _useState4 = _slicedToArray(_useState3, 2),\n valueSinge = _useState4[0],\n valueSingeSet = _useState4[1];\n var onChange = function onChange(selectd, selectedAll, isChecked) {\n console.log(\'SearchTree-> onChange\', selectedAll, selectd, isChecked);\n valueSet(selectedAll);\n };\n var onChangeSinge = function onChangeSinge(selectd, selectedAll, isChecked) {\n console.log(\'SearchTree-> onChange\', selectd, selectedAll, isChecked);\n valueSingeSet(selectedAll);\n };\n return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 20\n }, /*#__PURE__*/_react["default"].createElement("label", null, "\\u5355\\u9009"), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n style: {\n width: 200\n },\n multiple: false,\n allowClear: true,\n onSearch: function onSearch(searchValue) {\n return console.log(\'singe\', searchValue);\n },\n onChange: onChangeSinge,\n value: valueSinge,\n options: data,\n placeholder: "\\u8BF7\\u9009\\u62E9\\u9009\\u9879"\n })), /*#__PURE__*/_react["default"].createElement("label", null, "\\u591A\\u9009"), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n style: {\n width: 200\n },\n allowClear: true,\n onSearch: function onSearch(searchValue) {\n return console.log(\'multiple\', searchValue);\n },\n onChange: onChange,\n value: value,\n options: data,\n placeholder: "\\u8BF7\\u9009\\u62E9\\u9009\\u9879"\n })), /*#__PURE__*/_react["default"].createElement("label", null, "\\u7981\\u7528"), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n disabled: true,\n style: {\n width: 200\n },\n allowClear: true,\n value: [{\n label: \'\u4e1c\u57ce\u533a\',\n key: 10\n }, {\n label: \'\u6210\u90fd\u5e02\',\n key: 2\n }],\n options: data,\n placeholder: "\\u8BF7\\u9009\\u62E9\\u9009\\u9879"\n })));\n};',language:"jsx",value:"import React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree, Row } from 'uiw';\n\nconst data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: 1,\n children:[\n { label: '\u9ec4\u6d66\u533a', key: 2 },\n { label: '\u5362\u6e7e\u533a', key: 3 },\n {\n label: '\u5f90\u6c47\u533a',\n key: 4,\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', key: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: 9,\n children:[\n { label: '\u4e1c\u57ce\u533a', key: 10 },\n { label: '\u897f\u57ce\u533a', key: 11 },\n {\n label: '\u5d07\u6587\u533a',\n key: 12,\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: 14 },\n { label: '\u524d\u95e8\u8857\u9053', key: 15 },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: 16 },\n];\n\nexport default function Demo() {\n const [value,valueSet]=useState([{ label: '\u9ec4\u6d66\u533a', key: 12 }])\n const [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\n const onChange=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valueSet(selectedAll)\n }\n\n const onChangeSinge=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n valueSingeSet(selectedAll)\n }\n\n return (\n <Row gutter={20}>\n <label>\u5355\u9009</label>\n <Row>\n <SearchTree\n style={{width: 200}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChangeSinge}\n value={valueSinge}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <label>\u591a\u9009</label>\n <Row>\n <SearchTree\n style={{ width: 200 }}\n allowClear={true}\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\n onChange={onChange}\n value={value}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <label>\u7981\u7528</label>\n <Row>\n <SearchTree\n disabled={true}\n style={{ width: 200 }}\n allowClear={true}\n value={[{ label: '\u4e1c\u57ce\u533a', key: 10 },{ label: '\u6210\u90fd\u5e02', key: 2 }]}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n </Row>\n );\n}"},120:{name:120,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireWildcard(require("react"));\nvar _uiw = require("uiw");\nfunction _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }\nreturn function Demo() {\n var data = [{\n label: \'\u5c0f\u5c3a\u5bf8\',\n key: 1\n }, {\n label: \'\u9ed8\u8ba4\u5c3a\u5bf8\',\n key: 2\n }, {\n label: \'\u5927\u5c3a\u5bf8\',\n key: 3\n }];\n return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n style: {\n width: 150\n },\n value: [{\n label: \'\u5c0f\u5c3a\u5bf8\',\n key: 1\n }],\n options: data,\n size: "small"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n style: {\n width: 175,\n marginTop: 10\n },\n value: [{\n label: \'\u9ed8\u8ba4\u5c3a\u5bf8\',\n key: 2\n }],\n options: data\n }), /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n style: {\n width: 200,\n marginTop: 10\n },\n value: [{\n label: \'\u5927\u5c3a\u5bf8\',\n key: 3\n }],\n options: data,\n size: "large"\n }));\n};',language:"jsx",value:"import React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nexport default function Demo() {\n const data = [\n { label: '\u5c0f\u5c3a\u5bf8', key: 1 },\n { label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 },\n { label: '\u5927\u5c3a\u5bf8', key: 3 },\n ]\n\n return(\n <>\n <SearchTree\n style={{ width: 150 }}\n value={[{ label: '\u5c0f\u5c3a\u5bf8', key: 1 }]}\n options={data}\n size=\"small\"\n />\n <SearchTree\n style={{ width: 175, marginTop: 10 }}\n value={[{ label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 }]}\n options={data}\n />\n <SearchTree\n style={{ width: 200, marginTop: 10 }}\n value={[{ label: '\u5927\u5c3a\u5bf8', key: 3 }]}\n options={data}\n size=\"large\"\n />\n </>\n )\n}"},157:{name:157,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireWildcard(require("react"));\nvar _uiw = require("uiw");\nfunction _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n style: {\n width: 200\n },\n placeholder: "\\u8BF7\\u9009\\u62E9\\u9009\\u9879"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n style: {\n width: 200,\n marginTop: 5\n },\n emptyOption: /*#__PURE__*/_react["default"].createElement("span", null, "\\u6682\\u65E0\\u6570\\u636E.."),\n placeholder: "\\u8BF7\\u9009\\u62E9\\u9009\\u9879"\n }));\n};',language:"jsx",value:"import React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nexport default function Demo() {\n return(\n <>\n <SearchTree\n style={{ width:200 }}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n <SearchTree\n style={{ width:200,marginTop:5 }}\n emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </>\n )\n}"},180:{name:180,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireWildcard(require("react"));\nvar _uiw = require("uiw");\nfunction _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nreturn function Demo() {\n var form = (0, _react.useRef)();\n var data = [{\n label: \'\u4e0a\u6d77\u5e02\',\n key: \'1-0-0\',\n children: [{\n label: \'\u9ec4\u6d66\u533a\',\n key: \'1-0-1\'\n }, {\n label: \'\u5362\u6e7e\u533a\',\n key: \'1-0-2\'\n }, {\n label: \'\u5f90\u6c47\u533a\',\n key: \'1-0-3\',\n children: [{\n label: \'\u534a\u6dde\u56ed\u8def\u8857\u9053\',\n key: \'1-1-0\'\n }, {\n label: \'\u5357\u4eac\u4e1c\u8def\u8857\u9053\',\n key: \'1-2-0\'\n }, {\n label: \'\u5916\u6ee9\u8857\u9053\',\n key: \'1-3-0\'\n }]\n }]\n }, {\n label: \'\u5317\u4eac\u5e02\',\n key: \'2-0-0\',\n children: [{\n label: \'\u4e1c\u57ce\u533a\',\n key: \'2-1-0\'\n }, {\n label: \'\u897f\u57ce\u533a\',\n key: \'2-2-0\'\n }, {\n label: \'\u5d07\u6587\u533a\',\n key: \'2-3-0\',\n children: [{\n label: \'\u4e1c\u82b1\u5e02\u8857\u9053\',\n key: \'2-3-1\'\n }, {\n label: \'\u4f53\u80b2\u9986\u8def\u8857\u9053\',\n key: \'2-3-2\'\n }, {\n label: \'\u524d\u95e8\u8857\u9053\',\n key: \'2-3-3\'\n }]\n }]\n }, {\n label: \'\u6fb3\u95e8\',\n key: \'3\'\n }];\n var setValue = function setValue() {\n form.current.setFields({\n searchTree: [{\n label: \'\u4e1c\u57ce\u533a\',\n key: \'2-1-0\'\n }, {\n label: \'\u5916\u6ee9\u8857\u9053\',\n key: \'1-3-0\'\n }],\n searchTreeSinge: [{\n label: \'\u524d\u95e8\u8857\u9053\',\n key: \'2-3-3\'\n }]\n });\n };\n var resetValue = function resetValue() {\n form.current.resetForm();\n };\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n ref: form,\n onSubmitError: function onSubmitError(error) {\n if (error.filed) {\n return _objectSpread({}, error.filed);\n }\n return null;\n },\n onSubmit: function onSubmit(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n var errorObj = {};\n if (!current.searchTree || current.searchTree.length === 0) {\n errorObj.searchTree = \'\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9\';\n }\n if (Object.keys(errorObj).length > 0) {\n var err = new Error();\n err.filed = errorObj;\n _uiw.Notify.error({\n title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n description: \'\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01\'\n });\n throw err;\n }\n _uiw.Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: "\\u8868\\u5355\\u63D0\\u4EA4\\u6210\\u529F\\uFF0C\\u9009\\u62E9\\u503C\\u4E3A\\uFF1A".concat(current.selectField, "\\uFF0C\\u5C06\\u81EA\\u52A8\\u586B\\u5145\\u521D\\u59CB\\u5316\\u503C\\uFF01")\n });\n },\n fields: {\n searchTree: {\n initialValue: [{\n label: \'\u9ec4\u6d66\u533a\',\n key: \'1-0-1\'\n }, {\n label: \'\u5362\u6e7e\u533a\',\n key: \'1-0-2\'\n }],\n children: /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n allowClear: true,\n style: {\n width: 200\n },\n onSearch: function onSearch(searchValue) {\n return console.log(\'SearchTree-> SearchTreeOption\', searchValue);\n },\n onChange: function onChange(selectd, selectedAll, isChecked) {\n return console.log(\'SearchTree-> onChange\', selectd, selectedAll, isChecked);\n },\n options: data,\n placeholder: "\\u8BF7\\u9009\\u62E9\\u9009\\u9879"\n })\n },\n searchTreeSinge: {\n initialValue: [{\n label: \'\u4e1c\u82b1\u5e02\u8857\u9053\',\n key: \'2-3-1\'\n }],\n children: /*#__PURE__*/_react["default"].createElement(_uiw.SearchTree, {\n multiple: false,\n style: {\n width: 200\n },\n allowClear: true,\n onSearch: function onSearch(searchValue) {\n return console.log(\'SearchTree-> SearchTreeOption\', searchValue);\n },\n onChange: function onChange(selectd, selectedAll, isChecked) {\n return console.log(\'SearchTree-> onChange\', selectd, selectedAll, isChecked);\n },\n options: data,\n placeholder: "\\u8BF7\\u9009\\u62E9\\u9009\\u9879",\n treeProps: {\n style: {\n \'height\': 200,\n overflow: \'scroll\'\n }\n }\n })\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit;\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n style: {\n display: \'flex\',\n flexDirection: \'column\'\n }\n }, /*#__PURE__*/_react["default"].createElement("div", null, "\\u591A\\u9009"), /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.searchTree)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n style: {\n display: \'flex\',\n flexDirection: \'column\'\n }\n }, /*#__PURE__*/_react["default"].createElement("label", null, "\\u5355\\u9009"), /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.searchTreeSinge)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: setValue,\n type: "primary"\n }, "setValue"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: resetValue,\n type: "primary"\n }, "\\u91CD\\u7F6E"))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement("pre", {\n style: {\n padding: 10,\n marginTop: 10\n }\n }, JSON.stringify(state.current, null, 2)))));\n }));\n};',language:"jsx",value:"import React, { useState, useEffect, useRef } from 'react';\nimport { Notify, Form, Button, SearchTree, Card, Row, Col,Select } from 'uiw';\n\nexport default function Demo() {\n const form=useRef()\n const data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: '3' },\n ];\n\n const setValue=()=>{\n form.current.setFields({\n searchTree: [{ label: '\u4e1c\u57ce\u533a', key: '2-1-0' }, { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' }],\n searchTreeSinge:[{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }]\n })\n }\n\n const resetValue=()=>{\n form.current.resetForm()\n }\n\n return (\n <div>\n <Form\n ref={form}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.searchTree || current.searchTree.length === 0) {\n errorObj.searchTree = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n searchTree: {\n initialValue:[ { label: '\u9ec4\u6d66\u533a', key: '1-0-1' }, { label: '\u5362\u6e7e\u533a', key: '1-0-2' }],\n children: (\n <SearchTree\n allowClear={true}\n style={{ width: 200 }}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n )\n },\n searchTreeSinge: {\n initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }],\n children: (\n <SearchTree\n multiple={false}\n style={{ width: 200 }}\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n treeProps={{ style:{ 'height':200, overflow:'scroll' }}}\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row style={{display:'flex',flexDirection:'column'}}>\n <div>\u591a\u9009</div>\n <Col >{fields.searchTree}</Col>\n </Row>\n <Row style={{display:'flex',flexDirection:'column'}}>\n <label>\u5355\u9009</label>\n <Col >{fields.searchTreeSinge}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button onClick={setValue} type=\"primary\" >setValue</Button>\n <Button onClick={resetValue} type=\"primary\" >\u91cd\u7f6e</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}"}},source:"SearchTree \u5e26\u641c\u7d22\u7684 Tree \u9009\u62e9\u63a7\u4ef6\n===\n\n[](https://jaywcjlove.github.io/#/sponsor)\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\n[](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n```jsx mdx:preview&bg=#fff\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree, Row } from 'uiw';\n\nconst data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: 1,\n children:[\n { label: '\u9ec4\u6d66\u533a', key: 2 },\n { label: '\u5362\u6e7e\u533a', key: 3 },\n {\n label: '\u5f90\u6c47\u533a',\n key: 4,\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', key: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: 9,\n children:[\n { label: '\u4e1c\u57ce\u533a', key: 10 },\n { label: '\u897f\u57ce\u533a', key: 11 },\n {\n label: '\u5d07\u6587\u533a',\n key: 12,\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: 14 },\n { label: '\u524d\u95e8\u8857\u9053', key: 15 },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: 16 },\n];\n\nexport default function Demo() {\n const [value,valueSet]=useState([{ label: '\u9ec4\u6d66\u533a', key: 12 }])\n const [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\n const onChange=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valueSet(selectedAll)\n }\n\n const onChangeSinge=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n valueSingeSet(selectedAll)\n }\n\n return (\n <Row gutter={20}>\n <label>\u5355\u9009</label>\n <Row>\n <SearchTree\n style={{width: 200}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChangeSinge}\n value={valueSinge}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <label>\u591a\u9009</label>\n <Row>\n <SearchTree\n style={{ width: 200 }}\n allowClear={true}\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\n onChange={onChange}\n value={value}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n <label>\u7981\u7528</label>\n <Row>\n <SearchTree\n disabled={true}\n style={{ width: 200 }}\n allowClear={true}\n value={[{ label: '\u4e1c\u57ce\u533a', key: 10 },{ label: '\u6210\u90fd\u5e02', key: 2 }]}\n options={data}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </Row>\n </Row>\n );\n}\n```\n\n## \u5c3a\u5bf8\n\n```jsx mdx:preview&bg=#fff\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nexport default function Demo() {\n const data = [\n { label: '\u5c0f\u5c3a\u5bf8', key: 1 },\n { label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 },\n { label: '\u5927\u5c3a\u5bf8', key: 3 },\n ]\n\n return(\n <>\n <SearchTree\n style={{ width: 150 }}\n value={[{ label: '\u5c0f\u5c3a\u5bf8', key: 1 }]}\n options={data}\n size=\"small\"\n />\n <SearchTree\n style={{ width: 175, marginTop: 10 }}\n value={[{ label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 }]}\n options={data}\n />\n <SearchTree\n style={{ width: 200, marginTop: 10 }}\n value={[{ label: '\u5927\u5c3a\u5bf8', key: 3 }]}\n options={data}\n size=\"large\"\n />\n </>\n )\n}\n```\n\n## \u81ea\u5b9a\u4e49\u7a7a\u9009\u9879\n\n```jsx mdx:preview&bg=#fff\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nexport default function Demo() {\n return(\n <>\n <SearchTree\n style={{ width:200 }}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n <SearchTree\n style={{ width:200,marginTop:5 }}\n emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n placeholder=\"\u8bf7\u9009\u62e9\u9009\u9879\"\n />\n </>\n )\n}\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n```jsx mdx:preview&bg=#fff\nimport React, { useState, useEffect, useRef } from 'react';\ni